WebVR using A-Frame for Scientific Visualization


Sandy Ressler




Browser Based VR

Experimental Chromium

builds & Firefox Nightly


Polyfill for other browsers


Approaching the "it just works" era


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


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)


Eric Dougherty NIST SURF student 2016 

who did all the real work!




By Sandy Ressler


Presentation to SIGGRAPH 2016 BOF

  • 1,875