Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome, Safari or Firefox browser.

Game Development with WebGL and Three.js



SobrosoParty, March 2013

Who am I?

Apps:

Why WebGL?

Mobile Browsers

Also supported with...

The WebGL Mess

WebGL development needs knowledge about: WebGL doesn't know about cameras, models, materials...

Three.js

Lightweight library that provides a object model with:

And a "Renderer" to draw the scene (also model load...)

About Three.js

By Ricardo Cabello (Mr. Doob)

Three.js Demos

Using Three.js

github.com/mrdoob/three.js/tree/master/build/ mrdoob.com/projects/code-editor/

Setup Scene and Renderer

<script src="js/three.min.js"></script><script>
var scene, renderer;
init();
function init() {
 scene = new THREE.Scene();
 renderer = new THREE.WebGLRenderer();
 renderer.setSize(window.innerWidth,
                  window.innerHeight);
 document.body.appendChild(renderer.domElement);
}
</script>

Camera and Render

var camera;
//...
camera = new THREE.PerspectiveCamera(45,
 window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set(0, 0, 1000);
To render each frame we call:
renderer.render(scene, camera);

Adding a Mesh

// Create a Geometry
geometry = new THREE.CubeGeometry(200, 200, 200);
// Create a Material
material = new THREE.MeshLambertMaterial({
	color : 0xffffff,
});
// Create a Mesh with the Geometry and the Material
mesh = new THREE.Mesh(geometry, material);
// Add it to the Scene
scene.add(mesh);

Adding a Light

// Create a Point Light 
pointLight = new THREE.PointLight( 0xffffff );
// Set the point light position 
pointLight.position =
    new THREE.Vector3(1000,1000,0);
// Add the light to the scene
scene.add( pointLight );
More light types:

Animating

animate();
function animate() {
	// Ask for the next frame
	requestAnimationFrame(animate);
	// Rotate Cube
	mesh.rotation.x += 0.01;
	mesh.rotation.y += 0.02;
	// Render Frame
	renderer.render(scene, camera);
}

A Basic WebGL Scene

Loading models


To test model load in local you will need to start Chrome with:
chrome --allow-file-access-from-files

Export a Model with SketchUp

Load the model

Using the ColladaLoader
var loader = new THREE.ColladaLoader();
loader.options.convertUpAxis = true;
loader.load('./car.dae', function(collada) {
	// Onload function
	car = collada.scene;
	init();
	animate();
});

Camera

Make the camera look at (0,0,0):
camera = new THREE.PerspectiveCamera(45,
  window.innerWidth / window.innerHeight, 1, 10000);
camera.position = new THREE.Vector3(0, 1000, 1000);
camera.lookAt(new THREE.Vector3(0, 0, 0));

Animation

We will rotate the car in each frame
function animate() {
	requestAnimationFrame(animate);
	car.rotation.y += 0.02;
	renderer.render(scene, camera);
}

The Loaded Model

A Basic Game Scenery

Setup keyboard control:
keyDown = new Array();
for (i = 0; i < 300; i++) keyDown[i] = false;
document.onkeydown = function(event) {
    keyDown[event.keyCode] = true;
}
document.onkeyup = function(event) {
    keyDown[event.keyCode] = false;
}

Accelerate and brake

We will add this code in the animate() loop:
if (keyDown[38]) { // if Up is pressed
	if (speed < 100) speed += 0.5;
} else {
	speed -= 1;						
	if (speed < 0) speed = 0;
}

Rotate and move the car

Rotate on left/right press:
if (speed > 0) {
	if (keyDown[37]) car.rotation.y += 0.02;
	if (keyDown[39]) car.rotation.y -= 0.02;
}
And move the car:
car.position.x += speed * Math.sin(car.rotation.y);
car.position.z += speed * Math.cos(car.rotation.y);

And more...

Camera looking at the car:
camera.lookAt(car.position);

Create a Plane

As a reference for the car movement
geometry = new THREE.PlaneGeometry(
	50000, 50000, 100, 100);
material = new THREE.MeshBasicMaterial({
	color : 0xcccccc,
	wireframe : true});
mesh = new THREE.Mesh(geometry, material);
mesh.rotation.x = Math.PI / 2;
scene.add(mesh);

Play!

Accelerate with ↑, steer with ← and →

And More Three.js Resources

Finally, for a game you will also need Sound

And Maybe Physics!

Thanks


Questions?


@albertoruibal


Code: github.com/albertoruibal/codelab_three.js