WebGL For Game Development 2012

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Drawing Graphics
 Primitive shapes
 Polygon meshes
 Points and lines
 Materials
 Textures
 Lights
 Transform hierarchy
 Shaders

10/17/2012

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

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

Implementing Interaction
 Mouse: DOM event
handling plus Three.js
picking support
 Keyboard handling is
standard DOM

10/17/2012

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

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

Adding Sound
 Use new <audio> element
 Fairly well supported in
browsers
 Other APIs (Moz, Chrome) not
supported uniformly

10/17/2012

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

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

Putting It All Together

10/17/2012

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
 http://developer.mozilla.org/en-US/demos/detail/bananabread

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

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

WebGL For Game Development 2012

More Related Content

What's hot

Viewers also liked

Similar to WebGL For Game Development 2012

More from Tony Parisi

Recently uploaded

WebGL For Game Development 2012