 I'm gonna talk about drawing maps with OpenGL. My name is Lauren and I work in Mapbox. So we released MapboxGL this summer first as GL native, which is written in C++ for native devices. And then we released MapboxGL.js about a month ago for the web. So OpenGL is an open source, low level graphics API that's been around for about 22 years. So at this point it has pretty good hardware and software render support. And more recently, WebGL has pretty excellent cross browser support for mobile safaris adding support, I think, with iOS 8 too. Cool, thank you. But so traditionally web maps has been done with CPU-based rendering, which there's a lot of good reasons to do CPU-based rendering, which is a lot of great things, but a lot of web mapping is moving increasingly towards GPU-based rendering. And it has some limitations still, but ultimately drawing on the GPU is just faster. And it allows for some really cool things like continuous zoom or like arbitrary map rotation. And it also allows access to native hardware acceleration. But out of the box, OpenGL only draws lines and triangles, and for maps we need a lot more than lines and triangles. So basically, if you want to draw a map, we need lines, polygons, icons, and text ultimately. So those are kind of the primitives that make up what we know as maps. So drawing lines, like I said, OpenGL actually draws lines and triangles. So lines should essentially be the easiest things to draw. But it turns out that OpenGL has a command called GL lines, but this is what GL lines look like. So they're not anti-LIS, they don't support mitre joins. They often only support integer width on many devices, and on some devices, they don't support widths greater than 10 pixels. So if you've ever seen good-looking maps, they don't look like this. So we need to figure out a different way to draw. My maps look like this. That's okay. So we had to figure out a different way to draw lines, and the way we do that in MapboxGL is by using triangles. Like I said, the other thing that OpenGL draws is triangles. So basically, this is what a line looks like in MapboxGL. So it's made up of six triangles in this case. So the innermost two triangles make up a quad that is the width of, the specified width of a line. And so basically you pass those through MapboxGL shader, through OpenGL shaders, and they're gonna shade the inside of the line. And now we can do arbitrary width lines, and they can be smoothly scanned, but then to make anti-LIS lines, we also have to draw these two more quads on the outside that form basically these gradients here. So those basically pass in alpha values to the two vertices on the inside of those quads. That's one, and alpha values on the outside, that's zero. And then OpenGL does free linear interpolation. So then you can just interpolate between those alpha values to draw basically opacity gradients, and that's how you get a nice anti-LIS line. And another thing we need for drawing lines on maps is nice joins, so round joins, bevel joins, and miter joins. And I'm not gonna go into that too much today, but it's a similar process of figuring out how to draw those geometries using just triangles. And there's an awesome blog post on the Mapbox blog that I'm gonna call in Constantine that you should definitely check out if you're interested. So another thing we need to be able to draw on a map of text, which is super important. And we need text at arbitrary rotations for curve labels, and we also need text halos, which is pretty distinctive to web mapping, but super important if we wanna draw a text over anything. So if you look into rasterizing text, one of the really common things to use is free type, which is kind of the go-to open source library for rendering text. And basically what free type does is it creates a glyph atlas of all the glyphs that you might need to use in your map, so it's gonna look kind of like this. And once again, instead of, because we're using GL, we need to use triangles. So it's basically gonna break up each glyph into two triangles and figure out how to draw that glyph. And it does a pretty good job of this. It's essentially copying a bitmap representation onto your map, so you're copying it pixel by pixel from the glyph atlas onto the map, and that's fine for a little while, but then as soon as you start rotating map, it becomes pretty blurry, because using OpenGL's linear interpolation, like I said, it's free, but it's not the best when it comes to something as precise as a glyph, so it doesn't render a very nice text. We could also re-request a glyph every time you rotate the map from free type, but that's gonna become pretty expensive and it slows down our map a lot, so we had to find some alternative. So instead of using free type, there's a paper from Valve Software on sign distance fields that we looked into, and sign distance fields basically, instead of using a bitmap representation of the glyph, it makes something looks like this. And this looks really blurry, but it's actually not a pixel blur. It's actually where each of those values represents the distance from that point to the outside of a given glyph. So at that point, basically everything that should be rendered inside the glyph has a negative value and everything that should be rendered outside the glyph has a positive value. And using OpenGL's free linear interpolation again, you can interpolate it and scale these up so you can have glyphs that are pretty small and then scale them up nicely and end up drawing really nice looking glyphs. And we actually added another optimization, which was to step all those values instead of doing above or below zero, we changed it from zero to 191 and then 192 to 255. So then essentially we're mapping these color values to whether or not a glyph should be rendered. And the cool thing is that using this, we can also render textiles for free that are pretty accurate, because we just changed the threshold. Like I said, instead of doing 191, we'll just change the threshold to something lower and that way we can render basically just fatter text and that'll create pretty great text halos. And doing this actually ends up producing really nice scaling, really easy to rotate text. And this is what a glyph atlas looks like in using STFs. There's some other interesting things about rendering text in OpenGL, like label placement and context sensitive text replacement, and there's a couple of good blog posts on the Mapbox blog by my colleague on this about other parts of rendering text in OpenGL. Is that the matrix? Sorry. The matrix. That's the matrix secret, yeah. It's nothing to do with the geologist school. No, I'm just kidding. So another thing we have to be able to draw for maps is polygons. And polygons again is gonna be a pretty similar process to how we're drawing lines where we basically just have to figure out how to draw a polygon using triangles. And we did this in Mapbox GL native and it was working quite well actually where we tessellate a polygon into triangles. But in JavaScript, any of the libraries that were out there were kind of too slow. So instead we used this trick called using a stencil buffer, which basically creates a secondary buffer of a map, or just a secondary buffer and then you can draw the shape and fill in everything and then just copy part of the buffer back to the screen. But that's actually kind of expensive because you're copying this buffer back and forth and it uses more memory than we really need. So we wanted to also bring it kind of back on parity with native. And also GL is just better at drawing triangles than it is at doing things like copying stencil buffers. So actually Vlad, as you know, is really into like small code and was not happy with all these libraries that are already out there. And so he wrote his own implementation of something called CIDL's randomized triangulation algorithm that will basically tessellate a polygon into all these triangles. And this is how we draw them with Mapbox GL. And so his library is also open source now. It's Mapbox, it's like GitHub slash Mapbox slash CIDL if you want to look at that. It's pretty cool. So a couple of other interesting things aside from the basic map firmness that we wanted to be able to do, we wanted to be able to draw blurred layers. And so we wanted to be able to blur anything together not just lines or, you know. So what we ended up doing was looking into pre-rendering. So instead of drawing a layer and then blurring it, what we ended up doing is using a render buffer which is like a secondary off-screen buffer that you're gonna draw layers to. So for something like hillshades which I can show you in a minute. I don't have the slides in here but we can draw multiple layers to a render buffer and then apply a Gaussian blur over the whole layer and then render that layer to the screen. And the cool thing about drawing blurs in pre-rendered layers is that we can actually draw them smaller than they actually need to be on the map and then using OpenGL's free linear interpolation we can scale them up and because they're blurred it actually looks pretty great. And that way it's faster than rendering blurs to entire like full-size layers. Another cool thing is a lot of people are kind of wondering what about like older machines? Like you know maybe your machine doesn't support WebGL or maybe your browser doesn't support GL. So we're kind of working on something experimental. Using node bindings to render headless Mapbox GL needed from server and then save those tiles and serve them to devices or browsers that don't support GL as kind of a fallback but that's like I said, still experimental. And we're working on also creating a style editor that'll make it easier to edit styles because now that it runs used to Cardo CSS we're doing something totally different. So hopefully that will make it easier. But yeah, so, any questions? Let's get to our final government with just a bat on the GIS. Question and back. Sure, sorry. Yeah. I think it's used with newer maps, like brand new back-to-cares, and Alpha Transparency in the CDF 3D. And I wondered if you could give a little more insight on those algorithms and trying to do that and is there any one solution that actually works on every browser that we're talking about? We're talking like literally brand new and just bought it last week, master pairs that show snow. And we'll talk about this more later today so we're gonna talk about it. I'm just curious if you've got any thoughts. I think that's a hardware question that is just way beyond what I understand about GL to be honest. Which algorithms they're testing against, when they're building new TVU's and stuff like that? I don't, I don't really know so much about like the internals of devices in OpenGL but. Interesting. So you guys are doing the cesium talk this afternoon? After the cesium talk. Oh, okay. We have a cesium talk. Yeah, we're right after that. Oh, okay, awesome. But if you have like cool bugs, if you start working with Mapbox GL and you have cool bugs that you find in various devices, you should totally send them to us and we'll try to look at it. Make more triangles. Make more triangles, always more triangles. Steve, I'm gonna say my, I have another question, would you know what it is? But this question is, how, so if I'm a weekly developer. Yeah. And I wanna use some of these really cool things that you've done. How easy is it to take some of the Mapbox, I know, so you showed a demo of the PIN that said, what, weekly GL works? But how easy is it to combine all this new hotness with the simple? That's actually a question that Vlad might be good at because he's also actually developing like leaflet for Mapbox GL, right? Kind of. Just to be short, it's just like two lines of code. It's just takes a Mapbox GL map and puts it under the leaflet. Well, not under, and it's synchronized so that you have to zoom. So it just still kind of works as a background. So you can put markers and allways and some vectors as you do with the leaflet, but you can also have another, you know, background. You don't have a patient like that, but it's still a nice experiment and something you can do with it. Yeah, we have another colleague who just started actually who did some experiment combining DOM elements for to make like 100 markers on a map using just like getting the position of a pixel on the map on the screen and it works pretty well. But it's kind of a hack, but yeah, it's still pretty new, so. Not a question down front. So like what, 18 months ago where it's, where it's just you before and like the world was like over jail and everything and our minds literally blown by some of the stuff that we've shown, like how hard is this to actually implement? I mean, because we've been talking about it for a while. It's been sort of, you know, like, I like to be honest, you know, you've had a few states not that would say to like, how hard is it to really develop a full application? Now, does it actually map a full application? What would you do against it? I would say one, it depends on what your application is, but also, I don't know what you mean by how hard is it. So Mapbox GL started in some capacity, May of 2013 as kind of an experiment. And like I said, we released native in May, I believe, May or June and then JS in August, which are basically two different renders that do the same thing. I don't know how to answer how hard is it. I mean, like, so you have like the building and applications that use this one? Yeah, I mean, like, so we have like a leaflet application, right, or an open-layered application, what about application, right? You're gonna work that out with Mapbox GL, I mean, like how, like, to build a, say, to take your application from 1.0 to 2.0, how much work is that to then regret all the bad minders and everything? Oh, so to use Mapbox GL? Yeah. We use it like a whole another, like is it twice the work, is it just, why is it gonna be doing a little bit less code? Like, how does it feel? Well, it's probably gonna redo it a little less code. I mean, it depends, like I said, on some of the upcoming work, maybe if it's using leaflet with leaflet GL. And it also depends on how complicated your map is, I suppose, it shouldn't be too complicated. The styles, like I said, are pretty different. So I don't know if you've seen Mapbox GL, like Jason, that's pretty different. Like I said, we're working in an editor that's gonna make, hopefully, restyling the map pretty much easier and has like a nice UI and sort of just a code editor. But so it's not like a one step shop, but it'll kind of free your maps and allow it to do a lot of things, so. Right, and then the other point is, what is the use case, what is the user experience that we want to create that actually demands this advanced technology? Like a rapidly changing styling of a base map on the fly. And the idea is, this technology is so on the edge and yet the majority of our work is take 100 points and pop them down on some tiles, right? So unless we're going to the sensor web and huge volumes of dynamic data changing by the second, then some of this technology is the only way you're gonna handle that. Versus all our traditional use cases, we get by well. I mean, it took SDG what, 15 years to become useful in everyday deployments. So it's a chicken and the egg problem in some level. Question. CSS versus, versus the town or the members field. Are there plans to build some sort of convert that gets you part way there? So we thought about that, but ultimately Mapbox GL can do so much more than CARDOS CSS. So at this point, I think we're not really planning on building a converter. There's like a little bit of learning curve, but it, it's worth it. It's worth it. We're radically restyling on the fly in the back. That's the brain, sir. So, I had a real question before that. What's the brain in the world? Is that my question? Okay. I mean, in my opinion, not everyone knows like is using GL yet. So GL is still its own brain in the world a little bit and the things that you can do it that are just pretty endless. So I think there's a lot of cool things that are gonna happen with GL that people are gonna figure out. I'm actually gonna show you, this is the editor that I mentioned that's still like very much under development. So I'm probably not supposed to show it to you. And I'm gonna, but so like things like this. All right. I'm copying this. You know. Yeah, I'm totally gonna see that. And you can like, you know, your map will change on the fly and you can, I don't know, do all kinds of things. This is what the JSON looks like, basically. I also, someone at Mapbox made this pretty cool. Storytelling feature here. Using DigitalGlobes new imagery where basically we can like scroll down here in it. And this is using a raster type of tiles, obviously, but just like the interactions you can create with GLJS are pretty cool. Wow, there we go. Let's clap that. All right. So if you're playing JS Geo Bingo, story map has been taken. It's not on. I have one criticism of the speakers. Not one of you showed hexagon maps. That's not hot, if you wanted to tell me. That's, let's say, but real quick. Does this only work with Mapbox Server or can I use it with other things? Can you use it with other things? You can use it with other things. Okay. I just wanted to know if it was somehow I had to use Mapbox to get this cool stuff. Well, it's Mapbox GL. So you can use our library on self-hosted tiles, right? Do you need some kind of key or something like that, right? You need a public key for Mapbox for if you're using Mapbox-hosted tiles. So if I need you to read that, right? Got to pay map, the one-seeds, buy a few one-seeds. Buy some one-seeds and we'll call you. You'll get a library for free. How about that? Folks, let's give our one final round of applause.