Foundations of the Immersive Web

Tony ParisiApril 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 Immersive Web

“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

Foundations

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 framevrDisplay.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

Tony ParisiApril 28, 2016