the browser as console:
HTML5 and WebGL for
game development
tony parisi
vizi, inc.
april 24, 2014
a wild web of game
development
4/24/20
14
http://www.tonyparisi.com
image:
http://www.arvindsaba.blogspot.com/
+ =
… and one
platform to
rule them
all…
4/24/20
14
http://www.tonyparisi.com
the browser as game platform
fast JavaScript virtual machines
3D rendering and hardware-accelerated compositing
animation support
Workers, WebSockets, local storage, local databases
new languages/tools: Dart, Typescript, asm.js, Emscripten
mobile-inspired features: location, touch, device orientation…
mobile platforms rapidly adopting all HTML5 features in
browsers and embedded WebView controls - near-ubiquity
4/24/20
14
http://www.tonyparisi.com
a GPU-powered web
WebGL hardware-accelerated 3D rendering
CSS 3D hardware-accelerated transforms, transitions,
and animations
4/24/20
14
http://www.tonyparisi.com
ready for prime time
4/24/20
14
http://www.tonyparisi.comhttp://www.tonyparisi.com
ported in 5 days Unreal native C++ engine -> JavaScriptEmscripten + asm.js60FPS
Unreal 4 in WebGL
https://www.youtube.com/watch?v=c2uNDlP4RiE#t=42
game engines and tools
4/24/20
14
http://www.tonyparisi.com
game engines/IDEs
Goo
Enginehttp://www.gootechnologies.c
om/
Verold http://verold.com/
Turbulenz https://turbulenz.com/
PlayCanvas
http://www.playcanvas.com/
Artillery Engine
https://artillery.com/
Sketchfab https://sketchfab.com/
Unreal
https://www.unrealengine.com/
Unity http://unity3d.com/#unity-5
scene graph libraries/page frameworks
Three.js
http://threejs.org/
SceneJS
http://scenejs.org/
BabylonJS
http://www.babylonjs.com/
Vizi
https://github.com/tparisi/Vizi
Voodoo.js
http://www.voodoojs.com/
PhiloGL
http://www.senchalabs.org/philogl/
tQuery
http://jeromeetienne.github.io/tquery/
mobile HTML5 gaming
HTML5 runs in all mobile browsers, and as embedded
WebView components in apps
WebGL is supported in most* mobile environments
* except mobile Safari - DERP! – iAds only
• Android – mobile Chrome, mobile Firefox
• Tizen, Firefox OS, Amazon FireOS (Kindle Fire HDX),
Blackberry
• Surface (Windows 8.1)
• NVIDIA Shield
CSS 3D transforms are supported in all mobile
environments
4/24/20
14
http://www.tonyparisi.com
cross-browser HTML5 and
WebGL
4/24/20
14
http://www.tonyparisi.com
hybrid app development
use CocoonJS™
http://ludei.com/
or Impact Ejecta
desktop HTML5 and
WebGL
all browsers support all
features, nearly identically
mobile WebGL
• iOS - mobile Safari – iAds only
• Android – mobile Chrome,
Firefox
• Amazon Silk, Kindle Fire OS
• Blackberry, Tizen, Firefox OS
• NVIDIA Shield
the tipping point
4/24/20
14
http://www.tonyparisi.com
Microsoft now fully supports WebGL in IE and Windows mobile.
Kindle Fire HDX: at $229, the 7” is probably the best multimedia
device deal on the planet… thanks in part to WebGL.
Sony built the whole PS4 user interface out of WebGL. 4.2M seats
in one whack… and growing.
the 2013 NORAD Tracks Santa site saw 48.8% WebGL success
across all browsers & platforms for 20M visitors, an increase of
146% over 2012.
Opera Devices SDK – WebGL coming soon to a Bang & Olufsen
TV near you!
pro game middleware (Unreal, Unity) fully on board
CSS 3D transforms are supported on all platforms
can Apple be far behind… ?
on the
frontier…
WebGL 2!
based on GL ES 3
will contain popular WebGL extensions – 3D textures, multiple
render targets, vertex array objects (VAOs), …
just getting under way – no dates yet
draft specification
http://www.khronos.org/registry/webgl/specs/latest/2.0/
Brandon Jones explains
http://blog.tojicode.com/2013/09/whats-coming-in-webgl-20.html
image: http://www.bitrebels.com
on the horizon:
total immersion
4/24/20
14
http://www.tonyparisi.com
WebGL on the Oculus Rift: Space fighter demo using Vizi + Three.js + Oculus Bridge
the browser as game
console
4/24/20
14
http://www.tonyparisi.com
an open web-based infrastructure takes gaming to a new,
totally disruptive place…
full searchability/discoverability
not dominated by “gated communities” – there is no ONE
interface to find games and people other than your browser
developers have freedom to experiment with business
models: asset stores, app stores, free to play
open technologies lower barriers to entry for new devs
open technologies represent an endless playground for
experimentation: collaborative sandbox/co-op, JavaScript
modding, new social gaming…
(some might call that place the METAVERSE…)
stay in touch…
4/24/20
14
http://www.tonyparisi.com
contact information
tony@vizi.gl
skype: auradeluxe
http://twitter.com/auradeluxe http://ww
w.tonyparisi.com/
http://www.learningwebgl.com/
get the books!
WebGL: Up and Running
http://www.amazon.com/dp/144932357X
Programming 3D Applications with HTML and WebGL
http://www.amazon.com/Programming-Applications-HTML5-
WebGL-Visualization/dp/1449362966
get Vizi
https://github.com/tparisi/Vizi
SF WebGL Meetup
http://www.meetup.com/WebGL-Developers-Meetup/
book source code
https://github.com/tparisi/WebGLBook
https://github.com/tparisi/Programming3DApplications

