Table of Contents
-VR Map - OpenStreetMap goes WebVR
- -
-
The following slides are available in this presentation:
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
VR Map: WebVR Using OpenStreetMap Data
-Simple GeoData Visualization with A-Frame
- -
-Robert Kaiser,
-"KaiRo" <kairo@kairo.at>
-
Mozilla Tech Speaker -
-
-Mozilla Tech Speaker -
-
-Slides: - https://slides.kairo.at/mobilitybuilders201805/
-
-
--
-
- Created for a presentation at - mobility.builders AR/VAR Hackathon 2018 - in Wiener Neustadt. -
- 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-10/2018 Robert Kaiser -
- "Mozilla", "Firefox" and their logos are
- trademarks
- of Mozilla Foundation.
-
Objectives
- -
-
-
-
--
-
- Cross-Device nature of WebVR/WebXR -
- Ease of use of A-Frame -
- Ability to use OpenStreetMap data -
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 ~80 lines HTML, ~600 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 -
Objectives - Recap
- -
-
-
-
--
-
- Cross-Device nature of WebVR/WebXR -
- Ease of use of A-Frame -
- Ability to use OpenStreetMap data -