potree / potree

WebGL point cloud viewer for large datasets

About

• Potree is a free open-source WebGL based point cloud renderer for large point clouds. It is based on the TU Wien Scanopy project and research projects Harvest4D, GCD Doctoral College and Superhumans.
• Newest information and work in progress is usually available on twitter
• Contact: Markus Schütz ([email protected])
• References:
  • Potree: Rendering Large Point Clouds in Web Browsers (2016)
  • Fast Out-of-Core Octree Generation for Massive Point Clouds (2020)

Getting Started

Install on your PC

Install node.js

Install dependencies, as specified in package.json, and create a build in ./build/potree.

npm install

Run on your PC

Use the npm start command to

• create ./build/potree
• watch for changes to the source code and automatically create a new build on change
• start a web server at localhost:1234.

Go to http://localhost:1234/examples/ to test the examples.

Deploy to a server

• Simply upload the Potree folderm with all your point clouds, the build directory, and your html files to a web server.
• It is not required to install node.js on your webserver. All you need is to host your files online.

Convert Point Clouds to Potree Format

Download PotreeConverter and run it like this:

./PotreeConverter.exe C:/pointclouds/data.las -o C:/pointclouds/data_converted

Copy the converted directory into <potreeDirectory>/pointclouds/data_converted. Then, duplicate and rename one of the examples and modify the path in the html file to your own point cloud.

Downloads

• Potree
• PotreeConverter - Convert your point cloud to the Potree format.
• PotreeDesktop - Desktop version of Potree. Allows drag&drop of point clouds into the viewer.

Examples

Basic Viewer	CA13 (18 billion Points)	Retz (Potree + Cesium)	Classifications	Various Features	Toolbar

More Examples

Load Project	Matcap	Virtual Reality	Heidentor	Lion	Lion LAS
Lion LAZ	EPT	EPT Binary	EPT zstandard	Clipping Volume	Oriented Images
Elevation Profile	Measurements	Meshes	Multiple Point Clouds	Camera Animation	Features (CA13)
Annotations	Hierarchical Annotations	Animation Path	Shapefiles	Cesium CA13	Geopackage
Cesium Sorvilier	Custom Sidebar Section	Embedded Iframe	Gradient Colors

VR

Heidentor	Eclepens	Morro Bay	Lion	Dechen Cave

Showcase

Matterhorn	Retz	Lake Tahoe	Sorvilier	Grave	Chowilla

More

Chiller	Cooler	Dechen Cave	Ruins	Eclepens	Heidentor
Building	LDHI	Lion Head	Overpass	Pielach	pompei
Santorini	Skatepark	Subsea Eq.	Subsea Man.	Westend Palais	Whitby

Funding

Potree is funded by a combination of research projects, companies and institutions.

Research projects who's funding contributes to Potree:

Project Name	Funding Agency
LargeClouds2BIM	FFG
Harvest4D	EU 7th Framework Program 323567
GCD Doctoral College	TU Wien
Superhumans	FWF

We would like to thank our sponsors for their financial contributions that keep this project up and running!

Diamond € 15,000+
Gold € 10,000+
Silver € 5,000+
Bronze € 1,000+	Data-viewer

Credits

• The multi-res-octree algorithms used by this viewer were developed at the Vienna University of Technology by Michael Wimmer and Claus Scheiblauer as part of the Scanopy Project.
• Three.js, the WebGL 3D rendering library on which potree is built.
• plas.io point cloud viewer. LAS and LAZ support have been taken from the laslaz.js implementation of plas.io. Thanks to Uday Verma and Howard Butler for this!
• Harvest4D Potree currently runs as Master Thesis under the Harvest4D Project
• Christian Boucheny (EDL developer) and Daniel Girardeau-Montaut (CloudCompare). The EDL shader was adapted from the CloudCompare source code!
• Martin Isenburg, Georepublic, Veesus, Sigeom Sa, SITN, LBI ArchPro, Pix4D as well as all the contributers to potree and PotreeConverter and many more for their support.

Bibtex

