VR Map: Putting OpenStreetMap Data Into a WebVR World
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Subtitle |
| |
| Title of Series | ||
| Number of Parts | 561 | |
| Author | ||
| License | CC Attribution 2.0 Belgium: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor. | |
| Identifiers | 10.5446/44645 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
FOSDEM 2019449 / 561
1
9
10
15
18
19
23
24
27
29
31
33
34
35
38
39
40
43
47
49
52
53
54
55
58
59
60
63
65
67
69
70
78
80
82
87
93
95
97
102
103
104
107
110
111
114
116
118
120
122
123
126
127
131
133
136
137
139
141
142
148
153
155
157
159
163
164
168
169
170
171
172
173
174
181
183
185
187
188
193
196
197
198
199
200
201
205
207
208
209
211
213
214
218
221
223
224
226
230
232
234
235
236
244
248
250
251
252
253
255
256
257
262
263
264
268
269
271
274
275
276
278
280
281
283
284
288
289
290
293
294
296
297
300
301
304
309
311
312
313
314
315
317
318
321
322
327
332
333
334
335
336
337
338
339
340
343
345
346
352
353
355
356
357
359
360
362
369
370
373
374
375
376
377
378
383
384
387
388
389
390
391
393
394
395
396
406
408
409
412
413
414
415
419
420
425
426
431
432
433
434
435
436
438
439
440
441
445
446
447
448
453
455
457
459
466
467
471
473
474
475
476
479
480
484
485
486
489
491
492
496
499
500
502
505
507
508
512
515
517
518
529
531
533
534
535
536
539
540
546
550
551
552
553
554
555
557
558
559
560
561
00:00
Frame problemVisualization (computer graphics)Arrow of timeSlide ruleKey (cryptography)Link (knot theory)Firefox <Programm>Game theoryVirtual realityAugmented realityMixed realityMereologyStandard deviationOpen setUsabilityAsynchronous Transfer ModeWeb browserDemosceneGame controllerLine (geometry)Level (video gaming)Open setTablet computerSlide ruleWeb browserVideo gameGame theoryMultiplication signAsynchronous Transfer ModeStandard deviationLine (geometry)Group actionImplementationHead-mounted displayMereologySoftware developerNatural numberWeb 2.0UsabilityInternetworkingGame controllerBitFluxCodeMixed realityVideo projectorMilitary baseWindowBeta function1 (number)TelepräsenzSound effectRight anglePoint (geometry)Degrees of freedom (physics and chemistry)Decision theoryReal numberDefault (computer science)Library catalogControl flowComplete metric spaceLink (knot theory)Device driverSoftware testingLibrary (computing)Demo (music)Web pageProgram slicingPatch (Unix)State of matterFacebookCoordinate systemDegree (graph theory)Virtual realityVisualization (computer graphics)Computer animation
07:11
Server (computing)Axonometric projectionFrame problemLibrary (computing)BuildingSphereRotationCubePlane (geometry)SphereCubeTesselationMetropolitan area networkCoordinate systemSubject indexingMultiplication signStandard deviationNetwork topologyDiameterDemo (music)Level (video gaming)Suite (music)BuildingAreaDatabaseMusical ensembleRoundness (object)Service (economics)Goodness of fitVideo gameLibrary (computing)View (database)Graph coloringDemosceneMereologyDefault (computer science)TrailPlanningCurvatureComputer fileMathematicsSpacetimeCylinder (geometry)CodeOpen setEndliche ModelltheorieKey (cryptography)Term (mathematics)Game controllerCalculationHill differential equationWebsiteSeries (mathematics)EstimatorBitTexture mappingOperator (mathematics)Degree (graph theory)Position operatorMetreRadiusMedical imagingSystem on a chipCategory of beingProjective planeAxiom of choiceVolumenvisualisierungCache (computing)Plane (geometry)Computer animation
14:17
Polygon meshStructural loadView (database)BitCubeDefault (computer science)CodeLink (knot theory)Key (cryptography)DemosceneRotationLibrary (computing)Computer animationLecture/Conference
15:10
SphereCubeRotationPlane (geometry)View (database)Link (knot theory)QuicksortGraph coloringUsabilityLattice (order)Message passingCartesian coordinate systemXML
16:06
SphereCubeRotationPlane (geometry)View (database)Variable (mathematics)Object (grammar)Data conversionEuclidean vectorType theoryCodeIcosahedronMach's principleDemo (music)Physical systemTheory of relativityPoint (geometry)Computer fileNetwork topologyFrame problemStructural loadQuery languagePosition operatorCuboidCoordinate systemString (computer science)Object (grammar)Connectivity (graph theory)Sampling (statistics)EmailBuildingTesselationCodeMultiplication signConstraint (mathematics)Data modelFunctional (mathematics)Limit (category theory)CubeMereologyData conversionSubject indexingBit rateGame controllerScripting languageTouchscreenDivision (mathematics)Attribute grammarOpen setDisk read-and-write headMetreBitParameter (computer programming)Electronic visual displayDemo (music)Level (video gaming)Connected spaceWritingMeta elementComputer animation
22:29
Convex hullBinary fileDemo (music)Inclusion mapHill differential equationBuildingPosition operatorLevel (video gaming)BitQuery languageMetreEstimatorTowerComputer programNP-hardLine (geometry)Variable (mathematics)Wave packetSelf-organizationTransformation (genetics)Endliche ModelltheorieDefault (computer science)Multiplication signInteractive kioskGraph coloringCodeAsynchronous Transfer ModeExtension (kinesiology)Frame problemElement (mathematics)Network topologyMereologyNatural numberTerm (mathematics)AbstractionDemosceneTexture mappingKey (cryptography)Right angleCASE <Informatik>AuthorizationDigital photographyCross-correlationMusical ensembleConstructor (object-oriented programming)Computer animationLecture/Conference
28:52
Computer animation
Transcript: English(auto-generated)
00:06
So I'm going to talk about VR Map, which is bringing Open Street Map data into Web of VR. So it's actually using the real world data.
00:21
One thing I would like to know is, how many people here are Open Street Map users at least? OK, how many of you have worked with the Overpass API? Very few, OK. OK, has anyone been to my talk yesterday?
00:41
OK, this will be very similar. I will talk a little bit more about the Open Street Map parts of this, but it will be very similar. It's the same slides. The slides are up at slides.power.at slash positive 2019. I did not get around yet to put it on the main page of
01:04
slides.power.at. They will be there, linked 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 Open Street Map contributor, and have
01:22
been for a long time, mostly in Austria, also pretty active in the Austrian Open Street Map 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
01:46
use of the library I'm using, which is A-Frame, which makes it really easy to get stuff into WebVR, and the ability to use Open Street Map data for this audience, specifically, also a few tricks I'm doing with Open Street Map data for this visualization.
02:07
So first, what is WebXR or WebVR? VR is virtual reality done with web technologies, so HTML, JavaScript, and so on.
02:21
XR is a very mixed reality. This is a pretty new term. It was crafted to put AR in VR under one phrase, and make one standard that encompasses all of those, VR, VR, and
02:41
everything in between. At the W3C, there's a working group for that, and a proposed standard for WebXR. The AR 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.
03:01
It bases on WebGL, Web Audio, and for the controllers, on the game paddock EPIs. 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
03:21
immersion, so you can also walk in the scene, with those you can only 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.
03:41
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
04:03
back into beta again. Mozilla 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 Mozilla is also missing a few patches in the graphics stack. So it's not there yet, but it's in works.
04:24
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
04:47
devices, those also implement WebVR. And as far as I know, Microsoft has done some support in Edge for development, and I don't know the real state of that. So there is implementations in a few browsers.
05:03
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 OpenStreetMap
05:21
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
05:43
you the same thing here on 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 A-Frame library. I'll be coming back to that.
06:01
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 StreetMap.
06:24
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.
06:40
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 OpenStreetMap copyright. And you have a few presets of where it can go.
07:02
And 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. And he was, oh, wow, it's actually this place where I'm at home. Everybody seems to do where he's at home.
07:22
So did I, because this first preset is, what you see in the back there is actually in front of the door of the building I'm living in. This is very new to it. And I already went there to not bore you with flying around too much. So this is the view of very near.
07:42
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. The code is made in a way that it should be easy to
08:02
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 if you want to take more out of it, it's not hard to figure out how to do that.
08:20
One thing that's nice here, and that's why I like the example of this area, is that in Vienna, we could import some data for the trees. All trees in public areas in Vienna have an open government index. And we imported that into OpenStreetMap. And so we know the height of the trees.
08:41
We know the circumference of the leaves and so on. And we know the diameter of the ground, that is, and the circumference of the track. So I can use all that. I still used a very simple model for trees.
09:02
But still, you get different sized trees. And that's pretty nice. In that preview picture I have here, you see that for needle leaf trees, I have a different way of displaying them even. Because we have that data as well.
09:21
And OpenStreetMap has the taste 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.
09:42
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 two
10:03
heights when I don't know much. In this area, I walked around with a 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
10:21
picture of a realistic view. So that's the demo, 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.
10:41
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 a series of choice too much, I actually had to respect the latitude and the
11:03
curvature of Earth, because I'm using the ground tiles from Mercator projection. 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.
11:26
Those ground tiles I'm just using from the default Mavnik tiles that OpenStreetMap renders. I'm using it via a tile cache that I'm operating myself to not overtax OpenStreetMap service.
11:42
The trees and buildings though, I'm taking directly from the Opera Pass 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 this demo as well. There's a camera and controller setup that the
12:03
library has some defaults. But if you want the controllers to work right, you need to put some setup in there to enable this flying navigation and things like that as well. And it's built with the A-Frame library.
12:21
So the A-Frame library, I just mentioned that a 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
12:41
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, an A-cube, an A-cylinder, an A-plane.
13:03
The planes are 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
13:21
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
13:41
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.
14:01
Or a 360-degree image, if you want. So you only need to know HTML if you can do VR scenes. That's pretty nice, ain't it? To show you how this example looks, I probably need to reload, because it still says loading.
14:23
Yeah, and now it's loading. So let's make 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. The default even has the scrolling with the keys, the
14:42
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 3JS library, which is
15:01
heavy JavaScripting, but it's abstracted enough that we can do this. So this is, if you look at the slides, the edit view link is sort of 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
15:30
one? This here? This too? Yeah, I can change that.
15:46
Let's make this zero. Now it's not animating at all because it's animating by zero, and let's make this 360, and now it's going a different axis. And I can exchange the colors and whatever I like to animate this here.
16:01
So it's pretty nice. You can learn more about A-Frame at a-frame.io. It also has a few other samples there. I wanted to get back to my demo.
16:24
Take a short look into index HTML, but I went to that more in a similar room. And you can look into it yourself as well. I want to get more to the OpenStreetMap things here. There has the start dialog and this
16:42
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 conversions in there.
17:00
Position 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 OpenStreetMap parts. I had the problem when I was flying, I could fly
17:21
through the ground. So I said, let's do it right and write something that prohibits me from going through the ground. It's a very nice example of how to easily do a component. And then I have tiles, trees, and buildings.js that loads
17:40
and draws these three tiles, types of objects. So the tiles on the ground, and the trees. It's on GitHub at pyro-at slash vrmap. You will see that URL later.
18:00
With that, let's look at the code, then we'll come back to what we learned. So this is still from yesterday. That's the component. The one thing that's interesting in the component is there's a tick function in there. You just write one function, and that's called every time the display updates. And that's the tick. And basically, on every tick, I set back the coordinates if
18:23
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 imports of scripts. This is the main A-Frame, and then I have a few additional components.
18:40
There is a components indexing on A-Frame IO, where you can find a few things that you can easily plug in, and make it easier to write stuff without JavaScript. That's all the intro dialogue, and then here we have the A scene. That still fits on one screen.
19:03
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.
19:21
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.
19:40
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. The Y min 0 is the really important one that I cannot go through this floor.
20:00
I did not mention the coordinate system. 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.
20:23
So that's why Y min is 0. And I will not go into the mix-ins 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
20:44
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
21:02
time to look at it. I know it's a bit fast now to just have something thrown out here, but it's not hard to understand. And then I want to take a bit of a look. So the tiles are pretty simple.
21:24
So yeah, anyone who has worked with Overpass, here's the stuff that looks familiar to those who have used Overpass. Here I'm having the Overpass query. The bounding box string is calculated from whatever
21:41
we're displaying. And otherwise, it just loads all nodes with natural equals three. Who has actually edited OpenStreetMap in here? So those of you with natural equals three will be something you have heard about.
22:02
And the system of nodes, ways, and relations you 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 you have connections of nodes that are ways. And you can have relations that's just a meta reference
22:22
to any object. And any of those can have key value tags. So natural equals three is a tag. And that tells me that's a tree. Very easy to understand in this case. There are some that are not that easy to understand. Find a fetch that, convert that to GeoJSON, because
22:46
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
23:04
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 jQuery or whatever with this as well.
23:20
And then I'm setting all kinds of stuff here. You see I'm pretty much getting to the end. So a very short look into the buildings. That's a bit more difficult, because I had to find out if all heights of buildings.
23:40
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.
24:03
Or I have a meters 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 OK. Near buildings are usually less, over buildings can even be more.
24:22
And if I don't have that, it gets scary. But sometimes there's building equals like kiosk or cabin or something like that, or carport. I can safely assume those are one level high.
24:41
Those will not be higher than that, usually. And then I have some special defaults, like the house I'm estimating is two levels, as well as a farm. The transformer tower I'm estimating is 10 meters high. And the water tower I'm estimating is 20 meters high. Just to have something that looks somewhat realistic.
25:03
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 reasons, not go in there.
25:23
Very small buildings, I even go lower than normal. So it's not too hard. I hope that's not too hard to understand in terms of code. So what we've seen here is how the cross-device nature of
25:45
those technologies, when we are WebXR. We 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.
26:01
It's a user 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, 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.
26:22
But 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.
26:43
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 OSM rail, someone actually made something where
27:01
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 rail is up there, the GitHub is up there.
27:21
OK, one and a half minutes for questions. Anybody? If you want to color all the buildings based on the values you got back from OSM, that's in doable, right?
27:41
So I actually have in there the color of the building. If there's just a color, it puts 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 right now.
28:00
Would it support using a photograph of the building as a texture? You would need to do some programming to set the SRC and whatever. And it's a bit hard because it would just project around it. So you would probably need to do some manipulation. But I think it should be doable.
28:25
Well, we have come to the end of this day in this room. Please fill out the feedback either via your app, if you have the right device, and otherwise via the website, that gives the organization some guidance for next year
28:41
how to program, and where to program, and what to do with it. Thank you very much.