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 ProgrammingWriting a new book on Three.js

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)# truncated@renderer.render(@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

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

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

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

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/

Collision Detection

Bounding BoxBounding SphereRays

Physics using Physijs

Integrates deeply with Three.jsBuilt upon ammo.jshttps://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)

Creating A Simple Game

My First Computer

My First Computer Game

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/

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

cs 352: computer graphics a webgl game with three.js

0/ $1*230 4 54’0 · html/css/js • react/vue •...

we will use webgl 1.0. webgl 2.0 is now being supported by...

rapport d’alternance · les librairies haxe, glge ou...

webgl and three.js

webgl (three.js) code lab - intro. [ gtug girls 10th]

three.js essentials - duke university...table of contents...

html5 game dev with three.js - hexgl

datenvisualisierung mit webgl (three.js)

babylon.js webgl paris

web 3d c/s動的負荷分散手法 webgl javascript three.js...

introduction to...

three.js の紹介

brainbrowser · canvas webgl (three.js) web workers cors...

learning webglで学ぶwebgl入門

webgl (three.js) - standardisation de la 3d sur le...

learning three.js – the javascript 3d library for webgl -...

three.js はじめましょ

webgl fundamentals

webgl -...