@jdultra/threedtiles 4.0.3 → 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/package.json

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

package/src/index.js

@@ -69,6 +69,7 @@ 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, 1.0));
 
@@ -85,7 +86,7 @@ function initScene() {
     scene.add(light2);
     light2.position.set(200, 100, -100);*/
 
-    scene.matrixWorldAutoUpdate = true;
+    
     return scene;
 }
 
@@ -209,28 +210,29 @@ function createInstancedTileLoader(scene) {
         //// Insert code to be called on every newly decoded mesh e.g.:
         mesh.material.wireframe = false;
         mesh.material.side = THREE.DoubleSide;
-    }, 1000, 125);
+    }, 1000, 3375);
 }
 function initInstancedTilesets(instancedTileLoader) {
 
     const instancedTilesets = [];
 
-    for (let x = 0; x < 5; x++) {
-        for (let y = 0; y < 5; y++) {
-            for (let z = 0; z < 5; 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: "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.001,
+                    geometricErrorMultiplier: 1.0,
                     loadOutsideView: true,
                     tileLoader: instancedTileLoader,
-                    static: false,
+                    static: true,
                 });
-                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), 3500 * x)
-                tileset.translateOnAxis(new THREE.Vector3(0, 1, 0), 3500 * y)
-                //tileset.translateOnAxis(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);
 
@@ -238,17 +240,21 @@ function initInstancedTilesets(instancedTileLoader) {
             }
         }
     }
+
+    scene.updateMatrixWorld(true)
     function now() {
-        return (typeof performance === 'undefined' ? Date : performance).now(); // see #10732
+        return (typeof performance === 'undefined' ? Date : performance).now();
     }
     let updateIndex = 0;
     setInterval(() => {
         let startTime = now();
         do{
-            instancedTilesets[updateIndex].update(camera);
+            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);
-    },50);
+    },40);
     
     //initLODMultiplierSlider(instancedTilesets);
 }

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);