SlideShare a Scribd company logo
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

More Related Content

Viewers also liked

Visions i cants filigrana i naima
Visions i cants filigrana i naimaVisions i cants filigrana i naima
Visions i cants filigrana i naimadepcattor
 
Linux porting
Linux portingLinux porting
Linux portingerali007
 
Digital Technology for a Digitized Culture
Digital Technology for a Digitized CultureDigital Technology for a Digitized Culture
Digital Technology for a Digitized Culture
samanthawymes
 
firefighting12
firefighting12firefighting12
firefighting12shelby93
 
Mr Good MGD
Mr Good MGDMr Good MGD
Mr Good MGDJyeston
 
Dog pile
Dog pileDog pile
Dog pile
mcduyar
 
The right place for NFC
The right place for NFCThe right place for NFC
The right place for NFCBillingViews
 
Slactivism: Practicing your right to free speech, in the comfort of your own ...
Slactivism: Practicing your right to free speech, in the comfort of your own ...Slactivism: Practicing your right to free speech, in the comfort of your own ...
Slactivism: Practicing your right to free speech, in the comfort of your own ...
8eb23
 
Proyecto U.D. experimentales
Proyecto U.D. experimentalesProyecto U.D. experimentales
Proyecto U.D. experimentales
José María García de Prado
 
Tecnicas para tratar enfermedades respiratorias
Tecnicas para tratar enfermedades respiratoriasTecnicas para tratar enfermedades respiratorias
Tecnicas para tratar enfermedades respiratorias
Marco Loza Mendez
 
Info2011 Riva Zohar - Technion
Info2011 Riva Zohar - TechnionInfo2011 Riva Zohar - Technion
Info2011 Riva Zohar - TechnionDalia Dolev
 
Chapter 9: Claims
Chapter 9: Claims Chapter 9: Claims
Chapter 9: Claims aec111
 
Tidak ada kesalahan gramatikal dalam al quran
Tidak ada kesalahan gramatikal dalam al quranTidak ada kesalahan gramatikal dalam al quran
Tidak ada kesalahan gramatikal dalam al quranAnwar Ma'rufi
 
The digital self
The digital selfThe digital self
The digital self8jt43
 
Lilla torg
Lilla torgLilla torg
Lilla torgfalster5
 
Mi exposicion de informatica
Mi exposicion de informaticaMi exposicion de informatica
Mi exposicion de informaticaDanira Melendez
 

Viewers also liked (20)

Visions i cants filigrana i naima
Visions i cants filigrana i naimaVisions i cants filigrana i naima
Visions i cants filigrana i naima
 
Linux porting
Linux portingLinux porting
Linux porting
 
Digital Technology for a Digitized Culture
Digital Technology for a Digitized CultureDigital Technology for a Digitized Culture
Digital Technology for a Digitized Culture
 
firefighting12
firefighting12firefighting12
firefighting12
 
Mr Good MGD
Mr Good MGDMr Good MGD
Mr Good MGD
 
Dog pile
Dog pileDog pile
Dog pile
 
The right place for NFC
The right place for NFCThe right place for NFC
The right place for NFC
 
Slactivism: Practicing your right to free speech, in the comfort of your own ...
Slactivism: Practicing your right to free speech, in the comfort of your own ...Slactivism: Practicing your right to free speech, in the comfort of your own ...
Slactivism: Practicing your right to free speech, in the comfort of your own ...
 
X22686506
X22686506X22686506
X22686506
 
Proyecto U.D. experimentales
Proyecto U.D. experimentalesProyecto U.D. experimentales
Proyecto U.D. experimentales
 
Tecnicas para tratar enfermedades respiratorias
Tecnicas para tratar enfermedades respiratoriasTecnicas para tratar enfermedades respiratorias
Tecnicas para tratar enfermedades respiratorias
 
Base pdres urbano
Base pdres urbanoBase pdres urbano
Base pdres urbano
 
Info2011 Riva Zohar - Technion
Info2011 Riva Zohar - TechnionInfo2011 Riva Zohar - Technion
Info2011 Riva Zohar - Technion
 
Chapter 9: Claims
Chapter 9: Claims Chapter 9: Claims
Chapter 9: Claims
 
Tidak ada kesalahan gramatikal dalam al quran
Tidak ada kesalahan gramatikal dalam al quranTidak ada kesalahan gramatikal dalam al quran
Tidak ada kesalahan gramatikal dalam al quran
 
Bodylanguage
BodylanguageBodylanguage
Bodylanguage
 