The Browser As Console - HTML5 and WebGL for Game Development

  • 1.
    the browser asconsole: HTML5 and WebGL for game development tony parisi vizi, inc. april 24, 2014
  • 2.
    a wild webof game development 4/24/20 14 http://www.tonyparisi.com image: http://www.arvindsaba.blogspot.com/ + =
  • 3.
    … and one platformto rule them all… 4/24/20 14 http://www.tonyparisi.com
  • 4.
    the browser asgame platform fast JavaScript virtual machines 3D rendering and hardware-accelerated compositing animation support Workers, WebSockets, local storage, local databases new languages/tools: Dart, Typescript, asm.js, Emscripten mobile-inspired features: location, touch, device orientation… mobile platforms rapidly adopting all HTML5 features in browsers and embedded WebView controls - near-ubiquity 4/24/20 14 http://www.tonyparisi.com
  • 5.
    a GPU-powered web WebGLhardware-accelerated 3D rendering CSS 3D hardware-accelerated transforms, transitions, and animations 4/24/20 14 http://www.tonyparisi.com
  • 6.
    ready for primetime 4/24/20 14 http://www.tonyparisi.comhttp://www.tonyparisi.com ported in 5 days Unreal native C++ engine -> JavaScriptEmscripten + asm.js60FPS Unreal 4 in WebGL https://www.youtube.com/watch?v=c2uNDlP4RiE#t=42
  • 7.
    game engines andtools 4/24/20 14 http://www.tonyparisi.com game engines/IDEs Goo Enginehttp://www.gootechnologies.c om/ Verold http://verold.com/ Turbulenz https://turbulenz.com/ PlayCanvas http://www.playcanvas.com/ Artillery Engine https://artillery.com/ Sketchfab https://sketchfab.com/ Unreal https://www.unrealengine.com/ Unity http://unity3d.com/#unity-5 scene graph libraries/page frameworks Three.js http://threejs.org/ SceneJS http://scenejs.org/ BabylonJS http://www.babylonjs.com/ Vizi https://github.com/tparisi/Vizi Voodoo.js http://www.voodoojs.com/ PhiloGL http://www.senchalabs.org/philogl/ tQuery http://jeromeetienne.github.io/tquery/
  • 8.
    mobile HTML5 gaming HTML5runs in all mobile browsers, and as embedded WebView components in apps WebGL is supported in most* mobile environments * except mobile Safari - DERP! – iAds only • Android – mobile Chrome, mobile Firefox • Tizen, Firefox OS, Amazon FireOS (Kindle Fire HDX), Blackberry • Surface (Windows 8.1) • NVIDIA Shield CSS 3D transforms are supported in all mobile environments 4/24/20 14 http://www.tonyparisi.com
  • 9.
    cross-browser HTML5 and WebGL 4/24/20 14 http://www.tonyparisi.com hybridapp development use CocoonJS™ http://ludei.com/ or Impact Ejecta desktop HTML5 and WebGL all browsers support all features, nearly identically mobile WebGL • iOS - mobile Safari – iAds only • Android – mobile Chrome, Firefox • Amazon Silk, Kindle Fire OS • Blackberry, Tizen, Firefox OS • NVIDIA Shield
  • 10.
    the tipping point 4/24/20 14 http://www.tonyparisi.com Microsoftnow fully supports WebGL in IE and Windows mobile. Kindle Fire HDX: at $229, the 7” is probably the best multimedia device deal on the planet… thanks in part to WebGL. Sony built the whole PS4 user interface out of WebGL. 4.2M seats in one whack… and growing. the 2013 NORAD Tracks Santa site saw 48.8% WebGL success across all browsers & platforms for 20M visitors, an increase of 146% over 2012. Opera Devices SDK – WebGL coming soon to a Bang & Olufsen TV near you! pro game middleware (Unreal, Unity) fully on board CSS 3D transforms are supported on all platforms can Apple be far behind… ?
  • 11.
    on the frontier… WebGL 2! basedon GL ES 3 will contain popular WebGL extensions – 3D textures, multiple render targets, vertex array objects (VAOs), … just getting under way – no dates yet draft specification http://www.khronos.org/registry/webgl/specs/latest/2.0/ Brandon Jones explains http://blog.tojicode.com/2013/09/whats-coming-in-webgl-20.html image: http://www.bitrebels.com
  • 12.
    on the horizon: totalimmersion 4/24/20 14 http://www.tonyparisi.com WebGL on the Oculus Rift: Space fighter demo using Vizi + Three.js + Oculus Bridge
  • 13.
    the browser asgame console 4/24/20 14 http://www.tonyparisi.com an open web-based infrastructure takes gaming to a new, totally disruptive place… full searchability/discoverability not dominated by “gated communities” – there is no ONE interface to find games and people other than your browser developers have freedom to experiment with business models: asset stores, app stores, free to play open technologies lower barriers to entry for new devs open technologies represent an endless playground for experimentation: collaborative sandbox/co-op, JavaScript modding, new social gaming… (some might call that place the METAVERSE…)
  • 14.
    stay in touch… 4/24/20 14 http://www.tonyparisi.com contactinformation tony@vizi.gl skype: auradeluxe http://twitter.com/auradeluxe http://ww w.tonyparisi.com/ http://www.learningwebgl.com/ get the books! WebGL: Up and Running http://www.amazon.com/dp/144932357X Programming 3D Applications with HTML and WebGL http://www.amazon.com/Programming-Applications-HTML5- WebGL-Visualization/dp/1449362966 get Vizi https://github.com/tparisi/Vizi SF WebGL Meetup http://www.meetup.com/WebGL-Developers-Meetup/ book source code https://github.com/tparisi/WebGLBook https://github.com/tparisi/Programming3DApplications