Web Development

Learn to make WebGL 3D effects

Here are the latest resources to help you create WebGL 3D effects using HTML5.

webgl_3d.jpg
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.  

webgl_Figure-B.gif

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?

Looking under the hood of the demo web page document that Guillaume provides, we can see that each of the 3D models has its own js file: ball.js, dollar.js, and html5.js, respectively. Along with jQuery Guillaume also uses the three.js library, which solves many of the issues with getting 3D models to behave in modern browsers, and the shifty.js library, which is a tweening engine built into JavaScript to help with animation solutions where the jQuery animate() function is not available or unable to operate.

webgl_paneFigure-C.gif

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.

webglFigure-D.gif

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.

Resources

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.
  • Webgl-utils.js - WebGL Samples from Google Code includes common WebGL tasks JavaScript utility.
  • 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.
  • Canvas 3D JS Library - The C3DL is a JavaScript library that makes it easier to write code for WebGL using a set of math 3D object classes, and scenes.

About

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 g...

0 comments