In this session we'll step behind the scenes of HTML5 WebGL demos as seen on the likes of Google's Chrome Experiments. Learn how to manipulate particles, make procedural 3D geometry, and create data visualizations on the web using THREE.js.

This class will run in tandem with the WebGL Developers Three.jsfest Meetup on Wednesday, September 12. The Meetup is free, but be sure to Register, as it will fill up!

Topics of the workshop include:

Day 1: THREE.js hello world, learn how to make a scene, add lights, move the camera around
Day 2: Learn about materials, texture loading, creating more complex geometry
Day 3: We build on stuff we've learned and start making some interesting scenes
Day 4: Learn how to procedurally animate things quickly and easily, Q&A, help, and wrap up the project!

What is THREE.js?

THREE.js is a 3D JavaScript library. The aim of the project is to create a lightweight 3D library with a very low level of complexity — in other words, for dummies. The library provides canvas, svg and WebGL renderers. Three.js runs in all browsers supported by WebGL. Three.js includes the following features:

+ Renderers: canvas, svg and WebGL; effects: anaglyph, crosseyed, stereo and more
+ Scenes: add and remove objects at run-time; fog
+ Cameras: perspective and orthographic; controllers: trackball, FPS, path and more
+ Animation: morph and keyframe
+ Lights: ambient, direction, point and spot lights; shadows: cast and receive
+ Materials: Lambert, Phong and more - all with textures, smooth-shading and more
+ Shaders: access to full WebGL capabilities; lens flare, depth pass and extensive post-processing library
+ Objects: meshes, particles, sprites, lines, ribbons, bones and more - all with level of detail
+ Geometry: plane, cube, sphere, torus, 3D text and more; modifiers: lathe, extrude and tube
+ Loaders: binary, image, JSON and scene
+ Utilities: full set of time and 3D math functions including frustrum, Quaternian, matrix, UVs and more
+ Export/Import: utilities to create Three.js-compatible JSON files from within: Blender, CTM, FBX, 3D Max, and OBJ
+ Support: API documentation is under construction, public forum and wiki in full operation
+ Examples: More than 150 files of coding examples plus fonts, models, textures, sounds and other support files

Required equipment:

Access to a computer capable of running WebGL using Chrome (see this list for incompatible hardware).