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
Let the Browser Handle the Devices
VR Polyfill
WebVR API
Desktop Browsers
Mobile Browsers Mobile (VR) Devices
Desktop VR Devices
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
Content Alert:This section contains videos from VR capture and may be unpleasant for those who are extremely sensitive to motion sickness triggers
Challenges
• Bringing browser performance on par with native applications• Frame rates
• Latency
• Cross-platform design experimentation
• Visual editing tools