@article{SCHUETZ-2020-MPC,
	title =      "Fast Out-of-Core Octree Generation for Massive Point Clouds",
	author =     "Markus Schütz and Stefan Ohrhallinger and Michael Wimmer",
	year =       "2020",
	month =      nov,
	journal =    "Computer Graphics Forum",
	volume =     "39",
	number =     "7",
	doi =        "10.1111/cgf.14134",
	pages =      "13",
	publisher =  "John Wiley & Sons, Inc.",
	pages =      "1--13",
	keywords =   "point clouds, point-based rendering, level of detail",
}

potree's Issues

LOD based on point spacing

• Add spacing between points to cloud.js
• With spacing and point size, it should be possible to find which Level of Detail is needed to fill holes.

skyboxes

A lot of pointclouds are scans of outdoor environments. Skyboxes would enhance the aesthetics a lot in this case.

Will implement this after #31

FilteredSplats material does not work in combination with three.js

This shader renders a pointcloud in multiple passes into different render targets that do now know about the main FBOs depth buffer. It may not even possible to retrieve and use it. (maybe it is possible with the EXT_depth_texture extension?)

The EXT_frag_depth extension could be used to set the fragment depth during the last pass, when the result is rendered back into the main FBO. This would work and be easy to implement, but unfortunately it is a draft extension and according to webglstats.com, no one supports it, yet.

Custom pointcloud shader

At the moment, I've made a change to the three.js version that comes with potree, to make the minimum size of points 2pixels. So, if you use the official three.js version, you'll end up with a different point size.

• Make a custom shader so everyone can use the official three.js build and get the same results
• Might be a good time to think about normals and lighting.
• Maybe change the point size scale? As of now, 0.01 is a good choice. Seems odd but there could be a meaning to it. ( like pointSize = diameter in euclidean space? That could be pretty useful, actually. )

Minified CSS

Similar to Javascript files create minified and not minified CSS with build tool.

Versioning schema

To formalize releases one part is versioning.
"Semantic versioning" is a popular way to do this: http://semver.org/

Git and Github also make it easy to publish releases, if it follows some simple rules: https://help.github.com/categories/releases/

Minimize the amount of dependencies

Looking at the source a large amount of other Javascript libraries and script files is loaded, which brings up the questions, if ...

• ... all these libraries are really needed.
• ... it wouldn't be better to compile them into a single file, which then can be minified.

Trying to eliminate Javascript errors

When you run "gulp test" the Javascript test library will return a lot of errors/warnings.

These errors/warnings are mostly:

• != instead of !==, as well as == instead of ===
• a variable is declared a second time
• Umlaute in source files

So most of them are pretty easy to solve to get rid of the test errors and warnings, which would make the test tool a lot more useful.

The Umlaute warning obviously comes through your family name ;-)
Is it OK to rename it to "ue", or is it better to use "ü"?

I already saw that in fact the concatenation returns bad characters as Sch�tz.

Make usage of OES_texture_float extension optional

FilteredSplatsMaterial requires the OES_texture_float extension.
At the moment, this extension is loaded at startup, even if FilteredSplatsMaterial is not used. On some systems such as mobile phones or older hardware, OES_texture_float is not supported. If that's the case, potree will not work.

This behaviour should be changed so that OES_texture_float is loaded only if FilteredSplatsMaterial is used and if loading the extension fails, potree shoudl fall back to another material.

The goal is to make it work on mobile phones.

Publications of interest

I'll use this to dump some papers/tutorials/etc that might be interesting to implement.

• Real-time Rendering of Massive Unstructured Raw Point
  Clouds using Screen-space Operators - Contains hole filling. Video example
• Image-space Point Cloud Rendering - Contains hole filling
• High-Quality Surface Splatting on Today’s GPUs - Blending points together

Improve Keystroke Control Navigation

To provide keystroke navigation more intuitively, it might be best to follow keystrokes control navigation in the Google Earth 3D viewer (if possible).

See 3D viewer navigation manual: https://support.google.com/earth/answer/148115?hl=en

Controls of Interest:

• Move left | right | up | down
• Rotate clockwise | counter-clockwise
• Zoom in | out

Would be nice to have:

• Reset views
• Tile up | down

Loading data as a straight line along the top grid edge

Hi,

Love the demo using distance measuring. Try to use with my data but did not seem to work correctly. Here are my steps:

1. Converted my LiDAR.las file to binary using PotreeConverter command:
   potreeConverter -o examples -l 15 --source examples/FusedLidar_Lidar34.las
