Tron.js

Workshop overview

1. Machine setup
2. THREE.js basics
3. Project structure - amd-three.js
4. Animation & interactivity
5. Vertex shaders
6. Fragment shaders
7. Postprocessing
8. You're on your own!

Useful links

• Slides: felixpalmer.github.io/tron.js/presentation
• THREE.js reference: mrdoob.github.io/three.js/docs/
• GLSL Cheatsheet: www.khronos.org/files/webgl/webgl-reference-card-1_0.pdf

Machine setup

• WebGL enabled browser, Firefox recommended
• Verify WebGL working, try: felixpalmer.github.io/amd-three.js/
• Text editor you're happy with
• GLSL code validation tool: github.com/felixpalmer/glsl-validator
• git installed (www.git-scm.com)
• Static local http server (one is included with examples, requires Python)

Get the code!

            git clone git@github.com:felixpalmer/amd-three.js.git
            cd amd-three.js
            ./webserver.sh
            open http://localhost:8000
        

THREE.js

• High level 3D framework
• Provides many useful abstractions, e.g. camera, scene, vectors, meshes, materials...
• Exposes global THREE.js object
• API docs: threejs.org/docs/
• Examples (warning, can consume many hours): threejs.org/examples/

amd-three.js

• My method to provide some structure when building THREE.js applications
• Uses requirejs.org
• Separates out core building blocks into separate files

amd-three.js - 15mins

1. Try modifying the elements on stage:
   • Add a different geometries
   • Add a new texture file, and apply it to an object
2. Some basic modelling (this will form the basis of the light-cycle)
   • Make a compound object (use THREE.Object3D.add())
   • Try and make the best light cycle you can using geometry primitives
   • Refactor the code into a separate Require.js module
   • app.lightcycle = new Lightcycle();

Animation and interactivity - 15mins

1. We already have animation loop setup, just need to make things move
2. Try updating object positions on every frame. Hint: use THREE.Clock
3. Add an document.onmousemove listener and update based on mouse position
4. Try updating the camera position, as well as of objects in the scene

The game

            git clone git@github.com:felixpalmer/tron.js.git
            cd tron.js
            ./webserver.sh
            open http://localhost:3333
        

To the GPU!

• Quick overview of the graphics pipeline:
  1. Geometry, textures, meshes etc is all defined in Javascript and passed to the GPU
  2. Shaders are written in GLSL, a C-like language
  3. Vertex shader is invoked on every vertex in every mesh
  4. Fragment shader is invoked on every fragment (pixel), automatically interpolating between vertices

Vertex shaders - 15mins

1. Play around with the vertex shaders in FF dev tools
2. Create a new vertex shader file, based on js/shaders/simple.vert
3. Create a new material with this vertex shader attached, see material.simple
4. Try out some of the built-in functions: mix, pow, mix etc...
5. Try animating, by passing in the game clock, see engine.vert

Passing data around

• There are different types of variables in GLSL:
  • constCompile type constant
  • attributeJS -> vertex shader. Attributes are per-vertex.
  • uniformJS -> shaders. Uniform across material
  • varyingVertex shader -> fragment shader. Interpolated!
• github.com/mrdoob/three.js/wiki/Uniforms-types

Check out Qualifiers section in WebGL cheatsheet

Fragment shaders - 20mins

1. Play around with the fragment shaders in FF dev tools
2. Create a new fragment shader file, based on js/shaders/simple.frag
3. Try out some of the built-in functions: sin, pow, mix etc...
4. Try animating, by passing in the game clock, see engine.frag

Post-processing

• Idea is to take final rendered image and apply filters
• Achieve this by sending rendered image back to GPU and running shaders
• THREE.js provides abstration, in the form of an Effect Composer

Post-processing - 20mins

• Play around with postprocess.frag in FF tools
• Try adding a new stage to the Effect Composer
• Write your own postprocessing effect, e.g Black & White, Sepia
• Experiment combining with edge, blur, glow effect in Effect Composer

You're on your own!

• Remainder of workshop is up to you to focus on your favorite aspect
• Code is up at https://github.com/felixpalmer/tron.js
• Take a look at Issues for ideas for things to do, or add your own
• Create an Issue for what you're working on and submit when done
• If you star the repo, I'll add you as a collaborator, so you can push code
• Be nice ;) Don't push broken code and try to modularize to avoid conflicts

Felix Palmer | @pheeelicks | www.pheelicks.com