Slides from my presentation at Autodesk Forge 2016 http://forge.autodesk.com/tracks-and-speakers/#track-2

1. An Introduction to
WebVR
Tony Parisi
June 15, 2016

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.

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

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

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

8. Introducing:
WebVR
Bringing VR and the Web Together

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

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

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

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

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

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

15. The WebVR API
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

16. WebVR Development Status
Developer builds of Chrome, Firefox (desktop and mobile)
Samsung Internet browser for Gear VR!
Coming soon to Daydream VR!
WebVR 1.0 API - preliminary spec
http://mozvr.github.io/webvr-spec/
W3C Community Group
https://www.w3.org/community/webvr/
Slack Channel
https://webvr.slack.com/
Examples
https://webvr.info/samples/

17. A Quick Tour of the WebVR API

18. 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;
}
}
1. Query for VR Displays
Enumerate available
VR devices
Get left/right eye
(camera) information:
horizontal offset,
field of view,
viewport width;
we’’ use WebGL to
render the scene from
two cameras

19. someButton.addEventListener(’click', onStartPresent);
function onStartPresent () {
vrDisplay.requestPresent({ source : webGLCanvas });
}
2. Present to the VR Display
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

20. 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);
}
3. Render WebVR introduces a new version of
requestAnimationFrame() specifically for
VR devices, making >60FPS rendering possible!
Get HMD position/orientation
Render scene once for each eye
Submit rendered content to the HMD

21. var vrGamepads = [];
var gamepads = navigator.getGamepads();
for (var i = 0; i < gamepads.length; ++i) {
var gamepad = gamepads[i];
if (gamepad && gamepad.pose) {
vrGamepads.push(gamepad);
}
}
}
4. Input: 6DOF Controllers
Loop through Gamepads and see if any of them have
a ‘pose’ property; if so it’s a VR gamepad
NOTE: Gamepad 6DOF support is NOT part
of the WebVR spec. These are experimental
extensions to the Gamepad API…

22. The
WebVR 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);
}

23. JavaScript Libraries
Three.js
Babylon.js
Scene.js
Three.js - de facto choice for WebGL
http://www.threejs.org

24. <a-scene>
<a-sphere position="0 1.25 -1" radius="1.25" c
<a-box position="-1 0.5 1" rotation="0 45 0" w
<a-cylinder position="1 0.75 1" radius="0.5" h
<a-plane rotation="-90 0 0" width="4" height="
<a-sky color="#ECECEC"></a-sky>
</a-scene>
Markup Languages
A-Frame
GLAM
SceneVR
Mozilla A-Frame
https://www.aframe.io

25. https://github.com/KhronosGroup/glTF
Runtime asset format for WebGL, OpenGL ES, and OpenGL applications
Compact representation for download efficiency
Loads quickly into memory
JSON for scene structure and other high-level constructs
GL native data types require no additional parsing
Full-featured
3D constructs (hierarchy, cameras, shaders, animation, lights and standard materials via
extensions)
Full support for shaders and arbitrary materials
Runtime-neutral
Can be created and used by any tool, app or runtime
File Formats

26. "nodes": {
"LOD3sp": {
"children": [],
"matrix": [
// matrix data here
],
"meshes": [
"LOD3spShape-lib"
],
"name": "LOD3sp"
},
…
"meshes": {
"LOD3spShape-lib": {
"name": "LOD3spShape",
"primitives": [
{
"attributes": {
"NORMAL": "accessor_25",
"POSITION": "accessor_23",
"TEXCOORD_0": "accessor_27"
},
"indices": "accessor_21",
"material": "blinn3-fx",
"primitive": 4
}
]
}
},
The Structure of a glTF File
Scene structure defined as a hierarchy
of nodes
"buffers": {
"duck": {
"byteLength": 102040,
"type": "arraybuffer",
"uri": "duck.bin"
}
},
Meshes and other visual types
access low-level data defined in
buffers Rich data e.g. vertices
and animations stored in
binary files

27. glTF Adoption
Three.js Loader
https://github.com/mrdoob/three.js/
Babylon.s Loader
http://www.babylonjs.com/
Cesium - native format is glTF
http://cesiumjs.org/
FBX Converter
https://github.com/cyrillef/FBX-glTF
Import/Export glTF to/from any
FBX application!

28. Authoring Tools
Unity, Unreal export via Emscripten/asm.js
PlayCanvas game engine
Vizor in-browser VR development tool
Vizor
Browser-based VR creation

29. One Platform.
Billions of Seats.
No Barriers.

30. An Introduction to
WebVR
Tony Parisi
June 15, 2016