Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 1/38
Creating Applic...
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 2/38
About Me
Author...
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 3/38
Learning HTML5 ...
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 4/38
Agenda
What is ...
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 5/38
What is WebGL?
...
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 6/38
Why aren't we u...
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 7/38
What is Three.j...
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 8/38
Creating a basi...
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 9/38
Camera
Eye Poin...
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 10/38
A Basic Scene
...
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 11/38
Creating Meshe...
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 12/38
Materials
# Ba...
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 13/38
Demo
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 14/38
Loading Models...
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 15/38
Loading A Mode...
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 16/38
Loading A Scen...
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 17/38
Three.js Edito...
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 18/38
Demo
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 19/38
What is GLSL?
...
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 20/38
Vertex Shaders...
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 21/38
Example vertex...
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 22/38
Frament(Pixel)...
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 23/38
Example fragme...
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 24/38
Cel (Toon) Sha...
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 25/38
Shader Toy
Web...
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 26/38
Demo
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 27/38
Collision Dete...
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 28/38
Physics using ...
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 29/38
Sample Physijs...
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 30/38
Demo
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 31/38
Creating A Sim...
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 32/38
My First Compu...
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 33/38
My First Compu...
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 34/38
Demos
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 35/38
WebGL Inspecto...
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 36/38
Questions ?
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 37/38
Links and Sour...
6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 38/38
Upcoming SlideShare
Loading in …5
×

Creating Applications with WebGL and Three.js

2,154 views

Published on

James Williams's talk from Future Insights Live 2014 in Las Vegas: "There was once a time where gaming in the browser meant Flash. That time is no more. In this session, you’ll learn the basics of game programming, WebGL, and how to use Three.js to create WebGL applications."

Miss his talk? Join us at a future show: www.futureofwebapps.com. Sign up for our newsletter at futureinsights.com and get 15% off your next conference.

Published in: Internet, Technology
  • Be the first to comment

  • Be the first to like this

