@jdultra/threedtiles 4.0.2 → 4.0.4

package/README.md

@@ -177,10 +177,60 @@ occlusionCullingService.setSide(THREE.DoubleSide);
 ```
 
 ### Instanced Tilesets
+
+<p align="center">
+  <img src="https://storage.googleapis.com/jdultra-website/assets/instancedPic.png" width="800" style="display: block; margin: 0 auto"/>
+</p>
+
 Using InstancedTileLoader and InstancedOGC3DTile allows displaying the same Tileset at many different places with little impact on performance.
 Each Tileset is independent in terms of it's position, orientation and level of detail but each tile is created as an "InstancedMesh" giving much 
 higher performance when displaying the same Tileset many times.
 
+```
+// First create the InstancedTileLoader that will manage caching
+const instancedTileLoader = new InstancedTileLoader(scene, mesh => {
+    //// Insert code to be called on every newly decoded mesh e.g.:
+    mesh.material.wireframe = false;
+    mesh.material.side = THREE.DoubleSide;
+}, 
+1000, // cache size as in the number of tiles cached in memory
+100, // max number of tilesets from the same source
+);
+
+// then create some tilesets
+const instancedTilesets = [];
+for (let i = 0; i < 100; i++) {
+    const tileset = new InstancedOGC3DTile({
+    url: "https://storage.googleapis.com/ogc-3d-tiles/droneship/tileset.json",
+    geometricErrorMultiplier: 1.0,
+    loadOutsideView: false,
+    tileLoader: instancedTileLoader,
+    static: true // when static is set to true, don't forget to call InstancedOGC3DTile#updateMatrix manually
+    });
+    
+    tileset.translateOnAxis(new THREE.Vector3(1, 0, 0), 50 * i);
+    tileset.updateMatrix();
+    scene.add(tileset);
+    instancedTilesets.push(tileset);
+}
+
+//setup an update loop for the LODs
+setInterval(() => {
+    instancedTilesets[updateIndex].update(camera);
+    updateIndex= (updateIndex+1)%instancedTilesets.length;
+},50);
+
+//in the animate function, you also need to update the instancedTileLoader
+function animate() {
+    requestAnimationFrame(animate);
+    instancedTileLoader.update();
+    
+    ... // rest of render loop
+}
+animate();
+
+```
+
 ### static tilesets and other performance tips
 When you know your tileset will be static, you can specify it in the OGC3DTile object constructor parameter.
 This will skip recalculating the transformation matrix of every tile each frame and give a few extra frames per second.
@@ -192,16 +242,50 @@ const ogc3DTile = new OGC3DTile({
     });
 ```
 
-Either way, it's advised to set the autoUpdate property of the scene to false and update the matrices manually whenever you move things around.
+Either way, it's advised to set the autoUpdate property of the scene to false and call Scene#updateMatrixWorld manually whenever you move things around.
+
+```
+scene.matrixAutoUpdate = false;
+scene.matrixWorldAutoUpdate = false;
+
+// and when objects move:
+scene.updateMatrixWorld(true);
 
 ```
-scene.autoUpdate = false;
+#### tileset update loop
+Updating a single tileset via OGC3DTile#update or InstancedOGC3DTile#update is quite fast, even when the tree is deep.
+For a single tileset, it's safe to call it regularly with a setInterval:
+```
+function startInterval() {
+        interval = setIntervalAsync(function () {
+            ogc3DTile.update(camera);
+        }, 20);
+    }
 ```
 
+However, with instancedTilesets, you may have hundreds or even thousands of LOD trees that need to be updated individually. In order to preserve frame-rate,
+you may want to implement something a little smarter that yields the CPU to the render loop. In the example below, the process tries to update as many tilesets as it can in under 4 ms.
+
+```
+function now() {
+    return (typeof performance === 'undefined' ? Date : performance).now();
+}
+let updateIndex = 0;
+setInterval(() => {
+    let startTime = now();
+    do{
+        instancedTilesets[updateIndex].update(camera);
+        updateIndex= (updateIndex+1)%instancedTilesets.length;
+    }while(updateIndex < instancedTilesets.length && now()-startTime<4);
+},50);
+```
+
+window#requestIdleCallback is also a good option but the rate of updates becomes slightly unpredictable.
+
 # Projects that use this library
 https://github.com/ebeaufay/UltraGlobe allows displaying a globe with multi resolution imagery, elevation and 3DTiles.
 
