Bestand wählen
Merken

The state of geospatial WebGL in the browser

Zitierlink des Filmsegments
Embed Code

Automatisierte Medienanalyse

Beta
Erkannte Entitäten
Sprachtranskript
and and so I guess get started here um so when Brian Jacobs I am a uncommon knight-mozilla fellow I work at ProPublica so the news organization in New York and he defined slides there there's a tunnel links in here so that's probably we're going to get out of this talk about I am going to go over the can everybody hear me by the way undergo over the US state of
geospatial web geo and just gathered sense the audience who who's familiar with web GL OK and who has programmed in it directly OK and who uh how about whose use 3 JS before OK so decent decent showing here right so that for the folks who haven't raise their hands at all uh really quick background them Fiji is the vector format over H T M L 5 I D 3 is at leaflet users can this is the 2 D graphics API with which and basically renders in in a bit map her roster and Web jails the 3 D graphics API and you can get a lot better performance and do a lot of cool 3 D stuff of that the but there's nothing inherently geospatial about Web G it's just a graphics API and so you can program with geospatial and minds or hope for a good libraries out there and 2014 and there's some good libraries out there so i'm a talk about the the guy how to take advantage of 3 D with out being a graphics programmer and what's out there why do users what's missing or why not to use something uh so that uh that I think the concepts behind Web GL are pretty hard and I'm not going to pretend that I really even know that much about the low-level about Web GOP uh I don't know really shader code a vertex code about it it's basically not even JavaScript at that point uh some some more better in the in that realm but so are more coming from this from my my pragmatic perspectives so how to get the maximum performance in the shortest amount of uh development and training time and I'm coming from that because I worked on a
project last year called the data collider it's still in private beta so I can't really show it off it's not really open unfortunately this is for the MIT sensible city lab in Singapore and we had access to all of these urban datasets from the Singaporean government and various organizations over there and we need a way to visualize urban data so we had access to bus so both datasets train traffic taxi locations of course traffic electricity health last cell phone networks and Singapore has for example has tens of thousands of bus trips a day so something like 30 thousand I I think 30 thousand people any given time a using the bus so that's more than 10 thousand terms dozens a day uh so visualizing that given 1 hour to simulating bus trips in the browser is a huge challenge that you get about 4 and meeting points in in SPG get around a thousand you feel free argue with me on this uh in canvas maybe about 5 thousand simultaneous animating points and uh but we wanted to do a lot better than have because of the data that we were dealing with and so we subprojects out
there like a hundred thousand stars it's you can probably see maybe 100 stars in that slide and there's detector demos that they're they're showing millions of animated particles in Web jails so maybe we can leverage that somehow in performance of our visualizations up so I did a bunch resource use out their effort data collider ended up using cesium the um and that they're still using season and also using combination of 3 Jester to do some other uh visualization types answer just a
disclaimer of all this stuff I think maybe it's even though we have this technology to to get a lot more performance but I think it comes down to what you're visualizing so maybe it's not a good idea to enemy 10 thousand or 100 thousand things at the time because the end up with
the chaos basically and so I think it has to be handled carefully and there are a serious trade using 3 D 3 technology Urbino putting your maps in 3 D handling bigger data loads how you get all that data the browser and kind of you know without locking up the browser and novel overloading the user with a kind of no nonsense visualizations as just because it's shining course so I don't think you know where g is like the great future hope I think it's just 1 the great tool that we have to the but it can also do like
amazing stuff that that said I just wanna point out some kind of be xamples like didn't love out there so this is a the this is New York and it's showing much basically Twitter density and the true density of tweet density and snapped to the height of the snap and they feel like it's really difficult search to tell what's going on there's no labeling on that there's you you can really get anything out of the profile than there's something happening in the middle of manhattan to the it looks cool but there's more attention to the technology than the what the data is trying express this is the same
data and it's just an arrest it's just a static map but you can because this is a dot map and you get a lot more detail on the street level of so i think there's choices to be made this is another . map out
there to showing racial density in New York and also just 2 D Rasta self in this is also 3 D and
2 D discarded DB example of it looks really nice to don't necessarily need to see multiple angles and this is the
this birth napad space the showing you wind patterns in various other datasets on earth and this is using D 3 in the orthographic projection of that that my parsec was talking about in in the keynote that and it didn't need to use web jail but it did a really effective the so that all said where g also has an insane prose to it and so here is an emission it looks a lot that on the web you should really good resource uh um so the cell said what's out there in terms of what you this 3 main categories that
libraries cover-up they're basically maps modeling and visualization uh maps just like at all but the problems we've had in the past the enough flat but they need to be kind fractally complex if you dealing with the of the whole earth and inserting it cut stuff up into tiles modeling and talking about like features on the uh buildings mountains objects in 3 D space and visualization taking data show geographic patterns our simulations on aggregated data aggregated data showing patterns over time and almost signatures focus on maps and visualization so with
maps to this garden vector and a if you've gone to other presentations at this conference some of these will be familiar as there is we have
mapped box GL um not boxes doing this with OpenStreetMap and they have a specification for the vector tiles and that's where a lot of the magic happens with this and so how do you represent the world without a ton of data flowing and so they have the this Protocol Buffer Format for base binary files to the to the client and decoding and JavaScript they've done god a great work with photography and performance and the labeling is really impressive about to solve the and they have a lot on there and I get have including specifications for the the tiles like in this so this is all rendered in Web GL that they also had a
really cool demo of them video georeferenced video within our jail context and that's the moment that another project is 10 gram
and I think there are a few maps and people this conference that talked about this uh so this is rendering of the OpenStreetMap data of 3 D buildings rendered and unique can gonna get a lot of sex with how the buildings erected rendered in projected and there are also using a similar format to both of the nodes and provides a it's kind of like an open up we here we an API of vector tile service so you can get tiles skin in that the map box formatting given the TM which is a similar format of that these open science map the folks developed and but same that Protocol buffer concepts the I think it's a little less polished not boxing I think you you get a little maybe you get more cartographic control lithium or control other of of what you can pull out of OpenStreetMap but that's it it's it's it's it's it's a younger project and what met box is doing that I personally I think that that 3 buildings the what can be a little bit of a gimmick I think that of labeling and styling is more important than rendering buildings that but I think when you suddenly they can provide a lot context to seen uh I think is more liberal license that box also but not all the code for this is on and get home but
end this this is open science map basically it's free and open Maps for Android it's just trying get the scientific results and more easily visualize and taken that looking at buildings at the field and services for Android but finally Iowa State will support Web GL which is kind of a game changer when it comes to all this to all this stuff out there so uh this is using the VTM format so just a just as an
aside this this is a project at ProPublica where I currently work and its it was rendering of Flood Insurance maps in New York in doing so in Web geo and the use of light Yale for this which is kind of a light weight 3 jails type thing the via and I bring up because they're also using a protocol buffer in a binary format to get a ton of data to the browser to render all the ships and teasing Jeff files and Geoff Lawson as the developers meaning that after itself
uh 0 here's google you know them that they have Tübingen where g on maps for a while but this is a total black box so I'm not it of wiki many
atlases has been around for a while actually assign any Wikipedia page you go to the on any geographic page go to the upper right hand corner you click the little globe icon and you get a map of of view of location is it's in a major city at favor it will render 3 D buildings and this is in Web GL but the 1 developer of Wikimania Alice's Daniel Hsu and he he just did at the end of all this code is on get help also the the and that you know clear that integrates into the the wiki uh ecosystem there are some good examples there so
OpenLayers 3 another example if you've been there that they've presented a few things at this conference are there it will render vector tiles and and it's a lot lighter weight than the previous open minors which is really great and it also does Web geovisualization so that all those yellow dots are points there's 100 thousand points there and that 100 points comes through enhanced 684 kilobyte file on compressed and if you did the same amount data energy adjacent it would be 14 megabytes so it's really it's a huge difference there and taking like think the success of these kind of projects are going to come down to the file format that's being transferred over to the client they thought the file format is tiny WKB so I guess that's a well-known text binary I in this their vision they're researching other binary formats and now what I can't speak for is animated visualization how how the performance is going to be doing a time series of how this data changes that's would be the big question for me with however Jesus the
cesium JS so these guys her that you'll you'll hear more about this in 2 presentations from now on so if you look at all those previous things were flat maps ifyou looking for a globe or are kind of arbitrary projections is that too few different projections this is a great project and it comes with a visualization system and it and this is and and a lot of really good examples of of harder get started with that this is the the US Sandcastles they call it to to check out all the different code for how to visualize various things so this is what
we use this in our in our data collider for the visualization system and so given the deadlines that we have of we basically need to use something that would give us the most functionality and something that we could style and easily adapt to what we're trying to do so in abusing this in in a museum exhibit and it's an online platform what season has is it's got this format of cesium knowledge which is basically Jason and allows you to specify data over time and it's it's like a kind of a visualization grammar of sorts so you and you specify how you want your data to be applied to various shapes and it takes care of all of the shape rendering and i'd saves a lot of coding because you don't have to come up with the right all these you know how to render all these primitives the the 1 drawback for this I think is that Jason is not a compact form at all as that 40 megabyte file just talking about so what we ended up doing was using WebSockets to stream and a more raw data feed to the browser and then a process this data process the data in Web workers and basically the calculations that we're doing work you know we we get all the values for the the data itself and the mean to scale it up in across another visual visual skills of doing all these calculations totally would lock up the browser but web workers allows you to do it in a different thread so weird animated been around 10 thousand features at a time which was kind of our target which was great and then you get a zoomable tiled map for free of the whole world um you get time I controls camera that they commit to it pretty easily but it looks like the look of it is a little excuse me a little a little wrong only the so utilitarian at the box but you cannot hook up into their event system and make your own controls and that worked really well for us of this is just kind of early stage
visualization it's still in private beta so I can't really show of which fortune another project
these cesium where this was i is ran into a randomly was that this is by Ai Weiwei and show Els and the license and it's basically crowdsourcing a lot on the planet and they and they customize sees into their their need the 1 thing that was hard With customizing season was kind of the atmosphere changed from the default blue can had to hack into the shader code which was not but not choice but the that was really the only thing we know
there's also another project is web geo earth and and this is using cesium as a rendering engine but it it lets you use a a leaflet some syntax squeezer compatible EPSO so now learning curve there on the open when
global another project that lets you know that's another good project all the colors and get home unfortunately I think it's so development slowed down in recent years I think it was developed at university OK so those are like in all the globe libraries adhering into the map that general-purpose mapping libraries and tiles what jails so this
project fillers village it is more general purpose Visualization library and a
lot of interesting examples on their website but I only mention it because it was came fairly far along but if you check the good hub page it hasn't really been updated in years so that that the creative this has since gone on to to Twitter so maybe it's a start 1st on another project of some wants to extended out of so this wouldn't be a web we'll talk without talking about 3
JS that's coming your it's you go to web geolibrary there's nothing inherently geospatial about it and I would say 3 JS is to Raphael that's kind of you know you're rendering out of primitive shapes in kind of an easier way than the default 5 way and it's got a ton of amazing examples on their site none of which really have to do with mapping but but I haven't really stop people from using it for maps of it makes jealous simpler so it gives you kind of good
starting point the especially in similar people have done a lot of support and stack overflow and what the and so I'll just highlight a few
projects that have been done with 3 jets and this is by Peter Richardson of maps and you me on get home and he's got a lot of good examples of how he rendered out some and this is like a depth like a DM in in In 3 jails and this was a projects and
animating no zoning reports over time kind of floating up animating bubbles in 3 D have not I'm not really sure this needed to be done in 3 D but you can check out the code and now see see how it was done recently the
Guardian uh did a piece on the Texas border and Mary notion murder rates and cartel activity 3 D charts and other 30 maps with accompanying charts over time and I'm not the biggest fan of this kind of extruded success country shape to show a level of activity but I did I do appreciate the that kind of the perspective that they're using and and the and the rotation that they're able to do come to getting into a more than skinnier format and also the the transitions that go between each of the MAP states you are a a really fluid and the impressive there and I think this is a lot of potential and its applications especially considering now with the better browser adoption of Web jails of this the
cities I think this is a a great project keep around the lights focusing visualizing urban data on really impressive demos it's still a bit immature it's not totally they haven't released uh but all these demos as he can really put your data into a but I think at this point there their biggest strength is that the level of documentation that that they have but released them on how they handle performance how they the rendering geographic data in 3 D N 0 then the the mistakes that they've met along the way and of for example
this is just that the piece of the code basically what it's doing is is just taking coordinates and running it through that that they're using D 3 in the project so using the 3 essential is like a calculation engine in order to projects their accordance into x y that you know in in a more x y z against the next line orders to visualizing 3 chess the but they're going for is is a is more of a star like a sim
city in our of our urbanization this is some city this is not the project but but do you have taking this X-ray view when it's less about the city and more about the city as context for data and this is a it's a
visualization of the London uh to map can of you can kind of shit shows it however um goes over or under terrain so there's a lot of potential in it's worth looking at the code base other projects where Jill glow that's
probably the most visible and example out
there it's visually striking but there's a lot of lot to be desired in examples a doesn't come of a legend it's not summable everything's relative you have no idea what the heights of these values mean mean but you
don't want these colors mean and but it's based in 3 G so maybe in a good starting point I think just maybe focusing more on the data than the eye candy would would help for that and so another that I think that
what I'm gonna most excited about is uh clearly I'm less excited about the 3 D nests of these maps in I have kind of what issues with the but I using larger 4 per performances it's 1 of the major benefits of it and and I think the a library like T 3 has been transformative and for interactive and climbs the visualization because as success kind of uh er it it comes from kind of a different philosophy focuses on the data 1st it abstracts away from pre can charts and with focus on how to apply data to more granular objects so the data 1st and yeah and which is kind of a director at around furcifer coming from more graphics libraries but go so that said if you are more familiar with the 3 and that philosophy there are projects that will render data
use uh web GL as the as the rendering engine 43 so this is passed Yale think it's still pretty young but some kind interesting examples and on now this is a little from my boss stocks talk at the in the in the keynote it's a little against what you saying with them now you can use the web inspector to see what the US features doing that you can't do that with web GL but it's it's a trade off I mean you can and even approach the amount of things you can render in Web L of versus SPG at the below
1 is map box to and map boxes math math Box not map box um so this has a competent visualization space like a man equation Alicia library of and that Stephen Witten's is the creator of this 1 and he says it can be used for D 3 as a render when it's released it's still unreleased but I great presentation on all the capabilities with this that that that link below some really interesting how it kind of transitions between them past states to explain the concepts and then if we can leverage that for arbitrary data may not it seems like he's done a lot with performance the what so I'm not convinced that it's that retrofitting D 3 with where g of functionality answer I think there we can there's room for
another library here kind of the 3 GSS Raffaele than what is 2 D 3 and I think that I'm not person to make it because I'm not that great making tools like I'm just take stuff on the web and figure out how to make it but another somebody out there who might pick up the cause because now we have almost full browser adoption of Web GL and to make all this stuff easily use for people I think that's it's pretty exciting I'll just wrap up with last example set
of examples for street view and which is geospatial and people have to uphold street into into 3 GS and on really interesting things and this is
the urban jungle so this is the the Convention Center in Portland and then basically you take any location street view and apparently is an undocumented of that feature in the Google API reading get depth maps and it's taking the depth maps and like you know dumping plants on it which is kind of cool and can I Am Legend makers but this is little so it's
a little cities I forget what it's called exactly but topic link students can of course a stereo stereographic view and street if any location world warping can agreeing isn't many globes and then there's that tn
Alexis hyper laps uh take street view and 3 GS lets you control perspective over a series of locations in animated kind of simulating a time series and like if you haven't played with this play with this because this whole early mind blowing so that's all I got to the end
logical links so and this thing of Flexlease slides and give any questions right who
Rechenschieber
Selbst organisierendes System
Rechenschieber
Browser
Binder <Informatik>
Aggregatzustand
Bit
Programmiergerät
Wellenpaket
Punkt
Extrempunkt
Selbst organisierendes System
Stoß
Browser
Aggregatzustand
Räumliche Anordnung
Term
Code
Benutzerbeteiligung
Knotenmenge
Perspektive
Programmbibliothek
Softwareentwickler
Softwaretest
Zehn
Datennetz
Vektorraum
Dateiformat
Bus <Informatik>
Projektive Ebene
URL
Rechenschieber
Benutzerbeteiligung
Demo <Programm>
Stoß
Schaltnetz
Datentyp
Visualisierung
Partikelsystem
Computeranimation
Textur-Mapping
Punkt
Twitter <Softwareplattform>
Last
Browser
Unordnung
Visualisierung
Profil <Aerodynamik>
Computeranimation
Dichte <Physik>
Mapping <Computergraphik>
Vorlesung/Konferenz
Auswahlaxiom
Dichte <Physik>
Übergang
Benutzerbeteiligung
Kategorie <Mathematik>
Winkel
Mustersprache
Zellularer Automat
Term
Raum-Zeit
Computeranimation
Bitmap-Graphik
Gebäude <Mathematik>
Vektorraum
Vektorraum
Sollkonzept
Kombinatorische Gruppentheorie
Elektronische Unterschrift
Fokalpunkt
Raum-Zeit
Computeranimation
Objekt <Kategorie>
Textur-Mapping
Informationsmodellierung
Parkettierung
Diskrete Simulation
Mustersprache
Programmbibliothek
Visualisierung
Umwandlungsenthalpie
Demo <Programm>
Momentenproblem
Protokoll <Datenverarbeitungssystem>
Quader
Vektorraum
Kontextbezogenes System
Videokonferenz
Mapping <Computergraphik>
Puffer <Netzplantechnik>
Client
Benutzerbeteiligung
Parkettierung
Binärdaten
Grundsätze ordnungsmäßiger Datenverarbeitung
Dateiformat
Projektive Ebene
Decodierung
Resultante
Bit
Quader
Protokoll <Datenverarbeitungssystem>
Gebäude <Mathematik>
Humanoider Roboter
Vektorraum
Kontextbezogenes System
Code
Mapping <Computergraphik>
Textur-Mapping
Puffer <Netzplantechnik>
Benutzerbeteiligung
Knotenmenge
Dienst <Informatik>
Datenfeld
Offene Menge
Spieltheorie
Parkettierung
Gamecontroller
Dateiformat
Projektive Ebene
DoS-Attacke
Total <Mathematik>
Gewicht <Mathematik>
Protokoll <Datenverarbeitungssystem>
Blackbox
Browser
Elektronische Publikation
Räumliche Anordnung
Computeranimation
Puffer <Netzplantechnik>
Textur-Mapping
Benutzerbeteiligung
Binärdaten
Datentyp
Projektive Ebene
Softwareentwickler
Subtraktion
Gewicht <Mathematik>
Punkt
Mathematisierung
Binärcode
Code
Homepage
Client
Benutzerbeteiligung
Zeitreihenanalyse
Binärdaten
Volumenvisualisierung
Visualisierung
WKB-Methode
Softwareentwickler
Maschinelles Sehen
Hilfesystem
Sichtenkonzept
Gebäude <Mathematik>
Vektorraum
Bildschirmsymbol
Wiki
Elektronische Publikation
Mapping <Computergraphik>
Energiedichte
Skalarprodukt
Rechter Winkel
Parkettierung
Dateiformat
Projektive Ebene
URL
Prozess <Physik>
Freeware
Quader
Browser
Stoß
Formale Grammatik
Kombinatorische Gruppentheorie
Systemplattform
Code
Streaming <Kommunikationstechnik>
Textur-Mapping
Bildschirmmaske
Benutzerbeteiligung
Rendering
Hook <Programmierung>
Datenverarbeitung
Visualisierung
Visuelles System
Thread
Primitive <Informatik>
Shape <Informatik>
Physikalisches System
Elektronische Publikation
Rechnen
Ereignishorizont
Quick-Sort
Arithmetisches Mittel
Rohdaten
Rechter Winkel
Codierung
Dateiformat
Projektive Ebene
Softwaretest
Shader <Informatik>
Visualisierung
Projektive Ebene
Default
Auswahlaxiom
Code
Mapping <Computergraphik>
Benutzerbeteiligung
Parkettierung
Netzbetriebssystem
Programmbibliothek
Projektive Ebene
Kantenfärbung
Softwareentwickler
Kurvenanpassung
Grundraum
Räumliche Anordnung
Wurm <Informatik>
Benutzerbeteiligung
Twitter <Softwareplattform>
Fahne <Mathematik>
Güte der Anpassung
Programmbibliothek
Visualisierung
Projektive Ebene
Computeranimation
Homepage
Textur-Mapping
Benutzerbeteiligung
Shape <Informatik>
Web Site
Punkt
Pufferüberlauf
Güte der Anpassung
Keller <Informatik>
Primitive <Informatik>
Default
Computeranimation
Textur-Mapping
Güte der Anpassung
Projektive Ebene
Zeitzone
Code
Bit
Demo <Programm>
Shape <Informatik>
Vektorpotenzial
Punkt
Browser
Gruppenoperation
Kartesische Koordinaten
Drehung
Bitrate
Computeranimation
Übergang
Mapping <Computergraphik>
Textur-Mapping
Benutzerbeteiligung
Fächer <Mathematik>
Perspektive
CMM <Software Engineering>
Dateiformat
Aggregatzustand
Computerschach
Sichtenkonzept
Projektive Ebene
Simulation
Kontextbezogenes System
Rechnen
Ordnung <Mathematik>
Gerade
Code
Computeranimation
Vektorpotenzial
Visualisierung
Projektive Ebene
Code
Computeranimation
Objekt <Kategorie>
Textur-Mapping
Punkt
Abstraktionsebene
Visualisierung
Programmbibliothek
Projektive Ebene
Graphikbibliothek <Programmierung>
Kantenfärbung
Fokalpunkt
Computeranimation
Lineares Funktional
Quader
Gruppenoperation
Mathematisierung
Gleichungssystem
Binder <Informatik>
Kombinatorische Gruppentheorie
Raum-Zeit
Mapping <Computergraphik>
Benutzerbeteiligung
Benutzerschnittstellenverwaltungssystem
Visualisierung
Volumenvisualisierung
Programmbibliothek
Aggregatzustand
Metropolitan area network
Benutzerbeteiligung
Menge
Physikalischer Effekt
Browser
Programmbibliothek
Sichtenkonzept
Figurierte Zahl
Google Street View
Computeranimation
Textur-Mapping
Sichtenkonzept
t-Test
Warping
URL
Binder <Informatik>
Google Street View
Rechenschieber
Zeitreihenanalyse
Hypercube
Rechter Winkel
Perspektive
Reihe
URL
Binder <Informatik>
Google Street View
Computeranimation
Vorlesung/Konferenz

