@jdultra/threedtiles 4.0.0 → 4.0.2

package/README.md

@@ -10,6 +10,8 @@ The fastest 3DTiles viewer for three.js
 
 [Occlusion culling (IFC conversion)](https://www.jdultra.com/occlusion/index.html)
 
+[Instanced Tileset (pilot a swarm of highly detailed spaceships)](https://www.jdultra.com/instanced/index.html)
+
 Adding a tileset to a scene is as easy as :
 
 ```
@@ -42,6 +44,7 @@ Currently, the library is limmited to B3DM files.
 - Share a cache between tileset instances
 - Optimal tile load order
 - Occlusion culling
+- Instanced tilesets
 
 ### geometric Error Multiplier
 The geometric error multiplier allows you to multiply the geometric error by a factor.
@@ -173,6 +176,10 @@ const occlusionCullingService = new OcclusionCullingService();
 occlusionCullingService.setSide(THREE.DoubleSide);
 ```
 
+### Instanced Tilesets
+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.
 
 ### static tilesets and other performance tips
 When you know your tileset will be static, you can specify it in the OGC3DTile object constructor parameter.

package/package.json

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

package/src/index.js

@@ -11,8 +11,8 @@ import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
 import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass.js';
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
 
-import { InstancedOGC3DTile} from "./tileset/instanced/InstancedOGC3DTile.js"
-import { InstancedTileLoader} from "./tileset/instanced/InstancedTileLoader.js"
+import { InstancedOGC3DTile } from "./tileset/instanced/InstancedOGC3DTile.js"
+import { InstancedTileLoader } from "./tileset/instanced/InstancedTileLoader.js"
 
 import { B3DMDecoder } from "./decoder/B3DMDecoder";
 
@@ -58,12 +58,12 @@ animate();
 
 function initComposer(scene, camera, renderer) {
     const renderScene = new RenderPass(scene, camera);
-    const bloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 0.4, 0.5, 0);
+    //const bloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 0.4, 0.5, 0);
 
 
     const composer = new EffectComposer(renderer);
     composer.addPass(renderScene);
-    composer.addPass(bloomPass);
+    //composer.addPass(bloomPass);
     return composer;
 }
 function initScene() {
@@ -71,7 +71,7 @@ function initScene() {
     scene.matrixAutoUpdate = false;
     scene.background = new THREE.Color(0x000000);
     scene.add(new THREE.AmbientLight(0xFFFFFF, 0.2));
-    
+
     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 })));
@@ -146,9 +146,9 @@ function initTileset(scene) {
         mesh.material.side = THREE.FrontSide;
     }, 1000)
     const ogc3DTile = new OGC3DTile({
-        url: "https://storage.googleapis.com/ogc-3d-tiles/droneship/tileset.json",
-        //url: "https://storage.googleapis.com/ogc-3d-tiles/berlinTileset/tileset.json",
-        geometricErrorMultiplier: 1.0,
+        //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,
         loadOutsideView: false,
         tileLoader: tileLoader,
         //occlusionCullingService: occlusionCullingService,
@@ -160,7 +160,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.rotateOnAxis(new THREE.Vector3(1, 0, 0), Math.PI * -0.5) // Z-UP to Y-UP
     //// If the OGC3DTile object is marked as "static" (constructorParameter), these operations will not work.
 
 
@@ -201,20 +201,20 @@ function initTileset(scene) {
     return ogc3DTile;
 }
 
-function createInstancedTileLoader(scene){
+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);
 }
-function initInstancedTilesets(instancedTileLoader){
+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 < 10; x++) {
+        for (let y = 0; y < 10; y++) {
+            for (let z = 0; z < 10; z++) {
                 const tileset = new InstancedOGC3DTile({
                     url: "https://storage.googleapis.com/ogc-3d-tiles/droneship/tileset.json",
                     //url: "http://localhost:8080/tileset.json",
@@ -223,25 +223,29 @@ function initInstancedTilesets(instancedTileLoader){
                     tileLoader: instancedTileLoader,
                     static: false,
                 });
-                tileset.translateOnAxis(new THREE.Vector3(1, 0, 0), 50*x)
-                tileset.translateOnAxis(new THREE.Vector3(0, 1, 0), 15*y)
-                tileset.translateOnAxis(new THREE.Vector3(0, 0, 1), 25*z)
+                tileset.rotateOnAxis(new THREE.Vector3(0, 0, 1), 50 * z)
+                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)
                 scene.add(tileset);
                 instancedTilesets.push(tileset);
 
-                idleCallback();
 
-                function idleCallback(){
-                    tileset.update(camera);
-                    setTimeout(()=>{
-                        window.requestIdleCallback(idleCallback,{timeout:50})
-                    },20)
-                    
-                }
             }
         }
     }
 
+    idleCallback();
+
+    function idleCallback() {
+        instancedTilesets.forEach(tileset=>{
+            tileset.update(camera);
+        })
+        setTimeout(() => {
+            window.requestIdleCallback(idleCallback, { timeout: 50 })
+        }, 20)
+
+    }
     initLODMultiplierSlider(instancedTilesets);
 }
 
