Web maps & WebGL
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Title of Series | ||
| Part Number | 21 | |
| Number of Parts | 193 | |
| Author | ||
| License | CC Attribution 3.0 Germany: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor. | |
| Identifiers | 10.5446/20353 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
00:00
3 (number)Newton's law of universal gravitationHoaxMetropolitan area networkPoint (geometry)MathematicsVertex (graph theory)Spectrum (functional analysis)Software developerState of matterDataflowLevel (video gaming)Computing platformSemiconductor memoryMultiplication signBlack boxRight angleFrequencyComputer programmingElectronic mailing listDisk read-and-write headData structureReading (process)Medical imagingComputer-assisted translationShader <Informatik>Computer architectureCrash (computing)Buffer solutionGraphical user interfaceNeuroinformatikCoefficient of determinationComputer animation
02:26
Software engineeringWide area network.NET FrameworkWorld Wide Web ConsortiumComputer-generated imageryAreaUniform resource nameData structureData bufferState of matterRoundingSummierbarkeitFile formatStandard deviationInternationalization and localizationRotationSineRaster graphicsPhysical systemData Encryption StandardCASE <Informatik>TriangleFunction (mathematics)Multiplication signAssociative propertyComputer fileMereologySign (mathematics)Shape (magazine)BitDigital photographyBuffer solutionSoftware developerProduct (business)MathematicsOperator (mathematics)VideoconferencingWordSystem callVector spaceCASE <Informatik>Vertex (graph theory)Physical lawData structureProjective planeCategory of beingVirtual machineVideo gameCartesian coordinate systemPointer (computer programming)Computer architectureFamilyPower (physics)WeightElectronic mailing listState of matterSemiconductor memoryHypermediaElement (mathematics)Artistic renderingRight angleRow (database)Computer programmingWorld Wide Web ConsortiumMachine visionFile formatTheory of relativityForcing (mathematics)WindowPlanningGame theoryEndliche ModelltheorieMassOracleWeb pageSoftware frameworkGraphics processing unitLine (geometry)Client (computing)Keyboard shortcutBlack boxPoint (geometry)Slide rulePhysical systemFunctional (mathematics)MappingDescriptive statisticsPoint cloudObject (grammar)Web-DesignerCuboidPlug-in (computing)Android (robot)1 (number)ResultantShader <Informatik>Group actionLevel (video gaming)Shared memoryBuildingMathematical singularityStatement (computer science)IntelFunction (mathematics)TesselationDemosceneSource codeCodeLink (knot theory)Closed setImplementationProgrammschleifeTransformation (genetics)Open setOffice suiteSoftwareComputer animation
11:56
.NET FrameworkPhysical lawMultiplication signVolumenvisualisierungData structureShader <Informatik>Line (geometry)CurvatureTriangleSystem callComputer-generated imageryBuffer solutionPixelObject (grammar)BefehlsprozessorFermat's Last TheoremArtistic renderingDifferent (Kate Ryan album)Cursor (computers)Texture mappingSoftware engineeringSummierbarkeitRight angleGlass floatVariable (mathematics)Attribute grammarFloating pointError messagePolygon meshOpen sourceData bufferSinguläres IntegralData typeIntegerCollaborationismSystem callIntegerView (database)Multiplication signPoint (geometry)AlgorithmBefehlsprozessorComputer architectureComplex (psychology)Right angleCollaborationismEvent horizonLevel (video gaming)Texture mapping1 (number)PixelPlug-in (computing)Software developerCoefficient of determinationOctreeElement (mathematics)CodeFloating pointBitTriangleInformationShader <Informatik>Moving averageChainData structureComplete metric spaceCuboidOpen sourceLine (geometry)Graphical user interfaceDifferent (Kate Ryan album)Cursor (computers)Vector spaceDampingWeb browserArtistic renderingMedical imagingVertex (graph theory)outputPresentation of a groupBlack boxType theoryVideoconferencingPlastikkarteGraph coloringIdentifiabilityVolumenvisualisierungSemiconductor memorySoftwareComputer configurationVideo cardGraphics processing unitData miningNumberProjective planeWorld Wide Web ConsortiumGoodness of fitMixed realityTesselationInternetworkingLatent heatFilm editingNeuroinformatikTerm (mathematics)MathematicsMaizeState of matterDivisorMoment (mathematics)Formal languageMereologyPosition operatorMachine visionRule of inferencePlanningCore dumpArithmetic meanHypermediaBranch (computer science)Figurate numberFood energyCalculationDistanceWordWave packetClient (computing)Pole (complex analysis)Sound effectSocial classInheritance (object-oriented programming)Matrix normSparse matrixProcess (computing)SurfaceNetwork topologySet (mathematics)Physical systemArtificial neural networkMaxima and minimaBuildingComputer animation
21:26
Standard deviationNumberBeat (acoustics)World Wide Web ConsortiumDemosceneChaos (cosmogony)Computer scienceFluxLogical constantRight angleComplete metric spaceState of matterShared memoryWeb browserFlow separationGraph (mathematics)Form (programming)Group actionGoogle MapsLink (knot theory)VideoconferencingComputer animationLecture/Conference
23:01
Normal (geometry)Term (mathematics)Integrated development environmentCASE <Informatik>Chaos (cosmogony)Lecture/Conference
23:33
Computer animation
Transcript: English(auto-generated)
00:15
And it's given by Ivan Sanchez
00:24
Thank you, thank you so much, okay, my name is Ivan you know me from previous things such as poetry, so I'm more than a poet. I'm also a computer programmer, and I do WebGL once in a while I will start with chapter one WebGL is difficult
00:42
When you start working with GL, GL is really a big black box you feed something which is called shaders and buffers It's just the data of the of these vertices you have and the shaders are how you're going to render them Let me explain that briefly and then magically all the GL platform
01:03
Does something with it and magically you get an image out The problem with this is this is so complex and so low-level for us JavaScript with developers that we usually Put a bigger black box on top of that So you have some JavaScript that creates some data structures in JavaScript
01:23
And that's a magic which feeds that magic to some of the magic and finally you get magically an image So a few things that I learned while doing WebGL is that the WebGL API is write-only You cannot read the state of the WebGL stack or memory you cannot inspect the GPU memory
01:43
You can know you cannot put breakpoints You cannot do step-by-step running of the of the shader program because they are massively parallel, and there's no Architecture to back that and the existing tools sometimes they crash things like the Chrome WebGL in spectrum and so on They tend to eat up too much memory or crash directly so normally this is how you debug WebGL
02:07
I can have cat dog pictures, too Another problem of WebGL is that it's not JavaScript II by this I mean that On top it's how it looks right now when you have to create a list of vertices
02:25
such as a list of coordinates I want to render on the on the image I Make a call to create buffer and then I beam that buffer magically to some Pointer somewhere, and then I write into that opaque pointer, so if you notice if you can read
02:43
this line This line here There is no reference to data at all. There is no reference to the buffer Right so you don't know by looking at one line You cannot know where that data is going to so that for us JavaScript coders is completely crazy
03:01
It should look something like this Okay you have the buffer you access a property and by the magic of Some object setters and getters you get the result you expect so this This is just a Symptom of the WebGL API being exactly a copy of the OpenGL 2.0 API so and
03:27
Something that was very clear to me. It's not about bringing Web developers to the GPU this is about green bringing GPU developers to to JavaScript This is a very important thing to take in mind if you are a JavaScript developer
03:42
Web GL is going to be hard for you if you have work with OpenGL. It's going to eat way too easy The Web GL part not the web part if you are an OpenGL developer you're gonna hate JavaScript from day one So it's kind of crashing two words, and that's a lot of problems The only good part of the API being too close to OpenGL is that you can make this change
04:05
You can replace all the JavaScript e parts with C of C++ Parts and make something like the Mapbox GL Android API the tangram Android API the Google Maps and recline or the unity client unity is a framework for developing mostly games, which has a Web GL output and a native Android and iPhone and
04:27
Actually Intel Windows output, so this is doable This is not Web GL is not bringing GPU to web is bringing OpenGL To the other way around
04:41
There are a lot of problems with this because in JavaScript We are used to you we normally use a lot of small tools to build up bigger programs Such as transpilers and minifiers and things like that The problem is we are working with these black boxes and we are switching pieces with C So there is no ecosystem like that right now
05:03
the data structures are very tightly coupled so if you have Data structure holding vertex coordinates and a shader that renders those coordinates It's very difficult to make Either the structure or some bits of the shader work in a completely different
05:22
structure so right now it should be Incredibly difficult to make a tangram shader working Mapbox GL or vice versa Even though it should make sense. It's not easily possible Because black boxes So I just wanted to give my short overview of what I think it's a statement map warning bias opinion
05:46
See sing yes, and you know it is this globe and you can have on a web page It's cool. It works well for some applications, but unfortunately for my taste. It's way too heavy It's like something like five megabytes of JavaScript It can be too slow at sometimes
06:01
But they are doing a very very interesting thing which is GLTF GLTF stands for OpenGL Transform format and it's going to be I hope like the next big thing I really really hope I am quite optimistic And I'm really happy that the CCMGS guys are working on GLTF
06:21
Please do go to some CCMGS talks here forology and learn more about this Mapbox GL you heard about Vlad they have been working for this for a few years It's really good for some applications Unfortunately, I don't think it handles elevation right now. You're working on that
06:40
You can do extra the buildings but not much Not much more than that. So once again, it's a book It's a black box that you can build a JavaScript or C API around it so you cannot really share bits of it with our JavaScript bits and I'm not really sold yet into vector tiles. I know they're cool
07:01
I know they solve a lot of use cases But with things like GLTF on the ground and the fact that we can do a lot of impressive math in GL And we can do something like group projections on the graphics card I am not a hundred percent sure that vector tiles will be the way to go in a couple years. I
07:21
Might be wrong, but that's my biased opinion But here's three, you know open layers It's very well established. It's it operates. Well with a lot of OCO software and mouse over once again, the office flat they don't have the elevation and They use a tiny tiny tiny tiny bit of web GL. They don't
07:42
Squeeze all the power it has and I get why they want to make a stable product and they want everything to work Well, they don't want to be fancy and crashy. They want to be simple but working always Tangram it's quite new by Matson. It has like one year and
08:03
It's incredibly cool because it allows developers to plug some shader code directly on the style sheets Once again, the earth is flat has this problem and it has a few things that I don't like at all Which is they use too much OpenGL jargon. They have actually hired OpenGL developers on top of them JavaScript, which is cool, but they have broke with them a lot of the jargon and
08:28
Pre-conceptions from the GL world to the web world and to the cartography world So I don't think that's exactly right something I don't like is the manifest file the fact that you have to have a Manifest file and link to your data to an external file
08:42
You cannot simply push some coordinates on the fly and change the state. It's not that simple They over complicated by by trying to make a very simple API They oversimplified and they make you go through extra loops when you do something that should be a bit simpler
09:00
Nokia Google imagery, they do have web GL implementations. They're closed source. We don't like closed source as for 4G. I'm sorry guys Itowns, it's a very cool thing that appeared last year and for 4G. It's a dislocator. It's a visually tool For displaying tone town size data, which might be street imagery or point clouds or vector data
09:25
It's pretty cool. It's very fast It doesn't have a lot of applications yet because Obviously if you cannot show the whole earth with this and zoom out and see a whole country Not all of people are going to buy into it unfortunately But do look into items do come to the talk scene for city about it
09:43
Po3 I see the P the pedal guys over the poodle you know Cool These Folks over there. They made not you but some of the piddle poodle wherever guys made a tool called po3 pio
10:02
potter a Poetry no, I make poetry It's a cool tool that it's only for point clouds, it's great for point clouds it's basically nothing for anything else if I'm right, so
10:21
And leaflet, that's what's happening So this comes to chapter 3 a tale of leaflet GL None of the existing frameworks are fitting my particular use case for for the work. I'm doing
10:42
So and also I noticed that leaflet is a great library There are lots and lots and lots of people using leaflet People just love being able to use the library and having a very clear API Which is not simple in the concept of very narrowed down to a couple of entry points It's simple in the way that every description of every function is one line
11:05
I think that makes it simple and makes it loved by a lot of developers Also, I wanted something that could reuse existing leaflet plugins because if you have a leaflet plugin and you switch over To my box or to tangram you cannot use that planning or it will start failing or
11:23
doing or just not working how you expect and Leaflet is very lean. It's very lightweight. It's very clean code. I Think we can do better than the size the library size of CCM really, okay
11:40
In leaflet when you do something, this is a bit of architecture of leaflet when you do something It creates an HTML element which is passed down to browser which renders in GL The whole idea is that a layer creates triangles. That's it there is no magic about The layers doing a lot of over complicated data structure of a dog
12:02
I don't want to build a bigger black box on top of this I want the plug-in developers to be able to see how the layers create triangles so they can create plugins Which creates triangles. I was in some talk today where somebody made a leaflet plugin wrapping HTML elements with more HTML elements
12:22
I do think that making some kind of plugin architecture that allows developers to make more triangles on top of triangles makes sense Somehow it should be able to some GL Library, which looks like leaflet in terms of simplicity to develop it with I
12:40
Experienced is something that you get too late to learn anything about the mistakes you made well get in it. I Had the worst headaches working with this technology in the past few months. I Refactored all the code all of it, which is how it one and half Hundred kilobytes of code like five or six times
13:01
Which is not good. It really is difficult really One of the common pitfalls I was making is dumping all the mini memory something that you do with Web GL is you have a data structure in memory in JavaScript and You dump all that whole data structure into video memory to the GPU memory
13:21
You know that computers have different memory for the CPU and for the graphics card So if you done the 200 megabytes of CPU memory to GPU memory More than once per second you're doing it wrong and I was going it wrong a lot of times Also when you are creating a blank texture One of the easy mistakes to make is to create a texture and initialize all the pixels to
13:43
Blank that will also create a lot of calls To the video card to dump empty memory and will waste a lot of time and block your computer in ways that you couldn't think were possible This is something that holds true in all of the open source world
14:04
We stand tall because we stand off the on the shoulders of giants and somebody in some previous first view if I'm right Said that it's not giants. It's a mountain of midgets right I'm a midgets and I'm just a bit taller because I am on top of a lot of midgets a lot a
14:24
Huge lot of people who have been making Impressive amounts of work and I have to thank Vladimir Because I have I am using ear cut and using chef back I am you seen Blame extrusion algorithm tutorials from map box. I'm using a lot of those things I'm usually seen gobble and roll up as JavaScript build tools
14:43
I'm using the book of shaders information from Patricia's or you know from Matson So it really is incredibly nice to be in an open source community and be able to use bits and pieces Which are useful for other people I? Kind of complain about complete tool chains if my tool chain looks like this, okay
15:00
Where there's a flat? The studio posity is difficult. That's a real reason So open GL does something called draw calls you have this blank image where you're going to rendering And you're going to take a bunch of triangles and draw them and then later You're going to take a different bunch of triangles and render on top So this is a complicated problem when you have semi-transparent stuff
15:25
Imagine you have like five sheets of glass or semi-transparent layers And then you have to push something in the middle you cannot because open GL will always draw it at the front And you will completely screw up transparency so if you want to do that you have to
15:40
Do a sorting in the CPU not the GPU and then if you rotate the view the point of view you will Have to do that sorting again and again and again every frame or have some complicated data structures as in such an octrees or do complex algorithms for for point of view and Then the problem is in leaflet everything has a 200 milliseconds fade-in
16:04
If you are placing a marker that this little blue image in leaflet that has anti LS pixels on the edge So actually everything is semi-transparent Fuck This is to say you are going to have if you're going to have any kind of WebGL
16:22
You are going to have rendering artifacts. They are inevitable the question is Which ones are you going to have you can have only opaque images? You can have some glitching when you do the fade-in you can have some off-order rendering you can have some back face visibility the question is how which of these artifacts do you want to have and
16:43
If you want to have a different active act you will have to refactor your cold all over again Not good Another problem is what is under cursor when you click on a leaflet map to get an event Oh, you have to click on this street or this UI or something. There are two options one is raycast
17:02
doing software and Just calculate which triangles this imaginary line intersects The other is you render everything by itself in its color you render some identifier and then you fix the color Of the picture you're in and you can you can be very smart and just render one pixel and check
17:21
What is the value of that pixel, but that's too complicated? So I don't I'm not doing it. Okay In JavaScript, what is a floating-point number anybody it all of it wrong Any any takers for this question, you're not JavaScript developers, are you?
17:40
The right answer is float 64 in JavaScript all floating-point values are float 64 If you define a typed array of type float 34 and you pass it To the GPU as a high precision float What does the graphics card use?
18:00
anybody No Float 24 Graphics card in web GL use three bytes for something that in JavaScript is eight Okay, some video cards might use more
18:20
maybe Perhaps but most cards use float 24 because ATI in the 90s So it was very to say to save like one fourth of the video memory and pack floating points in three bytes Makes no sense. You are going to have a lot of Present problems bonus fact in iOS devices and some Intel video cards a value of 5.0
18:43
If you pass it along the vertex shaders into the fragment shader, it's no longer 5.0 This is not equal. So everything will glitch in some devices. Yes You will get precision Vector tiles are solution for this precision problems because in vector tiles everything is CO2
19:03
2095 so that solves precision, but still Not good Also, this brings a couple of problems more We live let are very aware of the tiny slight differences between web browsers We hate the tiny difference between Firefox and Chrome
19:22
There are no tiny for us Right and we all hate the Safari box and the Internet Explorer box and some Android box and there's some box Which can only happen in some specific brand of phone We hate that when you bring GPUs to the mix it gets even more fun It's completely crazy. I just discovered yesterday. I have a back in Intel GPUs. It works fine on Nvidia
19:45
It works fine on an ATI. It's completely screws up in an Intel A slightly fast peek into the future Leave it yet is just an internal project right now. I do hope to make a release of it. Really
20:02
Webul2 has good things and bad things It's a standard that hopefully will make it on the browsers in one or two years It has an integer 32 type. Yes, I can compare integers and they will not change Is that exciting? I guess not
20:21
You can make not interpolating things. You can finally have four byte floating-point numbers into install three This is so good. It makes me feel so warm and fuzzy The main problem has it has the same non JavaScript API if WebGL 1 is OpenGL 2 Web GL 2 is OpenGL 3 why they are switching one number of the Russians. Don't ask me
20:45
So it has a few good things but I think that the problems on the API naming will remain there and How can we do we'll be able to see some tighter collaboration between panogram and mapbox and CCM and leaflet GL and poetry
21:04
Something I do not know and I hope I will get the answer to this question of mine next year
21:23
Questions anybody Yes, I'm an Arab I learn computer science I know what beats are The question is I'm masochistic the answer is no
21:40
Sometimes I wish I were This is this is not about Loving the pain. This is about loving the challenge the challenge of making something like leaflet GL is very good The obstacles in the way they're not You told us about a huge enormous number of huge enormous problems
22:04
Why do you think it will ever work? It won't It will be on a constant state of flux if you look at web technologies right now It's chaotic right the standards bodies are just people trying to push some technology into the four main browsers
22:21
Right, that's a problem. We only have four browsers right now for Practical purposes we got Firefox, which is gecko engine we got Chrome, which is the blink engine We got Safari, which is the webkit engine and we got edge, which is the edge engine We only have those four and any Inventions and innovations are going to be one of those four and those four are battling for market share
22:45
So it's going to be a chaos. It's going to be complete chaos web GL You have to remember it was something created by Google and pushed by Google to make Google Maps prettier That's the reason we got web GL. No other so The standards will be pushed by individual actors on the scene
23:02
And I don't think we will get rid of the JavaScript chaos We're in which is also good because JavaScript is evolving so fast and it's so much stuff happening That speed is good the chaos not good. I don't think that JavaScript chaos Environment or ecosystem will change anytime soon. Unfortunately
23:21
No more questions, well, thank you for listening to my rumblings