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 +
+
+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 +
+ 04/2018 Robert Kaiser -
+ "Mozilla", "Firefox" and their logos are
+ trademarks
+ of Mozilla Foundation.
+
WebVR & WebXR
+ +
+
+
+
+-
+
- WebVR: Virtual Reality + powered by Web technologies +
- Part of WebXR Device API + - Mixed Reality (Virtual + Augmented Reality) +
- Open Standard (proposal), in concert with WebGL, WebAudio + and Gamepad APIs +
- Windows: Firefox release, Mac: Nightly/Beta, Linux: in development +
VR Map
+ +
+
+
+
+-
+
- Demo for WebVR with live + OpenStreetMap data +
- Usable in 2D mode on any modern browser +
- Supports headset + controller where WebVR is supported +
- Using Mozilla A-Frame (see later) +
- Simple: Currently ~70 lines HTML, ~400 lines JS +
vrmap.kairo.at
+ +
+
+
+
+Code Basics
+ +
+
+
+
+-
+
- The world is flat (in two ways)! +
- Ground tiles using + Mercator projection, + "Mapnik" rendering from OSM + via KaiRo's tile caching server +
- Trees and buildings: live OSM data via + Overpass API +
- Camera/controller setup to support multiple devices for navigating the scene +
- Built with Mozilla A-Frame library +
A-Frame - XR Made Simple
+ +
+
+Example:
+
+
+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> ++ +
Code Details
+ +
+
+
+
+-
+
index.html: JS includes, start dialog, scene, camera/controller rig
+ map.js: variables, load handler, fetch from Overpass API
+ conversions.js: coordinate conversions
+ position-limit.js: A-Frame component for keeping position above ground
+ tiles.js, trees.js, buildings.js: load/draw the 3 types of objects
+ - KaiRo-at/vrmap + at GitHub +