2. Output:
   == params ==
   source[0]: examples/FusedLidar_Lidar34.
   outdir: examples
   spacing: 1
   levels: 15
   format: xyzrgb
   range: 255
   output-format: BINARY

AABB:
min: [-76.6152, 39.2969, -15.823]
max: [-76.6135, 39.2985, 13.492]
size: [0.00163842, 0.00154115, 29.315]

reading examples/FusedLidar_Lidar34.las
1m points processed
duration: 20.264s
2m points processed
duration: 113.698s
722,679 points written
duration: 154.632s
closing writer
duration: 155.036s

1. I had edited the distance_measure.html to include the new point clouds
2. When run, it displayed the grid with everything except the point clouds data: however, if you pan the camera to the top you can see the data lined up against one of the edge

Can you please tell me what had gone wrong with the above process? I suspect that my AABB box is not matching my data but don't know enough to fix anything.

Thanks,
Chi

Add auto center feature

Manualy translating a camera or scene node such that the data is within the view frustum can be cumbersome. A function that automaticaly translates the camera so that the whole object is at the center of the viewport would be nice.

camera.zoomTo(sceneNode) 
camera.zoomTo(sceneNode, factor)

where factor is an optional parameter that defines the zoom level.
0: camera position = scene node position
1: camera position = nearest position such that the whole bounding box fits into the view frustum
0-1: somewhere in between

1: farther away from the object

Support for HTTP references in cloud.js

If resources listed in cloud.js could be distributed and referenced with URL's, then data could be stored on Amazon S3 or other storage locations rather than a subdirectory.

