Introduction to WebGL with THREE.js


Dates: Tuesdays & Thursdays, September 4, 6, 11, 13
Times: 6pm – 9pm
Course Length: 12 hours
Cost: $20/instruction hour, $240 total, $216 for GAFFTA Members
Location: GAFFTA, 923 Market Street, Suite 200, San Francisco, CA 94103

Select ticket option


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.

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

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


Experience with Javascript and or OpenGL highly recommended.

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.