with Michael Chang

Introduction to WebGL with THREE.js

Read more about Michael's work on Blade Symphony and Google's Global Small Arms & Ammunition Trade Project in The Art of Data Visualization.

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

Michael Chang

Michael Chang is a Creative Technologist at the Data Arts Team at Google, and the lead designer and programmer for independent video game Blade Symphony. He’s responsible for creating data visualizations at Google as well as procedurally animated brand and ad elements at Google. A graduate of UCLA Design Media Arts program, and a martial arts film aficionado.