WebGL and three.js

WebGL with THREE.js

Wednesday, December 12, 12

@antonnarusberg
anton@cannedapps.com

Google Developers Group Tallinn
http://bit.ly/gdgtallinn
@GDGTallinn


3D in Web Browsers


3D in Web Browsers

Full power of computer's GPU using only JS, web browser
and standard web technology stack.

Old way - plugins, native applications

New way - WebGL


Browser compatibility


So how do you use it?

WebGL is an API, accessed through
JavaScript programming interfaces.

Analogous to 2D drawing using the
HTML5 Canvas element

Based on OpenGL ES 2.0 standard


An (overly) simpliﬁed Example:
Cube with plain WebGL


// get the WebGL context to access the API
var canvas = document.getElementById("lesson04-canvas");
gl = canvas.getContext("experimental-webgl");

// Set up Shaders
var fragmentShader = getShader(gl, "shader-fs");
var vertexShader = getShader(gl, "shader-vs");

shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);

gl.useProgram(shaderProgram);

// ....


// A taste of creating the array of vertices for the cube
cubeVertexPositionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer);

vertices = [
            // Front face
            -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 1.0, -1.0, 1.0, 1.0,
            // Back face
            -1.0, -1.0, -1.0, -1.0, 1.0, -1.0, 1.0, 1.0, -1.0, 1.0, -1.0, -1.0,
            // Top face
            -1.0, 1.0, -1.0, -1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, -1.0,
            // Bottom face
            -1.0, -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, -1.0, 1.0, -1.0, -1.0, 1.0,
            // Right face
             1.0, -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 1.0, -1.0, 1.0,
            // Left face
            -1.0, -1.0, -1.0, -1.0, -1.0, 1.0, -1.0, 1.0, 1.0, -1.0, 1.0, -1.0
       ];

gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);


// Rotating the cube with Matrix computations
function drawScene() {

mat4.translate(mvMatrix, [3.0, 0.0, 0.0]);
mat4.rotate(mvMatrix, degToRad(rCube), [1, 1, 1]);

gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix);

// ... Bind buffers etc.

gl.drawElements(gl.TRIANGLES, cubeVertexIndexBuffer.numItems,
gl.UNSIGNED_SHORT, 0);

// ...
}

function tick() {
requestAnimFrame(tick);
rCube += 1;
drawScene();
}


Skills needed for plain WebGL

* GLSL, the shading language used by OpenGL and
WebGL

* Lots of Math for Matrix computation to set up
transformations

* Creating Vertex buffers to hold data about vertex
positions, normals, colors, and textures


THREE.js to the rescue!


THREE.js

* Abstracts away all the painful overhead

* Elegant API to create and manipulate Cameras,
Objects, Lights, Materials etc.

* THREE.js is Open Source


A Cube example using THREE.js

http://learningthreejs.com/data/
lets_do_a_cube/docs/lets_do_a_cube.html

Jerome Etienne - great tutorials on THREE.js


// Set up a Camera
camera = new THREE.Camera(70, window.innerWidth / window.innerHeight, 1,
1000);
camera.position.y = 150;
camera.position.z = 350;
camera.target.position.y = 150;

// Create a Scene
scene = new THREE.Scene();

// Create a Cube
material = new THREE.MeshNormalMaterial();
cube = new THREE.Mesh( new THREE.CubeGeometry( 200, 200, 200 ), material);
cube.position.y = 150;

// Add the Cube to the Scene
scene.addObject( cube );

// Boilerplate
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
$(“#container”).appendChild( renderer.domElement );


function animate() {
render();

// Loop
requestAnimationFrame( animate );
}

function render() {
// Rotate
cube.rotation.x += 0.02;
cube.rotation.y += 0.0225;
cube.rotation.z += 0.0175;

// Bounce
var dtime = Date.now() - startTime;
cube.scale.x = 1.0 + 0.3*Math.sin(dtime/300);
cube.scale.y = 1.0 + 0.3*Math.sin(dtime/300);
cube.scale.z = 1.0 + 0.3*Math.sin(dtime/300);

renderer.render( scene, camera );
}


It’s alive!


More Features
Renderers
WebGL, <canvas>, <svg>

Cameras
Perspective and orthographic; controllers: trackball, FPS, path and more

Lights
Ambient, direction, point, spot and hemisphere lights. Cast and receive shadows

Materials
Lambert, Phong and more - with textures, smooth-shading

Shaders
Access to full WebGL capabilities like lens ﬂare, depth pass and an extensive post-processing library

Objects
meshes, particles, sprites, lines, ribbons, ...

Geometry
plane, cube, sphere, torus, 3D text and more

Export/Import
utilities to create Three.js-compatible JSON ﬁles from: Blender, CTM, FBX, 3D Max, and OBJ


http://threejs.org/

https://github.com/mrdoob/three.js

http://learningthreejs.com


Thank you!


WebGL and three.js

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to WebGL and three.js (20)

WebGL and three.js