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