@@ -251,7 +255,7 @@ function initLODMultiplierSlider(instancedTilesets) {
     output.innerHTML = slider.value;
 
     slider.oninput = () => {
-        instancedTilesets.forEach(tileset=>{
+        instancedTilesets.forEach(tileset => {
             tileset.setGeometricErrorMultiplier(slider.value)
         })
         output.innerHTML = slider.value;

package/src/tileset/TileLoader.js

@@ -81,7 +81,6 @@ class TileLoader {
     }
     
     getNextDownloads() {
-        let smallestLevel = Number.MAX_VALUE;
         let smallestDistance = Number.MAX_VALUE;
         let closest = -1;
         for (let i = this.downloads.length - 1; i >= 0; i--) {
@@ -95,13 +94,10 @@ class TileLoader {
         }
         if (this.nextDownloads.length > 0) return;
         for (let i = this.downloads.length - 1; i >= 0; i--) {
-            const dist = this.downloads[i].distanceFunction();
+            const dist = this.downloads[i].distanceFunction()*this.downloads[i].level;
             if (dist < smallestDistance) {
                 smallestDistance = dist;
                 closest = i;
-            } else if (dist == smallestDistance && this.downloads[i].level < smallestLevel) {
-                smallestLevel = this.downloads[i].level;
-                closest = i
             }
         }
         if (closest >= 0) {
@@ -117,7 +113,6 @@ class TileLoader {
     }
     
     getNextReady() {
-        let smallestLevel = Number.MAX_VALUE;
         let smallestDistance = Number.MAX_VALUE;
         let closest = -1;
         for (let i = this.ready.length - 1; i >= 0; i--) {
@@ -128,13 +123,9 @@ class TileLoader {
         }
         if (this.nextReady.length > 0) return;
         for (let i = this.ready.length - 1; i >= 0; i--) {
-            const dist = this.ready[i][3]();
+            const dist = this.ready[i][3]() * this.ready[i][5];
             if (dist < smallestDistance) {
                 smallestDistance = dist;
-                smallestLevel = this.ready[i][5]
-                closest = i
-            } else if (dist == smallestDistance && this.ready[i][5] < smallestLevel) {
-                smallestLevel = this.ready[i][5]
                 closest = i
             }
         }

package/src/tileset/instanced/InstancedTileLoader.js

@@ -110,7 +110,6 @@ class InstancedTileLoader {
     }
 
     getNextReady() {
-        let smallestLevel = Number.MAX_VALUE;
         let smallestDistance = Number.MAX_VALUE;
         let closest = -1;
         for (let i = this.ready.length - 1; i >= 0; i--) {
@@ -121,13 +120,9 @@ class InstancedTileLoader {
         }
         if (this.nextReady.length > 0) return;
         for (let i = this.ready.length - 1; i >= 0; i--) {
-            const dist = this.ready[i].distanceFunction();
+            const dist = this.ready[i].distanceFunction() * this.ready[i].level;
             if (dist < smallestDistance) {
                 smallestDistance = dist;
-                smallestLevel = this.ready[i].level
-                closest = i
-            } else if (dist == smallestDistance && this.ready[i].level < smallestLevel) {
-                smallestLevel = this.ready[i].level
                 closest = i
             }
         }
@@ -216,7 +211,6 @@ class InstancedTileLoader {
 
     
     getNextDownloads() {
-        let smallestLevel = Number.MAX_VALUE;
         let smallestDistance = Number.MAX_VALUE;
         let closest = -1;
         for (let i = this.downloads.length - 1; i >= 0; i--) {
@@ -232,13 +226,10 @@ class InstancedTileLoader {
         if (this.nextDownloads.length > 0) return;
         for (let i = this.downloads.length - 1; i >= 0; i--) {
             const download = this.downloads[i];
-            const dist = download.distanceFunction();
+            const dist = download.distanceFunction()*download.level;
             if (dist < smallestDistance) {
                 smallestDistance = dist;
                 closest = i;
-            } else if (dist == smallestDistance && download.level < smallestLevel) {
-                smallestLevel = download.level;
-                closest = i
             }
         }
         if (closest >= 0) {

package/src/tileset/instanced/MeshTile.js

@@ -60,7 +60,7 @@ class MeshTile{
                 self.instancedTiles[i].meshContent = self.instancedMesh;
                 if(self.instancedTiles[i].materialVisibility && !!self.instancedTiles[i].meshContent){
                     self.instancedMesh.count++;
-                    self.instancedMesh.setMatrixAt(self.instancedMesh.count-1, self.reuseableMatrix.multiplyMatrices(self.instancedMesh.baseMatrix, self.instancedTiles[i].getWorldMatrix()) )
+                    self.instancedMesh.setMatrixAt(self.instancedMesh.count-1, self.reuseableMatrix.multiplyMatrices(self.instancedTiles[i].getWorldMatrix(), self.instancedMesh.baseMatrix) )
                 }
                 
             }