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




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





MozVR Team


Built on three.js - a

Javascript 3D graphics library


DOM interface


Utilizes custom

HTML elements


Entity-component-system Model


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


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


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


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! 


By ericdougherty