Metadaten

Formale Metadaten

Titel The state of geospatial WebGL in the browser
Serientitel FOSS4G 2014 Portland
Autor Jacobs, Brian
Lizenz CC-Namensnennung 3.0 Deutschland:
Sie dürfen das Werk bzw. den Inhalt zu jedem legalen Zweck nutzen, verändern und in unveränderter oder veränderter Form vervielfältigen, verbreiten und öffentlich zugänglich machen, sofern Sie den Namen des Autors/Rechteinhabers in der von ihm festgelegten Weise nennen.
DOI 10.5446/31760
Herausgeber FOSS4G, Open Source Geospatial Foundation (OSGeo)
Erscheinungsjahr 2014
Sprache Englisch
Produzent FOSS4G
Open Source Geospatial Foundation (OSGeo)
Produktionsjahr 2014
Produktionsort Portland, Oregon, United States of America

Inhaltliche Metadaten

Fachgebiet Informatik
Abstract With browser adoption of WebGL on the rise, developers can start to reap the benefits of GPU-assisted rendering and 3D graphics. The WebGL API has a notoriously steep learning curve, but there are a number of open-source projects to accelerate getting geospatial data visualized.I'll compare the pros and cons of developing geospatial applications using native WebGL verses general-use and geospatial-specific WebGL javascript libraries. Some libraries include three.js, lightgl, PhiloGL, CesiumJS, OpenWebGlobe, and OpenLayers 3. The use of WebGL also has benefits beyond 3D visualization. I'll also talk about how we can leverage better performance out of 2D or 2.5D maps by using a WebGL renderer through my experience developing a web-based urban data processing and visualization framework. I'll go over the types of 3D data visualization, from globes, to abstract 3D representations, to 3D modeling, and whether any of this works within mobile devices.The use of 3D maps will also be considered from a data-driven and user-centered design and cartography perspective--their inclusion should consider whether the user and data actually benefit from expressing geospatial dimensions. I'll address some common geospatial pitfalls, from 3D to 2D, and when maps can hurt more than help, through real-world examples.
Schlagwörter geospatial
webgl
3D
web-based
maps
mapping
javascript
visualization
cartography

Ähnliche Filme

Loading...
Feedback