O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Introduction to WebGL and Three.js

Presented 24 March 2012 at CodeMotion ROma

  • Entre para ver os comentários

Introduction to WebGL and Three.js

  1. 1. Introduction to WebGL and Three.jsJames WilliamsJames.L.Williams@gmail.com - Rearden Commerce
  2. 2. About Me• Author of Learning HTML5 Game Programming• Google+: +JamesWilliams• Twitter: @ecspike• http://jameswilliams.be/blog James Williams 2 James.L.Williams@gmail.com – Rearden Commerce
  3. 3. Agenda - WebGL• What are WebGL and Three.js?• Lighting, Shaders, and Materials• Creating Meshes• GLSL• Animation• Debugging James Williams 3 James.L.Williams@gmail.com – Rearden Commerce
  4. 4. What is WebGL?• Low-level 3D graphics context• Hardware accelerated• Supported by most modern browsers• Syntax is based on OpenGL ES 2.0 James Williams 4 James.L.Williams@gmail.com – Rearden Commerce
  5. 5. Getting a WebGLContext• Hook to draw on the canvas var canvas = document.getElementById(“c”); var ctx = c.getContext(“experimental-webgl”); James Williams 5 James.L.Williams@gmail.com – Rearden Commerce
  6. 6. What is Three.js?• Abstraction layer over WebGL• 3D scenegraph library• Capable of rendering to – Canvas2D, WebGL, or SVG• Exporters for popular 3D formats• http://github.com/mrdoob/three.js James Williams 6 James.L.Williams@gmail.com – Rearden Commerce
  7. 7. Initializing Three.jsfunction init() { var HEIGHT = 480, WIDTH = 640; // create a renderer, camera, and scene renderer = new THREE.WebGLRenderer(); renderer.setSize (WIDTH, HEIGHT); camera = /* truncated */ // create scene scene = new THREE.Scene(); // add objects to scene elem.appendChild(render.domElement);} James Williams 7 James.L.Williams@gmail.com – Rearden Commerce
  8. 8. Camera• Eye point• Field of vision• Near / Far planes• Target(LookAt) point• Up vector• Advanced Camera types James Williams 8 James.L.Williams@gmail.com – Rearden Commerce
  9. 9. Creating Meshes• Geometry vs Mesh• Built-in geometries• Vertex new THREE.Vertex( new Three.Vector3(0.0, 1.0, 0.0) );• Face new THREE.Face3(0,1,2); James Williams 9 James.L.Williams@gmail.com – Rearden Commerce
  10. 10. Creating Meshesgeometry = new THREE.Geometry();geometry.vertices.push(vertex1);geometry.vertices.push(vertex2);geometry.vertices.push(vertex3);geometry.faces.push(face1);var triangle = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial( { color: 0x00ff00 } )); James Williams 10 James.L.Williams@gmail.com – Rearden Commerce
  11. 11. Creating Meshesplane = new THREE.Mesh( new THREE.PlaneGeometry( 200, 200 ), new THREE.MeshBasicMaterial( { color: 0xe0e0e0 } ));scene.add( plane );scene.add(triangle); James Williams 11 James.L.Williams@gmail.com – Rearden Commerce
  12. 12. Demo James Williams 12 James.L.Williams@gmail.com – Rearden Commerce
  13. 13. Lighting• Ambient• Point• Directional• SpotLight new THREE.AmbientLight(hexColor); new THREE.PointLight(hexColor, [intensity], [distance]); James Williams 13 James.L.Williams@gmail.com – Rearden Commerce
  14. 14. Shading• Flat• Lambertian• Gouraud• Phong James Williams 14 James.L.Williams@gmail.com – Rearden Commerce
  15. 15. Materials• MeshBasicMaterial• MeshLambertMaterial• MeshPhongMaterial• MeshShaderMaterial James Williams 15 James.L.Williams@gmail.com – Rearden Commerce
  16. 16. Demo James Williams 16 James.L.Williams@gmail.com – Rearden Commerce
  17. 17. Texturing• Can load from images or use canvas data• Basic shapes precalculate texture coordinates James Williams 17 James.L.Williams@gmail.com – Rearden Commerce
  18. 18. 2D Texture Coordinates(0,0) (1,1)(0,1) (1,0) James Williams 18 James.L.Williams@gmail.com – Rearden Commerce
  19. 19. Texturing Examplevar texture = THREE.ImageUtils.loadTexture( "200407-bluemarble.jpg" );var material = new THREE.MeshBasicMaterial( { color: 0xFFFFFF, ambient: 0xFFFFFF, map:texture } );sphere = new THREE.Mesh( new THREE.SphereGeometry(32, 32, 32), material);scene.add(sphere); James Williams 19 James.L.Williams@gmail.com – Rearden Commerce
  20. 20. Demo James Williams 20 James.L.Williams@gmail.com – Rearden Commerce
  21. 21. Loading Modelsfunction drawCube() { var loader = new THREE.JSONLoader(); loader.load( {model: "cube.js", callback: createScene1 });}function createScene1(obj) { obj.materials[0][0].shading = THREE.FlatShading; mesh = THREE.SceneUtils.addMesh( scene, obj, 250, 400, 0,0, 0, 0, 0,obj.materials[0] );} James Williams 21 James.L.Williams@gmail.com – Rearden Commerce
  22. 22. Demo James Williams 22 James.L.Williams@gmail.com – Rearden Commerce
  23. 23. What is GLSL?• High-level language with C-like syntax• Targets the GPU and graphics pipeline• A GLSL program consists of – fragment shader – vertex shader• Content of shaders passed around as strings• Shaders can be generated at run-time James Williams 23 James.L.Williams@gmail.com – Rearden Commerce
  24. 24. Vertex Shaders• Run once per vertex in a mesh• Can alter color, position, texels, etc at that vertex James Williams 24 James.L.Williams@gmail.com – Rearden Commerce
  25. 25. Example Vertex Shader<script id="shader-vs" type="x-shader/x-vertex"> void main(void) { gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }</script> James Williams 25 James.L.Williams@gmail.com – Rearden Commerce
  26. 26. Fragment(Pixel) Shaders• Run once per pixel in a mesh• Can produce effects such as bump and env mapping James Williams 26 James.L.Williams@gmail.com – Rearden Commerce
  27. 27. Example Fragment(Pixel) Shader<script id="shader-vs" type="x-shader/x-fragment"> void main(void) { gl_FragColor = vec4( 0.0, 1.0, 0.0, 1.0 ); }</script> James Williams 27 James.L.Williams@gmail.com – Rearden Commerce
  28. 28. Shader Demo Code shaderMaterial = new THREE.MeshShaderMaterial({ vertexShader: $(#v).get(0).innerHTML, fragmentShader:$(#f).get(0).innerHTML, vertexColors: true });/* truncated */var triangle = new THREE.Mesh( geometry, shaderMaterial); James Williams 28 James.L.Williams@gmail.com – Rearden Commerce
  29. 29. Shader Variables• uniform• varying• attribute• Types James Williams 29 James.L.Williams@gmail.com – Rearden Commerce
  30. 30. Constructing New Shader Typesstruct MyMaterial { vec4 ambient; vec4 diffuse; vec4 specular; float shininess;}; James Williams 30 James.L.Williams@gmail.com – Rearden Commerce
  31. 31. Communicating with Shadersvar uniforms;uniforms = { time: {type:"f", value:0.0}}shaderMaterial = new THREE.MeshShaderMaterial({ uniforms: uniforms, vertexShader:$(#v).get(0).innerHTML, fragmentShader:$(#f).get(0).innerHTML,}); James Williams 31 James.L.Williams@gmail.com – Rearden Commerce
  32. 32. Custom Shaderuniform float time;void main(){ float r = cos(time); float g = sin(time); float b = tan(time); gl_FragColor = vec4(r, 1.0 - g , b, 1.0);} James Williams 32 James.L.Williams@gmail.com – Rearden Commerce
  33. 33. Vertex Shader for 2D texturing/* Vertex Shader */attribute vec4 a_position;attribute vec2 a_texCoord;varying vec2 v_texCoord;void main() { gl_Position = a_position; v_texCoord = a_texCoord;} James Williams 33 James.L.Williams@gmail.com – Rearden Commerce
  34. 34. Fragment Shader for 2D texturing/* Fragment Shader */precision mediump float;varying vec2 v_texCoord;uniform sampler2D s_texture;void main() { gl_FragColor = texture2D(s_texture, v_texCoord);} James Williams 34 James.L.Williams@gmail.com – Rearden Commerce
  35. 35. Animation Armature - 3D representation of bones, ligaments, and tendons• Forward kinematics• Inverse kinematics• Keyframes/Morph targets James Williams 35 James.L.Williams@gmail.com – Rearden Commerce
  36. 36. MorphTargetsvar time = new Date().getTime() % duration;var keyframe = Math.floor(time / interpol ) + offset;if ( keyframe != currentKeyframe ) { mesh.morphTargetInfluences[lastFrame]=0; mesh.morphTargetInfluences[currentFrame] =1; mesh.morphTargetInfluences[keyframe]=0; lastFrame = currentFrame; currentFrame = keyframe;} James Williams 36 James.L.Williams@gmail.com – Rearden Commerce
  37. 37. MorphTargetsmesh.morphTargetInfluences[ keyframe ] = ( time % interpol ) / interpolation;mesh.morphTargetInfluences[ lastFrame ]= 1 - mesh.morphTargetInfluences[keyframe]; James Williams 37 James.L.Williams@gmail.com – Rearden Commerce
  38. 38. Demo James Williams 38 James.L.Williams@gmail.com – Rearden Commerce
  39. 39. Debugging WebGL James Williams 39 James.L.Williams@gmail.com – Rearden Commerce
  40. 40. Stats.js• Measures: – FPS - frames per second – MS - millis to render frame – MB - allocated MB• Github:https://github.com/mrdoob/stats.js James Williams 40 James.L.Williams@gmail.com – Rearden Commerce
  41. 41. Stats.js code var stats = new Stats()$("body").append(stats.domElement);//... in your render functionstats.update(); James Williams 41 James.L.Williams@gmail.com – Rearden Commerce
  42. 42. WebGL Inspector• Allows you to step through rendering• View assets and programs• Capture individual frames• Github: http://benvanik.github.com/WebGL-Inspector James Williams 42 James.L.Williams@gmail.com – Rearden Commerce
  43. 43. Questions? James Williams 43 James.L.Williams@gmail.com – Rearden Commerce

×