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! 

WebVR

By ericdougherty

WebVR

  • 1,315
Loading comments...