Here are the latest resources to help you create WebGL 3D effects using HTML5.
A couple of weeks ago, I wrote a piece introducing you to the new HTML5 Hub, and it appears that they are continuing to add relevant and intriguing content to their feed including the piece, "Using WebGL to add 3D Effects to Your Website," authored by Guillaume LeCollinet (@glecollinet from Paris, France). Guillaume provides a well authored demo of three individual 3D models: the HTML5 logo, a geometric ball, and a dollar sign. All are shown in action from three screen captures that I layered together into one image as seen below.
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.