-Don't hesitate to tell me if you have a project that stems from this code. I'd love to link to it here and I'm always open to implementing extra features.
+If you have a project that stems from this code. I'd love to link to it here and I'm always open to implementing extra features.
 Contact: emeric.beaufays@jdultra.com
 
 
@@ -209,5 +293,5 @@ Contact: emeric.beaufays@jdultra.com
 
 I also have code to convert meshes to 3DTiles with no limit to the size of the dataset relative to faces or textures.
 It works for all types of meshes: photogrametry, BIM, colored or textured meshes with a single texture atlas or many individual textures. 
-I'm keeping the code private for now but feel free to contact me about it.
+The code is not open source but feel free to contact me for a trial.
 Contact: emeric.beaufays@jdultra.com

package/index.html

@@ -47,10 +47,10 @@
 
 <body>
   <div id="screen"></div>
-  <div style="position: absolute; top: 1%; z-index: 100; right:1%; ">
-    <input type="range" min="0.0" max="1.0" value="1.0", step="0.001" class="slider" id="lodMultiplier" >
+  <!-- <div style="position: absolute; top: 1%; z-index: 100; right:1%; ">
+    <input type="range" min="0.0" max="1.0" value="0.5", step="0.001" class="slider" id="lodMultiplier" >
     <p style="color: #0439aa;">LOD multiplier: <span id="multiplierValue"></span></p>
