WebVR:
Virtual Reality
on Web Pages
Eric Dougherty
SURF 2016
High Performance Computing and Visualization Group
Mobile VR
Google Cardboard,
Samsung Gear, etc.
Uses easily accessible technology
Tracks movement with gyroscope
Interaction is limited
Lower quality
Full Scale VR
HTC Vive,
Oculus Rift, etc.
Dedicated equipment
Requires PC with
high-end hardware
Utilizes HMD and
tracking camera
Input controllers
High quality output
Browser Based VR
Common link between
all VR hardware
WebVR API
Experimental Chromium
builds & Firefox Nightly
Polyfill for other browsers
Leap Motion Controller
Hand tracking
Object interaction
Gesture controls
360 Degree Video Recording
Ricoh Theta
Kodak PIXPRO SP360
video processing
Stitching
Equirectangular
A-Frame
MozVR Team
Built on three.js - a
Javascript 3D graphics library
DOM interface
Utilizes custom
HTML elements
Entity-component-system Model
Entity-Component-System
Entity - object without properties
Component - module that provides some function for an entity
System - global management of entities and their components
<!-- Basic entity, nothing to render -->
<a-entity></a-entity>
<!-- Entity with the geometry component. Geometry has primitive shape properties,
width, height, etc. -->
<a-entity geometry="primitive: box; width: 1; height: 1; depth: 1"></a-entity>
Interaction Challenges
Where are my hands?
-Leap Motion
-Vive controllers
Where's my keyboard?
-WASD for movement
-Mouse clicks
Where am I looking?
-Gaze based interaction
-Targeting reticle
3D Model Editing
Format conversion
Model separation
Issues with
A-frame
Linking Video Environments
'Travel' between videospheres
Methods of interaction
-video orbs
-ground markers
-VR is accesible on the web now thanks to A-frame
-360 video is possible with a reasonable budget, but high quality is not cheap
-Will take some time to unify the VR interface across different devices
Summary
Image credits:
Title: http://www.polygon.com/2016/1/5/10719326/nvidia-virtual-reality-performance-power
Mobile VR: https://www.linkedin.com/pulse/do-you-think-mobile-vr-virtual-reality-future-philippe-trebaul
Full Scale VR: http://www.tomshardware.com/reviews/htc-vive-virtual-reality-hmd,4519.html
Leap: https://www.pubnub.com/blog/2015-08-19-motion-controlled-servos-with-leap-motion-raspberry-pi/
360 Deg: http://hypebeast.com/2014/10/kodak-introduces-the-360-degree-pixpro-sp360-action-camera http://www.yzlifesb.com/product/ricoh-theta-m15 https://www.thinglink.com/scene/734431545758056448
Video processing: https://flic.kr/p/DMGkdW A-Frame: https://aframe.io/ e-c-s: http://ngokevin.com/blog/aframe-vs-3dml/
Interaction Challenges: https://www.engadget.com/2016/04/05/htc-vive-review/ Linking Video: http://elevr.com/vr-world-nav/
Thanks to Sandy Ressler for all his assistance and direction throughout the summer
Thanks to NIST, Division 771, the High Performance Computing and Visualization group, and especially all the SURF directors for making this program possible!