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.
Call Girls Near The Suryaa Hotel New Delhi 9873777170
Creating Applications with WebGL and Three.js
1. 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
2. 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 Programming
Writing a new book on Three.js
3. 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
4. 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 Meshes
Lighting and Shading
Working with Physics Engines
Demos
5. 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 context
Uses canvas tag
Hardware-accelerated
Syntax based on OpenGL ES 2.0
6. 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 entry
Lots of code
Requires directly managing data structures
7. 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 library
Abstracts the nastiness away from WebGL
Renders to Canvas 2D, WebGL, SVG
Can animate HTML elements using CSS3
Can import models from popular 3D modeling apps
8. 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
Scene
Camera
Renderer
Lighting (optional)
9. 6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 9/38
Camera
Eye Point
Field of Vision
Near/Far Planes
Target (LookAt) Point
Up Vector
camera = new THREE.PerspectiveCamera(FOV, ASPECT, NEAR, FAR, [target]);
10. 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)
# truncated
@renderer.render(@scene, @camera)
11. 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
SphereGeometry
PlaneGeometry
CylinderGeometry
CubeGeometry
TextGeometry
and several others
12. 6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 12/38
Materials
# Basic Material
new THREE.MeshBasicMaterial({color: 0xFFFFFF})
# Per-vertex coloring
f = 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
13. 6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 13/38
Demo
14. 6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 14/38
Loading Models
Blender
Collada
OBJ
MAX
Maya
15. 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)
16. 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 loader
callbackProgress: (progress, result) ->
console.log result
console.log progress
# Called when finished loading
callbackFinished: (result) ->
app.scene = result.scene
app.camera = result.cameras.Camera
app.camera.lookAt(new THREE.Vector3(0,0,0))
17. 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 objects
Add materials
Export objects or scenes
http://threejs.org/editor
18. 6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 18/38
Demo
19. 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 pipeline
High level language with C-like syntax
Passed around as strings
Can be generated and compiled at run-time
Referred to as programs (the combination of a vertex and fragment shader)
20. 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 mesh
Can alter color, position, or texture coordinates
21. 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>
22. 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 mesh
Can produce effects such as bump mapping and shadowing
Only knows* about the pixel it is working on
23. 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>
25. 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/
26. 6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 26/38
Demo
27. 6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 27/38
Collision Detection
Bounding Box
Bounding Sphere
Rays
28. 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.js
Built upon ammo.js
https://github.com/chandlerprall/Physijs
29. 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 Physi
Physijs.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)
30. 6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 30/38
Demo
31. 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
32. 6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 32/38
My First Computer
33. 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
34. 6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 34/38
Demos
35. 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 rendering
View texture assets and GLSL programs
Permits capturing individual frames
Can be embedded or installed as a Chrome/Webkit extension
Github: http://benvanik.github.com/WebGL-Inspector/
36. 6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 36/38
Questions ?
37. 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.JPG
Buck Rogers photo: http://telebunny.net/toastyblog/wp-
content/uploads/2012/08/gsj12-buckrogers2.gif
38. 6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 38/38