foundations of the immersive web
Post on 12-Apr-2017
588 Views
Preview:
TRANSCRIPT
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
top related