 Okay, so I'm going to talk about VRMap, which is WebXR with real-world data from OpenStreetMap. My name is Robert Kaiser. If you want to look up the slides, they're already up at my slides page, slides.kyro.at, post them 2019. If you just go to the slides, skyro.at pitches will not be in the index yet. I still need to do that, usually do that right before the talk, but had some slight issue starting here. So I thought I had a slide about me here. Apparently I don't. I'm a Mozilla tech speaker and also a Mozilla rep, so community representative, and I have been with the Mozilla community for a very long time. I'm also a big fan of the OpenStreetMap project, and so sometime ago I said, there could be some things where I can bring those things together, and this is what came out of it. The objectives of this talk are, as you can see, cross-device nature of the technology WebVR or WebXR. Another objective is to show you the ease of use of the A-frame framework that Mozilla has been developing for those technologies for WebVR, WebXR, and the third is using OpenStreetMap data, and the ability to use OpenStreetMap data for things like this. So what is WebVR or WebXR? It's basically, WebVR is a subgroup of WebXR device, the WebXR device API. XR is short for mixed reality, which encompasses both augmented reality, AR and virtual reality, VR and everything in between. So that's an open standard that's being developed right now in the W3C, and it's virtual and augmented reality with Web technologies directly in the browser. One thing that's interesting there is, so for one thing it's building on a few technologies that we had before, WebGL, for one thing the controller API, the gamepad API for the controller, and WebAudio, but a few things in addition. And the one browser that even supports it in release versions right now is Firefox on Windows. You just need to plug in an Oculus Go or HTC Vive into your Windows machine startup Firefox and you can enter WebVR scenes right from the browser in your headset. That said, in the standalone headsets like the Oculus Go, which I have here, and it already says one of the browsers that supports it, Firefox Reality, is the Mozilla browser for the standalone headsets, and also from what I just recently heard in HTC headsets it will be supported across the lines. It will even be the default browser. So the default browser even supports WebVR as well and Samsung Internet supports it as well. So it's pretty widely supported across browsers for the standalone headsets and on desktops for Windows Chrome has an experimental mode that's in experimental versions and I think Microsoft has something working for the HoloLens, but I have not seen that working. But HoloLens is also a bit constrained in what it can do. And as I had on the slide for Mac and Linux, the story is a bit more difficult for Mac. We are in the process of enabling it. I think it's not in release yet, but it may be in beta at the moment. For Linux it's very experimental because even the drivers for the HTC Vive are experimental. There are no Mac or Linux drivers for Oculus because Facebook killed those off when they bought Oculus. So the VR map itself is a demo for WebVR with live OpenStreetMap data, as I already mentioned, and it works on any modern browser in 2D mode. The good thing with those technologies, WebVR and WebXR, is they scale down pretty well where they can. So you can use it in 2D mode, for example, in your normal browser. And where you have a headset and controllers, it uses those as well. It's using Mozilla A-Frame, I'll come back to that later. And currently it's about 80 lines of HTML, a lot of which is a boilerplate for an intro dialog. And about 600 lines of JavaScript, a lot of which is very simple ifs for a few special cases as well. So it's pretty simple code. It's intended for you to grab it and make your own thing out of it. So I kept it as simple as I could. So let's go into the demo, because I'm talking about it all the time. And I'll need to look at the screen for that a bit. I think I'll turn my back to some people here so that it works. So this is how it greets you. That's the intro dialog. That's what actually makes a lot of the HTML. And you have a selection of some preset places. In the default one I went to some place here already so you see what's in there. There's basically three kinds of things in there. On the ground you have a display of a normal map piece. That's just the bitmap tiles from OpenStreetMap. Then you have trees and then you have buildings. The trees were my first selection to do something because they're on a point. So it's easy to find one point to render something on. The buildings are a bit more complex because they have multiple points and complex shapes. The nice thing in this piece here is that we even have trees with different heights and shapes. Because in this case OpenStreetMap actually has the data of the heights of the trees, the crown diameters, and even the trunk. Circumference I think it is. So we can actually render this. We only have broad leaf trees here. If we have needle leaf trees here I render a different sample as well that looks more like fir tree or something. So that's information we can all use and of course the height of the buildings we can use. In some cases with the ASTW keys you can actually fly around in the scene here. And you see the buildings have different heights. Actually there's a few where you see very harshly different heights. In OpenStreetMap sometimes you have the actual height for the building. Sometimes you have the number of stories. Then I estimate from the number of stories what the height of the building may be. And otherwise I'm using a default. If you want after my talk you can look at it in a headset as well. That's the main reason I have it with me here. Let's go a bit back to how this all works. I'll need to find the talk again here. Actually in the preview you had there. So where's my mouse here? It should have jumped back the slide but I can't do it this way as well. So in the preview picture here you see some needle leaf trees as well. I clicked instead of it. So some basics here. One main thing I had to go into is to make things simple. I decided the world is flat in this example. And actually in two ways. So there's no hills and valleys. And additionally I ignored the curvature of earth. But before all the flat earth supporters re-choice too much, I actually had to take the curvature of earth into account because the tiles I'm using at the base have different size depending on the latitude. And I had to respect that because in the VR system all measures are in meters. So I had to actually calculate the size of the tiles based on the Mercaturer projection. I will not go into the details what MAPNIC rendering is. That's the default rendering of OpenStreetMap you see there. If you want to hear a bit more details about the OpenStreetMap aspects of this, at the end of tomorrow I'm giving a talk about the same thing in the geospatial room. I will go into more of the OpenStreetMap details. Right now I will go a bit more into the VR aspects of it. So as I said, there's trees and buildings. Those come from the Overpass API, which is the usual API for OpenStreetMap. And there's a camera and controller setup that is in the A-frame scene. And as I said, it's built with A-frame, so let's actually get into what A-frame is. A-frame is a library that makes it really easy to write VR scenes. This is not what I have in my code. This is an example. That's pretty much the Hello World example with a small addition. Everything in A-frame you put inside an A-scene tag. You include the JavaScript library at the top of your HTML file, then you use this A-scene tag, and then you put some other HTML-like tags into it. For example, a sphere, a cube, a cylinder, a plane. The sky is just what you see around you. It's basically a big marble where the inside is painted with the color, or if you put SRC equals an image, the inside is painted with this image as a texture. And then you give it positions, rotations, and you can even do animations. So what you see in the cube here is I'm putting an animation inside the cube, and that makes the cube animated, which is really nice, because that usually needs quite a bit of JavaScript, and if I know now where I loaded this, this is the same example that you saw rendered with the animated cube, and you can pan around here, and I think there's no controls on there. There are controls on it by default, so you can actually move around in this as well. So that's the default that A-frame gives you. If you go to the slides, the edit view is exactly what I just showed you. And so the code itself is structured pretty simply. The index HTML has the JavaScript includes and this scene setup and the intro dialog, and then there's Map.js that handles the overall stuff, like loading everything. Conversions is the most boring thing, but the most complex thing, because it handles all the coordinate conversions that you need in there. Position limit is an A-frame component. It's pretty nice to see how a basic A-frame component looks, because in the first version, I could fly through the floor, and that's not that nice, so I wrote the component that actually prohibits flying through the floor. And this can actually limit even more. And Tiles3's buildings, GS, are for drawing those three types of objects. It's on GitHub, CairoAT slash VRMap, so that's here. There is a readme and stuff, but that's not that interesting. The position limit, as I said, is an A-frame component, so let's first... I think we still have a minute or two, so let's go back here and look into the index HTML. So we have a lot of JavaScript includes. Some A-frame components and the rest is my JavaScript, and here we have the A-scene. Here's the A-scene starting, and it has a background color that's sky-like, and the ground we can pretty much ignore that's a workaround for one of the navigation components. There's an A-entities, the container. It's basically the diff of A-frame. The entity is the most neutral thing, and you can stuff anything in there. So the map has two things in there, for tiles and items. Items are trees and buildings. Those will be filled in by JavaScript, and the camera rig defines things like where is the user, where is looking, where are his controllers, in which types of controllers are supported, how can the user move things like that. So the movement controls has the fly in it, that means you can fly through the scene. That's one of the components I'm loading earlier that allows this and abstracts this all the way from me. Then there's an entity ID equals head with a position 1.6 meters above the floor. The coordinate system is x, y, and the z is going away from you or towards you. So the second component being 1.6, y at 1.6 means it's 1.6 meters above the floor, which looks pretty natural for most people for where the head is. Even if you're a bit larger or a bit smaller, it looks pretty natural. So it's a good default. And then you have the two hands for the controllers if you have both. I will not go into the mix-ins because we don't have that much time right now. But this is a pretty nice example to play with and find out how those things work. I will do one look into this position limit as well because it's a very nice, easy component. I'm not sure if you saw in the index HTML the camera rig says position limit equals and then it has x min 0 and it has an x max as well, but x min 0 is the important one. Y min, sorry, not x min, y min 0, which means the minimum y component of the coordinate is 0, so you cannot go through the floor. And this component defines those x min, x max, y min, y max and same for z. And tick means a function that is called at every update of the rendering. And so at every update of the rendering, we just look if our current position violates the constraints and if it does, we set it back to the constraint. Very simple, but this way we can implement this component and in this HTML code just write position limit and whatever we need and it handles that. So it's a very nice abstraction and that's all it has. It just has it for every one of those components. I will not go into more of the code because time is coming to an end here. So let's recap. The cross-device nature of WebVR and WebXR is something we've seen. We can use it in 2D mode as you saw when I was presenting it. You can use it here with one controller. You can use it with the two controller full immersive headsets as well. These are a few of the favorite frames you saw in a few steps, how you can easily get stuff in VR done with a frame. And you saw a little bit of how OpenStreetMap data can be used there. As I said, if you want more tomorrow, I'll be talking more about the OpenStreetMap aspects there. I'll be cutting the other code pieces very short instead. Otherwise it will be very similar. Last thing here is make it your own. There's two examples here. Tune3DMR where someone made something to place models inside the scenes done with my VR map sample to find out which coordinates you need to put to the object to have it correctly positioned when we link the model in OpenStreetMap. So you graphically push it where it needs to go, and then it extracts the coordinates and gives you the correct line to put into OpenStreetMap. And OSM rail enables you to drive with a rail along a rail line and see everything rendered around. That's two examples. And with that, I'm closing up. I'm not sure if we have much room for questions, but I think we do. And so the example is that we are MapKyrate and GitHub. You saw as well. Thank you so much. Any questions? I'm right as soon as possible. Hi. I'm just wondering, can you adapt this technology to show elevations? For example, can you make the ground show hills using SRTM data or anything like that? Does the A-frame allow you to have variable height ground? I think there's no component for it yet, but it bases on three chairs. I did not mention that yet, which is a very basic library that can do a lot of things. It actually is investing a lot into three chairs right now to improve it. And with three chairs, you can definitely render very complex shapes as well. So I think you should be able to render that data with three chairs and then just put it into an A-frame component. Very similar to what I'm doing with the buildings in this sample where I'm also constructing an ATS shape and then just exposing it as an A-frame object. Okay, fine. Any other questions? No? Okay, I'm arriving. And as I said before, if anyone wants to see it in full VR, you can do so here. Okay, thank you so much, Robert.