1. 3D Web Programming
Vo Thanh Loc
CTO of Epsilon Mobile
Javascript Lover Ho Chi Minh Group

2. Outline
• Fundamental
• Web GL
• ThreeD.js

3. Technique
• CSS 3
• Web GL

4. Coordinate system

5. Camera
• Orthographic vs perspective

6. What is Web GL?
• WebGL is a Web API that allows low-level graphics programming.
• Based on open gl

7. 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 opaque
gl.enable(gl.DEPTH_TEST);
// Enable depth testing
gl.depthFunc(gl.LEQUAL);
// Near things obscure far things
gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT); // Clear the color as well as the depth buffer.
}
}

8. 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 now
if (!gl) {
alert("Unable to initialize WebGL. Your browser may not support it.");
gl = null;
}
return gl;
}

9. ...
• Play with it here
• http://jsfiddle.net/vtloc/J9xup/
• It's troublesome, isn't it?

10. ThreeJs

11. What is it?
• A library made to wrap around raw WebGL code.
• Just like Unity, Cocos, Olong...

12. Basic setup
• http://jsfiddle.net/vtloc/7FYPT/

13. // Setup the scene
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
// Initialize renderer, maybe webgl
var 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 it
renderer.render(scene, camera);

14. Project's structure
• Setup: camera, lights
• Add objects: define object's geometry, define object's material,
texture ...
• Render
• Animate, move camera, interaction, ...

15. Cube

16. Type of lights
• Points lighting
• Ambient Light
• SpotLight
• HemisphereLight
• AreaLight

17. How to add light?
// create a point light
var pointLight =
new THREE.PointLight(0xFFFFFF);
// set its position
pointLight.position.x = 10;
pointLight.position.y = 50;
pointLight.position.z = 130;
// add to the scene
scene.add(pointLight);

18. Some tuts
• http://blog.teamtreehouse.com/the-beginners-guide-to-three-js
• http://www.html5canvastutorials.com/three/

19. Workshop

20. Setup the scene
• Put more objects onto the scene
• Move the objects around
• Move the camera around

21. Move around
• Rotate camera with mouse events
• Move backward, forward with keyboard

22. Animate objects

23. 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

24. Thank you