intro to webgl/three -...
TRANSCRIPT
![Page 1: Intro to WebGL/Three - 2012.jsday.it2012.jsday.it/wp-content/uploads/2012/03/Intro-to-WebGL-ThreeJS.pdf · What is WebGL? Hardware accelerated Low-level 3D graphics context using](https://reader036.vdocuments.site/reader036/viewer/2022062916/5ec9841f2baa40397d63208a/html5/thumbnails/1.jpg)
Intro toWebGL/Three.js
![Page 2: Intro to WebGL/Three - 2012.jsday.it2012.jsday.it/wp-content/uploads/2012/03/Intro-to-WebGL-ThreeJS.pdf · What is WebGL? Hardware accelerated Low-level 3D graphics context using](https://reader036.vdocuments.site/reader036/viewer/2022062916/5ec9841f2baa40397d63208a/html5/thumbnails/2.jpg)
About Me
Author of LearningHTML5 GameProgramming
Blog:
http://jameswilliams.be/blog
Twitter: @ecspike
Google+: http://jameswilliams.be/+
![Page 3: Intro to WebGL/Three - 2012.jsday.it2012.jsday.it/wp-content/uploads/2012/03/Intro-to-WebGL-ThreeJS.pdf · What is WebGL? Hardware accelerated Low-level 3D graphics context using](https://reader036.vdocuments.site/reader036/viewer/2022062916/5ec9841f2baa40397d63208a/html5/thumbnails/3.jpg)
Agenda
What is WebGL/Three.js?
Shaders
Lighting
Materials
Creating Meshes
GLSL
Exporters
Animation
Debugging
Demos
![Page 4: Intro to WebGL/Three - 2012.jsday.it2012.jsday.it/wp-content/uploads/2012/03/Intro-to-WebGL-ThreeJS.pdf · What is WebGL? Hardware accelerated Low-level 3D graphics context using](https://reader036.vdocuments.site/reader036/viewer/2022062916/5ec9841f2baa40397d63208a/html5/thumbnails/4.jpg)
What is WebGL?
Hardware accelerated
Low-level 3D graphics context using the canvas tag
Supported by most modern browsers
Syntax is based on OpenGL ES 2.0
Supports OpenGL Shading language(GLSL)
Books on OpenGL ES 2.0 can help
![Page 5: Intro to WebGL/Three - 2012.jsday.it2012.jsday.it/wp-content/uploads/2012/03/Intro-to-WebGL-ThreeJS.pdf · What is WebGL? Hardware accelerated Low-level 3D graphics context using](https://reader036.vdocuments.site/reader036/viewer/2022062916/5ec9841f2baa40397d63208a/html5/thumbnails/5.jpg)
Three.js
![Page 6: Intro to WebGL/Three - 2012.jsday.it2012.jsday.it/wp-content/uploads/2012/03/Intro-to-WebGL-ThreeJS.pdf · What is WebGL? Hardware accelerated Low-level 3D graphics context using](https://reader036.vdocuments.site/reader036/viewer/2022062916/5ec9841f2baa40397d63208a/html5/thumbnails/6.jpg)
Three.js
Github:https://github.com/mrdoob/three.js
3D scenegraph engine
Abstraction layer over WebGL
Capable of rendering to
Canvas 2D
WebGL
SVG
Exporters for popular 3D modeling applications/formats:Blender, 3DS Max, OBJ, FBX
Industry demos:3 Dreams of BlackGinger Facial Rigging
![Page 7: Intro to WebGL/Three - 2012.jsday.it2012.jsday.it/wp-content/uploads/2012/03/Intro-to-WebGL-ThreeJS.pdf · What is WebGL? Hardware accelerated Low-level 3D graphics context using](https://reader036.vdocuments.site/reader036/viewer/2022062916/5ec9841f2baa40397d63208a/html5/thumbnails/7.jpg)
Camera
Eye Point
Field of Vision
Near/Far Planes
Target(LookAt) Point
Up Vector
camera = new THREE.[Perspective]Camera(FOV, ASPECT, NEAR, FAR, [target]);
Advanced Camera Types
![Page 8: Intro to WebGL/Three - 2012.jsday.it2012.jsday.it/wp-content/uploads/2012/03/Intro-to-WebGL-ThreeJS.pdf · What is WebGL? Hardware accelerated Low-level 3D graphics context using](https://reader036.vdocuments.site/reader036/viewer/2022062916/5ec9841f2baa40397d63208a/html5/thumbnails/8.jpg)
Creating Meshes
Geometry
Mesh
Built-in geometries:
Sphere
Plane
Cylinder
Cube
Text
Torus
Path
![Page 9: Intro to WebGL/Three - 2012.jsday.it2012.jsday.it/wp-content/uploads/2012/03/Intro-to-WebGL-ThreeJS.pdf · What is WebGL? Hardware accelerated Low-level 3D graphics context using](https://reader036.vdocuments.site/reader036/viewer/2022062916/5ec9841f2baa40397d63208a/html5/thumbnails/9.jpg)
Creating Meshes - Code
geometry = new THREE.Geometry();geometry.vertices.push(new THREE.Vertex(new THREE.Vector3(0, 10, 0)));geometry.vertices.push(new THREE.Vertex(new THREE.Vector3(-10, -10, 0)));geometry.vertices.push(new THREE.Vertex(new THREE.Vector3(10, -10, 0)));geometry.faces.push(new THREE.Face3(0,1,2));var triangle = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial( { color: 0x00ff00 } )); plane = new THREE.Mesh( new THREE.Plane( 200, 200 ), new THREE.MeshBasicMaterial( { color: 0xe0e0e0 } ));
plane.overdraw = true;
scene.addObject( plane );scene.addChild(triangle);
![Page 10: Intro to WebGL/Three - 2012.jsday.it2012.jsday.it/wp-content/uploads/2012/03/Intro-to-WebGL-ThreeJS.pdf · What is WebGL? Hardware accelerated Low-level 3D graphics context using](https://reader036.vdocuments.site/reader036/viewer/2022062916/5ec9841f2baa40397d63208a/html5/thumbnails/10.jpg)
Materials,Lighting, and
Shaders
![Page 11: Intro to WebGL/Three - 2012.jsday.it2012.jsday.it/wp-content/uploads/2012/03/Intro-to-WebGL-ThreeJS.pdf · What is WebGL? Hardware accelerated Low-level 3D graphics context using](https://reader036.vdocuments.site/reader036/viewer/2022062916/5ec9841f2baa40397d63208a/html5/thumbnails/11.jpg)
Lighting
Ambient
Point
Directional
SpotLight
new THREE.AmbientLight(hexColor);new THREE.PointLight(hexColor, [intensity], [distance]);new THREE.DirectionalLight(hexColor, [intensity], [distance], [castShadow]);new THREE.SpotLight(hexColor, [intensity], [distance], [castShadow]);
![Page 12: Intro to WebGL/Three - 2012.jsday.it2012.jsday.it/wp-content/uploads/2012/03/Intro-to-WebGL-ThreeJS.pdf · What is WebGL? Hardware accelerated Low-level 3D graphics context using](https://reader036.vdocuments.site/reader036/viewer/2022062916/5ec9841f2baa40397d63208a/html5/thumbnails/12.jpg)
Shading
Flat
Lambertian
Gouraud
Phong
![Page 13: Intro to WebGL/Three - 2012.jsday.it2012.jsday.it/wp-content/uploads/2012/03/Intro-to-WebGL-ThreeJS.pdf · What is WebGL? Hardware accelerated Low-level 3D graphics context using](https://reader036.vdocuments.site/reader036/viewer/2022062916/5ec9841f2baa40397d63208a/html5/thumbnails/13.jpg)
Materials
MeshBasicMaterial
MeshLambertMaterial
MeshPhongMaterial
MeshShaderMaterial
Common Properties
color
ambient
specular
shininess
opacity
mappings: map(texture), envMap
shading
wireframe
blending
![Page 14: Intro to WebGL/Three - 2012.jsday.it2012.jsday.it/wp-content/uploads/2012/03/Intro-to-WebGL-ThreeJS.pdf · What is WebGL? Hardware accelerated Low-level 3D graphics context using](https://reader036.vdocuments.site/reader036/viewer/2022062916/5ec9841f2baa40397d63208a/html5/thumbnails/14.jpg)
GLSL
![Page 15: Intro to WebGL/Three - 2012.jsday.it2012.jsday.it/wp-content/uploads/2012/03/Intro-to-WebGL-ThreeJS.pdf · What is WebGL? Hardware accelerated Low-level 3D graphics context using](https://reader036.vdocuments.site/reader036/viewer/2022062916/5ec9841f2baa40397d63208a/html5/thumbnails/15.jpg)
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 fragmentshader)
![Page 16: Intro to WebGL/Three - 2012.jsday.it2012.jsday.it/wp-content/uploads/2012/03/Intro-to-WebGL-ThreeJS.pdf · What is WebGL? Hardware accelerated Low-level 3D graphics context using](https://reader036.vdocuments.site/reader036/viewer/2022062916/5ec9841f2baa40397d63208a/html5/thumbnails/16.jpg)
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>
![Page 17: Intro to WebGL/Three - 2012.jsday.it2012.jsday.it/wp-content/uploads/2012/03/Intro-to-WebGL-ThreeJS.pdf · What is WebGL? Hardware accelerated Low-level 3D graphics context using](https://reader036.vdocuments.site/reader036/viewer/2022062916/5ec9841f2baa40397d63208a/html5/thumbnails/17.jpg)
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>
![Page 18: Intro to WebGL/Three - 2012.jsday.it2012.jsday.it/wp-content/uploads/2012/03/Intro-to-WebGL-ThreeJS.pdf · What is WebGL? Hardware accelerated Low-level 3D graphics context using](https://reader036.vdocuments.site/reader036/viewer/2022062916/5ec9841f2baa40397d63208a/html5/thumbnails/18.jpg)
Shader Demo Code
function drawTriangle() { var geometry, geoMaterial; geoMaterial = new THREE.MeshLambertMaterial({ color:0xFF00FF }); shaderMaterial = new THREE.MeshShaderMaterial({ vertexShader: $('#geom-vertexShader').get(0).innerHTML, fragmentShader: $('#geom-fragmentShader').get(0).innerHTML, vertexColors: true }); geometry = new THREE.Geometry(); geometry.vertices.push(new THREE.Vertex(new THREE.Vector3(0, 10, 0))); geometry.vertices.push(new THREE.Vertex(new THREE.Vector3(-10, -10, 0))); geometry.vertices.push(new THREE.Vertex(new THREE.Vector3(10, -10, 0))); geometry.faces.push(new THREE.Face3(0,1,2)); var triangle = new THREE.Mesh(geometry, shaderMaterial); plane = new THREE.Mesh( new THREE.Plane( 200, 200 ), new THREE.MeshBasicMaterial( { color: 0xe0e0e0 } ) );
![Page 19: Intro to WebGL/Three - 2012.jsday.it2012.jsday.it/wp-content/uploads/2012/03/Intro-to-WebGL-ThreeJS.pdf · What is WebGL? Hardware accelerated Low-level 3D graphics context using](https://reader036.vdocuments.site/reader036/viewer/2022062916/5ec9841f2baa40397d63208a/html5/thumbnails/19.jpg)
//plane.rotation.x = - 90 * ( Math.PI / 180 ); plane.overdraw = true; scene.addObject( plane ); scene.addChild(triangle);}
![Page 20: Intro to WebGL/Three - 2012.jsday.it2012.jsday.it/wp-content/uploads/2012/03/Intro-to-WebGL-ThreeJS.pdf · What is WebGL? Hardware accelerated Low-level 3D graphics context using](https://reader036.vdocuments.site/reader036/viewer/2022062916/5ec9841f2baa40397d63208a/html5/thumbnails/20.jpg)
Shader Variable Types
uniform
varying
attribute
bool
int
float
vec2 / vec3 / vec4
mat 2 / 3 / 4
sampler1D / 2D / 3D
![Page 21: Intro to WebGL/Three - 2012.jsday.it2012.jsday.it/wp-content/uploads/2012/03/Intro-to-WebGL-ThreeJS.pdf · What is WebGL? Hardware accelerated Low-level 3D graphics context using](https://reader036.vdocuments.site/reader036/viewer/2022062916/5ec9841f2baa40397d63208a/html5/thumbnails/21.jpg)
Constructing New ShaderTypes
struct MyMaterial { vec4 ambient; vec4 diffuse; vec4 specular; float shininess; };
![Page 22: Intro to WebGL/Three - 2012.jsday.it2012.jsday.it/wp-content/uploads/2012/03/Intro-to-WebGL-ThreeJS.pdf · What is WebGL? Hardware accelerated Low-level 3D graphics context using](https://reader036.vdocuments.site/reader036/viewer/2022062916/5ec9841f2baa40397d63208a/html5/thumbnails/22.jpg)
Communicating with theShader
var uniforms;
uniforms = { time: {type:"f", value:0.0} }
shaderMaterial = new THREE.MeshShaderMaterial({ // attributes: attributes, uniforms: uniforms, vertexShader: $('#geom-vertexShader').get(0).innerHTML, fragmentShader: $('#geom-fragmentShader').get(0).innerHTML, });
![Page 23: Intro to WebGL/Three - 2012.jsday.it2012.jsday.it/wp-content/uploads/2012/03/Intro-to-WebGL-ThreeJS.pdf · What is WebGL? Hardware accelerated Low-level 3D graphics context using](https://reader036.vdocuments.site/reader036/viewer/2022062916/5ec9841f2baa40397d63208a/html5/thumbnails/23.jpg)
Custom Shader
#ifdef GL_ESprecision highp float;#endif
uniform float time;
void main(){ float r = cos(time); float g = sin(time); float b = tan(time);
gl_FragColor = vec4(r, 1.0 - g , b, 1.0);}
![Page 24: Intro to WebGL/Three - 2012.jsday.it2012.jsday.it/wp-content/uploads/2012/03/Intro-to-WebGL-ThreeJS.pdf · What is WebGL? Hardware accelerated Low-level 3D graphics context using](https://reader036.vdocuments.site/reader036/viewer/2022062916/5ec9841f2baa40397d63208a/html5/thumbnails/24.jpg)
Custom Shader
#ifdef GL_ESprecision highp float;#endif
uniform float time;float r, g, b;
void computeColors() { r = cos(time); g = sin(time); b = tan(time);}
void main(){
gl_FragColor = vec4(r, 1.0 - g , b, 1.0);}
![Page 25: Intro to WebGL/Three - 2012.jsday.it2012.jsday.it/wp-content/uploads/2012/03/Intro-to-WebGL-ThreeJS.pdf · What is WebGL? Hardware accelerated Low-level 3D graphics context using](https://reader036.vdocuments.site/reader036/viewer/2022062916/5ec9841f2baa40397d63208a/html5/thumbnails/25.jpg)
Shader Toy Demohttp://www.iquilezles.org/apps/shadertoy/
![Page 26: Intro to WebGL/Three - 2012.jsday.it2012.jsday.it/wp-content/uploads/2012/03/Intro-to-WebGL-ThreeJS.pdf · What is WebGL? Hardware accelerated Low-level 3D graphics context using](https://reader036.vdocuments.site/reader036/viewer/2022062916/5ec9841f2baa40397d63208a/html5/thumbnails/26.jpg)
Texturing/UV Mapping
![Page 27: Intro to WebGL/Three - 2012.jsday.it2012.jsday.it/wp-content/uploads/2012/03/Intro-to-WebGL-ThreeJS.pdf · What is WebGL? Hardware accelerated Low-level 3D graphics context using](https://reader036.vdocuments.site/reader036/viewer/2022062916/5ec9841f2baa40397d63208a/html5/thumbnails/27.jpg)
Texturing Demo
function drawScene() { var texture = THREE.ImageUtils.loadTexture("200407-bluemarble.jpg" ); var material = new THREE.MeshBasicMaterial( { color: 0xFFFFFF, ambient: 0xFFFFFF, map:texture } ); sphere = new THREE.Mesh(new THREE.Sphere(32, 32, 32), material); scene.addObject(sphere);}
![Page 28: Intro to WebGL/Three - 2012.jsday.it2012.jsday.it/wp-content/uploads/2012/03/Intro-to-WebGL-ThreeJS.pdf · What is WebGL? Hardware accelerated Low-level 3D graphics context using](https://reader036.vdocuments.site/reader036/viewer/2022062916/5ec9841f2baa40397d63208a/html5/thumbnails/28.jpg)
Creating andLoadingAssets
![Page 29: Intro to WebGL/Three - 2012.jsday.it2012.jsday.it/wp-content/uploads/2012/03/Intro-to-WebGL-ThreeJS.pdf · What is WebGL? Hardware accelerated Low-level 3D graphics context using](https://reader036.vdocuments.site/reader036/viewer/2022062916/5ec9841f2baa40397d63208a/html5/thumbnails/29.jpg)
Blender
Free and open source 3D modeling application
Built-in Python API for scripting
Vibrant plugin community
Can import/export from many formats including Three.js
Advanced features
Uses in the Media Industry
http://blender.org
![Page 30: Intro to WebGL/Three - 2012.jsday.it2012.jsday.it/wp-content/uploads/2012/03/Intro-to-WebGL-ThreeJS.pdf · What is WebGL? Hardware accelerated Low-level 3D graphics context using](https://reader036.vdocuments.site/reader036/viewer/2022062916/5ec9841f2baa40397d63208a/html5/thumbnails/30.jpg)
Loading Assets
function drawCube() { var loader = new THREE.JSONLoader(); loader.load( {model: "cube.js", callback: createScene1 });}
function createScene1(obj) { obj.materials[0][0].shading = THREE.FlatShading; mesh = THREE.SceneUtils.addMesh( scene, obj, 250, 400, 0, 0, 0, 0, 0, obj.materials[0] );}
![Page 31: Intro to WebGL/Three - 2012.jsday.it2012.jsday.it/wp-content/uploads/2012/03/Intro-to-WebGL-ThreeJS.pdf · What is WebGL? Hardware accelerated Low-level 3D graphics context using](https://reader036.vdocuments.site/reader036/viewer/2022062916/5ec9841f2baa40397d63208a/html5/thumbnails/31.jpg)
Three.js JSON Model Format
var model = {
"version" : 2, "scale" : 1.000000, "materials": [... ], "vertices": [ ... ], "morphTargets": [], "normals": [], "colors": [], "uvs": [[]], "faces": [], "edges" : []};
![Page 32: Intro to WebGL/Three - 2012.jsday.it2012.jsday.it/wp-content/uploads/2012/03/Intro-to-WebGL-ThreeJS.pdf · What is WebGL? Hardware accelerated Low-level 3D graphics context using](https://reader036.vdocuments.site/reader036/viewer/2022062916/5ec9841f2baa40397d63208a/html5/thumbnails/32.jpg)
Animation
Armature - 3D representation of bones, ligaments, and tendons
Forward kinematics
Inverse kinematics
Keyframes/Morph targets
![Page 33: Intro to WebGL/Three - 2012.jsday.it2012.jsday.it/wp-content/uploads/2012/03/Intro-to-WebGL-ThreeJS.pdf · What is WebGL? Hardware accelerated Low-level 3D graphics context using](https://reader036.vdocuments.site/reader036/viewer/2022062916/5ec9841f2baa40397d63208a/html5/thumbnails/33.jpg)
Optimizingand
DebuggingWebGL
![Page 34: Intro to WebGL/Three - 2012.jsday.it2012.jsday.it/wp-content/uploads/2012/03/Intro-to-WebGL-ThreeJS.pdf · What is WebGL? Hardware accelerated Low-level 3D graphics context using](https://reader036.vdocuments.site/reader036/viewer/2022062916/5ec9841f2baa40397d63208a/html5/thumbnails/34.jpg)
Why setTimeout is bad
can peg the processor
not always consistent
not optimized for drawing the canvas
![Page 35: Intro to WebGL/Three - 2012.jsday.it2012.jsday.it/wp-content/uploads/2012/03/Intro-to-WebGL-ThreeJS.pdf · What is WebGL? Hardware accelerated Low-level 3D graphics context using](https://reader036.vdocuments.site/reader036/viewer/2022062916/5ec9841f2baa40397d63208a/html5/thumbnails/35.jpg)
RequestAnimationFrame
requestAnimationFrame
mozRequestAnimationFrame
webkitRequestAnimationFrame
msRequestAnimationFrame
oRequestAnimationFrame
requestAnimFrame shim
window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(/* function */ callback, /* DOMElement */ element){ window.setTimeout(callback, 1000 / 60); }; })();
Src: http://paulirish.com/2011/requestanimationframe-for-smart-animating/
![Page 36: Intro to WebGL/Three - 2012.jsday.it2012.jsday.it/wp-content/uploads/2012/03/Intro-to-WebGL-ThreeJS.pdf · What is WebGL? Hardware accelerated Low-level 3D graphics context using](https://reader036.vdocuments.site/reader036/viewer/2022062916/5ec9841f2baa40397d63208a/html5/thumbnails/36.jpg)
Stats.jsFPS - frames per second
MS - how many millis it took to render the frame
MB - the allocated megabytes
Github: https://github.com/mrdoob/stats.js
var stats = new Stats()$("body").append(stats.domElement);
//... in your render functionstats.update();
![Page 37: Intro to WebGL/Three - 2012.jsday.it2012.jsday.it/wp-content/uploads/2012/03/Intro-to-WebGL-ThreeJS.pdf · What is WebGL? Hardware accelerated Low-level 3D graphics context using](https://reader036.vdocuments.site/reader036/viewer/2022062916/5ec9841f2baa40397d63208a/html5/thumbnails/37.jpg)
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/
![Page 38: Intro to WebGL/Three - 2012.jsday.it2012.jsday.it/wp-content/uploads/2012/03/Intro-to-WebGL-ThreeJS.pdf · What is WebGL? Hardware accelerated Low-level 3D graphics context using](https://reader036.vdocuments.site/reader036/viewer/2022062916/5ec9841f2baa40397d63208a/html5/thumbnails/38.jpg)
Thanks forcoming!
![Page 39: Intro to WebGL/Three - 2012.jsday.it2012.jsday.it/wp-content/uploads/2012/03/Intro-to-WebGL-ThreeJS.pdf · What is WebGL? Hardware accelerated Low-level 3D graphics context using](https://reader036.vdocuments.site/reader036/viewer/2022062916/5ec9841f2baa40397d63208a/html5/thumbnails/39.jpg)