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
