creating applications with webgl and three.js
DESCRIPTION
James Williams's talk from Future Insights Live 2014 in Las Vegas: "There was once a time where gaming in the browser meant Flash. That time is no more. In this session, you’ll learn the basics of game programming, WebGL, and how to use Three.js to create WebGL applications." Miss his talk? Join us at a future show: www.futureofwebapps.com. Sign up for our newsletter at futureinsights.com and get 15% off your next conference.TRANSCRIPT
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