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
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.
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?
+ 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
Access to a computer capable of running WebGL using Chrome (see this list for incompatible hardware).
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.