WebVR using A-Frame for Scientific Visualization
Sandy Ressler
NIST
SIGGRAPH 2016 BOF
http://slides.com/sressler/webvrsg16bof
![](https://s3.amazonaws.com/media-p.slid.es/uploads/524089/images/2770700/pasted-from-clipboard.png)
Browser Based VR
Experimental Chromium
builds & Firefox Nightly
Polyfill for other browsers
Approaching the "it just works" era
![](https://s3.amazonaws.com/media-p.slid.es/uploads/524089/images/2742990/Screen_Shot_2016-06-13_at_3.26.27_PM.png)
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.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2854/images/2861079/screenshot_112.png)
(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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/524089/images/2809023/pasted-from-clipboard.png)
Extensible and Confusing
Define schemas and lifecycle to get new components with new behaviours...AND they are defined in modular way for reuse.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/524089/images/2809023/pasted-from-clipboard.png)
a-frame components are not HTML components
Editor
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2854/images/2866021/fd7b9748-42ae-11e6-9ece-3dfe763ea11c.png)
MultiUser Support: Firebase
![](https://s3.amazonaws.com/media-p.slid.es/uploads/524089/images/2742957/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/524089/images/2742964/pasted-from-clipboard.png)
360 Degree Video Recording
Interaction Challenges
![](https://s3.amazonaws.com/media-p.slid.es/uploads/524089/images/2809013/pasted-from-clipboard.png)
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)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/524089/images/2809372/Screen_Shot_2016-07-01_at_12.03.05_PM.png)
Acknowledgements
Eric Dougherty NIST SURF student 2016
who did all the real work!
WebVRSG16BOF
By Sandy Ressler
WebVRSG16BOF
Presentation to SIGGRAPH 2016 BOF
- 1,900