Creating Applications with WebGL and Three.js

  1. 1. 6/17/2014 Getting started with WebGL and Three.js file:///Users/james/Downloads/3js-2013/index.html#1 1/38 Creating Applications with WebGL and Three.js +James Williams @ecspike
  2. 2. 6/17/2014 Getting started with WebGL and Three.js file:///Users/james/Downloads/3js-2013/index.html#1 2/38 About Me Author of Learning HTML5 Game Programming Writing a new book on Three.js
  3. 3. 6/17/2014 Getting started with WebGL and Three.js file:///Users/james/Downloads/3js-2013/index.html#1 3/38 Learning HTML5 Game Programming
  4. 4. 6/17/2014 Getting started with WebGL and Three.js file:///Users/james/Downloads/3js-2013/index.html#1 4/38 Agenda What is WebGL/Three.js? Creating Meshes Lighting and Shading Working with Physics Engines Demos
  5. 5. 6/17/2014 Getting started with WebGL and Three.js file:///Users/james/Downloads/3js-2013/index.html#1 5/38 What is WebGL? Low-level 3D graphics context Uses canvas tag Hardware-accelerated Syntax based on OpenGL ES 2.0
  6. 6. 6/17/2014 Getting started with WebGL and Three.js file:///Users/james/Downloads/3js-2013/index.html#1 6/38 Why aren't we using raw WebGL? Higher barrier to entry Lots of code Requires directly managing data structures
  7. 7. 6/17/2014 Getting started with WebGL and Three.js file:///Users/james/Downloads/3js-2013/index.html#1 7/38 What is Three.js? 3D scenegraph library Abstracts the nastiness away from WebGL Renders to Canvas 2D, WebGL, SVG Can animate HTML elements using CSS3 Can import models from popular 3D modeling apps
  8. 8. 6/17/2014 Getting started with WebGL and Three.js file:///Users/james/Downloads/3js-2013/index.html#1 8/38 Creating a basic app Scene Camera Renderer Lighting (optional)
  9. 9. 6/17/2014 Getting started with WebGL and Three.js file:///Users/james/Downloads/3js-2013/index.html#1 9/38 Camera Eye Point Field of Vision Near/Far Planes Target (LookAt) Point Up Vector camera = new THREE.PerspectiveCamera(FOV, ASPECT, NEAR, FAR, [target]);
  10. 10. 6/17/2014 Getting started with WebGL and Three.js file:///Users/james/Downloads/3js-2013/index.html#1 10/38 A Basic Scene @renderer = new THREE.WebGLRenderer({autoClear:true}) @renderer.setClearColor(new THREE.Color(0x000000)) @renderer.setSize(width, height) @camera = new THREE.PerspectiveCamera(fov, aspect, near, far) @camera.position.z = 100 @scene = new THREE.Scene() $('#container').empty() $("#container").get(0).appendChild(@renderer.domElement) @scene.add(@camera) # truncated @renderer.render(@scene, @camera)
  11. 11. 6/17/2014 Getting started with WebGL and Three.js file:///Users/james/Downloads/3js-2013/index.html#1 11/38 Creating Meshes new THREE.Mesh(new CubeGeometry(100,1,100), new THREE.MeshBasicMaterial({color: 0xFF0000})) Built-in Geometries SphereGeometry PlaneGeometry CylinderGeometry CubeGeometry TextGeometry and several others
  12. 12. 6/17/2014 Getting started with WebGL and Three.js file:///Users/james/Downloads/3js-2013/index.html#1 12/38 Materials # Basic Material new THREE.MeshBasicMaterial({color: 0xFFFFFF}) # Per-vertex coloring f = triGeometry.faces[0] f.vertexColors[0] = vColors[0] f.vertexColors[1] = vColors[1] f.vertexColors[2] = vColors[2] triMaterial = new THREE.MeshBasicMaterial( {color: 0xFFFFFF, vertexColors:THREE.VertexColors} ) # Phong, Lambert, Face, Line, etc
  13. 13. 6/17/2014 Getting started with WebGL and Three.js file:///Users/james/Downloads/3js-2013/index.html#1 13/38 Demo
  14. 14. 6/17/2014 Getting started with WebGL and Three.js file:///Users/james/Downloads/3js-2013/index.html#1 14/38 Loading Models Blender Collada OBJ MAX Maya
  15. 15. 6/17/2014 Getting started with WebGL and Three.js file:///Users/james/Downloads/3js-2013/index.html#1 15/38 Loading A Model @models = {} loader = new THREE.JSONLoader() loader.load('/models/hero.js', @heroCallback) heroCallback: (g, m) -> obj = new THREE.Mesh(g, new THREE.MeshFaceMaterial(m)) obj.rotation.x = -1.57 obj.position.y = 100 obj.scale.set(6,6,6) app.hero = obj app.scene.add(app.hero)
  16. 16. 6/17/2014 Getting started with WebGL and Three.js file:///Users/james/Downloads/3js-2013/index.html#1 16/38 Loading A Scene loader = new THREE.SceneLoader() loader.callbackProgress = @callbackProgress loader.load( "scripts/scenes/falling-ball.js", self.callbackFinished) # Receives updates from loader callbackProgress: (progress, result) -> console.log result console.log progress # Called when finished loading callbackFinished: (result) -> app.scene = result.scene app.camera = result.cameras.Camera app.camera.lookAt(new THREE.Vector3(0,0,0))
  17. 17. 6/17/2014 Getting started with WebGL and Three.js file:///Users/james/Downloads/3js-2013/index.html#1 17/38 Three.js Editor Create primitive objects Add materials Export objects or scenes http://threejs.org/editor
  18. 18. 6/17/2014 Getting started with WebGL and Three.js file:///Users/james/Downloads/3js-2013/index.html#1 18/38 Demo
  19. 19. 6/17/2014 Getting started with WebGL and Three.js file:///Users/james/Downloads/3js-2013/index.html#1 19/38 What is GLSL? Targets the GPU and graphics pipeline High level language with C-like syntax Passed around as strings Can be generated and compiled at run-time Referred to as programs (the combination of a vertex and fragment shader)
  20. 20. 6/17/2014 Getting started with WebGL and Three.js file:///Users/james/Downloads/3js-2013/index.html#1 20/38 Vertex Shaders Run once per vertex in a mesh Can alter color, position, or texture coordinates
  21. 21. 6/17/2014 Getting started with WebGL and Three.js file:///Users/james/Downloads/3js-2013/index.html#1 21/38 Example vertex shader <script id="shader-vs" type="x-shader/x-vertex"> #ifdef GL_ES precision highp float; #endif void main(void) { gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } </script>
  22. 22. 6/17/2014 Getting started with WebGL and Three.js file:///Users/james/Downloads/3js-2013/index.html#1 22/38 Frament(Pixel) Shaders Run on every pixel in a mesh Can produce effects such as bump mapping and shadowing Only knows* about the pixel it is working on
  23. 23. 6/17/2014 Getting started with WebGL and Three.js file:///Users/james/Downloads/3js-2013/index.html#1 23/38 Example fragment shader <script id="shader-vs" type="x-shader/x-vertex"> #ifdef GL_ES precision highp float; #endif void main(void) { gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0); } </script>
  24. 24. 6/17/2014 Getting started with WebGL and Three.js file:///Users/james/Downloads/3js-2013/index.html#1 24/38 Cel (Toon) Shading uniform vec3 diffuse; //from http://www.neocomputer.org/projects/donut gl_FragColor = vec4(diffuse, 1.0); vec3 basecolor=vec3(gl_FragColor[0], gl_FragColor[1], gl_FragColor[2]); float alpha = gl_FragColor[3]; float vlf = vLightFront[0]; // Clean and simple // if (vlf< 0.50) { gl_FragColor = vec4(mix( basecolor, vec3(0.0), 0.5), alpha); } if (vlf>=0.50) { gl_FragColor = vec4(mix( basecolor, vec3(0.0), 0.3), alpha); } if (vlf>=0.75) { gl_FragColor = vec4(mix( basecolor, vec3(1.0), 0.0), alpha); } //if (vlf>=0.95) { // gl_FragColor = vec4(mix( basecolor, vec3(1.0), 0.3), alpha); } // gl_FragColor.xyz *= vLightFront;
  25. 25. 6/17/2014 Getting started with WebGL and Three.js file:///Users/james/Downloads/3js-2013/index.html#1 25/38 Shader Toy Website enabling you to play around with GLSL shaders http://www.iquilezles.org/apps/shadertoy/
  26. 26. 6/17/2014 Getting started with WebGL and Three.js file:///Users/james/Downloads/3js-2013/index.html#1 26/38 Demo
  27. 27. 6/17/2014 Getting started with WebGL and Three.js file:///Users/james/Downloads/3js-2013/index.html#1 27/38 Collision Detection Bounding Box Bounding Sphere Rays
  28. 28. 6/17/2014 Getting started with WebGL and Three.js file:///Users/james/Downloads/3js-2013/index.html#1 28/38 Physics using Physijs Integrates deeply with Three.js Built upon ammo.js https://github.com/chandlerprall/Physijs
  29. 29. 6/17/2014 Getting started with WebGL and Three.js file:///Users/james/Downloads/3js-2013/index.html#1 29/38 Sample Physijs Scene # setup Physi Physijs.scripts.worker = 'scripts/vendor/physijs/physijs_worker.js' Physijs.scripts.ammo = 'ammo.js' @scene = new Physijs.Scene() @scene.setGravity new THREE.Vector3( 0, -30, 0 ) obj = new Physijs.Mesh(rawMesh.geometry, material, mass) render: () -> @scene.simulate() @renderer.render(@scene, @camera)
  30. 30. 6/17/2014 Getting started with WebGL and Three.js file:///Users/james/Downloads/3js-2013/index.html#1 30/38 Demo
  31. 31. 6/17/2014 Getting started with WebGL and Three.js file:///Users/james/Downloads/3js-2013/index.html#1 31/38 Creating A Simple Game
  32. 32. 6/17/2014 Getting started with WebGL and Three.js file:///Users/james/Downloads/3js-2013/index.html#1 32/38 My First Computer
  33. 33. 6/17/2014 Getting started with WebGL and Three.js file:///Users/james/Downloads/3js-2013/index.html#1 33/38 My First Computer Game
  34. 34. 6/17/2014 Getting started with WebGL and Three.js file:///Users/james/Downloads/3js-2013/index.html#1 34/38 Demos
  35. 35. 6/17/2014 Getting started with WebGL and Three.js file:///Users/james/Downloads/3js-2013/index.html#1 35/38 WebGL Inspector Allows you to incrementally step through rendering View texture assets and GLSL programs Permits capturing individual frames Can be embedded or installed as a Chrome/Webkit extension Github: http://benvanik.github.com/WebGL-Inspector/
  36. 36. 6/17/2014 Getting started with WebGL and Three.js file:///Users/james/Downloads/3js-2013/index.html#1 36/38 Questions ?
  37. 37. 6/17/2014 Getting started with WebGL and Three.js file:///Users/james/Downloads/3js-2013/index.html#1 37/38 Links and Sources Adam II photo: http://www.digibarn.com/collections/systems/coleco- adam/CIMG3282.JPG Buck Rogers photo: http://telebunny.net/toastyblog/wp- content/uploads/2012/08/gsj12-buckrogers2.gif
  38. 38. 6/17/2014 Getting started with WebGL and Three.js file:///Users/james/Downloads/3js-2013/index.html#1 38/38

×