@jdultra/threedtiles 4.0.1 → 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.1",
+    "version": "4.0.2",
     "description": "An OGC 3DTiles viewer for Three.js",
     "main": "tileset.js",
     "scripts": {

package/src/index.js

@@ -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() {
@@ -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.
 
 

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