3D tiles in Mapbox-gl
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.
1495
Formal Metadata
| Title |
| |
| Alternative Title |
| |
| Title of Series | ||
| Number of Parts | 295 | |
| Author | ||
| Contributors | ||
| License | CC Attribution 3.0 Germany: 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/43497 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
| |
| Keywords |
FOSS4G Bucharest 201987 / 295
15
20
28
32
37
38
39
40
41
42
43
44
46
48
52
54
57
69
72
75
83
85
87
88
101
103
105
106
108
111
114
119
122
123
126
129
130
131
132
137
139
140
141
142
143
144
147
148
149
155
157
159
163
166
170
171
179
189
191
192
193
194
195
196
197
202
207
212
213
214
215
216
231
235
251
252
263
287
00:00
Multiplication signPresentation of a groupElectronic mailing listBitLibrary (computing)TesselationWeb browserVector spaceProcess (computing)WebsiteLecture/Conference
01:15
Library (computing)Vector spaceVolumenvisualisierungInteractive televisionVector spaceTesselationComputer animation
01:29
Vector spaceTouchscreenDiagram
01:47
BuildingSampling (statistics)TesselationObject (grammar)Category of beingVector spaceSoftwareComputer animation
02:20
VolumenvisualisierungSoftwareBuildingMoment (mathematics)Greatest element
02:40
Demo (music)Set (mathematics)BitCombinational logicWeb browserLine (geometry)Vector spaceObject (grammar)TesselationOcean currentReal numberComputer animation
03:42
Endliche ModelltheorieStructural loadVisualization (computer graphics)Standard deviationDot productMilitary baseObject (grammar)Source codeWeb browserProcess (computing)Multiplication signComa BerenicesPhysical lawVolumenvisualisierungTesselation
04:52
Multiplication signDifferent (Kate Ryan album)Type theoryTesselationTessellationSound effectNumbering schemeBlock (periodic table)Bit
05:07
BitOffice suiteQuicksortTessellationAuthorization
05:26
TessellationSemiconductor memoryShader <Informatik>Zoom lens
05:45
BitComputer animation
05:58
Presentation of a group
06:22
Slide ruleInformationCore dumpDifferential operatorLibrary (computing)MappingIntegrated development environmentBuildingCuboidMultiplication signTesselationArea
06:51
MappingTesselationMultiplication sign
07:17
Slide ruleStructural loadShape (magazine)Perfect groupDressing (medical)InternetworkingDatabaseComputer animation
07:35
RoutingBasis <Mathematik>TesselationInternetworkingDatabaseDrill commandsLecture/Conference
07:59
GeometryInternetworkingComputer programFunction (mathematics)CodeGeometryTriangleLibrary (computing)Multiplication signScaling (geometry)BuildingTesselationWeb 2.0Graph coloringLevel (video gaming)Attribute grammarDifferent (Kate Ryan album)DatabaseResultantBitNormal (geometry)Standard deviationCurvatureTranslation (relic)Projective planeTessellationPolygonRepetitionMereologyRootFamilyLaptopArithmetic meanNetwork topologyInternetworkingNichtlineares GleichungssystemWeb browserDrill commandsComputer animation
10:15
BootingFunction (mathematics)Line (geometry)Library (computing)Data conversionComputer animation
10:33
Point (geometry)File viewerGeometryTessellationPoint cloud
11:00
Texture mappingInformationObject (grammar)Category of beingCuboidDigital photographyTexture mappingTesselationLevel (video gaming)BitDifferential operatorPolygon meshComputer animation
11:33
Object (grammar)Complex (psychology)BuildingLecture/ConferenceMeeting/Interview
11:46
CuboidComputer clusterReliefFunctional (mathematics)Texture mappingTesselationCodeSource codeLevel (video gaming)Sound effectPoint (geometry)ImplementationPresentation of a groupEstimatorPhysical lawLatent heatGroup actionRing (mathematics)Row (database)GeometryLine (geometry)InformationStapeldateiArithmetic meanBitBit ratePhysical systemMultiplication signMechanism designVector spaceVolumenvisualisierungTessellationSemiconductor memoryGoodness of fitValue-added network
Transcript: English(auto-generated)
00:07
I had a talk this morning, and I gave a disclaimer in advance, a warning that I never practiced the timing of the talk. This time it's worse. I didn't practice the timing of the talk.
00:20
Also, I'm not the main presenter, actually. The main presenter could have been Rubio or Ana, also on the list. They couldn't be here, unfortunately, so I'm doing it in their name, but I think I can answer most of the questions. By the way, the first talk was very nice within the time, so I believe this will be fine as well.
00:44
Okay, 3D tiles in Mapbox.jl. Who knows Mapbox.jl? That's about what I expected. Who knows 3D tiles? It's a bit less. Who worked with 3D tiles? Okay, so sizable amount.
01:03
I'll get into details halfway. First, I think this is just, I copy-paste this from the website, Mapbox. What's Mapbox? It's a JavaScript library that is able to render with the WebGL, which is incredibly fast in the browser, and you can use vector tiles and Mapbox styles.
01:25
These vector tiles are great. That makes it go very fast, and you can do really cool things with it. Now, this is the thing I didn't practice, and I hope it works well. Yeah, it opens on my screen here. Of course.
01:54
Yeah, okay. See, I should have practiced. This is just a sample of what you can do with...
02:01
It's a very quick mockup of what you can do with vector tiles in Mapbox. You see buildings are taken in as 2D geometries, but you can extrude them very quickly. You can color them based on some properties, and when you hover over them, you see that the properties of every object are shown here. That goes lightning fast, and you can do amazing amounts of data in one go, depending
02:26
on how fast the network on my hotspot is at the moment. Okay, that's cool, but this is not really 3D, what you're looking at. This is actually 2.5D, it's just buildings extruded from the bottom, and yeah, this works.
02:45
Another example what you can do with it is this. This is actually vector tiles combined with another data set, which was hopefully loading. What you should have seen is roads, where the traffic is actually moving on the roads,
03:03
and the nice thing is in WebGL, you can pretty quickly render amazing amounts of data. Oh, here it comes. And if you zoom in a little, I'll just click a random one, is that you see that actually all of these lines are moving. This is the actual traffic in the Netherlands currently.
03:23
Not much happening, as you can see, since it's not red, and it's the actual speed the cars are driving. So this is an amazing thing you can do with WebGL. This would not be possible in any technology in the browser. But we want to do a little bit more, and that has to do with real 3D objects.
03:47
This is a small example, I copied and pasted from somewhere. This is an example where I can use 3GS. 3GS is also a render engine in the browser that can handle any 3D objects,
04:01
including shading, so that works pretty nice. But you can only do one object at a time, and it takes quite a lot of resources because you load all the data in your browser, and then you have to start rendering it. So does it do 3D tiles in my books? No, it doesn't, that's obviously the answer.
04:21
What are 3D tiles anyway? 3D tiles are a standard, not long time ago, formalized by the OGC. It's a pretty complex standard, that's my opinion. It takes a while until you understand the workings of it. But once you get a hold of it, and once you can use it in your software,
04:44
your viewers, you're quite easily able to draw in lots and lots of data, which is real 3D data. This is to show the effect of what a 3D tile is. Every white block you see is a tile. And what you're used to with normal tiles is that they're nicely next to each other,
05:02
and every time you zoom in or zoom out, you get to a different tiling scheme. This is a bit different, you see the tiles are inside each other. And it depends a bit on how many entities there are in your tile, whether how big it will be. Okay, this is not MedBox, this is Cesium.
05:24
This is where I wanted to go. Cesium is obviously, since the authors of Cesium also authored the 3D tile spec, this 3D tile is in Cesium, which works pretty well. I didn't zoom out to the whole city, but you can render the whole country, if you like.
05:41
If you remember, you can hold it. And it has a nice shader. So this is the idea of what we wanted to reach in MedBox as well. Now the question is, did we get that? And I think that should be, yep, on my next slide, I'm a bit stuck.
06:20
I'm trying to cancel my presentation.
06:23
Yeah, okay, this is the real thing. So this is actually MedBox, what you're looking at, in the MedBox environment, and it has 3D tiles in it now, which would theoretically enable me to load the whole world if it was put in 3D tiles.
06:41
It is pretty conservative currently, because you see the buildings disappearing once I zoom out, but when you zoom in to, for instance, this area in Amsterdam, you start seeing the houses appear. It goes relatively quick, the loading, actually quicker than Cesium, probably also because it's more conservative in throwing away houses,
07:00
and it has no terrain, which is an important feature. So yeah, with a relatively small library, which you can download, you can add this on top of your MedBox maps and then you have the ability to do 3D tiles. Now, how do you do that? By the way, how am I doing in the time?
07:21
Oh, perfect, perfect. Okay, how to do that yourself? First of all, you need to have some 3D polygons, which are not very difficult to come by if you look at the route on the internet. Many city councils or provinces are distributing
07:42
some kind of 3D data. You can load that in your Postgres database. It will usually be automatically converted into polyhedrals, and polyhedrals is the basis of our 3D tiles. You use OGR to OGR for that. Don't forget to add dimensionality of three, otherwise you end up still with 2D geometries.
08:07
A little caveat that we didn't think of, it is a different projection than normal in MedBox. MedBox is using Web Mercator, which is not used for handling 3D, not that often.
08:20
So which means the houses were rather suppressed when we loaded them the first time. The scaling was not good in the height. Actually, it depends on what latitude you are on Earth, what happens with the scaling. If you would be, I guess, on the equator, it would be normal. If you're on the pole, it will be completely flat. So you have to add a bit of scaling depending on your latitude.
08:41
By the way, who knows SQL? Okay, I'm safe. As well, you have to put it all on the floor, on the, how do you say, ground level, you say? On ground level, because MedBox doesn't do terrain, it needs to be on zero sea level. So that's a little translation you have to make.
09:05
For the sake of being able to handle with it, there is already a nice library called Py3D Tiles to put your geometries into 3D tiles. We wrote our own to be able to do a little bit more with it, which you can download from there.
09:22
And basically what it does, it reads a whole database with polyhedrals and puts them nicely in your 3D tiles. And it even uses, and that's a nice part, you can add colors to it. So if you have an attribute in your column which says this building should be red or green or whatever, it assigns that color. If you do it per polygon in your building,
09:43
so your building consists of triangles, if you give the right index, you can color every triangle separately, which means your roof's gonna have a different color than your walls. A little caveat this time, it's not very quick, as you can see.
10:03
Now the results of that, you publish somewhere on the internet, as long as you can reach it with the browser, then you can open your 3D tiles. You get the code, you add it to your standard map box, you add those lines, you just need three yes,
10:21
obviously, because we're using three yes to render it. You need some converter and the library itself. And then it works like this, you just add it, and then you would get the output that you just saw, which is this, if you take the example we put online. This is fairly easy.
10:42
It's not much different than extruded roofs because they're all flat, as you can see here. But believe me, you can also do any kind of geometry. And what's nice, you can add points to it. It also handles point clouds. That is to say, the viewer handles point clouds, not the tile.
11:02
Okay, I'm almost done, we come pretty quick, actually. Where do we want to go from here? What would be really nice if somehow we can add this terrain to the map box viewer, so we have height. You can do several ways of adding the height. You can make 3D tiles out of it,
11:20
which would be a bit waste of resources, maybe. Use quantized mesh, we're still looking into that. It would be nice if you can properly texture your houses, like if you can plot photos on it or something else. And what is really lacking currently is you can't click on the buildings. And I think that's the main feature you need.
11:40
You want to, in the end, click on your objects and you want to know what's in them. So that needs to be added. Ah, and then we're all on the last slide. Thank you very much.
12:08
Yeah, it's working, so any questions for Tom? Yes? Simple one, please. Yeah, I'm sorry if I missed that, but basically, what was the motivation behind this?
12:21
Because if cesium can render 3D tiles well, and then why bother rendering them in Mapbox GL? Is the motivation performance, or is it something else? Thanks so much for this question. I just now noticed I missed that slide. I didn't put it in. Why would you even put the effort into it in the Mapbox?
12:42
One, you said performance is an issue. I think Mapbox, because it's a bit more simple than all the bells and whistles you have in cesium, it just performs better without doing too many tweaks. Two, it's easier to implement for the average user. It takes a while before you have cesium
13:01
running as you want it. It is just that lines of code you saw to get it in Mapbox running. Yeah, thank you for the presentation. Do you have any estimations for the roadmap, for the textures, adding, for those kind of things?
13:23
Depends on the funding, of course. No, no, to be honest, that's a joke. I think first priority is to make it clickable. I think that's more useful for ourselves, at least the textures, I don't know. It will be experimental. I'm not even sure if it will really work out nice. It's a bit experimental.
13:42
Okay, thank you very much. Somebody else? Thank you. The question is that, probably not the question, maybe you know, because Mapbox has created a working group to create the new specification for the vector tiles
14:03
with support in 3D. It was like in April 2018. And I'm not sure if they created something or not. Maybe you got some insights or you were in this working group, et cetera. So the question was, do you know if Mapbox itself are going to implement the 3D
14:21
into their vector tile specification? Thanks. I can be very short. I was not aware of any implementation of 3D in vector tiles, no. Though I looked for it, so it must be a bit hidden. Some other questions, because we still have more time.
14:46
So for this work, do you rely on a specific functionality from Mapbox GL? I mean, is there a custom layer that you can, that you leverage or something for being able to implement this?
15:00
This is my phone. This was too difficult. I'm not sure from what I, I didn't write the code myself. From what I've seen from it, no, it's not a custom layer from Mapbox. What it does, it does use the tiling.
15:21
I'm really digging out my memory. I don't think it's a custom layer. If you open up source code, you'll see quick enough. I'm quite sure it's not very much. But I think the answer is no, it's not a custom layer. Because my underlying question was, would you have the same endpoint
15:40
for being able to implement the clickable functionality? Because maybe you need some mechanism from Mapbox GL to be able to implement it. Yeah, good question. I'm just guessing. I think the issue is more in the 3D tiles themselves that they're lacking the information still. The way we build them, there is no feature information the way it should be done.
16:01
You need to use batch geometries in 3D tiles. We're not using that. So that's why it's lacking. Somebody else? Okay, so thank you very much. Don Van Tilburg. Thank you. Thank you.