iTowns · ftoromanoff · Jul 18, 2024 · Apr 30, 2024 · Apr 30, 2024 · Apr 30, 2024
diff --git a/config/threeExamples.mjs b/config/threeExamples.mjs
@@ -9,6 +9,7 @@ export default {
         './utils/WorkerPool.js',
         './capabilities/WebGL.js',
         './libs/ktx-parse.module.js',
-        './libs/zstddec.module.js'
+        './libs/zstddec.module.js',
+        './math/OBB.js',
     ],
 };
diff --git a/examples/copc_3d_loader.html b/examples/copc_3d_loader.html
@@ -0,0 +1,152 @@
+<html>
+    <head>
+        <title>Itowns - COPC 3D loader</title>
+
+        <meta charset="UTF-8">
+        <link rel="stylesheet" type="text/css" href="css/example.css">
+        <link rel="stylesheet" type="text/css" href="css/LoadingScreen.css">
+
+        <style type="text/css">
+            #description {
+                z-index: 2;
+                left: 10px;
+            }
+        </style>
+
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
+    </head>
+    <body>
+        <div id="description">Specify the URL of a COPC file to load:
+            <input type="text" id="copc_url" />
+            <button onclick="readCopcURL()">Load</button>
+            <button onclick="loadLidarHD()">Load LiDAR HD dataset</button>
+            <div id="share"></div>
+        </div>
+        <div id="viewerDiv">
+        </div>
+
+        <script src="../dist/itowns.js"></script>
+        <script src="js/GUI/LoadingScreen.js"></script>
+        <script src="../dist/debug.js"></script>
+        <script type="text/javascript">
+            var debugGui = new dat.GUI();
+            var viewerDiv = document.getElementById('viewerDiv');
+
+            var view = new itowns.GlobeView(viewerDiv);
+
+            // Add one imagery layer to the scene and the miniView
+            // This layer is defined in a json file but it could be defined as a plain js
+            // object. See Layer* for more info.
+            itowns.Fetcher.json('./layers/JSONLayers/Ortho.json').then(function _(config) {
+                config.source = new itowns.WMTSSource(config.source);
+                var layer = new itowns.ColorLayer('Ortho', config);
+                view.addLayer(layer);
+            });
+            // Add two elevation layers.
+            // These will deform iTowns globe geometry to represent terrain elevation.
+            function addElevationLayerFromConfig(config) {
+                config.source = new itowns.WMTSSource(config.source);
+                var layer = new itowns.ElevationLayer(config.id, config);
+                view.addLayer(layer);
+            }
+            itowns.Fetcher.json('./layers/JSONLayers/IGN_MNT_HIGHRES.json').then(addElevationLayerFromConfig);
+            itowns.Fetcher.json('./layers/JSONLayers/WORLD_DTM.json').then(addElevationLayerFromConfig);
+
+            var layer;
+
+            function onLayerReady() {
+                var lookAt = new itowns.THREE.Vector3();
+
+                const bboxes = layer.root.map(root => root.bbox);
+
+                let bbox = bboxes[0];
+                for (let i = 1; i < bboxes.length; i++) {
+                    bbox = bbox.union(bboxes[i]);
+                }
+
+                bbox.getCenter(lookAt);
+                var coordLookAt = new itowns.Coordinates(view.referenceCrs, lookAt);
+
+                var size = new itowns.THREE.Vector3();
+                bbox.getSize(size);
+
+                view.controls.lookAtCoordinate({
+                    coord: coordLookAt,
+                    range: 2 * size.length(),
+                }, false);
+            }
+
+            function readCopcURL() {
+                const urlParams = new URL(location.href).searchParams
+                var url = document.getElementById('copc_url').value || urlParams.get('copc');
+
+                if (url) {
+                    const options = {};
+                    urlParams.keys().forEach(key => {
+                        if (key !== 'copc') {
+                            if (key.includes('.')) {
+                                params = key.split('.');
+                                let object = options;
+                                params.forEach((subKey, index) => {
+                                    if (!object[subKey]) { object[subKey] = {}; }
+                                    if (index === params.length - 1) {
+                                        object[subKey] = parseFloat(urlParams.get(key));
+                                    }
+                                    object = object[subKey];
+                                })
+                            } else {
+                                options[key] = parseFloat(urlParams.get(key));
+                            }
+
+                        }
+                    });
+                    loadCopc(url, options);
+
+                    document.getElementById('share').innerHTML = '<a href="' +
+                        location.href.replace(location.search, '?copc=' + url) +
+                        '" target="_blank">Link to share this view</a>';
+                    document.getElementById('copc_url').value = url;
+                }
+            }
+
+            function loadCopc(url, options) {
+                const source = new itowns.CopcSource({ url });
+
+                if (layer) {
+                    debugGui.removeFolder(layer.debugUI);
+                    view.removeLayer('COPC');
+                    view.notifyChange();
+                    layer.delete();
+                }
+
+                const config = {
+                    source,
+                    crs: view.referenceCrs,
+                    sseThreshold: 2,
+                    pointBudget: 3000000,
+                    ...options,
+                }
+
+                layer = new itowns.CopcLayer('COPC', config);
+
+                itowns.View.prototype.addLayer.call(view, layer).then(onLayerReady);
+
+                layer.whenReady
+                    .then(() => debug.PointCloudDebug.initTools(view, layer, debugGui));
+            }
+
+            function loadLidarHD() {
+                // const url ="https://storage.sbg.cloud.ovh.net/v1/AUTH_63234f509d6048bca3c9fd7928720ca1/ppk-lidar/ML/LHD_FXX_0746_6509_PTS_C_LAMB93_IGN69.copc.laz"
+                const url ="https://dl-lidar.ign.fr/ppk-lidar/ML/LHD_FXX_0746_6509_PTS_C_LAMB93_IGN69.copc.laz" //fixed with proxy
+                const options = {
+                    material: {mode: 2},
+                    opacity: 0.5,
+                }
+                loadCopc(url, options);
+            }
+
+            readCopcURL();
+        </script>
+    </body>
+</html>
diff --git a/examples/copc_simple_loader.html b/examples/copc_simple_loader.html
@@ -2,7 +2,7 @@
     <head>
         <meta charset="UTF-8">
 
