feat(potree2): Add potree 2.0 loader

iTowns · Jun 24, 2024 · ee56ec7 · ee56ec7
1 parent 1976481
commit ee56ec7
Show file tree

Hide file tree

Showing 22 changed files with 2,271 additions and 5 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -11,4 +11,3 @@ docs/tmpl/
 test/data/
 
 
-
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -18,7 +18,7 @@ module.exports = {
     },
     env: {
         browser: true,
-        es6: true,
+        es2020: true,
         amd: true,
         commonjs: true,
     },

diff --git a/docs/config.json b/docs/config.json
@@ -49,6 +49,7 @@
                 "PointCloudLayer",
                 "PotreeLayer",
                 "CopcLayer",
+                "Potree2Layer",
                 "C3DTilesLayer",
                 "LabelLayer",
                 "GlobeLayer",
@@ -72,6 +73,7 @@
                 "FileSource",
                 "OrientedImageSource",
                 "PotreeSource",
+                "Potree2Source",
                 "VectorTilesSource",
                 "EntwinePointTileSource",
                 "CopcSource"

diff --git a/examples/config.json b/examples/config.json
@@ -24,6 +24,7 @@
 
     "Pointcloud": {
         "potree_25d_map": "Potree 2.5D map",
+        "potree2_25d_map": "Potree 2.5D map 2.0 format",
         "potree_3d_map": "Potree 3D map",
         "laz_dragndrop": "LAS/LAZ viewer",
         "entwine_simple_loader": "Entwine loader",

diff --git a/examples/potree2_25d_map.html b/examples/potree2_25d_map.html
@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Point Cloud Viewer</title>
+
+        <style type="text/css">
+            #info {
+                color: #7ad7ff;
+                font-family: 'Open Sans', sans-serif;
+                position: absolute;
+                top: 0;
+                left: 0;
+                padding: 0.3rem;
+                background-color: #404040;
+                z-index: 1;
+            }
+            @media (max-width: 600px) {
+                #info,
+                .dg {
+                    display: none;
+                }
+            }
+        </style>
+
+        <meta charset="UTF-8">
+        <link rel="stylesheet" type="text/css" href="css/example.css">
+        <link rel="stylesheet" type="text/css" href="css/LoadingScreen.css">
+
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    </head>
+    <body>
+        <div id="viewerDiv">
+            <div id="info"></div>
+        </div>
+
+        <div>
+            <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
+            <script src="../dist/itowns.js"></script>
+            <script src="js/GUI/LoadingScreen.js"></script>
+            <script src="../dist/debug.js"></script>
+            <script type="text/javascript">
+                var potreeLayer;
+                var oldPostUpdate;
+                var viewerDiv;
+                var debugGui;
+                var view;
+                var controls;
+
+                // Define crs projection that we will use (taken from https://epsg.io/3946, Proj4js section)
+                itowns.proj4.defs('EPSG:3946', '+proj=lcc +lat_1=45.25 +lat_2=46.75 +lat_0=46 +lon_0=3 +x_0=1700000 +y_0=5200000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs');
+
+                viewerDiv = document.getElementById('viewerDiv');
+                viewerDiv.style.display = 'block';
+
+                debugGui = new dat.GUI();
+
+                // TODO: do we really need to disable logarithmicDepthBuffer ?
+                view = new itowns.View('EPSG:3946', viewerDiv);
+                setupLoadingScreen(viewerDiv, view);
+                view.mainLoop.gfxEngine.renderer.setClearColor(0xcccccc);
+
+                // Configure Point Cloud layer
+                potreeLayer = new itowns.Potree2Layer('Lion', {
+                    source: new itowns.Potree2Source({
+                        file: 'metadata.json',
+                        url: 'https://blocinbloc-public-test.s3.fr-par.scw.cloud/lion-potree2',
+                        crs: view.referenceCrs,
+                    }),
+                });
+
+                // point selection on double-click
+                function dblClickHandler(event) {
+                    var pick = view.pickObjectsAt(event, 5, potreeLayer);
+
+                    for (const p of pick) {
+                        console.info('Selected point #' + p.index + ' in position (' +
+                            p.object.position.x + ', ' +
+                            p.object.position.y + ', ' +
+                            p.object.position.z +
+                         ') in Points ' + p.object.layer.id);
+                    }
+                }
+                view.domElement.addEventListener('dblclick', dblClickHandler);
+
+                function placeCamera(position, lookAt) {
+                    view.camera.camera3D.position.copy(position);
+                    view.camera.camera3D.lookAt(lookAt);
+                    // create controls
+                    controls = new itowns.FirstPersonControls(view, { focusOnClick: true });
+                    debugGui.add(controls.options, 'moveSpeed', 1, 100).name('Movement speed');
+
+                    view.notifyChange(view.camera.camera3D);
+                }
+
+                // add potreeLayer to scene
+                function onLayerReady() {
+                    var ratio;
+                    var position;
+                    var lookAt = new itowns.THREE.Vector3();
+                    var size = new itowns.THREE.Vector3();
+
+                    potreeLayer.root.bbox.getSize(size);
+                    potreeLayer.root.bbox.getCenter(lookAt);
+
+                    debug.PointCloudDebug.initTools(view, potreeLayer, debugGui);
+
+                    view.camera.camera3D.far = 2.0 * size.length();
+
+                    ratio = size.x / size.z;
+                    position = potreeLayer.root.bbox.min.clone().add(
+                        size.multiply({ x: 0, y: 0, z: ratio * 0.5 }));
+                    lookAt.z = potreeLayer.root.bbox.min.z;
+                    placeCamera(position, lookAt);
+                    controls.moveSpeed = size.length() / 3;
+
+                    // update stats window
+                    var info = document.getElementById('info');
+                    view.addFrameRequester(itowns.MAIN_LOOP_EVENTS.AFTER_RENDER, () => {
+                        info.textContent = potreeLayer.displayedCount.toLocaleString() + ' points';
+                    });
+                }
+                window.view = view;
+                view.addLayer(potreeLayer).then(onLayerReady);
+            </script>
+    </body>
+</html>
+
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -61,6 +61,7 @@
     "@mapbox/vector-tile": "^1.3.1",
     "@tmcw/togeojson": "^5.8.1",
     "@tweenjs/tween.js": "^18.6.4",
+    "brotli-compress": "^1.3.3",
     "copc": "^0.0.6",
     "earcut": "^2.2.4",
     "js-priority-queue": "^0.1.5",