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 GameDevelopmentTony Parisihttp://www.tonyparisi.com
About Me Serial entrepreneur Founder, stealth game startup                                  Skybox Engine               ...
What is WebGL? The new 3D API standard     OpenGL ES™ in a browser     JavaScript API bindings     Supported in nearly...
Who Controls WebGL? Part of the HTML5 family of technologies   …not really.   …well, really. Standard maintained by Kh...
Where Does WebGL Run? Chrome, Firefox, Safari, Opera   NOT Internet Explorer iOS – iAds only Android – coverage spotty...
Why Use WebGL for Games? Rich internet experiences with true hardware-accelerated 3D No download Complete integration w...
Why Not Use WebGL For Games? Not supported in IE Not turned on by default in Safari Limited iOS General performance is...
JavaScript: NOT a Reason to Not Use WebGL For GamesFrom: Brendan Eich’s The State of JavaScript                           ...
Don’t Believe Me? Check ThisOutBrandon Jones’ Bloghttp://blog.tojicode.com/2011/05/ios-rage-rendered-                     ...
How WebGL Works It’s a JavaScript drawing API   Draw to a canvas element using a special context   Low-Level drawing – ...
Building a Game Choosing a framework Drawing graphics Loading models Building a particle system Animation Interactio...
Choosing a Framework Open source rendering engines/frameworks     Three.js     CubicVR     SceneGL     GLGE Emerging...
Three.js – A JavaScript 3D Engine Renders to 3D WebGL or 2D standard canvas Represents WebGL at a high level using stand...
Sim.js – A Simple SimulationFramework for WebGL/Three.js Wraps common Three.js setup, teardown and handling Implements t...
Drawing Graphics Primitive shapes Polygon meshes Points and lines Materials Textures Lights Transform hierarchy Sh...
Loading Models WebGL has no built-in file  format   Most formats are engine-    specific   Many WebGL frameworks    sup...
Animating The Scene WebGL has no built-in  animation support Three.js has some  animation utilities   Key frames   Ski...
Implementing Interaction Mouse: DOM event  handling plus Three.js  picking support Keyboard handling is  standard DOM   ...
Creating Effects –a Particle System Three.js has a basic built-in  particle system But it’s very basic: no emitters  or ...
Integrating 2D and 3D WebGL’s secret weapon   Breaks down window    boundaries   2D overlaid on 3D   3D overlaid on 2D...
Adding Sound Use new <audio> element Fairly well supported in  browsers Other APIs (Moz, Chrome) not  supported uniform...
Making It Robust Detecting WebGL support in the browser var canvas = document.createElement("canvas"); var gl = null; var...
Making It Robust Detecting a lost context  RacingGame.prototype.handleContextLost = function(e)  {             this.resta...
Putting It All Together                                            10/17/2012                          WebGL For Game Deve...
More Stuff Physics   Box2DJS http://box2d-js.sourceforge.net/   JigLibJS2 http://brokstuk.com/jiglibjs2/   Ammo https:...
The Bottom Line WebGL is solid for developing games      OpenGL ES under the hood (it’s what’s running on your phone and...
Let’s Go~Contact Informationtparisi@gmail.comSkype: auradeluxehttp://twitter.com/auradeluxe          http://www.tonyparisi...
Upcoming SlideShare
Loading in …5
×

WebGL For Game Development 2012

2,612 views

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 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

×