foundations of the immersive web
TRANSCRIPT
![Page 1: Foundations of the Immersive Web](https://reader034.vdocuments.site/reader034/viewer/2022051318/58ed14ed1a28ab32188b4645/html5/thumbnails/1.jpg)
Foundations of the Immersive Web
Tony ParisiApril 28, 2016
![Page 2: Foundations of the Immersive Web](https://reader034.vdocuments.site/reader034/viewer/2022051318/58ed14ed1a28ab32188b4645/html5/thumbnails/2.jpg)
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 [email protected] +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/
![Page 3: Foundations of the Immersive Web](https://reader034.vdocuments.site/reader034/viewer/2022051318/58ed14ed1a28ab32188b4645/html5/thumbnails/3.jpg)
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
![Page 4: Foundations of the Immersive Web](https://reader034.vdocuments.site/reader034/viewer/2022051318/58ed14ed1a28ab32188b4645/html5/thumbnails/4.jpg)
Q: How do VR and AR reach 5B users by 2020? A: Not one app at a time.
![Page 5: Foundations of the Immersive Web](https://reader034.vdocuments.site/reader034/viewer/2022051318/58ed14ed1a28ab32188b4645/html5/thumbnails/5.jpg)
Friction Downloads/installs Controlled distribution Limited business models Silo experiences Proprietary development Closed culture Experts only
![Page 6: Foundations of the Immersive Web](https://reader034.vdocuments.site/reader034/viewer/2022051318/58ed14ed1a28ab32188b4645/html5/thumbnails/6.jpg)
The Metaverse is too big of an idea…
for an app store.
![Page 7: Foundations of the Immersive Web](https://reader034.vdocuments.site/reader034/viewer/2022051318/58ed14ed1a28ab32188b4645/html5/thumbnails/7.jpg)
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
![Page 8: Foundations of the Immersive Web](https://reader034.vdocuments.site/reader034/viewer/2022051318/58ed14ed1a28ab32188b4645/html5/thumbnails/8.jpg)
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
![Page 9: Foundations of the Immersive Web](https://reader034.vdocuments.site/reader034/viewer/2022051318/58ed14ed1a28ab32188b4645/html5/thumbnails/9.jpg)
The Web Eats Everything in Its Path
√ Graphics √ Animation √ Location √ Motion Input √ Real-Time 3D
√ Camera √ Messaging √ Real-Time Messaging √ IOT/Wearables √ Robotics
![Page 10: Foundations of the Immersive Web](https://reader034.vdocuments.site/reader034/viewer/2022051318/58ed14ed1a28ab32188b4645/html5/thumbnails/10.jpg)
There are 3 million mobile apps.
There are 1 BILLION web sites.
![Page 11: Foundations of the Immersive Web](https://reader034.vdocuments.site/reader034/viewer/2022051318/58ed14ed1a28ab32188b4645/html5/thumbnails/11.jpg)
The Immersive Web
![Page 12: Foundations of the Immersive Web](https://reader034.vdocuments.site/reader034/viewer/2022051318/58ed14ed1a28ab32188b4645/html5/thumbnails/12.jpg)
“The web is the Metaverse… just with a 2D interface” -- Vladimir Vukićević, creator of WebGL and Mozilla VR Lead
![Page 13: Foundations of the Immersive Web](https://reader034.vdocuments.site/reader034/viewer/2022051318/58ed14ed1a28ab32188b4645/html5/thumbnails/13.jpg)
No Friction
See link, clink link, go Shareable, searchable, discoverable
![Page 14: Foundations of the Immersive Web](https://reader034.vdocuments.site/reader034/viewer/2022051318/58ed14ed1a28ab32188b4645/html5/thumbnails/14.jpg)
Total Immersion
Image: http://cordonmedia.com/
Browse and communicate in 3D
Endless information within our grasp
The ultimate dope for a dopamine culture
![Page 15: Foundations of the Immersive Web](https://reader034.vdocuments.site/reader034/viewer/2022051318/58ed14ed1a28ab32188b4645/html5/thumbnails/15.jpg)
Web Scale
Advertising Digital marketing E-commerce Social media Long tail content and apps
![Page 16: Foundations of the Immersive Web](https://reader034.vdocuments.site/reader034/viewer/2022051318/58ed14ed1a28ab32188b4645/html5/thumbnails/16.jpg)
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
![Page 17: Foundations of the Immersive Web](https://reader034.vdocuments.site/reader034/viewer/2022051318/58ed14ed1a28ab32188b4645/html5/thumbnails/17.jpg)
Foundations
![Page 18: Foundations of the Immersive Web](https://reader034.vdocuments.site/reader034/viewer/2022051318/58ed14ed1a28ab32188b4645/html5/thumbnails/18.jpg)
The 3D Rendering Standard
Runs on all desktop and mobile browsers
3B seats!
![Page 19: Foundations of the Immersive Web](https://reader034.vdocuments.site/reader034/viewer/2022051318/58ed14ed1a28ab32188b4645/html5/thumbnails/19.jpg)
Cardboard VR and Mobile Browsers
Works today. Just render side-by-side using WebGL and pop it into a Carboard viewer.
![Page 20: Foundations of the Immersive Web](https://reader034.vdocuments.site/reader034/viewer/2022051318/58ed14ed1a28ab32188b4645/html5/thumbnails/20.jpg)
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
![Page 21: Foundations of the Immersive Web](https://reader034.vdocuments.site/reader034/viewer/2022051318/58ed14ed1a28ab32188b4645/html5/thumbnails/21.jpg)
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
![Page 22: Foundations of the Immersive Web](https://reader034.vdocuments.site/reader034/viewer/2022051318/58ed14ed1a28ab32188b4645/html5/thumbnails/22.jpg)
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
![Page 23: Foundations of the Immersive Web](https://reader034.vdocuments.site/reader034/viewer/2022051318/58ed14ed1a28ab32188b4645/html5/thumbnails/23.jpg)
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
![Page 24: Foundations of the Immersive Web](https://reader034.vdocuments.site/reader034/viewer/2022051318/58ed14ed1a28ab32188b4645/html5/thumbnails/24.jpg)
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/
![Page 25: Foundations of the Immersive Web](https://reader034.vdocuments.site/reader034/viewer/2022051318/58ed14ed1a28ab32188b4645/html5/thumbnails/25.jpg)
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); }
![Page 26: Foundations of the Immersive Web](https://reader034.vdocuments.site/reader034/viewer/2022051318/58ed14ed1a28ab32188b4645/html5/thumbnails/26.jpg)
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
![Page 27: Foundations of the Immersive Web](https://reader034.vdocuments.site/reader034/viewer/2022051318/58ed14ed1a28ab32188b4645/html5/thumbnails/27.jpg)
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
![Page 28: Foundations of the Immersive Web](https://reader034.vdocuments.site/reader034/viewer/2022051318/58ed14ed1a28ab32188b4645/html5/thumbnails/28.jpg)
One Platform. Billions of Seats.
![Page 29: Foundations of the Immersive Web](https://reader034.vdocuments.site/reader034/viewer/2022051318/58ed14ed1a28ab32188b4645/html5/thumbnails/29.jpg)
Foundations of the Immersive Web
Tony ParisiApril 28, 2016