VR Map: WebXR with Real-World OSM Data

VR Map - OpenStreetMap goes WebVR

The following slides are available in this presentation:

VR Map: WebXR with Real-World OSM Data

Simple GeoData Visualization with A-Frame

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

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

  • Created for a presentation at FOSDEM 2019 in Brussels.
  • 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-02/2019 Robert Kaiser - "Mozilla", "Firefox" and their logos are trademarks of Mozilla Foundation.

Objectives

VR headset user

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

Objectives - Recap

VR headset user

Make It Your Own

tune3dmr
tune3DMR
OSMRail
OSMRail

Questions?

vrmap.kairo.at

github.com/KaiRo-at/vrmap

VR Map in 2D