{
      "octreePath": "http://example.com/data",
      ...

Potree thrashing cpu when nothing going on

Having a Google Chrome tab with a potree model in it is using 37% of my cpu on a Thinkpad x200t running Kubuntu 13.10, after all points have loaded. I'm not giving any mouse or keyboard input. So, something very inefficient must be happening.

incountering problem potree

help! i used potree to convert my las file and i put it to potree, reources folder i tried to view my las file to potree but there's no display.. heres my command PotreeConverter.exe D:\lasmergefile\lasfile\data.las -s 0.5 -l 4 -o C:/potree_converted please help! thanks :)

distance measure tool

adding this after #31 is done.

Set location feature

Add a function, which allows to set the current location, which may consist of

• (required) Latitude
• (required) Longitude
• (optional) Altitude (if not provided, choose some meaningful defaults)
• (optional) angle horizontal ("heading")
• (optional) angle vertical

Make Potree.js more modular

Right now it's necessary to run initially <script type="text/javascript" >Potree.importScripts("..");</script>.

It would be better, if Potree.js would be more modular, that can load the library in different ways:

• compressed and built single file library (production use)
• uncompressed set of independent files loaded via script (development use)

The old version of OpenLayers uses this approach:
https://github.com/openlayers/openlayers/blob/master/lib/OpenLayers.js

Then later there would be a reference to the library and Potree could be initialized like

<script type="text/javascript" src="../src/Potree.js"></script>
<script type="text/javascript">
    function init() {
        var potree = new Potree.init(canvas, {
            <options>
        });

        potree.setLocation({
           lat: 45.0,
           lon: 135.0
           ....
        });

        ...
    }
    ...

Enhancement : clean up Synchronous XMLHttpRequest warning

enhancement clean up warning about xhr
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help http://xhr.spec.whatwg.org/

Developers must not pass false for the async argument when the JavaScript global environment is a document environment as it has detrimental effects to the end user's experience. User agents are strongly encouraged to warn about such usage in developer tools and may experiment with throwing an InvalidAccessError exception when it occurs so the feature can eventually be removed from the platform.

Get Location feature

Similar to #21 a method to get the current location in Potree would be also useful.

It may return x/y/z and if there is other useful information.

Better three.js integration

I'm trying out something new. The threejs_plugin branch is a complete rewrite from scratch as a three.js based project. It looks promising and has the advantage that three.js comes with a lot of features. Basic octree loading already works. The next few important steps are:

• frustum culling
• LOD
• unloading unused nodes
• point picking (very important!)
• adapt existing examples

Once those work, I might promote it to the develop or master branch.

gulp debug not working

I get the following error using 2905691 . I'm using node.js v0.10.26 and gulp 3.6.0 .

~/Downloads/potree$ gulp debug
[gulp] Using gulpfile /home/aaron/Downloads/potree/gulpfile.js
[gulp] Starting 'examples'...
[gulp] Finished 'examples' after 9.43 ms
[gulp] Starting 'scripts'...
[gulp] Finished 'scripts' after 39 ms
[gulp] Starting 'styles'...
[gulp] Starting 'docs'...
[gulp] Finished 'docs' after 4.37 ms
[gulp] Starting 'watch'...
[gulp] Finished 'watch' after 62 ms
[gulp] Starting 'serve'...
[gulp] Finished 'serve' after 5.06 ms
[gulp] Server started on 3000 port
[gulp] gulp-size: mjs.js 32.6 kB
[gulp] gulp-size: potree.js 168.95 kB

/home/aaron/Downloads/potree/node_modules/gulp-html-replace/lib/index.js:50
    Object.keys(options).forEach(function (key) {
           ^
TypeError: Object.keys called on non-object
    at Function.keys (native)
    at getTasks (/home/aaron/Downloads/potree/node_modules/gulp-html-replace/lib/index.js:50:12)
    at module.exports (/home/aaron/Downloads/potree/node_modules/gulp-html-replace/lib/index.js:7:17)
    at Stream.<anonymous> (/home/aaron/Downloads/potree/gulpfile.js:133:11)
    at Stream.EventEmitter.emit (events.js:92:17)
    at end (/home/aaron/Downloads/potree/node_modules/gulp/node_modules/vinyl-fs/node_modules/map-stream/index.js:116:39)
    at queueData (/home/aaron/Downloads/potree/node_modules/gulp/node_modules/vinyl-fs/node_modules/map-stream/index.js:62:17)
    at queueData (/home/aaron/Downloads/potree/node_modules/gulp/node_modules/vinyl-fs/node_modules/map-stream/index.js:56:14)
    at queueData (/home/aaron/Downloads/potree/node_modules/gulp/node_modules/vinyl-fs/node_modules/map-stream/index.js:56:14)
    at queueData (/home/aaron/Downloads/potree/node_modules/gulp/node_modules/vinyl-fs/node_modules/map-stream/index.js:56:14)

Data Format Specification

Provide a Wiki page, which contains the specification of the data format required by the viewer (which can be prepared by the Potree Converter).

Add a version information to the data format, that the format can evolve over time without causing compatibility issues.

Eventually data format specification can be a separate repository, such as GeoJSON or MB-Tiles spec for example.

Separate build Javascript by library

Build separate files for libraries in libs and Potree source in src.

Review file headers

Looking arbitrary at some source files, some files don't contain any license information and some still mention GPL.

Create some demos in ./examples

Move ./lion.html to ./examples and create some more examples such as

• Procedurally generated point clouds, similar to this: http://potree.org/wp/procedural-surfaces/
• Loading a small point cloud from a *.ply file.

Merge current feature branches into "develop"

Let's merge current feature branches into "develop".

Better documentation

It's always difficult to keep the documentation in sync with the development.
It's also difficult to reflect changes between versions.

The best way to solve this issue is to use a documentation generator, which parses the relevant parts from the source files. In this case the source code and documentation are kept in the same file.

There are various documentation generators to choose from:

• JSDoc: https://github.com/jsdoc3/jsdoc
• YUIDoc: http://yui.github.io/yuidoc/
• NaturalDocs: http://www.naturaldocs.org/
• JS Dox: http://jsdox.org/

Other useful tools:

• http://smartcomments.github.io/

is there way to fill color potree data?

i have las file converted into potree after i render to localhost.. i find out that my potree data has no color.. is there way to fill up color? thanks to your answer..

Minified mjs.min.js does not work

Find out why.

Make measuring sphere and labels independant of scene scale

The size of both should be the same, no matter how the scene is scaled and how far/close to the camera the measurement points are.

Include images of documentation into build script

The build creates HTML files from Markdown source, but it currently doesn't include the images.

combine with three.js?

Would it be possible to turn potree into a loader for three.js?

Loading octree data order is from far to near

Currently, near to view point data loading order seem to be later than far ones.
If it is possible to change loading octree data order from near to far,
loading performance will be faster, I think.

Do frustum culling and LOD in object space

According to firefox profiler, ~13% of the time is spent on
PointCloudOctree.update() -> computeTransformedBoundingBox() at 450 visible nodes.
Maybe it's better to transform the camera frustum to object space instead.
Also, camWorldPos should be computed outside the while loop.

BSD 2-Clause license?

I added the BSD license text also to the Javascript builds, when I realized that "your" BSD license text contains a paragraph (the last one), which seems to be "FreeBSD" specific.

Isn't BSD 2-clause the correct licence? I think it's a common one.
http://opensource.org/licenses/BSD-2-Clause

Here the license text you probably took:
https://www.freebsd.org/copyright/freebsd-license.html

High Quality Splatting

It'd be nice to get High Quality Splatting working again in the rewrite.

Problem with color

After using Potree Converter to convert a LAS or XYZ point cloud, the converted data is all black. Here is the command I use: C:\Users\phamax\Desktop\PotreeConverter_2014.05.30>potreeconverter.exe test.txt
-f xyzi -l 8 -r 65536 -o C:\potree_converts

The txt file is a XYZ file, where the fourth column is intensity. Values for intensity goes from 1 to 2194.

Is there anything I should do differently?
Thanks
Maxime

potree for meshes?

I know that part of the idea of using potree is that you don't need to mesh your points to surfaces. But there are still some reasons to use surfaces; for example if you want to have the user click on a surface to define a point (usually you handle this by calculating which mesh triangle is intersected by a ray from the camera).

So, my question is: could potree be adapted for meshes, so that the mesh first loads extremely simplified and then triangles are added? This seems mathematically more difficult than doing it with point clouds -- I'm not even sure if the same algorithms apply. It seems that Google Earth does something like this for when you zoom in on their 3D terrain.

CesiumJs Integration

I know this is a larger one, but in future, a integration with cesiumjs would be really cool for displaying point clouds that has geo coordinate systems.

Create build system

Make a gulp build that creates a single minified source file.

Include tiny server via gulp.js

Include a small webserver to be able to test the examples without having to install a server as Apache or Nginx.

This should also simplify development.

High Priority

This milestone contains high priority issues

Loading point clouds from ply file

The ply loader uses a WebWorker (src/loader/PlyLoaderWorker.js) to load a file in a parallel task.
This causes some problems:

• A WebWorker task must be loaded from a file. It can't be packaged along with all the other source files.

  var worker = new Worker('doWork.js');

• The path to the WebWorker file must be specified relative to the html file. Up until now, html files were in the project root directory. If the html file is located in ./examples, the path to the WebWorker has to be adjusted accordingly.

• Inside the WebWorker, the path to the file that should be loaded must be relative to the WebWorker file.

I'd say this is a low-priority task which I will handle once more important issues are fixed.

Profile (lateral cut) Tool

Similar to the distance measure a "Profile Tool" could output the lateral cut along a line or rectangle.

Add Documentation to Wiki

The easiest and fastest way to provide documentation should be using the Github Wiki.

Difficult to track with this approach are changes of the documentation from one version to another, so o the long term it might better to use documentation included in the repository and deployed for example using Github Pages.

Automated testing (and builds)

It could be interesting to do automated testing for "develop" branch and then run builds with Travis CI: https://travis-ci.org/

How can I release the memory of a PointCloudOctree object?

When I use mulit potree model in a scene, I wish i could release the point cloud. But I found that the memory will increase even I dispose the geometry and material.

scene.remove(this.infos[this.currentNodes[n]].pointCloud);
this.infos[this.currentNodes[n]].pointCloud.pcoGeometry.dispose();
this.infos[this.currentNodes[n]].pointCloud.material.dispose();
this.infos[this.currentNodes[n]].pointCloud = undefined;

potree for arbitrary point clouds on the local file system

It'd be nice to be able to load and display any point cloud from the hard disk.
Cross domain security settings in all browsers prevent potree from loading arbitrary local files.

I can see 3 possible solutions:

• Ship potree with a portable version of a browser that has cross domain security settings disabled. See http://stackoverflow.com/questions/3102819/chrome-disable-same-origin-policy
• Ship potree with a portable webserver.
• Create an executable that loads files from hard disk and communicates with potree through WebSockets or, if possible, XMLHttpRequests.