Introduction to WebGL and Three.js

Introduction to WebGL and Three.js

James Williams

James.L.Williams@gmail.com - Rearden Commerce

About Me
• Author of Learning HTML5
Game Programming
• Google+: +JamesWilliams
• Twitter: @ecspike
• http://jameswilliams.be/blog

James Williams 2
James.L.Williams@gmail.com – Rearden Commerce

Agenda - WebGL
• What are WebGL and Three.js?
• Lighting, Shaders, and Materials
• Creating Meshes
• GLSL
• Animation
• Debugging
James Williams 3

What is WebGL?
• Low-level 3D graphics context
• Hardware accelerated
• Supported by most modern browsers
• Syntax is based on OpenGL ES 2.0

James Williams 4

Getting a WebGLContext
• Hook to draw on the canvas
var canvas = document.getElementById(“c”);
var ctx = c.getContext(“experimental-webgl”);

James Williams 5

What is Three.js?
• Abstraction layer over WebGL
• 3D scenegraph library
• Capable of rendering to
– Canvas2D, WebGL, or SVG
• Exporters for popular 3D formats
• http://github.com/mrdoob/three.js

James Williams 6

Initializing Three.js
function init() {
var HEIGHT = 480, WIDTH = 640;
// create a renderer, camera, and scene
renderer = new THREE.WebGLRenderer();
renderer.setSize (WIDTH, HEIGHT);
camera = /* truncated */
// create scene
scene = new THREE.Scene();
// add objects to scene
elem.appendChild(render.domElement);
}
James Williams 7

Camera
• Eye point
• Field of vision
• Near / Far planes
• Target(LookAt) point
• Up vector
• Advanced Camera types
James Williams 8

Creating Meshes
• Geometry vs Mesh
• Built-in geometries
• Vertex
new THREE.Vertex(
new Three.Vector3(0.0, 1.0, 0.0)
);
• Face
new THREE.Face3(0,1,2);

James Williams 9

Creating Meshes
geometry = new THREE.Geometry();
geometry.vertices.push(vertex1);
geometry.faces.push(face1);
var triangle = new THREE.Mesh(geometry,
new THREE.MeshBasicMaterial( {
color: 0x00ff00 }
)
);

James Williams 10

Creating Meshes
plane = new THREE.Mesh(
new THREE.PlaneGeometry( 200, 200 ),
new THREE.MeshBasicMaterial( { color:
0xe0e0e0 }
)
);
scene.add( plane );
scene.add(triangle);

James Williams 11

Demo

James Williams 12

Lighting
• Ambient
• Point
• Directional
• SpotLight
new THREE.AmbientLight(hexColor);
new THREE.PointLight(hexColor, [intensity], [distance]);

James Williams 13

Shading
• Flat
• Lambertian
• Gouraud
• Phong

James Williams 14

Materials
• MeshBasicMaterial
• MeshLambertMaterial
• MeshPhongMaterial
• MeshShaderMaterial

James Williams 15

Demo

James Williams 16

Texturing
• Can load from images or use canvas data
• Basic shapes precalculate texture coordinates

James Williams 17

2D Texture Coordinates
(0,0) (1,1)

(0,1) (1,0)
James Williams 18

Texturing Example
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.SphereGeometry(32, 32, 32), material
);

scene.add(sphere);
James Williams 19

Demo

James Williams 20

Loading Models
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] );
}

James Williams 21

Demo

James Williams 22

What is GLSL?
• High-level language with C-like syntax
• Targets the GPU and graphics pipeline
• A GLSL program consists of
– fragment shader
– vertex shader
• Content of shaders passed around as strings
• Shaders can be generated at run-time
James Williams 23

Vertex Shaders
• Run once per vertex in a mesh
• Can alter color, position, texels, etc at that
vertex

James Williams 24

Example Vertex Shader
<script id="shader-vs" type="x-shader/x-vertex">
void main(void) {
gl_Position = projectionMatrix *
modelViewMatrix *
vec4(position, 1.0);
}
</script>

James Williams 25

Fragment(Pixel) Shaders
• Run once per pixel in a mesh
• Can produce effects such as bump and env
mapping

James Williams 26

Example Fragment(Pixel) Shader
<script id="shader-vs" type="x-shader/x-fragment">
void main(void) {
gl_FragColor = vec4(
0.0, 1.0, 0.0, 1.0
);
}
</script>

James Williams 27

Shader Demo Code
shaderMaterial = new
THREE.MeshShaderMaterial({
vertexShader: $('#v').get(0).innerHTML,
fragmentShader:$('#f').get(0).innerHTML,
vertexColors: true
});
/* truncated */
var triangle = new THREE.Mesh(
geometry, shaderMaterial
);

James Williams 28

Shader Variables
• uniform
• varying
• attribute
• Types

James Williams 29

Constructing New Shader Types
struct MyMaterial {
vec4 ambient;
vec4 diffuse;
vec4 specular;
float shininess;
};

James Williams 30

Communicating with Shaders
var uniforms;
uniforms = {
time: {type:"f", value:0.0}
}
shaderMaterial = new THREE.MeshShaderMaterial({
uniforms: uniforms,
vertexShader:$('#v').get(0).innerHTML,
fragmentShader:$('#f').get(0).innerHTML,
});

James Williams 31

Custom Shader
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);
}

James Williams 32

Vertex Shader for 2D texturing
/* Vertex Shader */
attribute vec4 a_position;
attribute vec2 a_texCoord;
varying vec2 v_texCoord;

void main() {
gl_Position = a_position;
v_texCoord = a_texCoord;
}

James Williams 33

Fragment Shader for 2D texturing
/* Fragment Shader */
precision mediump float;
varying vec2 v_texCoord;
uniform sampler2D s_texture;

void main() {
gl_FragColor = texture2D(s_texture, v_texCoord);
}

James Williams 34

Animation
Armature - 3D representation of bones, ligaments, and
tendons
• Forward kinematics
• Inverse kinematics
• Keyframes/Morph targets

James Williams 35

MorphTargets
var time = new Date().getTime() % duration;
var keyframe = Math.floor(time / interpol )
+ offset;
if ( keyframe != currentKeyframe ) {
mesh.morphTargetInfluences[lastFrame]=0;
mesh.morphTargetInfluences[currentFrame]
=1;
mesh.morphTargetInfluences[keyframe]=0;
lastFrame = currentFrame;
currentFrame = keyframe;
}

James Williams 36

MorphTargets
mesh.morphTargetInfluences[ keyframe ]
= ( time % interpol ) / interpolation;

mesh.morphTargetInfluences[ lastFrame ]
= 1 - mesh.morphTargetInfluences[keyframe];

James Williams 37

Demo

James Williams 38

Debugging WebGL

James Williams 39

Stats.js
• Measures:
– FPS - frames per second
– MS - millis to render frame
– MB - allocated MB
• Github:https://github.com/mrdoob/stats.js

James Williams 40

Stats.js code
var stats = new Stats()
$("body").append(stats.domElement);

//... in your render function
stats.update();

James Williams 41

WebGL Inspector
• Allows you to step through rendering
• View assets and programs
• Capture individual frames
• Github: http://benvanik.github.com/WebGL-Inspector

James Williams 42

Questions?

James Williams 43

Introduction to WebGL and Three.js

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (17)

More from James Williams

More from James Williams (17)

Recently uploaded

Recently uploaded (20)

Introduction to WebGL and Three.js

Editor's Notes