Point Clouds in a Browser with 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.
1150
Formal Metadata
| Title |
| |
| Title of Series | ||
| Part Number | 146 | |
| 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/20360 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
FOSS4G Bonn 2016146 / 193
8
20
21
27
28
34
39
51
53
56
61
64
66
68
72
75
78
79
80
84
104
108
112
120
123
126
130
131
134
135
140
142
143
145
146
153
154
157
160
165
182
183
188
190
00:00
Network topologyPoint (geometry)Point cloudSoftwareSoftware developerOpen sourceSoftware maintenanceGeometryPoint cloudMultiplication signProjective planeLibrary (computing)Software maintenanceNetwork topologyWeb browserAuthorizationOpen sourcePresentation of a groupSoftware developerPoint (geometry)Forcing (mathematics)WordComputer animation
01:07
Software development kitTwin primeLevel (video gaming)Junction (traffic)Point cloudSoftware maintenance
01:33
4 (number)BelegleserPoint cloudMultiplication signPoint (geometry)MereologyIntegrated development environment
02:10
Point (geometry)Point cloudPoint (geometry)NeuroinformatikOpen sourceSoftwareComputer fileDigital photographyComputer simulationPhysical systemBitMultiplication signService (economics)MereologyPoint cloudRoundness (object)Computer animation
02:58
5 (number)VarianceLengthNumberData compressionPoint (geometry)Revision controlPhysical systemSoftwareComputer fileEmailOpen sourceMIDIPoint (geometry)Multiplication signProfil (magazine)MereologyComputer file
03:19
Point (geometry)Open sourceNumberLeast squaresGeometryFile viewerPoint cloudMereologyView (database)Network topologyMetropolitan area networkSimilarity (geometry)Level (video gaming)Image resolutionPhysical lawEndliche ModelltheorieTesselationVertex (graph theory)Computer fileServer (computing)Scripting languageLibrary (computing)Java appletData conversionMeasurementMUDInformationPosition operatorManufacturing execution systemFile formatData storage deviceoutputFunction (mathematics)Binary fileHierarchyAdaptive behaviorVolumeDistanceAreaWeb browserWorld Wide Web ConsortiumReduction of orderInterpolationAsynchronous Transfer ModeGlobale BeleuchtungUsabilityComputer fontZoom lensUser profileClique-widthElectronic mailing list3 (number)Structural loadData storage deviceOctreeElectronic mailing listProjective planeServer (computing)Point (geometry)VideoconferencingCASE <Informatik>Line (geometry)Web browserMetadataComputer fileInformationInternetworkingView (database)Functional (mathematics)NeuroinformatikFile formatAttribute grammarRevision controlNumberMeasurementInterpolation1 (number)VolumenvisualisierungAsynchronous Transfer ModeControl flowPoint cloudMultiplication signVolume (thermodynamics)outputTesselationAreaProfil (magazine)Image resolutionCartesian coordinate systemData conversionOpen sourceFile viewerLevel (video gaming)Software developerMereologyComputer fontBitLibrary (computing)Inflection pointDemo (music)HierarchyDistanceObject (grammar)Slide ruleCellular automatonPublic key certificateNetwork topologyFunction (mathematics)Endliche ModelltheorieMenu (computing)Communications protocolProcess (computing)Sparse matrixSet (mathematics)Position operatorRemote procedure callSystem callComputer hardwareComputer animation
12:15
Information managementSpecial unitary groupDemo (music)Regulärer Ausdruck <Textverarbeitung>Network topologyInformation securityWeb browserDigital signal3 (number)Extension (kinesiology)Point cloudPoint (geometry)Visualization (computer graphics)Subject indexingPoint (geometry)Computer fileFile systemVideoconferencingPoint cloudWeb 2.0Server (computing)InternetworkingSubject indexingBitWeb browserMaxima and minimaMathematicsShape (magazine)Source codeLimit (category theory)Functional (mathematics)NeuroinformatikProjective planeState of matterMoore's law1 (number)VirtualizationCASE <Informatik>Information securityIntegrated development environmentTesselationVisualization (computer graphics)Demo (music)Data conversionComputer animation
16:06
Standard deviationLibrary (computing)Open sourceProjective plane
16:30
Computer fileSpacetimeData conversionReal numberSurjective functionPoint (geometry)Electronic visual displayFile formatPoint cloudStructural loadRevision controlNetwork topologyMathematical analysis3 (number)Manufacturing execution systemValue-added networkLink (knot theory)Demo (music)Set (mathematics)Cartesian coordinate systemMaxima and minimaPoint (geometry)Profil (magazine)Perspective (visual)Configuration spaceDefault (computer science)Menu (computing)Graphics processing unitStructural loadLine (geometry)Interface (computing)InternetworkingMeasurementCASE <Informatik>Greatest elementNeuroinformatikComputer animation
18:46
File formatComputer fileSpacetimeData conversionRevision controlNetwork topologyLattice (order)MereologySurjective functionReal numberPoint cloudMathematical analysisPoint (geometry)Electronic visual displayStructural load3 (number)Hand fanReal-time operating systemChemical equationMappingComputer fileFile formatData conversionSurjective functionPoint cloudControl flowSpacetimeStructural loadElectronic visual displayRevision controlVideo gameComa BerenicesMultiplication signSoftware developerCASE <Informatik>Computer animation
20:05
Ext functorEmailTwitterProjective planeEndliche ModelltheorieComputer animation
20:42
Pointer (computer programming)3 (number)Suite (music)ChainPrototypePoint cloudForm (programming)Wave packetPeer-to-peerData managementDemo (music)File formatLecture/Conference
21:47
ChainComputer fileFocus (optics)Service (economics)Form (programming)AreaDampingCASE <Informatik>Connected spaceVariable (mathematics)Data conversionTesselationFile formatScaling (geometry)Revision controlMeeting/InterviewLecture/Conference
22:42
Computer programmingMeasurementPoint (geometry)File formatLine (geometry)Clique-widthProfil (magazine)Bit rateBuildingProgram slicingMedical imagingMeeting/InterviewLecture/Conference
23:16
InformationQuicksortDigitizingProfil (magazine)Point (geometry)Functional (mathematics)Web browserOrder (biology)Medical imagingPresentation of a groupField (computer science)Meeting/InterviewLecture/Conference
24:18
Computer fileTesselationAdditionProjective planeOpen setLevel (video gaming)Endliche ModelltheorieoutputExistenceSlide ruleMeeting/InterviewLecture/Conference
24:55
3 (number)Presentation of a groupMachine visionLecture/ConferenceComputer animation
Transcript: English(auto-generated)
00:10
So, I want to my topic is about point clouds and how to show them in the browser with a project called pot tree.
00:21
And the presentation was prepared by me and the original author of this library who is unfortunately not able to come to Phospho-G to bond. And a few more words about me. I'm a geographer, mapper, software developer and maintainer of a project called PGEuting. I founded a company, and I'm living in Germany in summer and the rest of the year in Japan.
00:46
And I for a long time I enjoy open source Phospho-G and OSM. And yeah, it happened that I have to work with point cloud data as a project. And yeah, so, what do we do with this point cloud data?
01:04
Maybe our point cloud data is not so common. So it's point cloud data recorded to maintain road infrastructure. So it typically looks like this. It's very high quality and high level of details along the road.
01:24
And there's just no data where there's no road. And you have very complex junctions. So sometimes it's very dense and sometimes there's nothing. So what you need to collect this data is such a car, it's quite expensive.
01:41
Yeah, it's not something you buy so easy. But yeah, there are companies that use point cloud data and laser scanners and all these things. And it's getting, yeah, point cloud data is getting more and more. Also, new cars have tons of sensors and also scan the environment.
02:01
So I think it's just a matter of time until you come across point cloud data if you didn't do that yet. And yeah, if you can't wait, there's also a way how you can create your own point cloud data. You can do that at work and maybe you have access to such a drone and can play around it while working.
02:21
And so you can go to the next park and fly around a bit and take photos from the top. And yeah, you load them to your computer, quite a lot of files. And then there's not open source software that can turn this into point cloud data.
02:40
And I did this one time and I forgot to adjust the lens of the camera and it was fisheye so everything became a bit round. But I found it very cool and it was fun to play with. And so the park in the end looked like this, just flying around for 30 minutes until the battery was off. And yeah, then I kept my computer running and it was running quite some time.
03:03
It became very hot. I couldn't walk anymore for that time. And it turned out that this little small park was already 45 million points and a 1.2 gigabyte LAS file. And so, yeah, welcome to big data. So the question is now if I want to show this, how can we show these not millions but billions of points
03:26
in a browser? And that was the requirement for the project we did. And so I was looking around what exists. It was two or three years ago. And I found a project called Potri and it looked very interesting.
03:42
And it was named a WebGL point cloud viewer for large data sets. And it was that time developed or it's still developed by Marco Schutz from Vienna. And the number of contributors is growing since then. And so, yeah, maybe we were the first, so Geo Republic was the first company supporting this financially.
04:03
And then Rapid Lasso did contributions for funding new features. And more and more came, so the library was actually growing and became an open source project. And, yeah, I didn't know exactly when it started and the community started, yeah, the GitHub account started in February 2014.
04:24
And there was then a lot of activity depending on funding. And then there was a little break in the last month. So, take a breath. I think we have more in mind and development will increase again.
04:43
Yeah, so how does Potri work? So, there are a few things when you have such a lot of data to deal with. Usually you only can see a small part of the data. You don't have to show these 45 million or more points.
05:00
You don't have to load everything. So, only what you can see from your point of view is necessary to load. So, it uses a multi-resolution octree. And this allows you to, yeah, not display everything that is unnecessary and only load what you need. So, you try to minimize the number of points.
05:23
So, it has low-level nodes that contain the low-resolution models of large areas. So, when you zoom out, you only can see this. And when you zoom in, your resolution increases and the coverage, the area, becomes less when you zoom in.
05:41
And this is pretty much what we have also with map tiling. So, yeah, it's a very common way to deal with such amount of data. And each octree node is stored in a separate file. And so, the server is only necessary as a file store.
06:02
And in our case, for example, we store the files on S3. And so, we have kind of unlimited storage. And there's no server-side application required to load this. So, pottery requires a certain data format.
06:22
And for that, we need a converter that was made for this named pottery converter. And initially it was not the case. But then we decided to use Three.js as a base for the rendering engine.
06:41
And so, you have all the capabilities that you would also get when you use Three.js. So, if you want to extend this with functionality, show a video inside. So, you can do that. And there was also added client-side LAS. And the compressed version of LAS support from a project called Plazio, which is also very cool.
07:04
And, yeah, we needed some tools, especially for measurement in the point cloud, which was added. And, yeah, of course, it's open source. And it's a very, yeah, business-friendly license, BSD. So, about the data format that is currently supported.
07:22
You can take as input LAS compressed version and PLY files. And as an output, after you run the converter, you get a cloud JS file, which is a metadata file that contains information about bounding box, spacing, storage format, and so on. And you get many octree nodes.
07:42
And they contain information like position, color, intensity, classification information. And there's an additional file to store the octree hierarchy. So, the features, one time listed. And I will show some interesting ones later in detail.
08:02
So, first you can render billions of points in the browser. That was the main goal. You can change the point size. So, if you have more sparse point cloud, you can fill the holes. And there's something called iDome lighting that makes your point cloud look shiny and illuminates it.
08:20
And you can render RGB, elevation, intensity, or just any attribute that you have. There are various rendering modes. So, if you have powerful hardware, you can do more things like interpolation or splats. And if your computer is not so strong, you can decrease this computation-intensive interpolation rendering modes.
08:48
And you can measure distance and areas. Or you can get height profiles. And you can clip volumes. And a lot of these functionality was added on request, funded by projects that needed it.
09:05
So, yeah, how do you show a point cloud more nicely than just the points? That was added later. And what makes it very nice is this interpolation. The interpolation. And it increases the readability of details.
09:20
Like fonts become easier to read. And you avoid overlapping of points by using some nearest neighbor interpolation or overlapping points together. The other thing to make it look more nice is called iDome lighting.
09:43
So, it's some illumination. And at the same time, you add some outlines. And so, it feels more like a bit more 3D and more depth. And so, it looks quite nice then. And this is especially useful if you render elevation or classification of your data.
10:07
Something else that was added. Sometimes it's very difficult to navigate in this area in 3D. So, you have some points of interest.
10:20
And you can add annotations, numbers, like POIs or markers. And when you click on them, it will zoom to that point. And, yeah, you can predefine how you look at this point or at this object.
10:41
And something that we needed especially was getting height profiles. And initially we kept we didn't calculate it directly in a browser, but the data is already there. So, you don't have it's just by you draw a line that can also consist of multiple segments.
11:02
And, yeah, it will immediately draw you a height profile like you see here on the right side. And it will show it even if your line is a zigzag, it will show it flat in 2D. And because I can't in the demo, I later can't find such a nice path.
11:23
So, here's a nice example. I'm not sure how well it works with the internet and the mouse. And then there's something, the measurement that was important for us. The demo you see here, there are some example panels, but of course this is a library. So, you can use the functions and methods to build this yourself.
11:42
But you get an idea what you could do. So, you can display coordinates like at a certain point. You can show distances like the middle picture. You can remove like if you measure something, then you remove it again.
12:04
And you can also show that's the button at the end. You can show the 2D profile for this line. Yeah. So, I will try to show this demo later. And in case it doesn't work, I will show you the pictures quickly.
12:21
So, you see on the left side, it was initially for debugging, but it's also a good point to start with. So, you can make a lot of adjustments to your point cloud. You can change the point size. You can show the maximum amount of points you want to render. Because if your computer is not very powerful, this uses a lot of computation power.
12:43
And so, it's good to reduce the maximum amount of points to display. You can do things like change the point sizing. Do it like automatic or a fixed size. And the shape of the points and all the tools are listed there.
13:06
Or if you zoom in with the coloring, it actually looks quite beautiful. There are actually many, many examples and data that was allowed to.
13:21
So, Marcos was able to get this data and show it in his demos. And all the demos are also the source code is available on GitHub. There are some limitations. There are probably more limitations than three, but I wanted to mention these three. So, one is the browser security policies.
13:43
So, even if you could run it from a file, yeah. So, you have to have a web server to load this. It's just HTML and JavaScript, but you still need a web server. And of course you need WebGL capable browsers and devices. And this is becoming� so, the issue was three years ago this was a bigger issue.
14:06
But in the meanwhile this is not so big problem anymore. And also Internet Explorer now is eventually� I think it's working, but I don't know exactly. And yeah, you can only use it for viewing and analyzing. You cannot manipulate the data, of course, because it's stored in the file system.
14:26
So, who is using Portree? Yeah, there are quite a lot of companies I've heard are using it. Maybe there are more. Probably there are more. And we just don't know about it. And yeah, it's� I think it's quite� it's actively� it's a wellused project.
14:43
And also many� much functionality was funded. So, there seems to be quite some demand. There are like friends projects. Very interesting ones. And some I will just quickly mention. And later there will be, for example, a talk about the iTunes project.
15:03
Which is a 3D WebGL geospatial visualization project. And yeah, in the afternoon there will be another session. And you can hear more about Entwine that does indexing of point clouds. And it's something that might replace the Portree converter eventually.
15:24
So, it does it in a very sophisticated way. And then there's Greyhound that provides data streaming and serving environment. And Poodle, you will also hear more probably in the afternoon. And like mentioned before, so, 3D tiles is something we are also looking at.
15:46
I'm not sure exactly what the state of this is. Yeah, I think we are missing some standard. And there's the PG point cloud project that was maybe one of the first ones. But I haven't looked� I haven't tried it much.
16:01
And I think point clouds is a topic that many people care about these days. Like I said before, I think we need a standard. The standard is what makes open source stronger. So, when we can easily exchange libraries or when we can easily communicate with other projects. So, I think this is important to think about and define them.
16:24
And maybe we can't wait until OGC finish their official standard. And, yeah, let's quickly show, try the demo. So, when you� this is a dataset that has 150 million points that I showed before.
16:46
On the left side, you can turn on and off this� the configuration menu. And for example, when I click on point two, it moves to this point. And it loads� maybe the internet speed is not so high.
17:05
Let's not make the points adaptive. Maybe it's also the graphics card. That's the screenshot from before. You can decrease the points or you can increase them.
17:25
So, if this computer is powerful, in this case, we set the maximum to 5 million points. And the default one was 1.5 million points. You can change opacity. You can add� this is from 3JS. You can add the sky.
17:42
Like as a background. And for measurement, for example, it's� okay. That's the problem of demos. So, this is the height profile.
18:03
So, you can draw a line. Let's try to hit the column. Not so good. And now we can show the profile here on the bottom.
18:25
Which is not so good like the one in the example. And you can show at which point you are. So, this is for� yeah. This is not an application. This is like the standard interface that shows what Pottery can do.
18:47
And so, after some� a few months of break of development, now it's time� so, there's work on making the� so, what the release candidate of version 1.4 was released.
19:01
And it should be� the final release should be available by end of the year. And it's one of the new features. Or it will do faster conversion of the data. So, when you convert your data. And the file format has been improved. Like there were too many files. And so, you have to find the right balance between the amount of files and how you�
19:25
how you organize it in folders and how many� and in this case, we� it uses 50% less space now and has fewer files. And that should improve the performance. And it should also contain support for Greyhound and Entwine. Which was implemented by Howard Butler and a few� I don't know exactly who was involved.
19:47
And yeah, later, other ideas is like projecting maps onto point clouds in realtime. Or load and display point cloud formats without any conversion. And yeah, if� let's see.
20:06
Yeah, this always needs funding. So, if somebody needs that, yeah, Pottery got that far because of the support of many companies. And so, I think there's a lot more possible. And if you are one of those who need something, then yeah, contact me or contact Marcus.
20:24
Yeah, you can find the project on www.pottery.org. Yeah. And we are very welcome to hear feedback. Things that work and things that don't work. Yeah. Thank you very much. And if you have some questions.
20:45
Thank you very much, Daniel. So, question sign. I'm sure you have more question than you can. Thank you. And is it possible to export this to the profile?
21:04
And if� into which format then? I think you can do this. Yeah, it's rendered with WebGL 3.js. But I think there's a way to export this. But I'm� yeah. I don't know now how it works.
21:21
Maybe� yeah. I think it's possible. Because you maybe briefly explained the toolchain. So, assuming I have point clouds which were� so, I'm from the German railways. We have actual trains which do lead our scanning. And we have point clouds. You might want to make this kind of prototype or this kind of demo to pitch to our management.
21:45
How would I proceed? How would I� which toolchain would I use? You have your last files. And those� I assume so. And then you use Pottery converter to� yeah. To convert in the format that is� like a tile format.
22:02
And you have to upload to S3. And if new data arrives, you can� so, you can� you don't have to do everything from scratch. Yeah. But I think there's going to be more sophisticated versions. I think the focus of Pottery is not so much the converter.
22:20
So, with Entwine and Greyhound as a streaming service, this is maybe something that scales for larger areas. So, in our case, we always have certain junctions and certain areas. And they are connected. And we get the data once and then we run it once through this converter.
22:42
You have this wonderful measurements. Is it possible to capture the data and export them to other programs? So, there's nothing built in like this now. But it should be possible to do that. You can also� you can also change the width of your� of this line, of the profile line.
23:04
In which� you want to have the points itself or just an image? Or what kind of format should it be? Because you only� you don't have all points of your original data. No, I was thinking about when you have the measuring. You were showing how you could measure and digitize some sort of digitizing.
23:25
But is it possible to capture those information back into another program? It's not from the profile. But I think the Pottery itself is� so, you don't keep all the points. You only show� you only load what you need.
23:40
So, the data you have in your browser, it should be possible to add this functionality. To export it. But I think maybe image makes more sense. Like the question before. Another question?
24:10
Nice presentation. Just a comment. Pottery also has the possibility to create a little download portal for the original data. So, if you� in addition to the last file input, you give it a projection.
24:24
It will create an open street map from which you can download the tiles to just create a very simple download portal. Oh, okay. Did you find this? Okay. So, we don't use this. I didn't know that exists. Okay. So, there seems to be something done in this way.
24:45
Thank you for the hint. One last question, maybe? Thank you, Danielle, for this nice presentation.