 So I'm going to talk about VRMAP, which is bringing OpenStreetMap data into Web of VR. So it's actually using the real world data. One thing I would like to know is, how many people here are OpenStreetMap users, at least? OK, how many of you have worked with the Overpass API? So very few, OK. Has anyone been to my talk yesterday? OK, this will be very similar. I will talk a little bit more about the OpenStreetMap parts of this, but it will be very similar. It's the same slides. The slides are up at slidestop.co.at slash post-em 2019. I did not get to put it on the main page of Slides Cairo AT, they will be there, link there, I think, tomorrow or something, as soon as I get to it. I'm Robert Kaiser. I'm a Mozilla tech speaker. Most people call me Cairo. And I'm also an OpenStreetMap contributor, and have been for a long time, mostly in Austria, also pretty active in the Austrian OpenStreetMap community. So what is this talk about? Mainly, what I want to tell you about is the cross-device nature of those technologies of WebVR or WebXR, the ease of use of the library I'm using, which is A3, which makes it really easy to get stuff into WebVR, and the ability to use OpenStreetMap data for this audience, specifically also a few tricks I'm doing with OpenStreetMap data for this visual usage. So first, what is WebXR or WebVR? WebVR is virtual reality done with Web technologies, so HTML, JavaScript, and so on. WebXR is a variant of mixed reality. This is a pretty new term, and it was crafted to put AR and VR under one phrase and make one standard that encompasses all of those. VR, VR, and everything in between. At the W3C, there's a working group for that, and a proposed standard for WebXR. VR parts of that are still somewhat in flux. The VR parts of that are pretty stable now, and multiple browsers actually have implementations for it. It bases on WebGL, Web Audio, and for the controllers on the game paddock APIs. It can be used on full VR headsets, of course. Both the three degrees of freedom ones, like this one, and the six degrees of freedom, they give you full immersion, so you can also walk in the scene with those you can turn around. And for the desktop devices, for the PC-connected devices like the HTC Vive and the Oculus Rift, Firefox in release on Windows already supports WebVR completely. So you just plug in your HTC Vive or whatever, launch the VR tools, launch Firefox, and enter the VR from the browser with the HTML and JavaScript technologies. On Mac, I think it's in beta right now. It was set back to nightly at some point, and then put back into beta again. We want, Ursula wants to release it soon, but there have been a few complications with the drivers. On Linux, the drivers for the HTC Vive are still experimental, and Ursula is also missing a few patches in the graphics stack. So it's not there yet, but it's in works. For the Oculus Rift, there's no drivers for Mac and Linux. As soon as Facebook bought it, they stopped all development on Mac and Linux. Make your own thing out of it. But that said, the default Oculus browser on the Oculus Go and the Samsung Internet browser for their Samsung devices, those also implement that VR. And as far as I know, Microsoft has done some support in the edge for the HoloLens, and I don't know the real state of it. So there is implementations in a few browsers. Of course, for those standalone headsets, there is Firefox Reality, which also supports it, which is a browser for those standalone headsets. VRMap itself is a demo I did with live open street map data from the Overpass API. That's why I asked before. It's usable in 2D mode even outside of the VR devices. So you can actually use your phone or your tablet or your PC and look into this as well. I will, in the next slide or in the next minutes, show you the same thing here in the projector, just in 2D mode. But when you go into VR device where you have controllers, where you have a headset, you can immerse yourself completely into it. It's using the Mozilla Ifrin library. I'll be coming back to that. And it's a very simple demo. It only has about 80 lines of HTML, most of which are the starting dialogue, which we will see. And about 300 lines of JavaScript. And quite a bit of that is code I'll actually show you, because it makes a few decisions about defaults for stuff that comes from street map. But the code is not very difficult. It's made for people like you to take it and make something out of it yourself. So let's take a look at the demo itself. When you launch it, this is the start dialogue. And that's what I said takes up quite a bit of that, of those 80 lines of HTML. And most of it is explanations, including, of course, the open street macro, right? And you have a few presets of where it can go. Those are presets that have at least something that looks decent. You can actually enter coordinates and I did this before in the cafeteria with someone. He was, oh, wow, it actually displays where I'm at home. Everybody seems to do where he's at home. So did I, because this first preset is, what you see back there is actually in front of the door of the building I'm living in. This is very near to it and I already went there to not bore you with flying around too much. So this is the view of very near. Back there is where I'm living, if you wonder. So this is a view around of a part of this area. I'm not loading more than this area right now in this demo. It's, the code is made in a way that it should be easy to dynamically load more. But for a demo, I was like, let's not go into the performance aspects of when you have too much loaded. I want to be able to show this off and we want to take more out of it. It's not easy, it's not hard to figure out. How do you do that? One thing that's nice here, and that's why I like the example of this area, is that in Vietnam, we could import some data for the trees. All trees in public areas in Vietnam have an open government index and we imported that into OpenStreetMap and so we know the height of the trees, we know the circumference of leaves and so on and we know the diameter of the crown that is and the circumference of the trunk. So I can use all that. I still use the very simple model for trees but still you get different sized trees and that's pretty nice. In that preview picture I have here, you see that for middle leaf trees I have a different way of displaying them even because we have that data as well and OpenStreetMap has the tags for it. So you have that with the AWS keys, you can fly around in the scene. You see there's some trees even in there. Those trees have no further tags, those are just some defaults and you see you have different heights of the buildings as well, which usually in OpenStreetMap you don't have a lot of heights of buildings, you have some. But then if you have the amount of levels, the building has, you can do a pretty good estimate and then I have a few things and I'll show you a bit of that of how I get to heights when I don't know much. In this area I walked around with the sheet and just printed out OpenStreetMap data and just wrote, this is six stories, this is five, this is four, this is one. And so we get a pretty nice picture of a realistic view. So that's the game of how it looks in principle. So to make that code simple, I had to start with a few simplifications and one of them was that the world is flat. Actually it's flat in two ways in this demo. For one thing there's no curvature of earth. That makes it much easier in terms of calculations. And for the other thing there's no hills and valleys. But before the flat earth support is really too much, I actually had to respect the latitude and the curvature of earth because I'm using the ground tiles from Mercato Protection and those change size based on latitude. And so the coordinate system inside the VR space is in meters. So I needed the size in meters of those ground tiles. Those ground tiles are, I'm just using from the default to map-nate tiles that OpenStreetMap renderers. I'm using it via a tile cache that I'm operating myself to not over-text OpenStreetMap servers. The trees in buildings though, I'm taking directly from the overpass API. So that's really live data. If you change it in OpenStreetMap, if you add the tree a few minutes later you actually have it in the same way as well. There's a camera and controller setup that the library has some defaults, but if you want the controllers to work right, you need to put some setup in there and to enable this flying navigation, things like that as well. And it's built with the A-frame library. So the A-frame library, I just mentioned that second time and now I really should tell you what it is. It's a Mozilla library that makes it really, really easy to create VR scenes. Basically you include a JavaScript file at the top of your HTML file and then you write some text. Those are not in the HTML standard, but the library interprets them and makes something out of them. On the outside you put an AC tag and then everything in there is used and rendered in the VR space. Like an A-sphere and a cube, an A-cylinder and a plane. The planes are the tiles on the floor, of course, even in my example. This here is not the code I'm using. This is an example and I'll show you in a minute how this example looks. And you can even do animation of things by just putting an animation inside something and then this something is animated with those properties. And you just use standard HTML syntax to put properties on those things. So you have a position, you have a radius. That sky with the color is just a sphere that has the inside painted with that color. And if you put a sky src equals something, then you actually have this image that you put in the src projected on the inside of that sphere. So that you can very easily get a texture on it as well. Or a 360 degree image of people. So you only need to know HTML that you can do VR scenes. That's pretty nice. To show you how this example looks, I probably need to reload because it still says loading. Yeah, now it's loading. So let's get it a little bit bigger. That's the scene you just saw described and the code is a bit small, but it's still up here. It's the same, the default even has the scrolling with the keys, the ESD keys. And you saw that animation with the tag and the cube is just rotating. We didn't even write any JavaScript and it's rotating. That's nice. Well, underneath it, it has the 3.js library which is heavy JavaScripting, but it's abstracted enough that we can do easy things. So this is, if you look at the slides, the edit view link is what I just showed you. And you can dynamically try out stuff there as well. So if you want to, you can go in here and say, Which one? This here? Zero, three, six, three, zero, no problem. Think about three, six, three, two, three, that's the end. This too? Yeah, I can change that. That's, let's make this zero, now it's not animating at all because it's animating by zero. And make, let's make this three, six, three, and now it's going in different directions. And I can exchange the colors and whatever and I can edit this here. So it's pretty nice. You can learn more about A-Frame at A-Frame.io. It also has a few other samples there. But I wanted to get back to my demo. We'll take a short look into index HTML, but I went to that more in the Mozilla room. And you can look into it yourself as well. I want to get more to the open street things here. That has the start dialog and this camera controller theme. Map.js is the main JavaScript file that loads all the stuff and does the fetch from overpass. Conversions is boring, but it's necessary. Because you have a lot of coordinates, a lot of conversions in there. Positioned limit is an A-Frame component. I wrote that and it's a very nice example for how you write an A-Frame component. I went to do this yesterday, I will not do that today to have a bit more time for the open street web parts. I had the problem when I was flying, I could fly through the ground. So I said, let's do it right and write something that prohibits me from going through the ground. And that's this. It's a very nice example of how to easily do the component. And then I have tiles, trees and buildings. JS that builds and draws these three types of objects, so the tiles on the ground and the trees and the buildings. It's on GitHub at pirate.htt-slash-vrmap. You will see that here later. With that, let's look at the code and we come back to what we learned. So yeah, this is the from yesterday, that's the component. The one thing that's interesting in the component is there's a tick function in there. Just write one function and that's called every time that it's play updates and that's tick. And basically on every tick, I set back the coordinates if it's outside of my constraints. It's very easy. So let's go back here and take a short look into index HTML. This has a lot of inputs of scripts. This is the main A-frame and then I have a few additional components. There is a components indexing on the A-frame isle where you can find a few things that you can easily plug in and make it easier without stuff without JavaScript. That's all the intro dialogue and then here we have the A-scene that still fits on one screen. A entity is basically the div of A-frame. So it's the container that can be anything and can contain it. And actually an A cube or something is just a specialized A. So the ground is a workaround but the map entity has a container for tiles and a container for items which is trees and buildings. And here's the camera rig. A component enables another attribute here. So you have movement controls that allow you to fly. And here I'm putting in my own component that you saw for a minute there. Position limit equals with those parameters that the Y-min zero is the really important one that I cannot go through the floor. I did not mention the coordinate system. I said I'm saying Y-min just if it was the most natural thing. So if you stand in the VR scene, then X is horizontal, Y is vertical, and C is the component that goes towards you or away from you. So that's why Y-min is zero. And I will not go into the mixings here but you have a head that's 1.6 meters above the ground which feels pretty natural for most people to have the head around that, above the ground. And then you have a left-hand and right-hand for the controllers. And it loads those controllers if any of those things is present. So it's not that hard to understand if you take a bit of time to look at it. I know it's a bit fast now to just have something thrown out here. It's not hard to understand. And then I want to take a bit of a look so the tiles are pretty simple but, so yeah, anyone who has worked with Overpass, here's the stuff that looks familiar to those who have used the Overpass. Here I'm having the Overpass query. The bounding box string is calculated from whatever we're displaying. Otherwise it just loads all nodes with naturally close three. Who has actually edited OpenStreetMap in here? So those of you naturally close three will be something you have heard about. And the system of nodes, ways and relations we probably have heard about as well. For the others, the data model of OpenStreetMap is you have points that are nodes that have coordinates and have connections of nodes that are ways and you can have relations that's just a meta reference to any object and any of those can have key value tags. So naturally close three is a tag and that tells me that's a trick. Very easy to understand in this case. There are some that are not that easy to understand but find a fetch that convert that to G or JSON because that's easy to process afterwards. And then here dynamically creating, and you'll see I'm just creating HTML elements. So if you ever created stuff with JavaScript, if you ever created elements with JavaScript, that's basically how you did it if you did not use any abstraction layer. You can actually use all kinds of abstractions like AngularJS or Chick-Vari or whatever with this as well. And then I'm setting all kinds of stuff here. See I'm pretty much getting to end. So we're very short looking to the buildings. That's a bit more difficult because I had to find out default heights of buildings. So actually if there is a height equals something tag on it, I'm using that height. I'm using the, if there's a building levels on it, I'm actually using that and calculating times three. I think I have that down here somewhere. Or I have a meters by per level variable that I'm multiplying with which is set up here. So I estimate every level is about three meters which is pretty okay. Near buildings are usually less or the buildings can even be more. And if I don't have that, it gets here. But there's, sometimes there's building equals like Kiosk or Cabin or something like that or Carport. I can safely assume those are one level high. Those will not be higher than that usually. And then I have some special defaults like house I'm estimating is two levels as well as a farm. A transformer tower I'm estimating is 10 levels. It's 10 meters high. The water tower I'm estimating is 20 meters high. Just to have something that looks somewhat realistic. And under construction, I'm even giving the buildings a different color. If I don't have all that, I'm going back to a default. And then I even have some specialty in there that will not, because of time race is not going there. Very small buildings, I even go lower. So it's not too hard. I hope it's not too hard to understand in terms of the code. So what we've seen here is how the cross-device nature of those technologies but we are bad XR. You saw it in 2D mode here. You have to believe me right now that it's working in the headset, but you can actually take a look at it afterwards. In this one, it's a use of A-frame. I showed that quite a bit. And the ability to use OpenStreetMap data and a bit of how you're using the OpenStreetMap data. If anyone's interested, I can show you or you can look it up which query I'm using for the buildings. And there's a few improvements that can even be done there. What I would really encourage you to do is to look at the code, make it your own. Those are two examples where people have done that. One was for finding the right position of an actual model of a building within a scene. And then you can use that right position and put it back into OpenStreetMap. So it's defined how those buildings should be placed when being rendered somewhere. And always in real, someone actually made something where you can ride along the train line and see everything that's around it. And with that, I'm at the end. If you have any questions, I'm happy for those. And if you want to look at it yourself, the URL is up there, the GitHub is up there. Okay, one and a half minutes for the question. Anybody? If you want to color all the buildings based on the values you got back, then it's invulnerable, right? So I actually have in there the color of the building if there's just a color equal to something that I'm using that. I do not have the more extended thing with building parts in it. But if the whole building has one color, you actually have that in there. Would it support using a photograph of the building as a texture? You would need to program, do some programming to set the SRC and whatever, and it's a bit hard because it would just project it around it. So you will probably need to do some manipulation. But I think it should be doable. Well, now we have come to the end of this day in this room. Please fill out the feedback. Either fire your hat if you have the right device and otherwise fly out of that site. That gives the organization some guidance for next year out of the program and where to program. Not to go. Thank you very much. Thank you.