WebGL and three.js

  • 2,421 views
Uploaded on

A talk I did on html5.ee XMas meetup

A talk I did on html5.ee XMas meetup

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,421
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
65
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. WebGL with THREE.jsWednesday, December 12, 12
  • 2. @antonnarusberg anton@cannedapps.com Google Developers Group Tallinn http://bit.ly/gdgtallinn @GDGTallinnWednesday, December 12, 12
  • 3. 3D in Web BrowsersWednesday, December 12, 12
  • 4. 3D in Web Browsers Full power of computers GPU using only JS, web browser and standard web technology stack. Old way - plugins, native applications New way - WebGLWednesday, December 12, 12
  • 5. Browser compatibilityWednesday, December 12, 12
  • 6. 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 standardWednesday, December 12, 12
  • 7. An (overly) simplified Example: Cube with plain WebGLWednesday, December 12, 12
  • 8. // 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); // ....Wednesday, December 12, 12
  • 9. <script id="shader-fs" type="x-shader/x-fragment">     precision mediump float;     varying vec4 vColor;     void main(void) {         gl_FragColor = vColor;     } </script> <script id="shader-vs" type="x-shader/x-vertex">     attribute vec3 aVertexPosition;     attribute vec4 aVertexColor;     uniform mat4 uMVMatrix;     uniform mat4 uPMatrix;     varying vec4 vColor;     void main(void) {         gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);         vColor = aVertexColor;     } </script>Wednesday, December 12, 12
  • 10. // 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);Wednesday, December 12, 12
  • 11. // 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(); }Wednesday, December 12, 12
  • 12. 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 texturesWednesday, December 12, 12
  • 13. THREE.js to the rescue!Wednesday, December 12, 12
  • 14. THREE.js * Abstracts away all the painful overhead * Elegant API to create and manipulate Cameras, Objects, Lights, Materials etc. * THREE.js is Open SourceWednesday, December 12, 12
  • 15. 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.jsWednesday, December 12, 12
  • 16. // 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 );Wednesday, December 12, 12
  • 17. 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 ); }Wednesday, December 12, 12
  • 18. It’s alive!Wednesday, December 12, 12
  • 19. 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 flare, 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 files from: Blender, CTM, FBX, 3D Max, and OBJWednesday, December 12, 12
  • 20. http://threejs.org/ https://github.com/mrdoob/three.js http://learningthreejs.comWednesday, December 12, 12
  • 21. Thank you!Wednesday, December 12, 12