Tony Parisi is a serial entrepreneur and consultant architect who has worked on several game startups and 3D technologies. He authored a book on WebGL and provides his contact information. The document discusses what WebGL is, how it works, frameworks for building WebGL games like Three.js and Sim.js, and considerations for game development using WebGL such as loading models, animation, interaction, effects, sound, and robustness. While WebGL has limitations, the document argues it is solid for game development due to its OpenGL underpinnings and growing support in browsers and devices.

1. WebGL for Game
Development
Tony Parisi
http://www.tonyparisi.com

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. 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. 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. 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. 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. 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. JavaScript: NOT a Reason to Not
Use WebGL For Games
From: Brendan Eich’s The State of JavaScript 10/17/2012
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- 10/17/2012
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 or object model
Here’s a Sample.
10/17/2012
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
10/17/2012
WebGL For Game Development

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. 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. 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
10/17/2012
WebGL For Game Development

15. Drawing Graphics
 Primitive shapes
 Polygon meshes
 Points and lines
 Materials
 Textures
 Lights
 Transform hierarchy
 Shaders
10/17/2012
WebGL For Game Development

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. 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. Implementing Interaction
 Mouse: DOM event
handling plus Three.js
picking support
 Keyboard handling is
standard DOM
10/17/2012
WebGL For Game Development

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. 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. 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. 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. 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. Putting It All Together
10/17/2012
WebGL For Game Development

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. 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. Let’s Go~
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
Skybox Engine
https://github.com/tparisi/Skybox
WebGL Book Code
https://github.com/tparisi/WebGLBook