Merken

How WebGL vector maps work

Zitierlink des Filmsegments
Embed Code

Automatisierte Medienanalyse

Beta
Erkannte Entitäten
Sprachtranskript
parts of a welcome this 3rd
and last session of today so we we will have 3 coaxed and they all about the environment and the 1st thought will be given by the light emitted by the funding of all of the math books GA these higher 1 so I have 100 slides and put and so of the very quick and from the talk about how all vector math work and rock musician
from Ukraine i.e. where
have about our company that does all the all some cool stuff in mapping like if you see really amazing stuff and I think that's probably what I . years ago I builds library called leaflets which is now the most popular open-source mapping library ever used by like hundreds of thousands of and we broke with with a wonderful community but sometimes dimension again OK so we're not going to a a new area of interactive proving that to now the
curent aging error of all we got the on the web is neural trusted tiles that has like everyone uses security like that everyone but the wetlands and and so
this error was for the last 11 years with the new lumen overlayers influence but now we're
slowly witnessing the coming of the euro vector maps and you can see all
the big players in the mapping is true that's like builds a full mapping platforms work on my vector map rendering technologies are some of them are proprietary wakeful equals the can can see how it is implemented the a new 1 apple in here for example some companies are really nice and also and work fully and openly flight from the mass media what's and some other sites and humans and so on and so now I'm gonna
talk about mammals here and see how it works under the hood and managing is fully open source is platform for both mobile devices and browsers so it works on both the brothers and like in cars you can embed can c . 2 and has cycles and so there is this an open data the so White was with and the 1st and that you're going to see when use are bacteria rather is that it has moves and annotation and
it just feels so much different when you're using that light it's like and his is transitioning so we only will in Europe with the use of mass of the solution that I just any just feels feel so much better to use are than our traditional restaurants so that the person that you can do really
fancy and indigenously would point changing views with this and there's
actually no concept of integers but when you're doing better maps like you can render it any uh of levels and so we have a special file in which where you can find in interrelations values are so you can have 1 holiday the rules along with gets wider as you zoom in Slovenia are another advantage is full control over data representation in real time so
you can change any aspect of the match out at
any time by this is is this is just like artificial example that way you can change
color is seeking change
financial objects rewarded them and would do anything you want with the map like change any any kind
of quite a visual the representation in real-time and white you can animate between values so it and it opens up a whole new class of possibilities for making new interactive experiences with maps which is
really really powerful and not something we could do
before with restaurants where with restaurants will recitalist you would have liked the Bayes-net and so
like stuff on top of that we Call it markers or
waste buttons there is no distinction between all
mapping and better maps like you can change everything
and I think it is only falls off way then include changing the light direction In tearing renderer so that which is which is you have to costly to knowledge despite the spherical
and another big advantage is that any object in manner that you can see can be interactive like you can
make any object doesn't you can make a clickable and horrible with mouse or like if you do any other group on and so you can make like rules interactive buildings Interactive everything on a map can the indirect and
yet this can enable really interesting applications
and so like the previous advantages that he can change everything on the flight the and so yeah you can with this it
can create a visual map editor right here you can
view the press like this we just click himself in practice in real time and this is really a powerful
way to do cartography with Nicosia have isn't that back in like you can design absent and that's it you
should try this 1 could worsen the browser we can do this
with that what's studio and this
island which is really powerful it can do
really differently looking out for and you
can do stop that you couldn't do before like video format so
this is the example of the video from a satellite on all of directly that that you can
drag as and there's a feel
like something you can do before it all the of course you have
perspective and 3 got abilities like popular view
in for interrogation where the maps like utility and of course that there is
pretty dealing the links coming to that but you and will start working on vector in a war on terror rendering to that so another knowledge of vector maps
is that you use this much much less bandwidth that cluster and that's the way this is 1 of the charter it's like when I use a fixed set screen and from 0 assume 0 2 used to the maximum 2 and this is a very light vector tile-based maps old move many times less data than roster tiles you especially italso returned based so
we have 2 there was trees for this job scripts and implementation of many Americans unions and so the new 1 which is mostly written in C + + with students for a i lessons with the objective see when the way it's going with John all those platforms so that these are 2 implementations that will work on in parallel and some
talk about Web jails like how we do it on the browser so we can look at some of the web heels works and how how much how many users are actually like capable of using web the obligations and
so actually when you will be supported so among the vast majority of users weight
1 95 % with USC literally almost like % so freedom much all users can now use web geopolitik locations white so you don't need to worry too much about square leaving people behind that can't use because now is pretty much everywhere so political question arises why Web GL is you not use very often why is is so powerful if you can do really crazy things with that white why isn't it everywhere the underwear
and white and this is the sum of those 2 2 the truth is developing however this suffocation is extremely hot but we have been working on average but over 3 years would be dedicated to him and say we just we're just getting started to like so much more stuff to do it's really really hard who was a common
misconception that open a 3 D API some like some kind of mathematical API that you we define 3 D objects and adjusts renders really fast but in fact open GL is will will level two-dimensional API so basically this is things always open can do is draw
trials so we can
define open GL as a technology for drawing triangles really really fast uh so forth would you know allows you to to write to 2 types of 5 special programs directly from for the graphics processing unit for 1 type of problem is called verdicts tutor and we can write fast enough to transform the vertices of the words and the data like to for example to projected 3 D vertices into a screen industry that just for display and another that programmers fragmentary there it's it's transforms pixel cost like you can do sometimes the calculations you determine what pixel is drawn what color and basically that's it so let's for example look at how
to draw a line to the web year and like you would plot the needs of what is so we're going to light a
let's say do we want to draw a nice analyze their smooth around the edges which is called and a lot of alliance and send to draw a segment of a
line and Web jail because it can't draw once again you will find a simple approach would be to rule 6 finals uh to find rules will be sold the field and so the triangles on the outside would have this small gradient to make the the adjusts movement and to outliers the lectures
will also help and yield basically has a future we can assign a special customer attributes to each of which is to do fencing with and so on in
the end he can go along the same lines with just 2 finals which is 3 times faster weights with a slightly more complicated map behind it but this is just 1 2nd
and if we're talking about polyline but there are 3 weaknesses of 1 view is that he died so flying gaps that we also need to support for like for both cartography and for example to draw our around when doing
news and involve a lot of triangles then so when all
those is much much harder than drawing lines are
because of all the public is holes and always you can only draw triangles very efficiently because so we need to go through all of try and turns out this is a really complicated computational geometry are challenge with the doors of and years of research wouldn't put into it and there's a diagonal really really efficient tolerance for this and so we
compliance and a great triangulation library that's fast enough for a use case on the justice side so I spent so many months of sleepless size uh working like researching papers and so in the end we developed a new library called here and just proved that was really really fast at regulating opponents and then it was so good that was ported to C + + and now we use both libraries earth
yes so that's going on there as well components is really easy convergent index of this just don't exist in C so I all
you can do a lot of texts you're used so like can wait if you use that the cannot the and rather you just say like dual this text and this font and that's is this is wrong it's we're equal and in open GL that we have to render a so called on texture on the server side we will render every a letter uh into image and then move the finals and filled with small bottle texture to draw 1 letter and
said like we need to this textures the bending of 1 what's the areas of the map we we view and what letters we need so we have font server that serves as a special and unique cost intervals and select for example for Latin characters in some points most characters are in the 0 to 255 French there and so you can you only need to the old 1 file to like this we will see the text for a certain point in regular but so for example for a chinese so that of like there are thousands of symbols in nature Chinese off of it so it's really hard but is given what we know is that when we can consider changing the size of the text annotation and Boeing holds because if we just draw with simple font textures and tried to resize the the small but but it gives blurry and when you did it gets blurry to wait not gradients of quality so good guys and about company that brought us Hall flying game and are currently hopefully working of software 3 there is about scientists distance feels is set ecology that is now used everywhere in India regret that it allows you
to concludes a vector uh shape into a picture that looks like this that distance so the uh to the outline image pixel and special algorithm also to edges of this shape and different sizes really Christmas so we used
this technique and our point features like this and so we can get vendor that was really nice to have but
there is another problem is open GL has a limitation of all much how big of texture in a way that 1 thousand to 24 1 and so like if you just start browsing and that was a lot of characters like in China it just fills up and starts to break rendering so we have in
right household that's so is also called contributed to oppose the idea the movement show that library that uh implementing a call our food that's dynamically fills of a texture depending on on what's a letters used index and what it is it was lost and it's working well but but there is another
problem that we haven't even sold yet it's really complex services such as and this is so crazy hard that's yeah it's it's a topic for another a big talking maybe a 1 hour labs so
that the resulting in assessing the data is loaded
in will as Stiles like you would do In restaurant instead of like a also vector the vector data is encoded
in in 1 influence Cole Protocol Buffers is very complex and so we wanted it to be as fast as possible so we moved to libraries that are the fastest particle offers encoders and decoders you who doesn't know what a zero-forcing was and see it makes the data 4 times smaller than energies on you do that and 7 times the of the 2 that even the native just some parts so it's really really fast and we have our own perspective picture tells that that defines how the data is encoded
exactly and this suspect is is overly developed sense of
it has been adopted so what of other companies like as every is not using the technology for beer vector rendering and Madison for 10 grams and then there is a
place and where the label so a problem where you have a lot
of people and you need to please them nicely so that they don't collide is still when his and notice that like they're placed around probably labels and like there is this is a separate really big challenge uh and
this is how it looks like this how we make the latest of polite we cover them with small squares and then will still squares into our room into a spatial index and then of collusion attacks are really fast so the fastest spatial and this just to schools or much are and we also use a special it's cold with its so for a I was yelled at all so as to transfer this index in the form of typed arrays which I'll mention clear then there is
this is an example around 100 something megabytes of data directly in the browser and so some 2nd Ingersoll's and then in Brussels and this is all happening in the roster without sort and and this there is a very cool library behind it do this and
that costs a tiles
and then there's going clustering recent feature that was used for this and we will do what we call support was that that's really fast and can go off away millions of points then you can that
kind of the the heat map with and is
a tricky the of doing all this competition algorithms because you can do do it all the main thread because it will block the rendering and will start soon we can do is you have to do it in a separate France but then you have the problem of chemical communicating between France and you need to turn everything you communicate all the data into arrays of numbers to make this efficient which is a separate
challenge also we have elected to office
fication which is the only hold language that defines how to do the usual filing and so is
used by our editor and you can do very different working
maps with it it's really powerful entity uh we have to make sure that the rendering is the same across all implementations and across all platforms be it I was soaraway qt or anything else for the browsers different browsers
so we have to we have to write a very extensive testing that has a set of images and renders all the every every property of the style that is amended and compared to like the expected outputs and so we
had to write a special library for comparing the screenshots that consider the entire balancing differences into account because different platforms have Brenda things a bit differently and it's really fast in
re-nested with we have we use for different platforms for continuous integration to cover all the platforms we used an
answer question arises with the exercise well I
won't talk about that it yeah so this is
it's and another thing I would like to mention is that to date parts 25 years of independence of Ukraine in the use and drink a lot of beer for a range of of which thank you want but
in the forward from great dog are there any questions I think you're much of this going back to the way that you transmit that he said there are no new methods and Morgan about you and how we transmit vector times but I assume that still you would have to like make a decision what they do transmit so if you pretty father zoomed out you probably won't
transmit the signal building their houses that bond and how they determine that unknown server-side yeah uh so data is still a proper losses for each are integers level and then when after we transferred that if we just interpolate that's like school that transition between levels as visible in but uh the precision we can back into like once a level is enough to display the map on the next level so by the time is usable in in a new titles so you don't have a problem off when a losing precision 1 of the questions so when when things all over the map of at the time how do you handle that so street goes like across from that the times that split up to 4 years split up and we half of buffers around tiles to make sure that it's features so smoothly transition to each other there are no scenes between the 2 you mentioned a model of the problems you need to solve with with members of your you on likely replacements and also the sum of Orioles perceived participating in liquid standards to improve things to make with your better to like handle font better I know there is development and red to the system well unfortunately I only have 24 hours in a day and 2 kids and working on standards is extremely hard I'm just not there type of person that would work on the sentence it's just now what's a general yeah there is seen as a fool basically invented with a few other people duties inspect the sky and the others pushing on centers but here we're we're focused on cutting edge implementations and centers like there is the current state of affairs is that standard fall implementations rather than the other way around like some like Chrome implements a local features and then others say all this should be a assigned and that this is how it happens so rather than the other way round so that it can be the weight so that it can progress to quickly 1 last question I have have you in the face with things that are inherently roster you should some examples we had in the tree and idiom things underneath the onset handled within what we will analogy yield can handle roster tiles as well and so video and it's like yeah we can just hold it displays a skilled in addition to the interest OK thank you once again each each
Mathematisierung
Mereologie
Vektorraum
Vektorraum
Programmierumgebung
Computeranimation
Textur-Mapping
Interaktives Fernsehen
Hausdorff-Dimension
Open Source
Besprechung/Interview
Programmbibliothek
Computeranimation
Bitmap-Graphik
Benutzerbeteiligung
Parkettierung
Computersicherheit
Overlay-Netz
Computeranimation
Fehlermeldung
Mapping <Computergraphik>
Textur-Mapping
Web Site
Hypermedia
Vektorraum
Ruhmasse
Vektorraum
Systemplattform
Computeranimation
Kreisbewegung
Browser
Open Source
Mobiles Internet
Glättung
Familie <Mathematik>
Browser
Ruhmasse
Systemplattform
Systemplattform
Computeranimation
Open Source
Datenmanagement
Dreiecksfreier Graph
Sichtenkonzept
Kontrollstruktur
Weg <Topologie>
Selbstrepräsentation
Bildauflösung
Elektronische Publikation
Sichtenkonzept
Computeranimation
Kombinatorische Gruppentheorie
Mapping <Computergraphik>
Echtzeitsystem
Ebene
Ganze Zahl
Verknüpfungsglied
Gamecontroller
Cliquenweite
Mapping <Computergraphik>
Objekt <Kategorie>
Textur-Mapping
Klasse <Mathematik>
Mathematisierung
Dualitätssatz
Interaktives Fernsehen
Kantenfärbung
Computeranimation
Mapping <Computergraphik>
Textur-Mapping
Computeranimation
Objekt <Kategorie>
Objekt <Kategorie>
Interaktives Fernsehen
Lie-Gruppe
Computeranimation
Richtung
Objekt <Kategorie>
Spezialrechner
Textur-Mapping
Gebäude <Mathematik>
Ruhmasse
Interaktives Fernsehen
Kartesische Koordinaten
Schlussregel
Aggregatzustand
Computeranimation
Textur-Mapping
Texteditor
Echtzeitsystem
Texteditor
Visualisierung
Visuelles System
Computeranimation
Browser
Computeranimation
Videokonferenz
Satellitensystem
Besprechung/Interview
Mapping <Computergraphik>
Computeranimation
Videokonferenz
Mapping <Computergraphik>
Perspektive
Sichtenkonzept
Perspektive
Besprechung/Interview
Softwarewerkzeug
Vektorraum
Binder <Informatik>
Sichtenkonzept
Computeranimation
Extrempunkt
t-Test
Implementierung
Vektorraum
Computeranimation
Mapping <Computergraphik>
Netzwerktopologie
Menge
Parkettierung
Prozess <Informatik>
Bandmatrix
Skript <Programm>
Bandmatrix
Parallele Schnittstelle
Touchscreen
Benutzerbeteiligung
Gewicht <Mathematik>
Browser
Computeranimation
Hardware
Benutzerbeteiligung
Gewichtete Summe
Systemplattform
URL
Computeranimation
Objekt <Kategorie>
Mathematik
Offene Menge
Volumenvisualisierung
Computeranimation
Programmiergerät
Pixel
Datensichtgerät
Rechnen
Dreieck
Computeranimation
Bildschirmmaske
Benutzerbeteiligung
Knotenmenge
Einheit <Mathematik>
Shader <Informatik>
Datentyp
Wort <Informatik>
Kantenfärbung
Optimierung
Pixel
Gerade
Touchscreen
Benutzerbeteiligung
Dreieck
Schlussregel
Gerade
Dreieck
Computeranimation
Gradient
Textur-Mapping
Gewicht <Mathematik>
Attributierte Grammatik
Dreieck
Gerade
Computeranimation
Sichtenkonzept
Polygon
Softwareschwachstelle
Gerade
Dreieck
Computeranimation
Triangulierung
Programmbibliothek
Triangulierung
Algorithmische Geometrie
Dreieck
Computeranimation
Textur-Mapping
Font
Automatische Indexierung
Server
Zusammenhängender Graph
Textur-Mapping
Bildgebendes Verfahren
Computeranimation
Kreisbewegung
Subtraktion
Punkt
Natürliche Zahl
Regulärer Graph
Computeranimation
Gradient
Spezialrechner
Textur-Mapping
Algorithmus
Regulärer Graph
Font
Software
Spieltheorie
Trennschärfe <Statistik>
Abstand
Bildgebendes Verfahren
Shape <Informatik>
Pixel
Güte der Anpassung
Eindeutigkeit
Unicode
Vorzeichen <Mathematik>
Symboltabelle
Vektorraum
Elektronische Publikation
Körper <Physik>
Flächeninhalt
Server
Lateinisches Quadrat
Textur-Mapping
Punkt
Inverser Limes
Winkel
Computeranimation
Textur-Mapping
Automatische Indexierung
Programmbibliothek
Systemaufruf
Computeranimation
Schlüsselverwaltung
Protokoll <Datenverarbeitungssystem>
Default
Vektorraum
Vektorraum
Computeranimation
Zeichenkette
Energiedichte
Puffer <Netzplantechnik>
Message-Passing
Puffer <Netzplantechnik>
Perspektive
Mereologie
Programmbibliothek
Protokoll <Datenverarbeitungssystem>
Partikelsystem
Decodierung
Versionsverwaltung
Zeichenkette
Message-Passing
Schlüsselverwaltung
Default
Vektorraum
Vektorraum
Versionsverwaltung
Computeranimation
Bildschirmmaske
Quadratzahl
Automatische Indexierung
Stoß
Indexberechnung
Computeranimation
Array <Informatik>
Offene Menge
Client
Programmbibliothek
Trägheitsmoment
Aggregatzustand
Quick-Sort
Computeranimation
Textur-Mapping
Punkt
Parkettierung
Datennetz
Element <Gruppentheorie>
Supercomputer
Computeranimation
Homepage
Algorithmus
Thread
Rendering
Vektorraum
Zahlenbereich
Thread
Computeranimation
Office-Paket
Array <Informatik>
Mapping <Computergraphik>
Open Source
Texteditor
Subtraktion
Softwaretest
Rendering
Browser
Formale Sprache
Digitalfilter
Elektronische Publikation
Systemplattform
Computeranimation
Summengleichung
Softwaretest
Subtraktion
Bit
Menge
Kategorie <Mathematik>
Programmbibliothek
Paarvergleich
Systemplattform
Ganze Funktion
Pixel
Bildgebendes Verfahren
Server
Subtraktion
Stochastische Abhängigkeit
Mereologie
Kontinuierliche Integration
Vorlesung/Konferenz
Systemplattform
Computeranimation
Sichtbarkeitsverfahren
Einfügungsdämpfung
Gewichtete Summe
Gruppenoperation
Implementierung
Unrundheit
Computeranimation
Übergang
Netzwerktopologie
Demoszene <Programmierung>
Puffer <Netzplantechnik>
Textur-Mapping
Informationsmodellierung
Datentyp
Addition
Strömungsrichtung
Vektorraum
Physikalisches System
Flüssiger Zustand
Entscheidungstheorie
Parkettierung
Ganze Zahl
Benutzerführung
Standardabweichung
Aggregatzustand
Computeranimation

Metadaten

Formale Metadaten

Titel How WebGL vector maps work
Serientitel FOSS4G Bonn 2016
Teil 20
Anzahl der Teile 193
Autor Agafonkin, Vladimir (Mapbox)
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/20352
Herausgeber FOSS4G
Open Source Geospatial Foundation (OSGeo)
Erscheinungsjahr 2016
Sprache Englisch

Inhaltliche Metadaten

Fachgebiet Informatik
Abstract Mapbox GL JS is an open source library for modern interactive maps, powered by WebGL. Developed for more than 3 years, it combines a variety of sophisticated algorithms, smart ideas and novel approaches to deliver 60fps rendering of vector data with thousands of shapes and millions of points. In this talk, you will find out how it works under the hood and why it's so challenging to build dynamic WebGL applications. The talk will cover scalable font rendering, line and polygon tessellation, in-browser spatial indexing, collision detection, label placement, point clustering, shape clipping, line simplification, sprite packing, efficient binary data encoding and transfer, parallel processing using Web Workers and more!

Zugehöriges Material

Ähnliche Filme

Loading...