3d web programming [thanh loc vo , cto epsilon mobile ]
DESCRIPTION
TRANSCRIPT
![Page 1: 3D Web Programming [Thanh Loc Vo , CTO Epsilon Mobile ]](https://reader033.vdocuments.us/reader033/viewer/2022052522/54b79f934a795997768b45e2/html5/thumbnails/1.jpg)
3D Web ProgrammingVo Thanh Loc
CTO of Epsilon Mobile
Javascript Lover Ho Chi Minh Group
![Page 2: 3D Web Programming [Thanh Loc Vo , CTO Epsilon Mobile ]](https://reader033.vdocuments.us/reader033/viewer/2022052522/54b79f934a795997768b45e2/html5/thumbnails/2.jpg)
Outline
• Fundamental
• Web GL
• ThreeD.js
![Page 3: 3D Web Programming [Thanh Loc Vo , CTO Epsilon Mobile ]](https://reader033.vdocuments.us/reader033/viewer/2022052522/54b79f934a795997768b45e2/html5/thumbnails/3.jpg)
Technique
• CSS 3
• Web GL
![Page 4: 3D Web Programming [Thanh Loc Vo , CTO Epsilon Mobile ]](https://reader033.vdocuments.us/reader033/viewer/2022052522/54b79f934a795997768b45e2/html5/thumbnails/4.jpg)
Coordinate system
![Page 5: 3D Web Programming [Thanh Loc Vo , CTO Epsilon Mobile ]](https://reader033.vdocuments.us/reader033/viewer/2022052522/54b79f934a795997768b45e2/html5/thumbnails/5.jpg)
Camera
• Orthographic vs perspective
![Page 6: 3D Web Programming [Thanh Loc Vo , CTO Epsilon Mobile ]](https://reader033.vdocuments.us/reader033/viewer/2022052522/54b79f934a795997768b45e2/html5/thumbnails/6.jpg)
What is Web GL?
• WebGL is a Web API that allows low-level graphics programming.
• Based on open gl
![Page 7: 3D Web Programming [Thanh Loc Vo , CTO Epsilon Mobile ]](https://reader033.vdocuments.us/reader033/viewer/2022052522/54b79f934a795997768b45e2/html5/thumbnails/7.jpg)
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.
}}
![Page 8: 3D Web Programming [Thanh Loc Vo , CTO Epsilon Mobile ]](https://reader033.vdocuments.us/reader033/viewer/2022052522/54b79f934a795997768b45e2/html5/thumbnails/8.jpg)
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;}
![Page 9: 3D Web Programming [Thanh Loc Vo , CTO Epsilon Mobile ]](https://reader033.vdocuments.us/reader033/viewer/2022052522/54b79f934a795997768b45e2/html5/thumbnails/9.jpg)
...
• Play with it here• http://jsfiddle.net/vtloc/J9xup/
• It's troublesome, isn't it?
![Page 10: 3D Web Programming [Thanh Loc Vo , CTO Epsilon Mobile ]](https://reader033.vdocuments.us/reader033/viewer/2022052522/54b79f934a795997768b45e2/html5/thumbnails/10.jpg)
ThreeJs
![Page 11: 3D Web Programming [Thanh Loc Vo , CTO Epsilon Mobile ]](https://reader033.vdocuments.us/reader033/viewer/2022052522/54b79f934a795997768b45e2/html5/thumbnails/11.jpg)
What is it?
• A library made to wrap around raw WebGL code.
• Just like Unity, Cocos, Olong...
![Page 12: 3D Web Programming [Thanh Loc Vo , CTO Epsilon Mobile ]](https://reader033.vdocuments.us/reader033/viewer/2022052522/54b79f934a795997768b45e2/html5/thumbnails/12.jpg)
Basic setup
• http://jsfiddle.net/vtloc/7FYPT/
![Page 13: 3D Web Programming [Thanh Loc Vo , CTO Epsilon Mobile ]](https://reader033.vdocuments.us/reader033/viewer/2022052522/54b79f934a795997768b45e2/html5/thumbnails/13.jpg)
// 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);
![Page 14: 3D Web Programming [Thanh Loc Vo , CTO Epsilon Mobile ]](https://reader033.vdocuments.us/reader033/viewer/2022052522/54b79f934a795997768b45e2/html5/thumbnails/14.jpg)
Project's structure
• Setup: camera, lights
• Add objects: define object's geometry, define object's material, texture ...
• Render
• Animate, move camera, interaction, ...
![Page 15: 3D Web Programming [Thanh Loc Vo , CTO Epsilon Mobile ]](https://reader033.vdocuments.us/reader033/viewer/2022052522/54b79f934a795997768b45e2/html5/thumbnails/15.jpg)
Cube
![Page 16: 3D Web Programming [Thanh Loc Vo , CTO Epsilon Mobile ]](https://reader033.vdocuments.us/reader033/viewer/2022052522/54b79f934a795997768b45e2/html5/thumbnails/16.jpg)
Type of lights
• Points lighting
• Ambient Light
• SpotLight
• HemisphereLight
• AreaLight
![Page 17: 3D Web Programming [Thanh Loc Vo , CTO Epsilon Mobile ]](https://reader033.vdocuments.us/reader033/viewer/2022052522/54b79f934a795997768b45e2/html5/thumbnails/17.jpg)
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);
![Page 18: 3D Web Programming [Thanh Loc Vo , CTO Epsilon Mobile ]](https://reader033.vdocuments.us/reader033/viewer/2022052522/54b79f934a795997768b45e2/html5/thumbnails/18.jpg)
Some tuts
• http://blog.teamtreehouse.com/the-beginners-guide-to-three-js
• http://www.html5canvastutorials.com/three/
![Page 19: 3D Web Programming [Thanh Loc Vo , CTO Epsilon Mobile ]](https://reader033.vdocuments.us/reader033/viewer/2022052522/54b79f934a795997768b45e2/html5/thumbnails/19.jpg)
Workshop
![Page 20: 3D Web Programming [Thanh Loc Vo , CTO Epsilon Mobile ]](https://reader033.vdocuments.us/reader033/viewer/2022052522/54b79f934a795997768b45e2/html5/thumbnails/20.jpg)
Setup the scene
• Put more objects onto the scene
• Move the objects around
• Move the camera around
![Page 21: 3D Web Programming [Thanh Loc Vo , CTO Epsilon Mobile ]](https://reader033.vdocuments.us/reader033/viewer/2022052522/54b79f934a795997768b45e2/html5/thumbnails/21.jpg)
Move around
• Rotate camera with mouse events
• Move backward, forward with keyboard
![Page 22: 3D Web Programming [Thanh Loc Vo , CTO Epsilon Mobile ]](https://reader033.vdocuments.us/reader033/viewer/2022052522/54b79f934a795997768b45e2/html5/thumbnails/22.jpg)
Animate objects
![Page 23: 3D Web Programming [Thanh Loc Vo , CTO Epsilon Mobile ]](https://reader033.vdocuments.us/reader033/viewer/2022052522/54b79f934a795997768b45e2/html5/thumbnails/23.jpg)
Appendix
• Author: Tony Vo Thanh Loc
• Find me at: [email protected]
• 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
![Page 24: 3D Web Programming [Thanh Loc Vo , CTO Epsilon Mobile ]](https://reader033.vdocuments.us/reader033/viewer/2022052522/54b79f934a795997768b45e2/html5/thumbnails/24.jpg)
Thank you