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

http://google.com/+JamesWilliams

http://twitter.com/ecspike



About Me

Author of Learning HTML5 Game ProgrammingWriting a new book on Three.js

http://amzn.to/HTML5-Game-Book



Learning HTML5 Game Programming



Agenda

What is WebGL/Three.js?Creating MeshesLighting and ShadingWorking with Physics EnginesDemos



What is WebGL?

Low-level 3D graphics contextUses canvas tagHardware-acceleratedSyntax based on OpenGL ES 2.0



Why aren't we using raw WebGL?

Higher barrier to entryLots of codeRequires directly managing data structures



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



Creating a basic app

SceneCameraRendererLighting (optional)



Camera

Eye PointField of VisionNear/Far PlanesTarget (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)# [email protected](@scene, @camera)



Creating Meshes

new THREE.Mesh(new CubeGeometry(100,1,100), new THREE.MeshBasicMaterial({color: 0xFF0000}))

Built-in Geometries

SphereGeometryPlaneGeometryCylinderGeometryCubeGeometryTextGeometryand several others



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



Demo



Loading Models

BlenderColladaOBJMAXMaya



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



Three.js Editor

Create primitive objectsAdd materialsExport objects or sceneshttp://threejs.org/editor

http://threejs.org/editor



Demo



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)



Vertex Shaders

Run once per vertex in a meshCan 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 meshCan produce effects such as bump mapping and shadowingOnly 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/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;



Shader Toy

Website enabling you to play around with GLSL shaders

http://www.iquilezles.org/apps/shadertoy/

http://www.iquilezles.org/apps/shadertoy/



Demo



Collision Detection

Bounding BoxBounding SphereRays



Physics using Physijs

Integrates deeply with Three.jsBuilt upon ammo.jshttps://github.com/chandlerprall/Physijs

https://github.com/chandlerprall/Physijs



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)



Demo



Creating A Simple Game



My First Computer



My First Computer Game



Demos



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/

http://benvanik.github.com/WebGL-Inspector/



Questions ?



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

creating applications with webgl and three.js

Internet