Creating Applications with WebGL and Three.js

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

About Me
Author of Learning HTML5 Game Programming
Writing a new book on Three.js

Learning HTML5 Game Programming

Agenda
What is WebGL/Three.js?
Creating Meshes
Lighting and Shading
Working with Physics Engines
Demos

What is WebGL?
Low-level 3D graphics context
Uses canvas tag
Hardware-accelerated
Syntax based on OpenGL ES 2.0

Why aren't we using raw WebGL?
Higher barrier to entry
Lots of code
Requires directly managing data structures

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

Creating a basic app
Scene
Camera
Renderer
Lighting (optional)

Camera
Eye Point
Field of Vision
Near/Far Planes
Target (LookAt) Point
Up Vector
camera = new THREE.PerspectiveCamera(FOV, ASPECT, NEAR, FAR, [target]);

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)

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

Materials
# Basic Material
new THREE.MeshBasicMaterial({color: 0xFFFFFF})
# Per-vertex coloring
f = triGeometry.faces[0]
f.vertexColors[0] = vColors[0]
triMaterial = new THREE.MeshBasicMaterial(
{color: 0xFFFFFF, vertexColors:THREE.VertexColors}
)
# Phong, Lambert, Face, Line, etc

Demo

Loading Models
Blender
Collada
OBJ
MAX
Maya

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)

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))

Three.js Editor
Create primitive objects
Add materials
Export objects or scenes
http://threejs.org/editor

Demo

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)

Vertex Shaders
Run once per vertex in a mesh
Can alter color, position, or texture coordinates

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>

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

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>

Cel (Toon) Shading
uniform vec3 diffuse;
//from http://www.neocomputer.org/projects/donut
gl_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) {
if (vlf>=0.75) {
//if (vlf>=0.95) {
// gl_FragColor = vec4(mix( basecolor, vec3(1.0), 0.3), alpha); }
// gl_FragColor.xyz *= vLightFront;

Shader Toy
Website enabling you to play around with GLSL shaders
http://www.iquilezles.org/apps/shadertoy/

Demo

Collision Detection
Bounding Box
Bounding Sphere
Rays

Physics using Physijs
Integrates deeply with Three.js
Built upon ammo.js
https://github.com/chandlerprall/Physijs

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)

Demo

Creating A Simple Game

My First Computer

My First Computer Game

Demos

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/

Questions ?

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

Creating Applications with WebGL and Three.js

More Related Content

What's hot

Similar to Creating Applications with WebGL and Three.js

More from Future Insights

Recently uploaded

Creating Applications with WebGL and Three.js