webgl for game development spring 2013
Post on 18-Oct-2014
12.573 Views
Preview:
DESCRIPTION
TRANSCRIPT
About Me Serial entrepreneur
Founder, stealth startup
Consulting architect and CTO
Web3D Co-Creator, VRML and X3D
Author
Contact Informationtparisi@gmail.comSkype: auradeluxehttp://twitter.com/auradeluxe http://www.tonyparisi.com/http://www.learningwebgl.com/
WebGL Book Codehttps://github.com/tparisi/WebGLBook
Get the Book!WebGL: Up and Runninghttp://shop.oreilly.com/product/0636920024729.doDiscount Code: WEBGL13 (expires 4/8/13)Print Print ISBN: 9781449323578Ebook ISBN: 9781449326500
Skybox Enginehttps://github.com/tparisi/Skybox
Pre-releaseMay 29, 2013
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
Internet Explorer rumors iOS – iAds only Android – mobile Chrome in Beta 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 (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
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; no DOM; no markup.
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
Open Source Game engines Gladius KickJS Skybox
Roll your own?
WebGL For Game Development04/07/2023
Commercial WebGL Game Engines and Tools PlayCanvas
http://www.playcanvas.com/ Turbulenz https://turbulenz.com/ Goo
http://www.gootechnologies.com/ Verold http://verold.com/ Sketchfab https://sketchfab.com/ Unreal… ?
http://www.extremetech.com/gaming/151900-unreal-engine-3-ported-to-javascript-and-webgl-works-in-any-modern-browser
Ludei http://ludei.com/(Summer 2013)
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
Potential format standard (glTF) in development by Khronos
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
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/
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 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
Let’s Go~Contact Informationtparisi@gmail.comSkype: auradeluxehttp://twitter.com/auradeluxe http://www.tonyparisi.com/http://www.learningwebgl.com/
WebGL Book Codehttps://github.com/tparisi/WebGLBook
Skybox Enginehttps://github.com/tparisi/Skybox
Get the Book!WebGL: Up and Runninghttp://shop.oreilly.com/product/0636920024729.doDiscount Code: WEBGL13 (expires 4/8/13)Print Print ISBN: 9781449323578Ebook ISBN: 9781449326500
Pre-releaseMay 29, 2013
top related