webgl for game development 2012
Post on 18-Oct-2014
2.765 views
DESCRIPTION
My Talk About Building Games in WebGL, for Various Conferences This YearTRANSCRIPT
About Me Serial entrepreneur
Founder, stealth game startup
Consulting architect and CTO
Web3D Co-Creator, VRML and X3D
Author
Contact [email protected]: auradeluxehttp://twitter.com/auradeluxe http://www.tonyparisi.com/
WebGL Book Codehttps://github.com/tparisi/WebGLBook
Get the Book!Amazonhttp://www.amazon.com/dp/144932357XO’Reilly Bookshttp://shop.oreilly.com/product/0636920024729.do
Skybox Enginehttps://github.com/tparisi/Skybox
WebGL For Game Development04/07/2023
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.
WebGL For Game Development04/07/2023
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 makersSolid, stable set of core contributorsSerious conformance effort
WebGL For Game Development04/07/2023
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
WebGL For Game Development04/07/2023
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
WebGL For Game Development04/07/2023
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
WebGL For Game Development04/07/2023From: Brendan Eich’s The State of JavaScript
http://brendaneich.github.com/Strange-Loop-2012/#/
JavaScript: NOT a Reason to Not Use WebGL For Games
WebGL For Game Development04/07/2023
Don’t Believe Me? Check This Out
Brandon Jones’ Bloghttp://blog.tojicode.com/2011/05/ios-rage-rendered-with-webgl.html
WebGL For Game Development04/07/2023
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.
WebGL For Game Development04/07/2023
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
WebGL For Game Development04/07/2023
Choosing a Framework Open source rendering engines/frameworks
Three.js CubicVR SceneGL GLGE
Emerging game engines Gladius KickJS Skybox
Roll your own?
WebGL For Game Development04/07/2023
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.
WebGL For Game Development04/07/2023
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
WebGL For Game Development04/07/2023
Drawing Graphics Primitive shapes Polygon meshes Points and lines Materials Textures Lights Transform hierarchy Shaders
WebGL For Game Development04/07/2023
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
WebGL For Game Development04/07/2023
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…
WebGL For Game Development04/07/2023
Implementing Interaction Mouse: DOM event
handling plus Three.js picking support
Keyboard handling is standard DOM
WebGL For Game Development04/07/2023
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
WebGL For Game Development04/07/2023
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
WebGL For Game Development04/07/2023
Adding Sound Use new <audio> element Fairly well supported in
browsers Other APIs (Moz, Chrome) not
supported uniformly
WebGL For Game Development04/07/2023
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);}
WebGL For Game Development04/07/2023
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);}
WebGL For Game Development04/07/2023
Putting It All Together
WebGL For Game Development04/07/2023
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! http://developer.mozilla.org/en-US/demos/detail/bananabread
WebGL For Game Development04/07/2023
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
Let’s Go~Contact [email protected]: auradeluxehttp://twitter.com/auradeluxe http://www.tonyparisi.com/
WebGL Book Codehttps://github.com/tparisi/WebGLBook
Get the Book!Amazonhttp://www.amazon.com/dp/144932357XO’Reilly Bookshttp://shop.oreilly.com/product/0636920024729.do
Skybox Enginehttps://github.com/tparisi/Skybox