Your SlideShare is downloading. ×
  • Like
WebGL For Game Development Spring 2013
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

WebGL For Game Development Spring 2013

  • 12,345 views
Published

My talk at HTML5 Dev Conf April 2013

My talk at HTML5 Dev Conf April 2013

Published in Economy & Finance
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
12,345
On SlideShare
0
From Embeds
0
Number of Embeds
12

Actions

Shares
Downloads
77
Comments
1
Likes
5

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. WebGL for GameDevelopmentTony Parisihttp://www.tonyparisi.com
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Drawing Graphics Primitive shapes Polygon meshes Points and lines Materials Textures Lights Transform hierarchy Shaders 4/2/2013 WebGL For Game Development
  • 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. 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. Implementing Interaction Mouse: DOM event handling plus Three.js picking support Keyboard handling is standard DOM 4/2/2013 WebGL For Game Development
  • 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. 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. 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. 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. 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. Putting It All Together 4/2/2013 WebGL For Game Development
  • 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. 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. 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