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.

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

WebGL For Game Development 2012

  1. 1. WebGL for GameDevelopmentTony Parisi
  2. 2. About Me Serial entrepreneur Founder, stealth game startup Skybox Engine Consulting architect and CTO WebGL Book Code Web3D Co-Creator, VRML and X3D Author Contact Information Skype: auradeluxe http://www.ton Get the Book! Amazon O’Reilly Books
  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 Group 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/2012 WebGL For Game Development
  9. 9. Don’t Believe Me? Check ThisOutBrandon Jones’ Blog 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 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 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  JigLibJS2  Ammo Authoring Tools  Need help…  Engines  Need help…  Cross-compiler tools – very promising! 10/17/2012 WebGL For Game Development 
  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 (  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: auradeluxe the Book!Amazon’Reilly Books Engine Book Code