Catalogue-Oil Cooled-Resin Cast CTs-PTs-ATS
Catalogue-Oil Cooled-Resin Cast CTs-PTs-ATSCatalogue-Oil Cooled-Resin Cast CTs-PTs-ATS
Catalogue-Oil Cooled-Resin Cast CTs-PTs-ATS
 
The digital self
The digital selfThe digital self
The digital self
 
Lilla torg
Lilla torgLilla torg
Lilla torg
 
Mi exposicion de informatica
Mi exposicion de informaticaMi exposicion de informatica
Mi exposicion de informatica
 

Similar to The Browser As Console - HTML5 and WebGL for Game Development

Foundations of the Immersive Web
Foundations of the Immersive WebFoundations of the Immersive Web
Foundations of the Immersive Web
Tony Parisi
 
Virtually Anywhere
Virtually AnywhereVirtually Anywhere
Virtually Anywhere
Tony Parisi
 
Transmission2 25.11.2009
Transmission2 25.11.2009Transmission2 25.11.2009
Transmission2 25.11.2009Patrick Lauke
 
Bruce lawson-over-the-air
Bruce lawson-over-the-airBruce lawson-over-the-air
Bruce lawson-over-the-air
brucelawson
 
Webgl 기술동향 2011.8
Webgl 기술동향 2011.8Webgl 기술동향 2011.8
Webgl 기술동향 2011.8
Seung Joon Choi
 
Minko - Why we created our own Flash platform and why you should care
Minko - Why we created our own Flash platform and why you should careMinko - Why we created our own Flash platform and why you should care
Minko - Why we created our own Flash platform and why you should careMinko3D
 
Keynote: The Immersive web
Keynote: The Immersive webKeynote: The Immersive web
Keynote: The Immersive web
Rising Media, Inc.
 
Introduction to WebVR Autodesk Forge 2016
Introduction to WebVR Autodesk Forge 2016Introduction to WebVR Autodesk Forge 2016
Introduction to WebVR Autodesk Forge 2016
Tony Parisi
 
Go mobile with Windows Phone
Go mobile with Windows PhoneGo mobile with Windows Phone
Go mobile with Windows PhoneDima Maleev
 
Go Mobile with Windows Phone
Go Mobile with Windows PhoneGo Mobile with Windows Phone
Go Mobile with Windows Phone
Yuriy Opryshko
 
Open Standards for Cross-Platform Gaming, Virtual & Augmented Reality | Neil ...
Open Standards for Cross-Platform Gaming, Virtual & Augmented Reality | Neil ...Open Standards for Cross-Platform Gaming, Virtual & Augmented Reality | Neil ...
Open Standards for Cross-Platform Gaming, Virtual & Augmented Reality | Neil ...
Jessica Tams
 
Don't touch the mobile parts
Don't touch the mobile partsDon't touch the mobile parts
Don't touch the mobile parts
Francesco Fullone
 
Building AR and VR Experiences for Web Apps with JavaScript
Building AR and VR Experiences for Web Apps with JavaScriptBuilding AR and VR Experiences for Web Apps with JavaScript
Building AR and VR Experiences for Web Apps with JavaScript
FITC
 
Seattle javascript game development - Overview
Seattle javascript game development - OverviewSeattle javascript game development - Overview
Seattle javascript game development - OverviewGrant Goodale
 
Add the power of the Web to your embedded devices with WPE WebKit
Add the power of the Web to your embedded devices with WPE WebKitAdd the power of the Web to your embedded devices with WPE WebKit
Add the power of the Web to your embedded devices with WPE WebKit
Igalia
 
HTML5 and CartoDB
HTML5 and CartoDBHTML5 and CartoDB
HTML5 and CartoDB
Simon Tokumine
 
Immersive Web
Immersive WebImmersive Web
Intro to Mobile Game Development
Intro to Mobile Game DevelopmentIntro to Mobile Game Development
Intro to Mobile Game Development
Shahed Chowdhuri
 
OWF12/PAUG Conf Days Alternative to google's android emulator, daniel fages, ...
OWF12/PAUG Conf Days Alternative to google's android emulator, daniel fages, ...OWF12/PAUG Conf Days Alternative to google's android emulator, daniel fages, ...
OWF12/PAUG Conf Days Alternative to google's android emulator, daniel fages, ...Paris Open Source Summit
 
Tools For Creating Wow Experiences In Flex
Tools For Creating Wow Experiences In FlexTools For Creating Wow Experiences In Flex
Tools For Creating Wow Experiences In Flex
Pek Pongpaet
 

