An Introduction to WebVR

Tony ParisiJune 15, 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

Introducing: WebVR

Bringing VR and the Web Together

No Friction

See link, clink link, go Shareable, searchable, discoverable

Web Scale

Advertising Digital marketing E-commerce Social media Long tail content and apps

Total Immersion

Image: http://cordonmedia.com/

Browse and communicate in 3D

Endless information within our grasp

The ultimate dope for a dopamine culture

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

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.

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

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/

A Quick Tour of the WebVR API

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

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

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

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…

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); }

JavaScript Libraries

Three.js Babylon.js Scene.js

Three.js - de facto choice for WebGL http://www.threejs.org

<a-scene>

<a-sphere position="0 1.25 -1" radius="1.25" color="#EF2D5E"></a-sphere> <a-box position="-1 0.5 1" rotation="0 45 0" width="1" height="1" depth="1" color="#4CC3D9"></a-box> <a-cylinder position="1 0.75 1" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder> <a-plane rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>

<a-sky color="#ECECEC"></a-sky>

</a-scene>

Markup Languages A-Frame GLAM SceneVR

Mozilla A-Frame https://www.aframe.io

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

"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

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!

Authoring Tools

Unity, Unreal export via Emscripten/asm.js PlayCanvas game engine Vizor in-browser VR development tool

Vizor Browser-based VR creation

One Platform. Billions of Seats. No Barriers.

An Introduction to WebVR

Tony ParisiJune 15, 2016