Foundations of the Immersive Web

Foundations of the
Immersive Web
Tony Parisi
April 28, 2016

About me
get GLAM
http://www.glamjs.org/
meetups
http://www.meetup.com/WebGL-Developers-Meetup/
http://www.meetup.com/Web-VR/
creds
Co-creator, VRML and X3D
Designer and Spec Editor, glTF
get the books!
Learning Virtual Reality
Programming 3D Applications with HTML and WebGL
WebGL: Up and Running
http://www.amazon.com/-/e/B008UZ888I
Tony Parisi
is VP of Web and Open Technologies
at Wevr
tony@wevr.com
+1 (415) 902 8002
@auradeluxe
http://www.tonyparisi.com/
advice
http://www.rothenbergventures.com
http://www.uploadvr.com
http://www.highfidelity.io
http://www.shiift.world/

The Next Platform
VR and AR will become
the predominant way that
we work, play, transact and
communicate using digital
technologies.
Billions invested
2020 market projections range
from $14B to $120B

Q: How do VR and AR reach 5B users by 2020?
A: Not one app at a time.

Friction
Downloads/installs
Controlled distribution
Limited business models
Silo experiences
Proprietary development
Closed culture
Experts only

The Metaverse is too big of
an idea…
for an app store.

http://commonspace.wordpress.com/2014/03/12/happybirthday/
The World Wide Web
No downloads - no friction
Instant sharing - post a link
Freedom of choice - no gatekeepers
Culture of collaboration
Instant publishing
Runs everywhere

Q: But didn’t mobile kill the web?
“Superapplications”
your everyday mobile apps are
based on web tech and
standard formats
A: Nope; just merged with it and made it bigger.
HTML
mobile browsers are now
fast, fun and feature-rich

The Web Eats Everything in Its Path
√ Graphics
√ Animation
√ Location
√ Motion Input
√ Real-Time 3D
√ Camera
√ Messaging
√ Real-Time Messaging
√ IOT/Wearables
√ Robotics

There are 3 million mobile apps.
There are 1 BILLION web sites.

“The web is the Metaverse… just with a 2D interface”
-- Vladimir Vukićević, creator of WebGL and Mozilla VR Lead

No Friction
See link, clink link, go
Shareable, searchable,
discoverable

Total Immersion
Image: http://cordonmedia.com/
Browse and communicate
in 3D
Endless information within
our grasp
The ultimate dope for a
dopamine culture

Web Scale
Advertising
Digital marketing
E-commerce
Social media
Long tail content and
apps

Built on Standards
Universal playback engine aka “VR browser”
Standard formats and APIs for 3D graphics
and 360 VR video
Free, open source tools
Collaborative effort

The 3D Rendering Standard
Runs on all desktop and mobile
browsers
3B seats!

Cardboard VR
and Mobile Browsers
Works today.
Just render side-by-side
using WebGL and pop it
into a Carboard viewer.

WebVR
Quake 3 WebVR demo, developed by Brandon
Jones of Google
http://media.tojicode.com/q3bsp/
Multi-vendor effort to define new
browser API and features
Head tracking and fullscreen
stereo VR mode
Desktop and mobile

The API (1)
var self = this;
var vrDisplay;
navigator.getVRDisplays().then( gotVRDisplays );
function gotVRDisplays ( displays ) {
if (displays.length > 0) {
vrDisplay = displays[0];
self.left = vrDisplay.getEyeParameters( "left" );
self.right = vrDisplay.getEyeParameters( "right" );
self.vrDisplay = vrDisplay;
}
}
Enumerate available VR devices
Get left/right eye (camera) information:
horizontal offset, field of view, viewport width.
We’ll use WebGL to render the scene from two cameras
Query for
available
VR Displays

The API (2)
someButton.addEventListener(’click', onStartPresent);
function onStartPresent () {
vrDisplay.requestPresent({ source : webGLCanvas });
}
VR presentation must be
initiated by user action e.g.
mouse click
The WebGL canvas contains the rendered content
to be presented on the VR display
Set up to present
to the VR Display

The API (3)
WebVR introduces a new version of
requestAnimationFrame() specifically
for VR devices, making >60FPS rendering
possible!
Render Get HMD
position/orientation
Render scene
once for each eye
vrDisplay.requestAnimationFrame(runloop);
function runloop() {
// set up for the next frame
vrDisplay.requestAnimationFrame(runloop);
// render the content
var pose = vrDisplay.getPose();
if (vrDisplay.isPresenting) {
renderScene(pose, "left”);
renderScene(pose, ”right"));
}
vrDisplay.submitFrame(pose);
}
Submit
rendered frame

WebVR Development Status
Developer builds of Chrome, Firefox (desktop and mobile)
Samsung Internet browser for Gear VR!
WebVR 1.0 API - preliminary spec
http://mozvr.github.io/webvr-spec/
W3C Community Group
https://www.w3.org/community/webvr/

The Ecosystem
Frameworks
JavaScript libraries
Markup systems
Polyfills
Formats
The “JPEG of 3D”
Tools
Unity, Unreal export
Browser-based VR creation
<glam>
<scene>
<cube id="photocube”></cube>
</scene>
</glam>
#photocube {
image:url(../images/photo.png);
}

VR
Superapplications
Native apps use
embedded browser tech,
standard VR formats and APIs
AltSpaceVR
Social VR application uses WebGL
for content creation
Wevr Transport
Distribution network - access
videos, apps, web content

From here to the Metaverse
Current WebVR-enabled browsers are just a first step
Browser UI was designed for old paradigms; time to reinvent
WebGL not optimized for VR; might need additional high-level
graphics APIs
Will need standardized 6DOF, motion, voice inputs
VR/AR use cases will likely drive new network protocols
Browers and app stores will coexist, just like with desktop and mobile

One Platform.
Billions of Seats.

Foundations of the Immersive Web

More Related Content

What's hot

Viewers also liked

Similar to Foundations of the Immersive Web

More from Tony Parisi

Recently uploaded

Foundations of the Immersive Web