-  </div>
+  </div> -->
 </body>
 
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jdultra/threedtiles",
-    "version": "4.0.2",
+    "version": "4.0.4",
     "description": "An OGC 3DTiles viewer for Three.js",
     "main": "tileset.js",
     "scripts": {

package/src/index.js

@@ -69,10 +69,11 @@ function initComposer(scene, camera, renderer) {
 function initScene() {
     const scene = new THREE.Scene();
     scene.matrixAutoUpdate = false;
+    scene.matrixWorldAutoUpdate = false;
     scene.background = new THREE.Color(0x000000);
-    scene.add(new THREE.AmbientLight(0xFFFFFF, 0.2));
+    scene.add(new THREE.AmbientLight(0xFFFFFF, 1.0));
 
-    const light = new THREE.PointLight(0xbbbbff, 2, 5000);
+    /*const light = new THREE.PointLight(0xbbbbff, 2, 5000);
     const sphere = new THREE.SphereGeometry(2, 16, 8);
     light.add(new THREE.Mesh(sphere, new THREE.MeshBasicMaterial({ color: 0xbbbbff })));
     scene.add(light);
@@ -83,9 +84,9 @@ function initScene() {
     const sphere2 = new THREE.SphereGeometry(2, 16, 8);
     light2.add(new THREE.Mesh(sphere2, new THREE.MeshBasicMaterial({ color: 0xffbbbb })));
     scene.add(light2);
-    light2.position.set(200, 100, -100);
+    light2.position.set(200, 100, -100);*/
 
-    scene.matrixWorldAutoUpdate = true;
+    
     return scene;
 }
 
@@ -132,8 +133,8 @@ function initStats(dom) {
 
 
 function initCamera() {
-    const camera = new THREE.PerspectiveCamera(40, window.offsetWidth / window.offsetHeight, 1, 100000);
-    camera.position.set(100, 10, 100);
+    const camera = new THREE.PerspectiveCamera(70, window.offsetWidth / window.offsetHeight, 1.0, 100000);
+    camera.position.set(-800, 800, 800);
     camera.matrixAutoUpdate = true;
     return camera;
 }
@@ -143,12 +144,14 @@ function initTileset(scene) {
     const tileLoader = new TileLoader(mesh => {
         //// Insert code to be called on every newly decoded mesh e.g.:
         mesh.material.wireframe = false;
-        mesh.material.side = THREE.FrontSide;
+        mesh.material.side = THREE.DoubleSide;
     }, 1000)
     const ogc3DTile = new OGC3DTile({
+        //url: "http://localhost:8080/tileset.json",
         //url: "https://storage.googleapis.com/ogc-3d-tiles/droneship/tileset.json",
         url: "https://storage.googleapis.com/ogc-3d-tiles/berlinTileset/tileset.json",
-        geometricErrorMultiplier: 0.1,
+        //url: "https://s3.eu-central-2.wasabisys.com/construkted-assets-eu/ands2ty8orz/tileset.json",
+        geometricErrorMultiplier: 0.01,
         loadOutsideView: false,
         tileLoader: tileLoader,
         //occlusionCullingService: occlusionCullingService,
@@ -161,6 +164,7 @@ function initTileset(scene) {
 
     //// The OGC3DTile object is a threejs Object3D so you may do all the usual opperations like transformations e.g.:
     ogc3DTile.rotateOnAxis(new THREE.Vector3(1, 0, 0), Math.PI * -0.5) // Z-UP to Y-UP
+    //ogc3DTile.scale.set(10.0,10.0,10.0)
     //// If the OGC3DTile object is marked as "static" (constructorParameter), these operations will not work.
 
 
@@ -205,28 +209,30 @@ function createInstancedTileLoader(scene) {
     return new InstancedTileLoader(scene, mesh => {
         //// Insert code to be called on every newly decoded mesh e.g.:
         mesh.material.wireframe = false;
-        mesh.material.side = THREE.FrontSide;
-    }, 1000, 1000);
+        mesh.material.side = THREE.DoubleSide;
+    }, 1000, 3375);
 }
 function initInstancedTilesets(instancedTileLoader) {
 
     const instancedTilesets = [];
 
-    for (let x = 0; x < 10; x++) {
-        for (let y = 0; y < 10; y++) {
-            for (let z = 0; z < 10; z++) {
+    for (let x = 0; x < 15; x++) {
+        for (let y = 0; y < 15; y++) {
+            for (let z = 0; z < 15; z++) {
                 const tileset = new InstancedOGC3DTile({
                     url: "https://storage.googleapis.com/ogc-3d-tiles/droneship/tileset.json",
+                    //url: "https://storage.googleapis.com/ogc-3d-tiles/berlinTileset/tileset.json",
                     //url: "http://localhost:8080/tileset.json",
-                    geometricErrorMultiplier: 0.5,
-                    loadOutsideView: false,
+                    geometricErrorMultiplier: 1.0,
+                    loadOutsideView: true,
                     tileLoader: instancedTileLoader,
-                    static: false,
+                    static: true,
                 });
-                tileset.rotateOnAxis(new THREE.Vector3(0, 0, 1), 50 * z)
+                //tileset.rotateOnAxis(new THREE.Vector3(1, 0, 0), Math.PI * -0.5) // Z-UP to Y-UP
                 tileset.translateOnAxis(new THREE.Vector3(1, 0, 0), 50 * x)
                 tileset.translateOnAxis(new THREE.Vector3(0, 1, 0), 50 * y)
                 tileset.translateOnAxis(new THREE.Vector3(0, 0, 1), 50 * z)
+                tileset.updateMatrix()
                 scene.add(tileset);
                 instancedTilesets.push(tileset);
 
@@ -235,18 +241,22 @@ function initInstancedTilesets(instancedTileLoader) {
         }
     }
 
-    idleCallback();
-
-    function idleCallback() {
-        instancedTilesets.forEach(tileset=>{
-            tileset.update(camera);
-        })
-        setTimeout(() => {
-            window.requestIdleCallback(idleCallback, { timeout: 50 })
-        }, 20)
-
+    scene.updateMatrixWorld(true)
+    function now() {
+        return (typeof performance === 'undefined' ? Date : performance).now();
     }
-    initLODMultiplierSlider(instancedTilesets);
+    let updateIndex = 0;
+    setInterval(() => {
+        let startTime = now();
+        do{
+            const frustum = new THREE.Frustum();
+            frustum.setFromProjectionMatrix(new THREE.Matrix4().multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse));
+            instancedTilesets[updateIndex].update(camera, frustum);
+            updateIndex= (updateIndex+1)%instancedTilesets.length;
+        }while(updateIndex < instancedTilesets.length && now()-startTime<4);
+    },40);
+    
+    //initLODMultiplierSlider(instancedTilesets);
 }
 
 function initLODMultiplierSlider(instancedTilesets) {
@@ -256,7 +266,7 @@ function initLODMultiplierSlider(instancedTilesets) {
 
     slider.oninput = () => {
         instancedTilesets.forEach(tileset => {
-            tileset.setGeometricErrorMultiplier(slider.value)
+            tileset.setGeometricErrorMultiplier(slider.value*0.1)
         })
         output.innerHTML = slider.value;
     }

package/src/tileset/OGC3DTile.js

@@ -530,7 +530,8 @@ class OGC3DTile extends THREE.Object3D {
                 return 0;
             }
             const scale = this.matrixWorld.getMaxScaleOnAxis();
-            return (((distance / Math.pow(scale, 2)) / 100) / this.geometricErrorMultiplier);
+            return Math.pow(distance, 2) /(this.geometricErrorMultiplier*this.geometricError*Math.pow(scale,2.0)*35);
+            //return (((distance / Math.pow(scale, 2)) / 100) / this.geometricErrorMultiplier);
         } else if (this.boundingVolume instanceof THREE.Box3) {
             // Region
             // Region not supported

package/src/tileset/instanced/InstancedOGC3DTile.js

@@ -32,9 +32,17 @@ class InstancedOGC3DTile extends THREE.Object3D {
         }
     }
 
-    update(camera){
-        const frustum = new THREE.Frustum();
-        frustum.setFromProjectionMatrix(new THREE.Matrix4().multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse));
+    update(camera, frustum){
+        if(!!frustum){
+            this.tileset._update(camera, frustum);
+        }else{
+            const frustum = new THREE.Frustum();
+            frustum.setFromProjectionMatrix(new THREE.Matrix4().multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse));
+            this.tileset._update(camera, frustum);
+        }
+        
+    }
+    updateWithFrustum(camera, frustum){
         this.tileset._update(camera, frustum);
     }
 

package/src/tileset/instanced/InstancedTile.js

@@ -23,8 +23,7 @@ class InstancedTile extends THREE.Object3D {
      *   meshCallback: function,
      *   cameraOnLoad: camera,
      *   parentTile: OGC3DTile,
-     *   onLoadCallback: function,
-     *   static: Boolean
+     *   onLoadCallback: function
      * } properties 
      */
     constructor(properties) {
@@ -333,7 +332,6 @@ class InstancedTile extends THREE.Object3D {
                     level: self.level + 1,
                     tileLoader: self.tileLoader,
                     cameraOnLoad: camera,
-                    static: self.static,
                     master: self.master
                 });
                 self.childrenTiles.push(childTile);
@@ -457,7 +455,8 @@ class InstancedTile extends THREE.Object3D {
                 return 0;
             }
             const scale = this.master.matrixWorld.getMaxScaleOnAxis();
-            return (((distance / Math.pow(scale, 2)) / 100) / this.master.geometricErrorMultiplier);
+            //return (((distance / Math.pow(scale, 2)) / 100) / this.master.geometricErrorMultiplier);
+            return Math.pow(distance, 2) /(this.master.geometricErrorMultiplier*this.geometricError*Math.pow(scale,2.0)*35);
         } else if (this.boundingVolume instanceof THREE.Box3) {
             // Region
             // Region not supported