-        <title>Itowns - COPC loader</title>
+        <title>Itowns - COPC simple loader</title>
 
         <link rel="stylesheet" type="text/css" href="css/example.css">
         <link rel="stylesheet" type="text/css" href="css/LoadingScreen.css">
@@ -35,30 +35,39 @@
         <script src="../dist/debug.js"></script>
         <script type="text/javascript">
             let layer; // COPCLayer
+            let view;
+            let control;
 
-            const uri = new URL(location);
-
-            const gui = new dat.GUI();
+            const crs = {
+                'autzen-classified': 'EPSG:2992',
+                sofi: 'EPSG:32611',
+                millsite: 'EPSG:6341',
+            }
 
             const viewerDiv = document.getElementById('viewerDiv');
-            const view = new itowns.View('EPSG:4326', viewerDiv);
-            const controls = new itowns.PlanarControls(view);
-            view.mainLoop.gfxEngine.renderer.setClearColor(0xdddddd);
+            gui = new dat.GUI();
 
-            setUrl(uri.searchParams.get('copc'));
+            const uri = new URL(location);
+            setView(uri.searchParams.get('copc'));
 
             function onLayerReady(layer) {
                 const camera = view.camera.camera3D;
 
                 const lookAt = new itowns.THREE.Vector3();
                 const size = new itowns.THREE.Vector3();
-                layer.root.bbox.getSize(size);
-                layer.root.bbox.getCenter(lookAt);
+
+                const bboxes = layer.root.map(root => root.bbox);
+                let bbox = bboxes[0];
+                for (let i = 1; i < bboxes.length; i++) {
+                    bbox = bbox.union(bboxes[i]);
+                }
+                bbox.getSize(size);
+                bbox.getCenter(lookAt);
 
                 camera.far = 2.0 * size.length();
 
-                controls.groundLevel = layer.root.bbox.min.z;
-                const position = layer.root.bbox.min.clone().add(
+                controls.groundLevel = bbox.min.z;
+                const position = bbox.min.clone().add(
                     size.multiply({ x: 1, y: 1, z: size.x / size.z }),
                 );
 
@@ -69,7 +78,6 @@
                 view.notifyChange(camera);
             }
 
-
             function readURL() {
                 const url = document.getElementById('url').value;
 
@@ -88,20 +96,21 @@
                 history.replaceState(null, null, `?${uri.searchParams.toString()}`);
 
                 input_url.value = url;
-                load(url);
+                location.reload()
             }
 
+            function setView(url) {
+                const copcId = url.split('/').pop().split('.').shift();
+
+                view = new itowns.View(crs[copcId], viewerDiv);
+                controls = new itowns.PlanarControls(view);
+                view.mainLoop.gfxEngine.renderer.setClearColor(0xdddddd);
+                load(url);
+            }
 
             function load(url) {
                 const source = new itowns.CopcSource({ url });
 
-                if (layer) {
-                    gui.removeFolder(layer.debugUI);
-                    view.removeLayer('COPC');
-                    view.notifyChange();
-                    layer.delete();
-                }
-
                 layer = new itowns.CopcLayer('COPC', {
                     source,
                     crs: view.referenceCrs,

diff --git a/examples/entwine_3d_loader.html b/examples/entwine_3d_loader.html
@@ -20,8 +20,8 @@
         <div id="description">Specify the URL of a Entwine Point Tree to load:
             <input type="text" id="ept_url" />
             <button onclick="readEPTURL()">Load</button>
-            <p>If your dataset is not displaying at the right location,
-            check that it has been converted in <code>EPSG:4978</code>.</p>
+            <button onclick="loadGrandLyon()">Load the Grand Lyon
+                dataset</button>
             <div id="share"></div>
         </div>
         <div id="viewerDiv">
@@ -58,11 +58,17 @@
 
             function onLayerReady() {
                 var lookAt = new itowns.THREE.Vector3();
-                eptLayer.root.bbox.getCenter(lookAt);
+
+                const bboxes = eptLayer.root.map(root => root.bbox);
+                let bbox = bboxes[0];
+                for (let i = 1; i < bboxes.length; i++) {
+                    bbox = bbox.union(bboxes[i]);
+                }
+                bbox.getCenter(lookAt);
                 var coordLookAt = new itowns.Coordinates(view.referenceCrs, lookAt);
 
                 var size = new itowns.THREE.Vector3();
-                eptLayer.root.bbox.getSize(size);
+                bbox.getSize(size);
 
                 view.controls.lookAtCoordinate({
                     coord: coordLookAt,
@@ -71,7 +77,8 @@
             }
 
             function readEPTURL() {
-                var url = document.getElementById('ept_url').value || new URL(location.href).searchParams.get('ept');
+                const urlParams = new URL(location.href).searchParams
+                var url = document.getElementById('ept_url').value || urlParams.get('ept');
 
                 if (url) {
                     loadEPT(url);
@@ -87,8 +94,10 @@
                 eptSource = new itowns.EntwinePointTileSource({ url });
 
                 if (eptLayer) {
-                    view.removeLayer('ept');
+                    debugGui.removeFolder(eptLayer.debugUI);
+                    view.removeLayer('Entwine Point Tile');
                     view.notifyChange();
+                    eptLayer.delete();
                 }
 
                 eptLayer = new itowns.EntwinePointTileLayer('Entwine Point Tile', {
@@ -98,7 +107,13 @@
 
                 itowns.View.prototype.addLayer.call(view, eptLayer).then(onLayerReady);
 
-                debug.PointCloudDebug.initTools(view, eptLayer, debugGui);
+                eptLayer.whenReady
+                    .then(() => debug.PointCloudDebug.initTools(view, eptLayer, debugGui));
+            }
+
+            function loadGrandLyon() {
+                document.getElementById('ept_url').value = 'https://download.data.grandlyon.com/files/grandlyon/imagerie/mnt2018/lidar/ept/';
+                readEPTURL();
             }
 
             readEPTURL();

diff --git a/examples/entwine_simple_loader.html b/examples/entwine_simple_loader.html
@@ -31,12 +31,11 @@
         <script src="js/GUI/LoadingScreen.js"></script>
         <script src="../dist/debug.js"></script>
         <script type="text/javascript">
-            itowns.proj4.defs('EPSG:3946', '+proj=lcc +lat_0=46 +lon_0=3 +lat_1=45.25 +lat_2=46.75 +x_0=1700000 +y_0=5200000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs +type=crs');
-
             var debugGui = new dat.GUI();
             var viewerDiv = document.getElementById('viewerDiv');
             viewerDiv.style.display = 'block';
-            var view = new itowns.View('EPSG:3946', viewerDiv);
+
+            var view = new itowns.View('EPSG:3857', viewerDiv);
             view.mainLoop.gfxEngine.renderer.setClearColor(0xcccccc);
 
             const controls = new itowns.PlanarControls(view);
@@ -46,13 +45,19 @@
             function onLayerReady() {
                 var lookAt = new itowns.THREE.Vector3();
                 var size = new itowns.THREE.Vector3();
-                eptLayer.root.bbox.getSize(size);
-                eptLayer.root.bbox.getCenter(lookAt);
+
+                const bboxes = eptLayer.root.map(root => root.bbox);
+                let bbox = bboxes[0];
+                for (let i = 1; i < bboxes.length; i++) {
+                    bbox = bbox.union(bboxes[i]);
+                }
+                bbox.getSize(size);
+                bbox.getCenter(lookAt);
 
                 view.camera3D.far = 2.0 * size.length();
 
-                controls.groundLevel = eptLayer.root.bbox.min.z;
-                var position = eptLayer.root.bbox.min.clone().add(
+                controls.groundLevel = bbox.min.z;
+                var position = bbox.max.clone().add(
                     size.multiply({ x: 0, y: 0, z: size.x / size.z })
                 );
 
@@ -88,7 +93,7 @@
                 eptSource = new itowns.EntwinePointTileSource({ url });
 
                 if (eptLayer) {
-                    debugGUI.removeFolder(eptLayer.debugUI);
+                    debugGui.removeFolder(eptLayer.debugUI);
                     view.removeLayer('Entwine Point Tile');
                     view.notifyChange();
                     eptLayer.delete();