Similar to The Browser As Console - HTML5 and WebGL for Game Development (20)

Foundations of the Immersive Web
Foundations of the Immersive WebFoundations of the Immersive Web
Foundations of the Immersive Web
 
Virtually Anywhere
Virtually AnywhereVirtually Anywhere
Virtually Anywhere
 
Transmission2 25.11.2009
Transmission2 25.11.2009Transmission2 25.11.2009
Transmission2 25.11.2009
 
Bruce lawson-over-the-air
Bruce lawson-over-the-airBruce lawson-over-the-air
Bruce lawson-over-the-air
 
Webgl 기술동향 2011.8
Webgl 기술동향 2011.8Webgl 기술동향 2011.8
Webgl 기술동향 2011.8
 
Minko - Why we created our own Flash platform and why you should care
Minko - Why we created our own Flash platform and why you should careMinko - Why we created our own Flash platform and why you should care
Minko - Why we created our own Flash platform and why you should care
 
Keynote: The Immersive web
Keynote: The Immersive webKeynote: The Immersive web
Keynote: The Immersive web
 
Introduction to WebVR Autodesk Forge 2016
Introduction to WebVR Autodesk Forge 2016Introduction to WebVR Autodesk Forge 2016
Introduction to WebVR Autodesk Forge 2016
 
Go mobile with Windows Phone
Go mobile with Windows PhoneGo mobile with Windows Phone
Go mobile with Windows Phone
 
Go Mobile with Windows Phone
Go Mobile with Windows PhoneGo Mobile with Windows Phone
Go Mobile with Windows Phone
 
Open Standards for Cross-Platform Gaming, Virtual & Augmented Reality | Neil ...
Open Standards for Cross-Platform Gaming, Virtual & Augmented Reality | Neil ...Open Standards for Cross-Platform Gaming, Virtual & Augmented Reality | Neil ...
Open Standards for Cross-Platform Gaming, Virtual & Augmented Reality | Neil ...
 
Don't touch the mobile parts
Don't touch the mobile partsDon't touch the mobile parts
Don't touch the mobile parts
 
Building AR and VR Experiences for Web Apps with JavaScript
Building AR and VR Experiences for Web Apps with JavaScriptBuilding AR and VR Experiences for Web Apps with JavaScript
Building AR and VR Experiences for Web Apps with JavaScript
 
Seattle javascript game development - Overview
Seattle javascript game development - OverviewSeattle javascript game development - Overview
Seattle javascript game development - Overview
 
Add the power of the Web to your embedded devices with WPE WebKit
Add the power of the Web to your embedded devices with WPE WebKitAdd the power of the Web to your embedded devices with WPE WebKit
Add the power of the Web to your embedded devices with WPE WebKit
 
HTML5 and CartoDB
HTML5 and CartoDBHTML5 and CartoDB
HTML5 and CartoDB
 
Immersive Web
Immersive WebImmersive Web
Immersive Web
 
Intro to Mobile Game Development
Intro to Mobile Game DevelopmentIntro to Mobile Game Development
Intro to Mobile Game Development
 
OWF12/PAUG Conf Days Alternative to google's android emulator, daniel fages, ...
OWF12/PAUG Conf Days Alternative to google's android emulator, daniel fages, ...OWF12/PAUG Conf Days Alternative to google's android emulator, daniel fages, ...
OWF12/PAUG Conf Days Alternative to google's android emulator, daniel fages, ...
 
Tools For Creating Wow Experiences In Flex
Tools For Creating Wow Experiences In FlexTools For Creating Wow Experiences In Flex
Tools For Creating Wow Experiences In Flex
 

More from Tony Parisi

The New Fine Arts
The New Fine ArtsThe New Fine Arts
The New Fine Arts
Tony Parisi
 
Face the Future: Computing in an Augmented World
Face the Future: Computing in an Augmented WorldFace the Future: Computing in an Augmented World
Face the Future: Computing in an Augmented World
Tony Parisi
 
Powering the VR/AR Ecosystem 2017-01-17
Powering the VR/AR Ecosystem 2017-01-17Powering the VR/AR Ecosystem 2017-01-17
Powering the VR/AR Ecosystem 2017-01-17
Tony Parisi
 
WebVR: Developing for the Immersive Web
WebVR: Developing for the Immersive WebWebVR: Developing for the Immersive Web
WebVR: Developing for the Immersive Web
Tony Parisi
 
