WebGL For Game Development Spring 2013

13,981 views

Published on

My talk at HTML5 Dev Conf April 2013

Published in: Economy & Finance

WebGL For Game Development Spring 2013

  1. 1. WebGL for GameDevelopmentTony Parisihttp://www.tonyparisi.com
  2. 2. About Me Serial entrepreneur Founder, stealth startup Skybox Engine Consulting architect and CTO https://github.com/tparisi/Skybox Web3D Co-Creator, VRML and X3D WebGL Book Code Author https://github.com/tparisi/WebGLBookContact Informationtparisi@gmail.comSkype: auradeluxehttp://twitter.com/auradeluxe http://www.tonyparisi.com/http://www.learningwebgl.com/Get the Book!WebGL: Up and Runninghttp://shop.oreilly.com/product/0636920024729.do Pre-release May 29, 2013Discount Code: WEBGL13 (expires 4/8/13)Print Print ISBN: 9781449323578Ebook ISBN: 9781449326500
  3. 3. What is WebGL? The new 3D API standard  OpenGL ES™ in a browser  JavaScript API bindings  Supported in nearly all modern browsers  Supported on many devices  Shipped since early 2011 …and it’s Awesome. 4/2/2013 WebGL For Game Development
  4. 4. Who Controls WebGL? Part of the HTML5 family of technologies  …not really.  …well, really. Standard maintained by Khronos Grouphttp://www.khronos.org Major browser and system makers Solid, stable set of core contributors Serious conformance effort 4/2/2013 WebGL For Game Development
  5. 5. Where Does WebGL Run? Chrome, Firefox, Safari, Opera  Internet Explorer rumors iOS – iAds only Android – mobile Chrome in Beta Blackberry – making big push with HTML5 platform 500M+ seats 4/2/2013 WebGL For Game Development
  6. 6. Why Use WebGL for Games? Rich internet experiences with true hardware-accelerated 3D No download Complete integration with page elements – use HTML5 for all your game UI (Mostly) cross-platform Rapid development Performance – it’s faster than 2D canvas Royalty-free - no licensing issues 4/2/2013 WebGL For Game Development
  7. 7. Why Not Use WebGL For Games? Not supported in IE (yet) Not turned on by default in Safari Limited iOS General performance issues with mobile browser-based games  Cross-platform and performance issues could be mitigated with a hybrid Native/JS strategy using libraries like AppMobi, Ludei Engines and tools still a mishmash 4/2/2013 WebGL For Game Development
  8. 8. JavaScript: NOT a Reason to Not Use WebGL For GamesFrom: Brendan Eich’s The State of JavaScript 4/2/2013http://brendaneich.github.com/Strange-Loop-2012/#/ WebGL For Game Development
  9. 9. Don’t Believe Me? Check ThisOutBrandon Jones’ Bloghttp://blog.tojicode.com/2011/05/ios-rage-rendered- 4/2/2013with-webgl.html WebGL For Game Development
  10. 10. How WebGL Works It’s a JavaScript drawing API  Draw to a canvas element using a special context  Low-Level drawing – buffers, primitives, textures and shaders There is no file format; no DOM; no markup. Here’s a Sample. 4/2/2013 WebGL For Game Development
  11. 11. Building a Game Choosing a framework Drawing graphics Loading models Building a particle system Animation Interaction Integrating 2D and 3D Adding sound Making it robust Putting it all together 4/2/2013 WebGL For Game Development
  12. 12. Choosing a Framework Open source rendering engines/frameworks  Three.js  CubicVR  SceneGL  GLGE Open Source Game engines  Gladius  KickJS  Skybox Roll your own? 4/2/2013 WebGL For Game Development
  13. 13. Commercial WebGL GameEngines and Tools PlayCanvas http://www.playcanvas.com/ Ludei http://ludei.com/ Turbulenz https://turbulenz.com/ (Summer 2013) Goo http://www.gootechnologies.com/ Verold http://verold.com/ Sketchfab https://sketchfab.com/ Unreal… ? http://www.extremetech.com/gaming/1 51900-unreal-engine-3-ported-to- javascript-and-webgl-works-in-any- modern-browser 4/2/2013 WebGL For Game Development
  14. 14. Three.js – A JavaScript 3D Engine Renders to 3D WebGL or 2D standard canvas Represents WebGL at a high level using standard 3D graphics concepts Feature rich Fast, robust, well maintained It’s a library, not a game engine, not a framework https://github.com/mrdoob/three.js/ Here’ s That Square Again. 4/2/2013 WebGL For Game Development
  15. 15. Sim.js – A Simple SimulationFramework for WebGL/Three.js Wraps common Three.js setup, teardown and handling Implements the run loop  Uses requestAnimationFrame() (vs. setTimeout()) Adds handlers for mouse and keyboard DOM events Provides foundation objects (Application, Base object and PubSub) Handles WebGL detection and context lost events https://github.com/tparisi/Sim.js 4/2/2013 WebGL For Game Development
  16. 16. Drawing Graphics Primitive shapes Polygon meshes Points and lines Materials Textures Lights Transform hierarchy Shaders 4/2/2013 WebGL For Game Development
  17. 17. Loading Models WebGL has no built-in file format  Most formats are engine- specific  Many WebGL frameworks support COLLADA Three.js has JSON format with blender exporter, OBJ file converter Potential format standard (glTF) in development by Khronos Overall, tools and exporters still primitive 4/2/2013 WebGL For Game Development
  18. 18. Animating The Scene WebGL has no built-in animation support Three.js has some animation utilities  Key frames  Skins  Morphs With JavaScript, we can build our own anyway Animate anything: transforms, textures, materials, lights… 4/2/2013 WebGL For Game Development
  19. 19. Implementing Interaction Mouse: DOM event handling plus Three.js picking support Keyboard handling is standard DOM 4/2/2013 WebGL For Game Development
  20. 20. Creating Effects –a Particle System Three.js has a basic built-in particle system But it’s very basic: no emitters or physics models You have to animate it all yourself 4/2/2013 WebGL For Game Development
  21. 21. Integrating 2D and 3D WebGL’s secret weapon  Breaks down window boundaries  2D overlaid on 3D  3D overlaid on 2D  Canvas2D as a texture  Video as a texture 4/2/2013 WebGL For Game Development
  22. 22. Adding Sound Use new <audio> element Fairly well supported in browsers Other APIs (Moz, Chrome) not supported uniformly 4/2/2013 WebGL For Game Development
  23. 23. Making It Robust Detecting WebGL support in the browser var canvas = document.createElement("canvas"); var gl = null; var msg = "Your browser does not support WebGL."; try { gl = canvas.getContext("experimental-webgl"); } catch (e) { msg = "Error creating WebGL Context!: " + e.toString(); } if (!gl) { throw new Error(msg); } 4/2/2013 WebGL For Game Development
  24. 24. Making It Robust Detecting a lost context RacingGame.prototype.handleContextLost = function(e) { this.restart(); } RacingGame.prototype.addContextListener = function() { var that = this; this.renderer.domElement.addEventListener("webglcontextlost", function(e) { that.handleContextLost(e); }, false); } 4/2/2013 WebGL For Game Development
  25. 25. Putting It All Together 4/2/2013 WebGL For Game Development
  26. 26. Related Efforts Physics  Box2DJS http://box2d-js.sourceforge.net/  JigLibJS2 http://brokstuk.com/jiglibjs2/  Ammo https://github.com/kripken/ammo.js/ Content Pipeline/File Formats  glTF https://github.com/KhronosGroup/glTF Emscripten – C/C++(LLVM) to JavaScript generator  http://emscripten.org  http://developer.mozilla.org/en-US/demos/detail/bananabread asm.js – Fast JavaScript subset  http://asmjs.org/ 4/2/2013 WebGL For Game Development
  27. 27. The Bottom Line WebGL is solid for developing games  OpenGL ES under the hood (it’s what’s running on your phone and tablet)  Huge development, testing and conformance effort by browser writers  Strong standards group maintaining it (www.khronos.org)  In most browsers and growing number of devices A few enhancements will help  Transferables, built-in matrices Production capability is still very crude  Tools and frameworks are young and evolving  Export from pro tools a bit shaky The real issues facing game developers  Still not ubiquitous on mobile  The JavaScript runtime is garbage-y, must take great care  Device input – mouse lock API coming  Audio and video API chaos  Formats and delivery - streaming, compression, binary 4/2/2013 WebGL For Game Development
  28. 28. Let’s Go~Contact Informationtparisi@gmail.comSkype: auradeluxehttp://twitter.com/auradeluxe http://www.tonyparisi.com/http://www.learningwebgl.com/Get the Book!WebGL: Up and Runninghttp://shop.oreilly.com/product/0636920024729.doDiscount Code: WEBGL13 (expires 4/8/13)Print Print ISBN: 9781449323578Ebook ISBN: 9781449326500Skybox Engine Pre-release May 29, 2013https://github.com/tparisi/SkyboxWebGL Book Codehttps://github.com/tparisi/WebGLBook

×