 So my name is Patrick Hosey. I work for a company called Analytics Graphics outside of Philadelphia. And we do a lot of visualization work. We do a lot of 3D globe kind of work, for a lot of aerospace work that we do when we want to visualize satellites and aircrafts. And maybe three and a half years ago, I was a hardcore C++ programmer doing OpenGL. And we wanted to take our engine to make it cross-platform. And suddenly, WebGL came out. And we're like, ah, we're not porting our code. We're writing new code. We're going to go all in JavaScript. And we're going to use WebGL and see how far it can push it. And then, you know, we did it for a while internally. And then about two years ago, we released an open source JavaScript library called Cesium. Here's the website here for doing 3D globes, hardware accelerated right in the web browser. So everything I'm showing today, of course, is in JavaScript. And what I want to do is kind of do two things. One is I'll walk through some of the features by going through some examples. And then I'll introduce the API and do a little bit of coding, like I said. And if there's any time left over, we'll go run some more demo apps. So we have this thing called Sandcastle, which is like an IDE for prototyping Cesium applications. And down the bottom here, we have a bunch of different examples. And then in the top right, you see the Cesium globe. And then the code will come up over here when you pick an example. So you can be like, oh, I want to do, I want to load Geo JSON. What does that code look like? Then you could tweak it. And here, we just have one line of code that creates a Cesium object. And here is what you get for free, just with that one line of code. And I'm going to say open a new window to get some more space. So here, I think you have your 2D map. But only it's in 3D and it's streaming imagery just as before. So we could zoom in to Portland. And then as we zoom in, we get the higher res. But now the big difference, of course, is we can tilt it. Then when we tilt around, nearby, we have the very high resolution imagery. Then in the distance, we have lower resolution imagery. And then as we move around, we load in new data. We do use web workers for processing some of the data that we load in, both train and imagery data. Then if the cache gets too big, we have victiles. And we try to keep the visual quality as high as we can based on where we're looking. There's also an atmosphere here that you see. And then when you zoom out, I'll go home. There's the stars out here, which it looks like you guys can see pretty well. And then you can do a ton of different imagery types. This is Bing Maps, but it does Azure, WMS, TMS, WMTS, OpenStreetMaps and so on. So we could change this like OpenStreetMap in the same deal. I'll switch it back to Bing. And then one thing I really like about 3D is we can do terrain. So I'm gonna turn on some terrain data. And this data set here is from a variety of freely available data, SRTN, NED. So it's generally, some of it's one kilometer, some of it's 90 meters, some of it's 30 meters, some of it's 10 meters, some of it's, I think some of it's even three meters. So you can get some really high-res stuff. A place I love to do testing with is called Seneca Rocks. This is in West Virginia. When I was younger, I used to rock climb here a lot. So I like to zoom in straight down. We're looking at this fin. And this is a cliff that people climb. It's like maybe four to 600 feet tall, I think. And the peak, I'm telling you, this is not exaggerating. It is like six foot wide at the top. It's amazing when you're up there. And here we're looking. This is like the campground down here. So I could zoom in and go around. And again, you know, this is awesome. This is all in the web browser, right? All in JavaScript, but all the heavy lifting in terms of transforming all the triangles and shading all the pixels, it's all WebGL. So I'll go home. And then we do, you know, mass events and we also have touch events too. And WebGL on mobile is getting pretty good. I wouldn't say it's like 100% there, but it's getting pretty good. Android in particular is looking great. Windows film is actually not that bad either too. It's impressive. I'm gonna- So you think we set a nice thing about Windows? I think so. I hope Microsoft people take note. Take note. I'm gonna switch the terrain data set to a data set that has a water mask in it and zoom into like San Francisco. And then here, this water, again, you know, that's all done in a shader, in a fragment shader to do the bump mapping and to get the specular light where this, wherever the sun may be. So that's a fun effect. And then I'll zoom out. Now I'm gonna speed up the camera a lot here. Oh, I just dragged this maybe. How's everyone's digestion? Good? And then, you know, we do daylight lighting, all that kind of stuff. So this is just a basic cesium globe that you get, you know, one line of code. You could bring in the jobs for fun. Come again? Are the stars actually accurate? The star, yeah, so that's a star map. It's probably, I want to say it's a 1K, it's a 1K cube map. So it's six textures, sort of 1K by 1K. And they are rendered in the ICR frame and the rotation it's happening is very accurate. It's very similar to the work that we do on our desktop outer space apps. But at 1K resolution, that's where you're gonna lose the precision. Okay, so yeah, I'll show you guys some more features that, you know, some things that the engine can do. And I'll keep an eye on the time, so I promise some coding or code copying and pasting and I'm gonna come through with it. So one thing we do that I personally really like is the graphics guys, you know, we do 3D models. So here is one of our artists took the cesium logo and put on an aircraft and I love this model. I know the model's not moving, but this is just a simple example to still load it. Here's another one that I really like too. This is a character, this is skinning going on. So instead of it looking like a robot when it bends its arms, each vertex actually has multiple matrices influencing it to get like the pseudo bend at the joints. With my work, we don't do a lot of stuff with individual characters, but I'm hoping someone's gonna take cesium and do something cool like this and email me when you do that. So the models here are using a format called GLTF, the GL transmission format. It's, I'm working on that with Kronos. Kronos is the same group who does WebGL and OpenGL and Kalada and so on. GLTF is all about efficient 3D models. So it's JSON representing kind of the skeleton of the model, the node hierarchy, and then binary data for the geometry, the textures, and animation data. So it's pretty efficient compared to like Kalada. Like what we do is we take Kalada and convert it offline, and I'll show you a demo of that. You know, there's an API for drawing billboards, markers, place marks, whatever you wanna call them, and you can fade them in and out. Let's see, fade by viewer distance. You know, so you can kind of, as you zoom out, you can declutter the scene. There's an API for moving the camera. So initially you'll see what there's a inertia on the camera, and then there's an API for doing all sorts of things, like say I wanna fly to San Diego. And the camera flights, we actually need to improve these. Depending on the type of camera flight, it's pretty complicated to pick the right control points. Let me jump to this, do a little more of a tech demo here again. So let's zoom to like Death Valley is another good place for testing train. And let's zoom in. And then this is a debugging tool that we use for development, I could say. Suspend LOD updates. And I could zoom out and say, okay, well that's the part of the world that we were drawing. So what the view for us, I'm calling it all. And then we could put it, let's stop suspending and maybe look at the wireframe. And then I'll suspend again. And then you see I have pretty high resolution detail here, but then when I zoom way out, I didn't actually drive on this part of the demo. So hopefully these triangles are gonna be bigger. There you go, you see they're much bigger over here. So these debugging tools are so useful. Like if you invest the time in making these tools, it's gonna pay back like 10x when you come across your first bug. And you need to use these tools to find them. We load GeoJSON and TapoJSON and the triangulation right there to take all of those polygon points and create triangles for them. That's done on a worker thread. And then here I'm overriding and doing some custom graphics. So this is the altitude here for each one of these is based on the population. And actually Pennsylvania comes through here pretty high on the population. I wasn't expecting that. I move so. But yeah, use of web workers is usually in geometric processing like this then also in preparing a terrain imagery data for rendering. And here with this giant geometry library that we spent a while working on, but it can draw like anything under the sun. Polygons, polygons with holes, walls, polylines, rectangles, circles, extruded volumes of any shape. Are these cool corridors? I really like this thing here, you see this star? So you can take any 2D shape and then you can extrude it along a polyline. So like the main use case for this is an air corridor, like where is an aircraft gonna be flying, but you could put a star or triangle or anything there. And then you can batch all these up together. Even if they're different types of geometry, you can put them in the one big vertex buffer and then render them in one shot, which is really efficient. And that pipeline again, we use web workers for it. And we do see very different performance and different browsers in terms of the web worker processing. Let's see, what else did I wanna show here? We do a lot of post-processing on the imagery. So different image providers, they're too bright, they're too dark. So at runtime, we can change that and that's done in a fragment shader. So it's super fast and done on the GPU. It's basically free. And if you're not using any of these, we actually don't generate any shader code for it. So you only pay for what you use. Let's see, what other ones? Okay, let's jump to one I like a lot, which is the CZML. So there's KML, I'm sure a lot of you know KML or probably even use KML. KML is not really built for the web, right? Like it's XML, it's kind of verbose. And we do a lot of time dynamic stuff like these satellites here. I'm switching to full screen now. And KML isn't really good at doing time dynamic data where I want to give it a bunch of key frames and say how to interpolate them between those key frames. So we made an open JSON schema that we actually hope to standardize one day called CZML for the CZML language that can do this kind of time dynamic visualization. So these satellites were computed in our desktop app called SDK and then we just outputted the data into the CZML and then we just gave it to CZML. So there's this one, you can fly on this Manaya orbit, I'll go home. So the other thing, our focus really is on 3D but the engine also does 2D and I can switch to 2D. So it's the same API I just said, switch to 2D. And then same deal, I can zoom in, I can spin it around, all that kind of stuff. And then we also do something that we needed to kill a use case for this but I really like this. Oh man, it crashed. Invalid at ray length, huh? Doesn't matter. Last spin. Refresh, here we go. So talk this about stability. Perfectly stable. Perfectly stable, unless you're in front of 100 people. No honestly, stability is pretty good and one thing, actually let's talk about that for a second. This is a total aside but I think it's awesome so. So one thing that we do every year that's called NORAD tracks Santa, how many people track Santa on Christmas Eve? Yeah, we're admitting it. So we track Santa with cesium and this is NORAD and they got their geosynchronous satellites, they got their radar, they got Santa cams, they got fighter jets and they use all this technology to find out where Santa is at any given point in time on Christmas Eve. And for a while they were using Google Earth and Google Earth plug-in to do this and then recently they switched to open source cesium over the past two years and this is, last year we got 20 million hits in December and then the WebGL's accessory was just shy of 50%. So we had about 10 million people use it. No reported crashes for the record. So your stability actually is generally pretty good and then this is a challenging project because the hardware is all over the place, right? Some of it's really good, some of it's not so good. So we actually monitor the frame rate. You know, we give it like a five second grace period then we monitor the frame rate over X number of seconds and then we might switch to a low-quality model. We'll be right along. All right, now back to the... Oh, look at the time. Back to the schedule demo. Yeah, so let me show you guys again. I'm gonna do it for real this time. Switch to 2D where I can go reference in 3D but this feature here that we call Columbus View. So this is two and a half D. So we actually, you know, we have a couple cool use cases but I think there should be more. I think there should be a very useful thing and I really like the Nile orbit for this one because I can speed up the clock, right? And then I can kind of, whoo. And that's fine. Now the one problem. What's the use case? What? Shall I order one? So we have a D3 demo where we show the well-health and wealth of nations and if you wanna see the globe and the extrusions dancing up and down, it's pretty useful. For this particular application, it's not so great because it looks like satellite can see anything but it really can't because the globe wraps around, right? So yeah, those are kind of the major features in the API that I wanted to show off. And then I wanted to give you guys maybe a little taste of the API and just do some simple coding here. The data that I had that I prepared for us, it's just a couple, a Geo JSON file, a simple CZML file that have a 3D model. So since that data is local, I'm gonna actually run a local version of this. So I like this, I'm sure most people have seen this, so I did some programmer art for using this Geo JSON.io, which is a nice simple Mac tool that I can use to make some JSON. So I made a very simple JSON file for us so then I'll grab some of the code to load it. And then here you can see I'm an artist. And here to use the API, we just created Geo JSON data source. I point it to the Geo JSON file, then I add it to our list of data sources. And then something like CZML is just as simple. So I'll grab some CZML data and I'll paste that in. And this just shows a vehicle label, but if we zoom into it, then I think that's just south of Death Valley. You know, the vehicle's moving. Yes, okay. And you know, the code looks the same as the four, and only it loads a CZML data source, point to the CZML file and add it. But all of the time dynamics are in the CZML file. And I wanna go over that in excruciating detail. I'm kidding, I do wanna briefly show it to you guys. So here this availability says this object is gonna be visible or available during this interval. And we're gonna show, we have a label and the text for that label is vehicle. Then the first thing really interesting here is to show Boolean, which is, do I show it or do I not show it? It's not just a simple scalar value. It actually has a time interval associated with it. So I get to say, well, show it on this time interval or don't show it on this time interval. So you kinda see the time dynamic flare. And then for the position data, instead of it just having, you know, a lat long out or something like that, we actually have a series of time tagged points based on initial epic. And these are in Cartesian space, but you can do it in several different spaces, including cartographic. And then here the interpolation algorithm is Lagrange, which is something we use for satellites very often. So this is just really flexible for doing a whole lot of time dynamic data. And it's cool because I think a lot of cesium apps won't even need to do a lot of client side code, they'll just generate CZML files. And this is like a spec, like a public spec that we're putting a lot of work into now. Okay, so let's jump into, as a graphics guy, something that I really like, and that's 3D models. So I have a model here, I have a collado file, and you can convert it to GLTF. And like I say, we do that as a pipeline, as a, you know, a content pipeline offline step or server side step. And we have a tool to do that that's publicly available, and you can take your model and drag and drop it here, as a collado file, then on the server, we'll convert it to GLTF, and that involves a fair number of optimizations in order to get it streamlined for rendering. And then you get a preview of the model here, which they literally just added like 20 minutes ago, so I'm glad that worked, cool. And then you get your GLTF model, which I already have. So I'll jump back to the code, and then I'll add to our cool app, and then I'll add the model, and then everyone needs a truck this big. Wait, it gets bigger. All right, so in fairness, for this example, I gave it a minimal pixel size of 256, so this way we can see it. But to position it, in graphics, we use model matrices or four by four matrices a lot to position orient something, so I gave it a cartographic position with launch tune latitude, to put in this northeast up frame to tell it what's up. And then I load the primitive, given it the URL to it, and then the matrix to position it. And this is a little bit lower level, like these data sources, these are kind of high level pieces of content that are entire JSON files with lots of different information, whereas the model here is a lower level part that's an individual model. And the CZM API is pretty layered like that. Okay, just a few more code examples I want to show you. One is terrain. So here when I create the viewer object, I'm gonna give it a terrain provider here, and then I'm gonna point it to this terrain data set that we have on the CZM website to show you that terrain actually showed up. We'll go back to Death Valley. And then this train for public uses, for public apps, this terrain data set is available, and we created it, like I said, from a bunch of different data sets, so it's pretty high resolution in some areas, and we continue to look for publicly available data and add it. If you know of high resolution data, let me know, because we would like to add it to this data set. And then the final code example is, I'll show changing the imagery. And here when I create the viewer, I'll say, well, the imagery provider, I'm gonna use a TMS server, and then we had some natural earth data. Natural earth has a lot of public raster and vector data. We tiled some up, and then we have our different imagery here. You can do multiple imagery layers and change the translucency and move them up and down, and so on. So by my camp, I have six minutes. Six minutes, right? So let me show one last demo from what some of our users have done. That's pretty cool. Oh, actually let me go. So on our demos page, we'll have to showcase what people are building with Cesium. This doorama app is awesome. It's made by Necta, and I'm just gonna run whichever one they have here. So if you do maybe biking or hiking or paragliding or sailing or anything like that, you might keep your GPS data and you might use one of the websites where you can upload it and see it on a 2D map. They've done the same thing here, but they've done it in 3D. So here is Chris Cooper, who's the main developer, and he's riding his bike around. And there I go, full screen. And then you can see along the way, he's taking pictures and they're kind of time-tagged down here. Where's he riding his bike? I wanna say he's in, no, I think that's a bridge. Yeah, I'm sure there's a bridge there. They call Chris Pope one of us. Ah, I'm sure it's fine. Yeah, he looks like he's on the ferry. Yeah, he could have been on the, yeah, it looks like he was on the ferry with the speed difference. And then he's got the terrain profile down the bottom here as you can see when he's climbing and when he's dropping. There's some post-processing going on here to show you the kind of old school film favor, so. Yeah, how, I remember back in the day exporting Google Earth towards the video was a complete pain in the butt. So do you guys have any better tooling or has that gotten better? So this here, you can, I don't know that there's an API to make videos out of this, but you can embed the interactive thing into your website, you know, it's like an iPhone. So yeah, so this is pretty cool. This is actually taken off in the paragliding community, as well as there's people that are like tracking birds that are using this, because it's a real-time API for this. So as the birds are flying, they feed in the data and they can track them. Can you do it with your own camera? Yeah, I don't think they have any kind of first-person cameras in this. I think it could be done, but it's not in there now. So yeah, this is one of the cooler, one of the apps I'm really excited about. People are building with Cesium. I guess that's really the end of the demos that I had. I'm glad the time went pretty well. I just wanted to give you guys maybe a feel, you know, for what we're doing with WebGL and what Cesium can do. Are there any questions? It's debris catalog, how many satellites can you have in orbit? Yeah, it's funny you asked that. Let me see if I know the URL. So my company got us a ton of stuff with satellites and we're really interested in the satellite catalog and if satellites potentially will hit each other, because then it creates a bunch of debris, then they might hit other satellites and satellites are very expensive and well, if that was a communication satellite could be a big deal. So I think here we have almost 15,000 satellites that we're tracking and let me speed it up. They are moving at one X, but let's move it a little faster. 11 X, and there we go. So you can see they're moving now. So there's 15,000 that are moving. I don't know what the upper bound is, it's more though. So this is being done. Yeah, I believe, I didn't actually write this, but I believe it's being done with CZML and server sent events. And then the rendering code I did write, I can tell you all about how that works, but it's probably less exciting. In fact, this was one of the first apps that we did with CZML was we wanted to be able to do a lot of satellites. Other questions? Yeah? What was the biggest challenge in CZML? CZML in general? Yeah, what is the biggest challenge? So none of us knew JavaScript, I guess. We were all seven plus plus folks. So no, CZML is a big engine. It's 80,000 lines of code and 76,000 lines of test code. And there's 35 contributors, although maybe only five or so that are really in the guts all the time. So that was a big challenge. Stability of WebGL early on was a big challenge. That's gotten better, but we still, sometimes when the rendering test fails, we go, okay, what's wrong with the test? You know, not what's wrong with our code? Trying to think, what else? JavaScript performance too, it took us a while. Like we were very careful about not allocating memory during a render loop. We're very, very careful about it. And some of the API in the lower levels will show that where we want, you know, if you want to multiply two matrices, you better have a matrix to write that into because we don't want you to allocate a new one. So, but once you get that under control, the garbage collector hasn't been too much of an issue. One more question in the back. Yeah, all good questions here. So let's see, how do I handle this? Okay, so trees, not yet. We haven't tried it. I am like really interested in rendering a whole bunch of trees. And if you have tree data, I know there's like open tree map and it has good trees in Philadelphia. So did you ever have students in every single tree that... Okay, cool. No, that's good data. I'm interested. I'm not. No, I'm confident. So we wouldn't render brute force, right? We would slice and dice it up, you know, just like we render terrain. And then we use instancing based on different types of trees, you know, they would have similarities. And I think we can do a pretty good job with it, but we haven't done it yet. In terms of buildings, we have been prototyping and looking at doing a server for streaming massive amounts of building data. We'd probably start with extrusions from open street maps and then look for higher quality data. But we haven't quite done it yet. There are folks that are also interested in that, these Cube City guys. I love these guys now. Cube Cities was something that was built on Google Earth. So you could go look at a city and you might want to say, well show me all the buildings that were built after 1970 and have 80% occupancy and it highlights them. But now the Google Earth plugin, you know, it's probably seen its final days with MPAPI being removed. That's no longer supporting Chrome 64 bit. So these guys are starting to experiment and with doing building some cesium, but this is not at scale yet. And I think they're gonna need some of our help to do the streaming for it. So ask me those questions next year and I think I will have really good answers. I want to see every tree that's never been planted. Anyway, let's clap it up for Patrick.