Check the demo link to see how each of the 3D models gets animated upon hover-the HTML5 logo expands and rotates, the geometric ball bounces and leaves a shadow, and the dollar sign casts a shadow from light depending on the location of the mouse hover.
If you are not familiar with WebGL, it is a set of technologies that brings hardware-accelerated 3D graphics to the browser without having to install additional software. You may want to revisit my post from last year, "Getting started with WebGL," where I introduced the WebGL standard for 3D-rendering and provide a list of utilities, libraries, and frameworks as resources, along with some examples of projects that use WebGL.
How do the 3D models work?
Guillaume created the HTML5 3D model using Blender, which is available for download under a GNU General Public License, and is a creation tool for 3D graphics. Currently, it is available in versions for Windows, Mac OS X, and Linux operating systems on machines with an OpenGL compatible graphics card. While Blender does cater more toward the gaming community, the point that Guillaume makes is that 3D graphics design is starting to show promise for web developers and their web designs. With the growth of HTML5 and WebGL, the same high graphics content can now be created for websites and not just games.
If you are looking to add WebGL to your website implementations check out Guillaume's HTML5 demo and article linked above, in addition to resources I've listed below.
This is a short list of utilities, libraries, and frameworks that provide the WebGL developer with options for programming 3D graphics.
- Three.js library - Allows you to create cameras, objects, lights, materials and more, giving you a choice of renderer, such as HTML 5's canvas, WebGL or SVG.
- Shifty.js -Features include optimized speed for performance, works well as a base function in a prototype chain, has modular and extensible architecture, and is a small download with a minified and gzipped version at just about 3K.
- J3DI.js - WebGL Code Storage from Google Code is a basic WebGL J3DI helper’s utility.
- J3DIMath.js - WebGL Code Storage from Google Code is a J3DI Math Classes utility.
- WebGL Playground-An editor that allows you to run WebGL scripts and see the results on the same page.
Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal government.