the browser as console - html5 and webgl for game development

the browser as console:

HTML5 and WebGL for game

developmenttony parisi

vizi, inc.april 24, 2014

04/10/2023

http://www.tonyparisi.com

a wild web of game development

image: http://www.arvindsaba.blogspot.com/

+ =

04/10/2023

http://www.tonyparisi.com

… and one platform to rule them

all…

04/10/2023

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

04/10/2023

http://www.tonyparisi.com

a GPU-powered web

WebGL hardware-accelerated 3D rendering

CSS 3D hardware-accelerated transforms, transitions, and animations

04/10/2023

http://www.tonyparisi.com

ready for prime time

http://www.tonyparisi.com

ported in 5 daysUnreal native C++ engine -> JavaScriptEmscripten + asm.js60FPS

Unreal 4 in WebGLhttps://www.youtube.com/watch?v=c2uNDlP4RiE#t=42

04/10/2023

game engines and tools

http://www.tonyparisi.com

game engines/IDEs

Goo Enginehttp://www.gootechnologies.com/

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/

04/10/2023

http://www.tonyparisi.com

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

04/10/2023

http://www.tonyparisi.com

cross-browser HTML5 and WebGL

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

04/10/2023

http://www.tonyparisi.com

the tipping point

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

04/10/2023

http://www.tonyparisi.com

on the horizon:total immersion

WebGL on the Oculus Rift: Space fighter demo using Vizi + Three.js + Oculus Bridge

04/10/2023

http://www.tonyparisi.com

the browser as game console

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…)

04/10/2023

http://www.tonyparisi.com

stay in touch…

contact informationtony@vizi.glskype: auradeluxehttp://twitter.com/auradeluxe                   http://www.tonyparisi.com/http://www.learningwebgl.com/

get the books!WebGL: Up and Runninghttp://www.amazon.com/dp/144932357XProgramming 3D Applications with HTML and WebGLhttp://www.amazon.com/Programming-Applications-HTML5-WebGL-Visualization/dp/1449362966

get Vizihttps://github.com/tparisi/Vizi

SF WebGL Meetuphttp://www.meetup.com/WebGL-Developers-Meetup/

book source codehttps://github.com/tparisi/WebGLBook

https://github.com/tparisi/Programming3DApplications