Table of Contents

VR Map - OpenStreetMap goes WebVR

The following slides are available in this presentation:

VR Map - OpenStreetMap goes WebVR

Simple GeoData Visualization with A-Frame

Robert Kaiser, "KaiRo" <kairo@kairo.at>
Mozilla Tech Speaker

Slides: https://slides.kairo.at/viennajs201805/

  • Created for a presentation at ViennaJS Meetup May 2018 in Wien/Vienna.
  • Written in HTML 5 with CSS 3 and JavaScript.
  • Navigation via links on all slides, via access keys (e.g. "n"/Alt+Shift+N for "next") or back/forward arrow keys
  • Contents
  • Lizenziert unter CC-BY-SA, 04/2018 Robert Kaiser - "Mozilla", "Firefox" and their logos are trademarks of Mozilla Foundation.

WebVR & WebXR

VR headset user

VR Map

VR Map in 2D

vrmap.kairo.at

VR Map in 2D

Code Basics

VR Headset user with Mozilla logos

A-Frame - XR Made Simple

A-Frame - aframe-io Example:
<a-scene>
  <a-sphere position="0 1.25 -1" radius="1.25" color="#EF2D5E"></a-sphere>
  <a-cube position="-1 0.5 1" rotation="0 0 0" …>
    <a-animation attribute="rotation" … to="0 360 0"></a-animation>
  </a-cube>
  <a-cylinder position="1 0.75 1" …></a-cylinder>
  <a-plane ></a-plane>
  <a-sky color="#ECECEC"></a-sky>
</a-scene>

edit/view - More at aframe.io

Code Details

VR Headset user with Mozilla logos

Questions?

vrmap.kairo.at

github.com/KaiRo-at/vrmap

VR Map in 2D