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