Anyone wanting evidence of what
HTML5 can achieve needs only to browse through the many excellent demos around the place, such as at
chromeexperiments.com; these run inside
WebGL enabled browsers, such as Google Chrome and Firefox. One of the driving forces of HTML5 is to make it easy to include and handle multimedia and graphical content on the web without having to resort to proprietary plugins and APIs; the new <canvas>, <svg>, <video>, <audio> tags allow for much of this. WebGL is a context of the canvas HTML element that provides a 3D computer graphics API without the use of plug-ins. WebGL is currently supported by all major desktop browsers, except for Internet Explorer where it is currently only supported via a plugin (named
IEWebGL). Support on mobile devices is a bit patchy though, with it being limited to Mobile Firefox on Android along with some specific Nokia, Sony Ericsson and Blackberry models. On the iPhone, there is a
workaround / hack to develop apps with WebGL, and its expected Apple will support it in a future version.
This
demo by Evan Wallace shows off the power of WebGL - a pool of water rendered with reflection, refraction, caustics, and ambient occlusion. You can create ripples on the water and also move the sphere around, both in and out of the water.
A popular lightweight framework has sprung up on top of WebGL called
three.js.The aim of the project is to create a lightweight 3D engine with a very low level of complexity; in other words, for developers who are not experienced with 3D graphics coding. The engine can render using <canvas>, <svg> and also WebGL. It is one of the most comprehensive WebGL frameworks, covering matrices, scenes, meshes, materials, shadows, voxels, fog, and more. Many of the Chrome WebGL demos linked above use it and there's a list of demos on the
three.js github page. These demos are absolutely mind blowing - I ran them inside Chrome with a reasonably old graphics card (a three year old GEForce 9600 GT) and the results were incredible - all ran at around 60 frames per second.
A couple of real standouts here:
Floating soap bubbles - fresnel shader demo (rotate view with mouse)
Model of a head - normalmap demo (rotate view with mouse)
Model of Walt Disney - cube mapping and texture demo (rotate view with mouse)
Follow @dodgy_coder
Subscribe to posts via RSS
Hello,
ReplyDeleteWebGL is not part of HTML 5, it is Standardised by Khronos Group, not W3C. it is just a 3D context attached to an canvas element.
@RMS Noor HPD, yes thanks for pointing that out. Officially its not part of the HTML5 spec, but WebGL has got strong support from the majority of browser makers, and is a key to running hardware accelerated 3D graphics inside HTML5. Also, the HTML5 spec is still a work in progress, and in the past other technology that has garnered widespread support has been eventually rolled into the official HTML spec by W3C. You might also want to have a read of the work that WHATWG does and its idea behind a 'living standard'.
ReplyDeleteIt's my understanding that WebGL isn't available in most mobile browsers, such as Safari on the iPhone.
ReplyDelete@Troy McConaghy, yes - I should have been more specific in saying that WebGL is supported by the majority of *desktop* browser makers - specifically its supported without a plugin on the desktop versions of Firefox, Chrome, Safari and Opera; and Internet Explorer with a plugin. Mobile browser support for WebGL is limited currently to the following ... Firefox for mobile running under Android, Nokia N900, BlackBerry PlayBook and Sony Ericsson Experia smartphones. Further detail here regarding implementations.
ReplyDeleteThe technology is already there for Safari on iPhone but it's in an 'experimental' state; its expected that Apple will enable it in some future version of iOS. A couple of months ago an Australian iPhone developer (Nathan de Vries) demonstrated how its possible to to take advantage of WebGL using standard embedded web views (albeit using private APIs) on iOS 5.