WebVR Ecosystem and API Update
WebVR Ecosystem and API UpdateWebVR Ecosystem and API Update
WebVR Ecosystem and API Update
Tony Parisi
 
The Immersive Web
The Immersive WebThe Immersive Web
The Immersive Web
Tony Parisi
 
Virtually Anyone
Virtually AnyoneVirtually Anyone
Virtually Anyone
Tony Parisi
 
React-VR: An Early Experiment with React and WebGL for VR Development
React-VR: An Early Experiment with React and WebGL for VR DevelopmentReact-VR: An Early Experiment with React and WebGL for VR Development
React-VR: An Early Experiment with React and WebGL for VR Development
Tony Parisi
 
Vrml, or There and Back Again
Vrml, or There and Back AgainVrml, or There and Back Again
Vrml, or There and Back Again
Tony Parisi
 
The Coming Distribution War
The Coming Distribution WarThe Coming Distribution War
The Coming Distribution War
Tony Parisi
 
Browser-Based Virtual Reality April 2015
Browser-Based Virtual Reality April 2015Browser-Based Virtual Reality April 2015
Browser-Based Virtual Reality April 2015
Tony Parisi
 
VR Without Borders RIVER WebVR April 2015
VR Without Borders RIVER WebVR April 2015VR Without Borders RIVER WebVR April 2015
VR Without Borders RIVER WebVR April 2015
Tony Parisi
 
glTF and the WebGL Art Pipeline March 2015
glTF and the WebGL Art Pipeline March 2015glTF and the WebGL Art Pipeline March 2015
glTF and the WebGL Art Pipeline March 2015
Tony Parisi
 
An Introduction to Web VR January 2015
An Introduction to Web VR January 2015An Introduction to Web VR January 2015
An Introduction to Web VR January 2015
Tony Parisi
 
Up And Running With Web VR Fall 2014
Up And Running With Web VR Fall 2014Up And Running With Web VR Fall 2014
Up And Running With Web VR Fall 2014
Tony Parisi
 
The Web Eats Everything In Its Path Fall 2014
The Web Eats Everything In Its Path Fall 2014The Web Eats Everything In Its Path Fall 2014
The Web Eats Everything In Its Path Fall 2014
Tony Parisi
 
Hacking Reality: Browser-Based VR with HTML5
Hacking Reality: Browser-Based VR with HTML5Hacking Reality: Browser-Based VR with HTML5
Hacking Reality: Browser-Based VR with HTML5
Tony Parisi
 
WebGL, WebVR and the Metaverse
WebGL, WebVR and the MetaverseWebGL, WebVR and the Metaverse
WebGL, WebVR and the Metaverse
Tony Parisi
 
And Who Shall Control the Metaverse?
And Who Shall Control the Metaverse?And Who Shall Control the Metaverse?
And Who Shall Control the Metaverse?
Tony Parisi
 
WebGL Primetime!
WebGL Primetime!WebGL Primetime!
WebGL Primetime!
Tony Parisi
 

More from Tony Parisi (20)

The New Fine Arts
The New Fine ArtsThe New Fine Arts
The New Fine Arts
 
Face the Future: Computing in an Augmented World
Face the Future: Computing in an Augmented WorldFace the Future: Computing in an Augmented World
Face the Future: Computing in an Augmented World
 
Powering the VR/AR Ecosystem 2017-01-17
Powering the VR/AR Ecosystem 2017-01-17Powering the VR/AR Ecosystem 2017-01-17
Powering the VR/AR Ecosystem 2017-01-17
 
WebVR: Developing for the Immersive Web
WebVR: Developing for the Immersive WebWebVR: Developing for the Immersive Web
WebVR: Developing for the Immersive Web
 
WebVR Ecosystem and API Update
WebVR Ecosystem and API UpdateWebVR Ecosystem and API Update
WebVR Ecosystem and API Update
 
The Immersive Web
The Immersive WebThe Immersive Web
The Immersive Web
 
Virtually Anyone
Virtually AnyoneVirtually Anyone
Virtually Anyone
 
React-VR: An Early Experiment with React and WebGL for VR Development
React-VR: An Early Experiment with React and WebGL for VR DevelopmentReact-VR: An Early Experiment with React and WebGL for VR Development
React-VR: An Early Experiment with React and WebGL for VR Development
 
Vrml, or There and Back Again
Vrml, or There and Back AgainVrml, or There and Back Again
Vrml, or There and Back Again
 
