• kairo@kairo.at / home.kairo.at
• Mozilla Tech Speaker
• FLOSS supporter for 20+ years
• Based in Vienna, Austria
• Not on most major social networks
• But on Diaspora*, Mozillians, Telegram, LinkedIn, KaiRo-at at GitHub

• Cross-Device nature of WebVR/WebXR
• Ease of use of A-Frame
• Ability to use OpenStreetMap data

• WebVR: Virtual Reality powered by Web technologies
• Evolving into WebXR Device API - Mixed Reality (Virtual + Augmented Reality)
• Open Standard (proposal, W3C), in concert with WebGL, WebAudio and Gamepad APIs

• Firefox: WebVR in Windows (55+) & MacOS X (64+) release, Linux in development
• Chrome: experimental WebVR support (behind flags in dev builds)
• Stand-alone headsets: WebVR in Firefox Reality, Oculus Browser, Samsung Internet, Edge on HoloLens
• Firefox Reality and Chrome will ship WebXR (for VR) in December, Firefox desktop coming soon

• Demo for WebVR with live OpenStreetMap data
• Usable in 2D mode on any modern browser
• Supports headset + controller where WebVR is supported
• Using A-Frame (see later)
• Simple: Currently ~80 lines HTML, ~600 lines JS

• 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-orginated A-Frame library

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

• 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

• Cross-Device nature of WebVR/WebXR
• Ease of use of A-Frame
• Ability to use OpenStreetMap data