6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 1/38
Creating Applications with WebGL and Three.js
+James Williams @ecspike
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 2/38
About Me
Author of Learning HTML5 Game ProgrammingWriting a new book on Three.js
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 3/38
Learning HTML5 Game Programming
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 4/38
Agenda
What is WebGL/Three.js?Creating MeshesLighting and ShadingWorking with Physics EnginesDemos
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 5/38
What is WebGL?
Low-level 3D graphics contextUses canvas tagHardware-acceleratedSyntax based on OpenGL ES 2.0
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 6/38
Why aren't we using raw WebGL?
Higher barrier to entryLots of codeRequires directly managing data structures
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 7/38
What is Three.js?
3D scenegraph libraryAbstracts the nastiness away from WebGLRenders to Canvas 2D, WebGL, SVGCan animate HTML elements using CSS3Can import models from popular 3D modeling apps
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 8/38
Creating a basic app
SceneCameraRendererLighting (optional)
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 9/38
Camera
Eye PointField of VisionNear/Far PlanesTarget (LookAt) Point
Up Vector
camera = new THREE.PerspectiveCamera(FOV, ASPECT, NEAR, FAR, [target]);
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 10/38
A Basic Scene
@renderer = new THREE.WebGLRenderer({autoClear:true})@renderer.setClearColor(new THREE.Color(0x000000))@renderer.setSize(width, height)
@camera = new THREE.PerspectiveCamera(fov, aspect, near, far)@camera.position.z = 100
@scene = new THREE.Scene()
$('#container').empty()$("#container").get(0).appendChild(@renderer.domElement)
@scene.add(@camera)# [email protected](@scene, @camera)
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 11/38
Creating Meshes
new THREE.Mesh(new CubeGeometry(100,1,100), new THREE.MeshBasicMaterial({color: 0xFF0000}))
Built-in Geometries
SphereGeometryPlaneGeometryCylinderGeometryCubeGeometryTextGeometryand several others
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 12/38
Materials
# Basic Materialnew THREE.MeshBasicMaterial({color: 0xFFFFFF})
# Per-vertex coloringf = triGeometry.faces[0]f.vertexColors[0] = vColors[0]f.vertexColors[1] = vColors[1]f.vertexColors[2] = vColors[2]
triMaterial = new THREE.MeshBasicMaterial( {color: 0xFFFFFF, vertexColors:THREE.VertexColors})
# Phong, Lambert, Face, Line, etc
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 13/38
Demo
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 14/38
Loading Models
BlenderColladaOBJMAXMaya
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 15/38
Loading A Model
@models = {} loader = new THREE.JSONLoader() loader.load('/models/hero.js', @heroCallback)
heroCallback: (g, m) -> obj = new THREE.Mesh(g, new THREE.MeshFaceMaterial(m)) obj.rotation.x = -1.57 obj.position.y = 100 obj.scale.set(6,6,6) app.hero = obj app.scene.add(app.hero)
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 16/38
Loading A Scene
loader = new THREE.SceneLoader()loader.callbackProgress = @callbackProgress
loader.load( "scripts/scenes/falling-ball.js", self.callbackFinished)
# Receives updates from loadercallbackProgress: (progress, result) -> console.log result console.log progress
# Called when finished loadingcallbackFinished: (result) -> app.scene = result.scene app.camera = result.cameras.Camera app.camera.lookAt(new THREE.Vector3(0,0,0))
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 17/38
Three.js Editor
Create primitive objectsAdd materialsExport objects or sceneshttp://threejs.org/editor
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 18/38
Demo
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 19/38
What is GLSL?
Targets the GPU and graphics pipelineHigh level language with C-like syntaxPassed around as stringsCan be generated and compiled at run-timeReferred to as programs (the combination of a vertex and fragment shader)
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 20/38
Vertex Shaders
Run once per vertex in a meshCan alter color, position, or texture coordinates
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 21/38
Example vertex shader
<script id="shader-vs" type="x-shader/x-vertex"> #ifdef GL_ES precision highp float; #endif
void main(void) { gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }</script>
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 22/38
Frament(Pixel) Shaders
Run on every pixel in a meshCan produce effects such as bump mapping and shadowingOnly knows* about the pixel it is working on
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 23/38
Example fragment shader
<script id="shader-vs" type="x-shader/x-vertex"> #ifdef GL_ES precision highp float; #endif
void main(void) { gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0); }</script>
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 24/38
Cel (Toon) Shading
uniform vec3 diffuse;//from http://www.neocomputer.org/projects/donutgl_FragColor = vec4(diffuse, 1.0);vec3 basecolor=vec3(gl_FragColor[0], gl_FragColor[1], gl_FragColor[2]);float alpha = gl_FragColor[3];float vlf = vLightFront[0];
// Clean and simple // if (vlf< 0.50) { gl_FragColor = vec4(mix( basecolor, vec3(0.0), 0.5), alpha); } if (vlf>=0.50) { gl_FragColor = vec4(mix( basecolor, vec3(0.0), 0.3), alpha); } if (vlf>=0.75) { gl_FragColor = vec4(mix( basecolor, vec3(1.0), 0.0), alpha); }//if (vlf>=0.95) {// gl_FragColor = vec4(mix( basecolor, vec3(1.0), 0.3), alpha); }// gl_FragColor.xyz *= vLightFront;
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 25/38
Shader Toy
Website enabling you to play around with GLSL shaders
http://www.iquilezles.org/apps/shadertoy/
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 26/38
Demo
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 27/38
Collision Detection
Bounding BoxBounding SphereRays
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 28/38
Physics using Physijs
Integrates deeply with Three.jsBuilt upon ammo.jshttps://github.com/chandlerprall/Physijs
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 29/38
Sample Physijs Scene
# setup PhysiPhysijs.scripts.worker = 'scripts/vendor/physijs/physijs_worker.js'Physijs.scripts.ammo = 'ammo.js'
@scene = new Physijs.Scene()@scene.setGravity new THREE.Vector3( 0, -30, 0 )
obj = new Physijs.Mesh(rawMesh.geometry, material, mass)
render: () -> @scene.simulate() @renderer.render(@scene, @camera)
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 30/38
Demo
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 31/38
Creating A Simple Game
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 32/38
My First Computer
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 33/38
My First Computer Game
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 34/38
Demos
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 35/38
WebGL Inspector
Allows you to incrementally step through renderingView texture assets and GLSL programsPermits capturing individual framesCan be embedded or installed as a Chrome/Webkit extension
Github: http://benvanik.github.com/WebGL-Inspector/
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 36/38
Questions ?
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 37/38
Links and Sources
Adam II photo: http://www.digibarn.com/collections/systems/coleco-adam/CIMG3282.JPGBuck Rogers photo: http://telebunny.net/toastyblog/wp-content/uploads/2012/08/gsj12-buckrogers2.gif
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 38/38