Good Morning!

Your trip to the Matrix will begin shortly

Scotland

2007

@missLivirose I like VR. A lot.

VR/AR DEVELOPER EVANGELISTMICROSOFT

LIV ERICKSON

VIRTUAL REALITY:WHY?

© Pixar

TODAY’S VR ECOSYSTEM

Mobile VRSPLIT SCREEN

SMARTPHONE APPS

PHONE SERVES AS

PROCESSOR & DISPLAY

INTERNAL SENSORS

MEASURE ROTATION AND

HEAD ORIENTATION

LESS POWERFUL /

IMMERSIVE EXPERIENCE

Desktop VRSTANDARD DESKTOP PC

APPLICATIONS

HMD IS A SEPARATE

DISPLAY

INTERNAL& EXTERNAL

SENSORS MEASURE HEAD

ORIENTATION AND

POSITION

MORE POWERFUL

IMMERSIVE EXPERIENCE

Standalone DevicesSELF CONTAINED

DEVICE

DISPLAY AND

PROCESSOR ON

BOARD / INCLUDED

USUALLY MOBILE

OS-BASED

MAY BE A HYBRID

DEVICE

Why VR on the Web?Today’s Browser as a VR Platform of the Future

@misslivirose

One App, Anywhere

Arturo Paracuellos - unboring.net

Let the Browser Handle the Devices

VR Polyfill

WebVR API

Desktop Browsers

Mobile Browsers Mobile (VR) Devices

Desktop VR Devices

Open Access to Content

© DigitalTrends.com

You don’t need to learn new tools

Understanding the VR WebThe elements of today’s browser-based virtual reality ecosystem

@misslivirose

WebVR

• Experimental API for browsers to interact with VR hardware

• Identifies connected peripherals• Headsets

• Tracking devices as display capabilities

• Passes in display data for rendering

• Allows application to receive headset transforms

• Currently supported in Firefox Nightly & Chromium

WebVR: Under the Hood

• VRDisplay: the base of all VR devices• Capabilities include pose, positional tracking, near/far planes, orientation,

and more

• VRPose: the state of a headset/device at a given time

• VRStageParameters: values that describe a space for room scale devices

• Extensions for Window interface and Gamepad interface

• And much, much more!

https://mozvr.com/webvr-spec/

WebVR Library & Three.JS

• Boilerplate code to be used with Three.js

• VRControls: apply headset transforms to the scene camera

• VREffect: how the camera should render a split-screen view

• WebVRManager: changing from VR to non-VR mode

• WebVR Polyfill: Implementation for mobile browsers without native WebVR support

A-Frame

• Markup-styled language built on WebVR

• Entity-Component system for extensibility

• Support for 2D and 3D objects: • Primitives, spherical images, video, model imports

<script src="aframe.min.js"></script>

<a-scene>

// VR code!

</a-scene>

Vizor Create

• Visual node-based programming for VR websites

• Multi-user editing and real time visualizations

Export to WebVR

VR Browsers Standard Browsers

Generated Web Build

Core Assets + Scripting

• Use JavaScript, C#, or Boo to write scripts in the Unity game engine

• Add Jump Gaming WebVR plugin

• Build HTML5 application using WebGL

• Render to browser with support for the VR browsers and desktop headsets

Enough talking… Let me see!Examples, Samples, and Code

@misslivirose

Content Alert:This section contains videos from VR capture and may be unpleasant for those who are extremely sensitive to motion sickness triggers

livi.link/aframejs

The Future of the Browser Thinking outside of the (2D) box for web content

@misslivirose

Challenges

• Bringing browser performance on par with native applications• Frame rates

• Latency

• Cross-platform design experimentation

• Visual editing tools

LIVI.LINK/SCOTLANDJSVR

THANK YOU!

LIV ERICKSON@MISSLIVIROSE