WebGL For Game Development 2012


Published on

My Talk About Building Games in WebGL, for Various Conferences This Year

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

WebGL For Game Development 2012

  1. 1. WebGL for GameDevelopmentTony Parisihttp://www.tonyparisi.com
  2. 2. About Me Serial entrepreneur Founder, stealth game startup Skybox Engine https://github.com/tparisi/Skybox Consulting architect and CTO WebGL Book Code Web3D Co-Creator, VRML and X3D https://github.com/tparisi/WebGLBook Author Contact Information tparisi@gmail.com Skype: auradeluxe http://twitter.com/auradeluxe http://www.ton yparisi.com/ Get the Book! Amazon http://www.amazon.com/dp/144932357X O’Reilly Books http://shop.oreilly.com/product/0636920024729.do
  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. 10/17/2012 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 10/17/2012 WebGL For Game Development
  5. 5. Where Does WebGL Run? Chrome, Firefox, Safari, Opera  NOT Internet Explorer iOS – iAds only Android – coverage spotty Blackberry – making big push with HTML5 platform 500M+ seats 10/17/2012 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 10/17/2012 WebGL For Game Development
  7. 7. Why Not Use WebGL For Games? Not supported in IE 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 10/17/2012 WebGL For Game Development
  8. 8. JavaScript: NOT a Reason to Not Use WebGL For GamesFrom: Brendan Eich’s The State of JavaScript 10/17/2012http://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- 10/17/2012with-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 or object model Here’s a Sample. 10/17/2012 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 10/17/2012 WebGL For Game Development
  12. 12. Choosing a Framework Open source rendering engines/frameworks  Three.js  CubicVR  SceneGL  GLGE Emerging game engines  Gladius  KickJS  Skybox Roll your own? 10/17/2012 WebGL For Game Development
  13. 13. 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. 10/17/2012 WebGL For Game Development
  14. 14. 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 10/17/2012 WebGL For Game Development
  15. 15. Drawing Graphics Primitive shapes Polygon meshes Points and lines Materials Textures Lights Transform hierarchy Shaders 10/17/2012 WebGL For Game Development
  16. 16. 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 Overall, tools and exporters still primitive 10/17/2012 WebGL For Game Development
  17. 17. 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, mater ials, lights… 10/17/2012 WebGL For Game Development
  18. 18. Implementing Interaction Mouse: DOM event handling plus Three.js picking support Keyboard handling is standard DOM 10/17/2012 WebGL For Game Development
  19. 19. 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 10/17/2012 WebGL For Game Development
  20. 20. 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 10/17/2012 WebGL For Game Development
  21. 21. Adding Sound Use new <audio> element Fairly well supported in browsers Other APIs (Moz, Chrome) not supported uniformly 10/17/2012 WebGL For Game Development
  22. 22. 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); } 10/17/2012 WebGL For Game Development
  23. 23. 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); } 10/17/2012 WebGL For Game Development
  24. 24. Putting It All Together 10/17/2012 WebGL For Game Development
  25. 25. More Stuff Physics  Box2DJS http://box2d-js.sourceforge.net/  JigLibJS2 http://brokstuk.com/jiglibjs2/  Ammo https://github.com/kripken/ammo.js/ Authoring Tools  Need help…  https://github.com/tparisi/3dsMaxWebGL Engines  Need help…  https://github.com/tparisi/Skybox Cross-compiler tools – very promising! 10/17/2012 WebGL For Game Development  http://developer.mozilla.org/en-US/demos/detail/bananabread
  26. 26. 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 lacking The real issues facing game developers  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 10/17/2012 WebGL For Game Development
  27. 27. Let’s Go~Contact Informationtparisi@gmail.comSkype: auradeluxehttp://twitter.com/auradeluxe http://www.tonyparisi.com/Get the Book!Amazonhttp://www.amazon.com/dp/144932357XO’Reilly Bookshttp://shop.oreilly.com/product/0636920024729.doSkybox Enginehttps://github.com/tparisi/SkyboxWebGL Book Codehttps://github.com/tparisi/WebGLBook