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)

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

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!

 

 

WebVRSG16BOF

By Sandy Ressler

WebVRSG16BOF

Presentation to SIGGRAPH 2016 BOF

  • 1,875