WebVR using A-Frame for Scientific Visualization

 

Sandy Ressler

NIST

SIGGRAPH 2016 BOF

http://slides.com/sressler/webvrsg16bof

Browser Based VR

Experimental Chromium

builds & Firefox Nightly

 

Polyfill for other browsers

 

Approaching the "it just works" era

A-Frame

  • MozVR Team
  • Built on three.js - a
  • Javascript 3D graphics library
  • DOM interface
  • Utilizes custom HTML elements
  • Entity-component-system Model

 

"A-Frame at its heart is a entity-component-system-based three.js framework with a DOM interface." - it's a programming pattern from the gaming world

Web Browser Wins

  • Works anywhere
  • Including Mobile
  • WebGL is the "secret 3D sauce"
  • Developers have YUGEEE collection of tools
    • jQuery
    • React
    • Angular
    • NodeJS
  • Use the infrastructure of web development for graphics..that's the BIG WIN.

 

 

(Video with STM model demonstrating hover events for labeling)

Link to local version

Entity-Component-System

Entity - object without properties

 

Component - module that provides some function for an entity

 

System - global management of entities and their components

Extensible and Confusing

Define schemas and lifecycle to get new components with new behaviours...AND they are defined in modular way for reuse.

 

a-frame components are not HTML components

Editor

MultiUser Support: Firebase

360 Degree Video Recording

Several linked 360 videospheres.

NIST library, navigation via hotspots.

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 

(Video of Engineering Mechanics building demonstrating jump between videospheres)

Acknowledgements

Eric Dougherty NIST SURF student 2016 

who did all the real work!

 

 

Apollo CM