2. 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/
3. 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
4. Q: How do VR and AR reach 5B users by 2020?
A: Not one app at a time.
8. 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
9. The Web Eats Everything in Its Path
√ Graphics
√ Animation
√ Location
√ Motion Input
√ Real-Time 3D
√ Camera
√ Messaging
√ Real-Time Messaging
√ IOT/Wearables
√ Robotics
10. There are 3 million mobile apps.
There are 1 BILLION web sites.
16. 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
18. The 3D Rendering Standard
Runs on all desktop and mobile
browsers
3B seats!
19. Cardboard VR
and Mobile Browsers
Works today.
Just render side-by-side
using WebGL and pop it
into a Carboard viewer.
20. 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
21. 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
22. 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
23. 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
24. 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/
25. 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);
}
26. 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
27. 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