The Coming Distribution War
The Coming Distribution WarThe Coming Distribution War
The Coming Distribution War
 
Browser-Based Virtual Reality April 2015
Browser-Based Virtual Reality April 2015Browser-Based Virtual Reality April 2015
Browser-Based Virtual Reality April 2015
 
VR Without Borders RIVER WebVR April 2015
VR Without Borders RIVER WebVR April 2015VR Without Borders RIVER WebVR April 2015
VR Without Borders RIVER WebVR April 2015
 
glTF and the WebGL Art Pipeline March 2015
glTF and the WebGL Art Pipeline March 2015glTF and the WebGL Art Pipeline March 2015
glTF and the WebGL Art Pipeline March 2015
 
An Introduction to Web VR January 2015
An Introduction to Web VR January 2015An Introduction to Web VR January 2015
An Introduction to Web VR January 2015
 
Up And Running With Web VR Fall 2014
Up And Running With Web VR Fall 2014Up And Running With Web VR Fall 2014
Up And Running With Web VR Fall 2014
 
The Web Eats Everything In Its Path Fall 2014
The Web Eats Everything In Its Path Fall 2014The Web Eats Everything In Its Path Fall 2014
The Web Eats Everything In Its Path Fall 2014
 
Hacking Reality: Browser-Based VR with HTML5
Hacking Reality: Browser-Based VR with HTML5Hacking Reality: Browser-Based VR with HTML5
Hacking Reality: Browser-Based VR with HTML5
 
WebGL, WebVR and the Metaverse
WebGL, WebVR and the MetaverseWebGL, WebVR and the Metaverse
WebGL, WebVR and the Metaverse
 
And Who Shall Control the Metaverse?
And Who Shall Control the Metaverse?And Who Shall Control the Metaverse?
And Who Shall Control the Metaverse?
 
WebGL Primetime!
WebGL Primetime!WebGL Primetime!
WebGL Primetime!
 

Recently uploaded

How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...
Product School
 
Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*
Frank van Harmelen
 
The Future of Platform Engineering
The Future of Platform EngineeringThe Future of Platform Engineering
The Future of Platform Engineering
Jemma Hussein Allen
 
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 previewState of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
Prayukth K V
 
UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3
DianaGray10
 
Designing Great Products: The Power of Design and Leadership by Chief Designe...
Designing Great Products: The Power of Design and Leadership by Chief Designe...Designing Great Products: The Power of Design and Leadership by Chief Designe...
Designing Great Products: The Power of Design and Leadership by Chief Designe...
Product School
 
Assuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyesAssuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyes
ThousandEyes
 
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdfFIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance
 
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
Product School
 
PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)
Ralf Eggert
 
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Tobias Schneck
 
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
BookNet Canada
 
Connector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a buttonConnector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a button
DianaGray10
 
Essentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with ParametersEssentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with Parameters
Safe Software
 
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdfFIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance
 
Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........
Alison B. Lowndes
 
Leading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdfLeading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdf
OnBoard
 
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Thierry Lestable
 
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
Product School
 
When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...
Elena Simperl
 

Recently uploaded (20)

How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...
 
Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*
 
The Future of Platform Engineering
The Future of Platform EngineeringThe Future of Platform Engineering
The Future of Platform Engineering
 
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 previewState of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
 
UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3
 
Designing Great Products: The Power of Design and Leadership by Chief Designe...
Designing Great Products: The Power of Design and Leadership by Chief Designe...Designing Great Products: The Power of Design and Leadership by Chief Designe...
Designing Great Products: The Power of Design and Leadership by Chief Designe...
 
Assuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyesAssuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyes
 
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdfFIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdf
 
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
 
PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)
 
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
 
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
 
Connector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a buttonConnector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a button
 
Essentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with ParametersEssentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with Parameters
 
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdfFIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
 
Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........
 
Leading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdfLeading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdf
 
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
 
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
 
When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...
 

The Browser As Console - HTML5 and WebGL for Game Development

  • 1. the browser as console: HTML5 and WebGL for game development tony parisi vizi, inc. april 24, 2014
  • 2. a wild web of game development 4/24/20 14 http://www.tonyparisi.com image: http://www.arvindsaba.blogspot.com/ + =
  • 3. … and one platform to rule them all… 4/24/20 14 http://www.tonyparisi.com
  • 4. 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
  • 5. 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
  • 6. 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
  • 7. 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/
  • 8. 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
  • 9. 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
  • 10. 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… ?
  • 11. 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
  • 12. 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
  • 13. 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…)
  • 14. 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