3D Web ProgrammingVo Thanh Loc

CTO of Epsilon Mobile

Javascript Lover Ho Chi Minh Group

Outline

• Fundamental

• Web GL

• ThreeD.js

Technique

• CSS 3

• Web GL

Coordinate system

Camera

• Orthographic vs perspective

What is Web GL?

• WebGL is a Web API that allows low-level graphics programming.

• Based on open gl

Setup WebGL

function start() {var canvas = document.getElementById("glcanvas");

var gl = initWebGL(canvas); // Initialize the GL context

// Only continue if WebGL is available and working

if (gl) {gl.clearColor(0.0, 0.0, 0.0, 1.0); // Set clear color to black, fully opaquegl.enable(gl.DEPTH_TEST); // Enable depth testinggl.depthFunc(gl.LEQUAL); // Near things obscure far thingsgl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT); // Clear the color as well as the depth buffer.

}}

Init WebGLContext?function initWebGL(canvas) {

var gl = null;

try {// Try to grab the standard context.

//If it fails, fallback to experimental.gl = canvas.getContext("webgl")

|| canvas.getContext("experimental-webgl");}catch(e) {}

// If we don't have a GL context, give up nowif (!gl) {

alert("Unable to initialize WebGL. Your browser may not support it.");gl = null;

}

return gl;}

...

• Play with it here• http://jsfiddle.net/vtloc/J9xup/

• It's troublesome, isn't it?

ThreeJs

What is it?

• A library made to wrap around raw WebGL code.

• Just like Unity, Cocos, Olong...

Basic setup

• http://jsfiddle.net/vtloc/7FYPT/

// Setup the scenevar scene = new THREE.Scene();var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);

// Initialize renderer, maybe webglvar renderer = new THREE.WebGLRenderer();renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);

// Generate objects such as cube, var geometry = new THREE.CubeGeometry(1,1,1);var material = new THREE.MeshBasicMaterial({color: 0x00ff00});var cube = new THREE.Mesh(geometry, material);scene.add(cube);

camera.position.z = 5;

// show itrenderer.render(scene, camera);

Project's structure

• Setup: camera, lights

• Add objects: define object's geometry, define object's material, texture ...

• Render

• Animate, move camera, interaction, ...

Cube

Type of lights

• Points lighting

• Ambient Light

• SpotLight

• HemisphereLight

• AreaLight

How to add light?// create a point lightvar pointLight =

new THREE.PointLight(0xFFFFFF);

// set its positionpointLight.position.x = 10;pointLight.position.y = 50;pointLight.position.z = 130;

// add to the scenescene.add(pointLight);

Some tuts

• http://blog.teamtreehouse.com/the-beginners-guide-to-three-js

• http://www.html5canvastutorials.com/three/

Workshop

Setup the scene

• Put more objects onto the scene

• Move the objects around

• Move the camera around

Move around

• Rotate camera with mouse events

• Move backward, forward with keyboard

Animate objects

Appendix

• Author: Tony Vo Thanh Loc

• Find me at: thanhloc@epsilon-mobile.com

• Presentation made for "Javascript Ho Chi Minh City" meetup group

• You can find us at:• http://meetup.com/JavaScript-Ho-Chi-Minh-City/

• https://www.facebook.com/JavaScriptHCMC

• https://plus.google.com/communities/116105314977285194967

Thank you