@jdultra/threedtiles 7.0.2 → 8.0.1

package/src/tileset/OGC3DTile.js

@@ -4,12 +4,14 @@ import { TileLoader } from "./TileLoader";
 import { v4 as uuidv4 } from "uuid";
 import * as path from "path-browserify"
 import { clamp } from "three/src/math/MathUtils";
+//import { Octree } from 'three/addons/math/Octree.js';
+//import { OctreeHelper } from 'three/addons/helpers/OctreeHelper.js';
 
 const tempSphere = new THREE.Sphere(new THREE.Vector3(0, 0, 0), 1);
 const tempVec1 = new THREE.Vector3(0, 0, 0);
 const tempVec2 = new THREE.Vector3(0, 0, 0);
 const upVector = new THREE.Vector3(0, 1, 0);
-const rendererSize = new THREE.Vector2(1000,1000);
+const rendererSize = new THREE.Vector2(1000, 1000);
 const tempQuaternion = new THREE.Quaternion();
 
 
@@ -46,16 +48,16 @@ class OGC3DTile extends THREE.Object3D {
         if (!!properties.tileLoader) {
             this.tileLoader = properties.tileLoader;
         } else {
-            this.tileLoader = new TileLoader(
-                200,
-                !properties.meshCallback ? mesh => {
-                    mesh.material.wireframe = false;
-                    mesh.material.side = THREE.DoubleSide;
-                } : properties.meshCallback,
-                !properties.pointsCallback ? points => {
-                    points.material.size = 0.1;
-                    points.material.sizeAttenuation = true;
-                } : properties.pointsCallback);
+            const tileLoaderOptions = {};
+            tileLoaderOptions.meshCallback = !properties.meshCallback ? mesh => {
+                mesh.material.wireframe = false;
+                mesh.material.side = THREE.DoubleSide;
+            } : properties.meshCallback;
+            tileLoaderOptions.pointsCallback = !properties.pointsCallback ? points => {
+                points.material.size = 0.1;
+                points.material.sizeAttenuation = true;
+            } : properties.pointsCallback;
+            this.tileLoader = new TileLoader(tileLoaderOptions);
         }
         // set properties general to the entire tileset
         this.geometricErrorMultiplier = !!properties.geometricErrorMultiplier ? properties.geometricErrorMultiplier : 1.0;
@@ -93,6 +95,7 @@ class OGC3DTile extends THREE.Object3D {
         this.centerModel = properties.centerModel;
         this.abortController = new AbortController();
         this.layers.disable(0);
+        //this.octree = new Octree();
 
         if (!!properties.json) { // If this tile is created as a child of another tile, properties.json is not null
             self.setup(properties);
@@ -123,11 +126,11 @@ class OGC3DTile extends THREE.Object3D {
                                 (this.json.boundingVolume.region[1] + this.json.boundingVolume.region[3]) * 0.5,
                                 (this.json.boundingVolume.region[4] + this.json.boundingVolume.region[5]) * 0.5,
                                 tempVec1);
-                            
+
                             tempQuaternion.setFromUnitVectors(tempVec1.normalize(), upVector.normalize());
                             self.applyQuaternion(tempQuaternion);
                         }
-                        
+
                         self.translateX(-tempSphere.center.x * self.scale.x);
                         self.translateY(-tempSphere.center.y * self.scale.y);
                         self.translateZ(-tempSphere.center.z * self.scale.z);
@@ -169,7 +172,7 @@ class OGC3DTile extends THREE.Object3D {
             mat.elements = this.json.transform;
             this.applyMatrix4(mat);
         }
-        
+
         // decode volume
         if (!!this.json.boundingVolume) {
             if (!!this.json.boundingVolume.box) {
@@ -190,7 +193,7 @@ class OGC3DTile extends THREE.Object3D {
             this.boundingVolume = properties.parentBoundingVolume;
         }
 
-        
+
 
         if (!!this.json.content) { //if there is a content, json or otherwise, schedule it to be loaded 
             if (!!this.json.content.uri && this.json.content.uri.includes("json")) {
@@ -215,7 +218,7 @@ class OGC3DTile extends THREE.Object3D {
 
         return absoluteURL || absolutePath;
     }
-      
+
     load() {
         var self = this;
         if (self.deleted) return;
@@ -238,12 +241,12 @@ class OGC3DTile extends THREE.Object3D {
             if (!!url) {
                 if (url.includes(".b3dm") || url.includes(".glb") || url.includes(".gltf")) {
                     self.contentURL = url;
-                    
+
                     self.tileLoader.get(self.abortController, this.uuid, url, mesh => {
                         if (!!self.deleted) return;
                         mesh.traverse((o) => {
                             if (o.isMesh) {
-                                
+
                                 o.layers.disable(0);
                                 if (self.occlusionCullingService) {
                                     const position = o.geometry.attributes.position;
@@ -259,17 +262,19 @@ class OGC3DTile extends THREE.Object3D {
                                 //o.material.visible = false;
                             }
                         });
-
+                        //let s = Date.now();
+                        //self.octree.fromGraphNode( mesh );
+                        //console.log(Date.now()-s);
                         self.add(mesh);
                         self.updateWorldMatrix(false, true);
                         // mesh.layers.disable(0);
                         self.meshContent = mesh;
                     }, !self.cameraOnLoad ? () => 0 : () => {
                         return self.calculateDistanceToCamera(self.cameraOnLoad);
-                    }, () => self.getSiblings(), 
-                    self.level,
-                    !!self.json.boundingVolume.region,
-                    self.geometricError
+                    }, () => self.getSiblings(),
+                        self.level,
+                        !!self.json.boundingVolume.region,
+                        self.geometricError
                     );
                 } else if (url.includes(".json")) {
                     self.tileLoader.get(self.abortController, this.uuid, url, json => {
@@ -549,7 +554,7 @@ class OGC3DTile extends THREE.Object3D {
             return;
         }
         self.materialVisibility = visibility
-        
+
         self.meshDisplayed = true;
         if (!!self.meshContent.traverse) {
             self.meshContent.traverse(function (element) {
@@ -597,7 +602,7 @@ class OGC3DTile extends THREE.Object3D {
             return 0;
         }
         const scale = this.matrixWorld.getMaxScaleOnAxis();
-        if(!!this.renderer){
+        if (!!this.renderer) {
             this.renderer.getDrawingBufferSize(rendererSize);
         }
         let s = rendererSize.y;

package/src/tileset/TileLoader.js

@@ -5,6 +5,7 @@ import { initial } from 'lodash';
 import * as THREE from 'three';
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
 import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
+import { KTX2Loader } from "three/examples/jsm/loaders/KTX2Loader";
 
 let concurentDownloads = 0;
 const zUpToYUpMatrix = new THREE.Matrix4();
@@ -12,17 +13,49 @@ zUpToYUpMatrix.set(1, 0, 0, 0,
     0, 0, -1, 0,
     0, 1, 0, 0,
     0, 0, 0, 1);
-const gltfLoader = new GLTFLoader();
-const dracoLoader = new DRACOLoader();
-dracoLoader.setDecoderPath('https://www.gstatic.com/draco/versioned/decoders/1.4.3/');
-gltfLoader.setDRACOLoader(dracoLoader);
 
+
+
+
+/**
+ * A Tile loader that manages caching and load order.
+ * The cache is an LRU cache and is defined by the number of items it can hold.
+ * The actual number of cached items might grow beyond max if all items are in use.
+ * 
+ * The load order is designed for optimal perceived loading speed (nearby tiles are refined first).
+ *
+ * @param {Object} [options] - Optional configuration object.
+ * @param {number} [options.maxCachedItems=100] - the cache size.
+ * @param {function} [options.meshCallback] - A callback to call on newly decoded meshes.
+ * @param {function} [options.pointsCallback] - A callback to call on newly decoded points.
+ * @param {renderer} [options.renderer] - The renderer, this is required for KTX2 support.
+ */
 class TileLoader {
-    constructor(maxCachedItems, meshCallback, pointsCallback) {
-        this.meshCallback = meshCallback;
-        this.pointsCallback = pointsCallback;
+    constructor(options) {
+        this.maxCachedItems = 100;
+        if (!!options) {
+            this.meshCallback = options.meshCallback;
+            this.pointsCallback = options.pointsCallback;
+            if (options.maxCachedItems) this.maxCachedItems = options.maxCachedItems;
+            
+        }
+
+        this.gltfLoader = new GLTFLoader();
+        const dracoLoader = new DRACOLoader();
+        dracoLoader.setDecoderPath('https://www.gstatic.com/draco/versioned/decoders/1.4.3/');
+        this.gltfLoader.setDRACOLoader(dracoLoader);
+
+        if(!!options && !!options.renderer){
+            const ktx2Loader = new KTX2Loader();
+            ktx2Loader.setTranscoderPath('https://storage.googleapis.com/ogc-3d-tiles/basis/').detectSupport(options.renderer);
+            this.gltfLoader.setKTX2Loader(ktx2Loader);
+
+            this.b3dmDecoder=new B3DMDecoder(options.renderer);
+        }else{
+            this.b3dmDecoder=new B3DMDecoder(null);
+        }
+
         this.cache = new LinkedHashMap();
-        this.maxCachedItems = !!maxCachedItems ? maxCachedItems : 100;
         this.register = {};
 
 
@@ -33,6 +66,7 @@ class TileLoader {
         this.init();
     }
 
+
     init() {
 
         const self = this;
@@ -195,7 +229,7 @@ class TileLoader {
 
                     })
                         .then(resultArrayBuffer => {
-                            return B3DMDecoder.parseB3DM(resultArrayBuffer, self.meshCallback, geometricError, zUpToYUp);
+                            return this.b3dmDecoder.parseB3DM(resultArrayBuffer, self.meshCallback, geometricError, zUpToYUp);
                         })
                         .then(mesh => {
                             self.cache.put(key, mesh);
@@ -207,7 +241,7 @@ class TileLoader {
             } else if (path.includes(".glb") || path.includes(".gltf")) {
                 downloadFunction = () => {
                     concurentDownloads++;
-                    gltfLoader.load(path, gltf => {
+                    this.gltfLoader.load(path, gltf => {
                         gltf.scene.traverse((o) => {
                             o.geometricError = geometricError;
                             if (o.isMesh) {

package/src/tileset/instanced/InstancedTile.js

@@ -367,7 +367,7 @@ class InstancedTile extends THREE.Object3D {
             }
             if (metric >= self.master.geometricErrorMultiplier * self.geometricError) {
                 self.disposeChildren();
-                updateNodeVisibility();
+                updateNodeVisibility(metric);
                 return;
             }
 

package/src/tileset/instanced/InstancedTileLoader.js

@@ -6,25 +6,58 @@ import { MeshTile } from './MeshTile';
 import { JsonTile } from './JsonTile';
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
 import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
-
+import { KTX2Loader } from "three/examples/jsm/loaders/KTX2Loader";
 
 let concurentDownloads = 0;
-const gltfLoader = new GLTFLoader();
-const dracoLoader = new DRACOLoader();
-dracoLoader.setDecoderPath('https://www.gstatic.com/draco/versioned/decoders/1.4.3/');
-gltfLoader.setDRACOLoader(dracoLoader);
+
 const zUpToYUpMatrix = new THREE.Matrix4();
 zUpToYUpMatrix.set(1, 0, 0, 0,
     0, 0, -1, 0,
     0, 1, 0, 0,
     0, 0, 0, 1);
 
+/**
+* A Tile loader that manages caching and load order for instanced tiles.
+* The cache is an LRU cache and is defined by the number of items it can hold.
+* The actual number of cached items might grow beyond max if all items are in use.
+* 
+* The load order is designed for optimal perceived loading speed (nearby tiles are refined first).
+*
+* @param {scene} [scene] - a threejs scene.
+* @param {Object} [options] - Optional configuration object.
+* @param {number} [options.maxCachedItems=100] - the cache size.
+* @param {number} [options.maxInstances=1] - the cache size.
+* @param {function} [options.meshCallback] - A callback to call on newly decoded meshes.
+* @param {function} [options.pointsCallback] - A callback to call on newly decoded points.
+* @param {renderer} [options.renderer] - The renderer, this is required for KTX2 support.
+*/
 class InstancedTileLoader {
-    constructor(scene, maxCachedItems, maxInstances, meshCallback) {
-        this.meshCallback = meshCallback;
-        this.maxInstances = maxInstances;
+    constructor(scene, options) {
+        this.maxCachedItems = 100;
+        this.maxInstances = 1;
+        if (!!options) {
+            this.meshCallback = options.meshCallback;
+            this.pointsCallback = options.pointsCallback;
+            if (options.maxCachedItems) this.maxCachedItems = options.maxCachedItems;
+            if (options.maxInstances) this.maxInstances = options.maxInstances;
+            
+        }
+        this.gltfLoader = new GLTFLoader();
+        const dracoLoader = new DRACOLoader();
+        dracoLoader.setDecoderPath('https://www.gstatic.com/draco/versioned/decoders/1.4.3/');
+        this.gltfLoader.setDRACOLoader(dracoLoader);
+
+        if(!!options && !!options.renderer){
+            const ktx2Loader = new KTX2Loader();
+            ktx2Loader.setTranscoderPath('https://storage.googleapis.com/ogc-3d-tiles/basis/').detectSupport(options.renderer);
+            this.gltfLoader.setKTX2Loader(ktx2Loader);
+
+            this.b3dmDecoder=new B3DMDecoder(options.renderer);
+        }else{
+            this.b3dmDecoder=new B3DMDecoder(null);
+        }
+
         this.cache = new LinkedHashMap();
-        this.maxCachedItems = !!maxCachedItems ? maxCachedItems : 100;
         this.scene = scene;
 
         this.ready = [];
@@ -34,16 +67,17 @@ class InstancedTileLoader {
         this.init();
     }
 
-    update(){
+    
+    update() {
         const self = this;
-        
-        self.cache._data.forEach(v=>{
+
+        self.cache._data.forEach(v => {
             v.update();
         })
-        
+
     }
-    init(){
-        
+    init() {
+
         const self = this;
         setIntervalAsync(() => {
             self.download();
@@ -54,7 +88,7 @@ class InstancedTileLoader {
             do {
                 loaded = self.loadBatch();
             } while (loaded > 0 && (Date.now() - start) <= 0)
-        
+
         }, 10);
     }
 
@@ -69,8 +103,8 @@ class InstancedTileLoader {
             if (!!nextDownload && nextDownload.shouldDoDownload()) {
                 //nextDownload.doDownload();
                 concurentDownloads++;
-                if(nextDownload.path.includes(".b3dm")){
-                    fetch(nextDownload.path, {signal: nextDownload.abortController.signal}).then(result => {
+                if (nextDownload.path.includes(".b3dm")) {
+                    fetch(nextDownload.path, { signal: nextDownload.abortController.signal }).then(result => {
                         concurentDownloads--;
                         if (!result.ok) {
                             console.error("could not load tile with path : " + path)
@@ -79,17 +113,17 @@ class InstancedTileLoader {
                         return result.arrayBuffer();
 
                     })
-                    .then(resultArrayBuffer=>{
-                        return B3DMDecoder.parseB3DMInstanced(resultArrayBuffer, self.meshCallback, self.maxInstances, nextDownload.zUpToYUp);
-                    })
-                    .then(mesh=>{
-                        nextDownload.tile.setObject(mesh);
-                        self.ready.unshift(nextDownload);
-                            
-                    })
-                    .catch(e=>console.error(e));
-                }if(nextDownload.path.includes(".glb") || (nextDownload.path.includes(".gltf"))){
-                    gltfLoader.load(nextDownload.path, gltf => {
+                        .then(resultArrayBuffer => {
+                            return this.b3dmDecoder.parseB3DMInstanced(resultArrayBuffer, self.meshCallback, self.maxInstances, nextDownload.zUpToYUp);
+                        })
+                        .then(mesh => {
+                            nextDownload.tile.setObject(mesh);
+                            self.ready.unshift(nextDownload);
+
+                        })
+                        .catch(e => console.error(e));
+                } if (nextDownload.path.includes(".glb") || (nextDownload.path.includes(".gltf"))) {
+                    this.gltfLoader.load(nextDownload.path, gltf => {
                         gltf.scene.traverse((o) => {
                             o.geometricError = nextDownload.geometricError;
                             if (o.isMesh) {
@@ -112,34 +146,34 @@ class InstancedTileLoader {
                                 instancedMesh = new THREE.InstancedMesh(child.geometry, child.material, self.maxInstances);
                                 instancedMesh.baseMatrix = child.matrixWorld;
                             }
-                            
+
                         });
                         self.ready.unshift(nextDownload);
-                        if(!instancedMesh){
-                            gltf.scene.traverse(c=>{
-                                if(c.dispose) c.dispose();
-                                if(c.material) c.material.dispose();
+                        if (!instancedMesh) {
+                            gltf.scene.traverse(c => {
+                                if (c.dispose) c.dispose();
+                                if (c.material) c.material.dispose();
                             });
-                        }else{
+                        } else {
                             nextDownload.tile.setObject(instancedMesh);
                         }
                     });
-                    
-                }else if(nextDownload.path.includes(".json")){
+
+                } else if (nextDownload.path.includes(".json")) {
                     concurentDownloads++;
-                    fetch(nextDownload.path, {signal: nextDownload.abortController.signal}).then(result => {
+                    fetch(nextDownload.path, { signal: nextDownload.abortController.signal }).then(result => {
                         concurentDownloads--;
                         if (!result.ok) {
                             console.error("could not load tile with path : " + path)
                             throw new Error(`couldn't load "${path}". Request failed with status ${result.status} : ${result.statusText}`);
                         }
                         return result.json();
-                        
+
                     }).then(json => {
                         nextDownload.tile.setObject(json, nextDownload.path);
                         self.ready.unshift(nextDownload);
                     })
-                    .catch(e=>console.error(e))
+                        .catch(e => console.error(e))
                 }
             }
         }
@@ -153,8 +187,8 @@ class InstancedTileLoader {
         }
         const download = this.nextReady.shift();
         if (!download) return 0;
-        
-        if(!!download.tile.addToScene)download.tile.addToScene();
+
+        if (!!download.tile.addToScene) download.tile.addToScene();
         return 1;
     }
 
@@ -162,7 +196,7 @@ class InstancedTileLoader {
         let smallestDistance = Number.MAX_VALUE;
         let closest = -1;
         for (let i = this.ready.length - 1; i >= 0; i--) {
-    
+
             if (!this.ready[i].distanceFunction) {// if no distance function, must be a json, give absolute priority!
                 this.nextReady.push(this.ready.splice(i, 1)[0]);
             }
@@ -205,7 +239,7 @@ class InstancedTileLoader {
             if (path.includes(".b3dm") || path.includes(".glb") || path.includes(".gltf")) {
                 const tile = new MeshTile(self.scene);
                 tile.addInstance(instancedOGC3DTile);
-                
+
                 self.cache.put(key, tile);
 
                 const realAbortController = new AbortController();
@@ -229,7 +263,7 @@ class InstancedTileLoader {
                         return true;
                     },
                 })
-            }else if(path.includes(".json")){
+            } else if (path.includes(".json")) {
                 const tile = new JsonTile();
                 tile.addInstance(instancedOGC3DTile);
                 self.cache.put(key, tile);
@@ -258,7 +292,7 @@ class InstancedTileLoader {
     }
 
 
-    
+
     getNextDownloads() {
         let smallestDistance = Number.MAX_VALUE;
         let closest = -1;
@@ -267,7 +301,7 @@ class InstancedTileLoader {
             if (!download.shouldDoDownload()) {
                 this.downloads.splice(i, 1);
                 continue;
-            } 
+            }
             if (!download.distanceFunction) { // if no distance function, must be a json, give absolute priority!
                 this.nextDownloads.push(this.downloads.splice(i, 1)[0]);
             }
@@ -275,7 +309,7 @@ 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()*download.level;
+            const dist = download.distanceFunction() * download.level;
             if (dist < smallestDistance) {
                 smallestDistance = dist;
                 closest = i;
@@ -301,12 +335,12 @@ class InstancedTileLoader {
         while (self.cache.size() > self.maxCachedItems && i < self.cache.size()) {
             i++;
             const entry = self.cache.head();
-            if(entry.value.getCount()>0){
+            if (entry.value.getCount() > 0) {
                 self.cache.remove(entry.key);
                 self.cache.put(entry.key, entry.value);
-            }else{
+            } else {
                 self.cache.remove(entry.key);
-                if(entry.value.instancedMesh){
+                if (entry.value.instancedMesh) {
                     entry.value.instancedMesh.traverse((o) => {
                         if (o.material) {
                             // dispose materials