My talk at HTML5 Dev Conf April 2013

1. WebGL for Game
Development
Tony Parisi
http://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/WebGLBook
Contact Information
tparisi@gmail.com
Skype: auradeluxe
http://twitter.com/auradeluxe htt
p://www.tonyparisi.com/
http://www.learningwebgl.com/
Get the Book!
WebGL: Up and Running
http://shop.oreilly.com/product/0636920024729.do Pre-release
May 29, 2013
Discount Code: WEBGL13 (expires 4/8/13)
Print Print ISBN: 9781449323578
Ebook 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 Games
From: Brendan Eich’s The State of JavaScript 4/2/2013
http://brendaneich.github.com/Strange-Loop-2012/#/ WebGL For Game Development

9. Don’t Believe Me? Check This
Out
Brandon Jones’ Blog
http://blog.tojicode.com/2011/05/ios-rage-rendered- 4/2/2013
with-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 Game
Engines 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 Simulation
Framework 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 Information
tparisi@gmail.com
Skype: auradeluxe
http://twitter.com/auradeluxe http://www.tonyparisi.
com/
http://www.learningwebgl.com/
Get the Book!
WebGL: Up and Running
http://shop.oreilly.com/product/0636920024729.do
Discount Code: WEBGL13 (expires 4/8/13)
Print Print ISBN: 9781449323578
Ebook ISBN: 9781449326500
Skybox Engine Pre-release
May 29, 2013
https://github.com/tparisi/Skybox
WebGL Book Code
https://github.com/tparisi/WebGLBook