@jdultra/threedtiles 3.1.2 → 3.1.3

package/package.json

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

package/src/index.js

@@ -1,14 +1,12 @@
 import "regenerator-runtime/runtime.js";
 import * as THREE from 'three';
 import Stats from 'three/examples/jsm/libs/stats.module.js';
-import TilesetStats from './tileset/TilesetStats';
 import { OGC3DTile } from "./tileset/OGC3DTile";
 import { TileLoader } from "./tileset/TileLoader";
 import { MapControls, OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 
 
 const scene = initScene();
-const tilesetStats = TilesetStats();
 const domContainer = initDomContainer("screen");
 const camera = initCamera();
 const ogc3DTiles = initTileset(scene);
@@ -79,14 +77,13 @@ function initTileset(scene) {
 
     const ogc3DTile = new OGC3DTile({
         url: "https://storage.googleapis.com/ogc-3d-tiles/ayutthaya/tileset.json",
-        geometricErrorMultiplier: 1,
+        geometricErrorMultiplier: 1.0,
         loadOutsideView: true,
         tileLoader: new TileLoader(mesh => {
             //// Insert code to be called on every newly decoded mesh e.g.:
             mesh.material.wireframe = false;
             mesh.material.side = THREE.DoubleSide;
-        }, tilesetStats),
-        stats: tilesetStats
+        }, 2000)
     });
     
 
@@ -95,7 +92,7 @@ function initTileset(scene) {
     //ogc3DTile.translateOnAxis(new THREE.Vector3(1,0,0), -65)
     //ogc3DTile.translateOnAxis(new THREE.Vector3(0,0,1), -80)
     //ogc3DTile.scale.set(0.0001,0.0001,0.0001);
-    // 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
     // ogc3DTile.translateOnAxis(new THREE.Vector3(1,0,0), -16.5)
     // ogc3DTile.translateOnAxis(new THREE.Vector3(0,1,0), 0)
     // ogc3DTile.translateOnAxis(new THREE.Vector3(0,0,1), -9.5)
@@ -117,7 +114,7 @@ function initTileset(scene) {
     function startInterval(){
         interval = setInterval(function () {
             ogc3DTile.update(camera);
-        }, 25);
+        }, 20);
     }
     startInterval();
 
@@ -141,7 +138,6 @@ function animate() {
 
     camera.updateMatrixWorld();
     renderer.render(scene, camera);
-    tilesetStats.update();
     stats.update();
 
 }

package/src/tileset/OGC3DTile.js

@@ -23,8 +23,9 @@ class OGC3DTile extends THREE.Object3D {
      *   geometricErrorMultiplier: Double,
      *   loadOutsideView: Boolean,
      *   tileLoader : TileLoader,
-     *   stats: TilesetStats,
-     *   meshCallback: function
+     *   meshCallback: function,
+     *   cameraOnLoad: camera,
+     *   parentTile: OGC3DTile
      * } properties 
      */
     constructor(properties) {
@@ -42,24 +43,11 @@ class OGC3DTile extends THREE.Object3D {
         }
         // set properties general to the entire tileset
         this.geometricErrorMultiplier = !!properties.geometricErrorMultiplier ? properties.geometricErrorMultiplier : 1.0;
-        if (properties.stats) {
-            // Automatic geometric error multiplier
-            this.stats = properties.stats;
-
-            setIntervalAsync(() => {
-                if (!!document.hidden) return;
-                const framerate = self.stats.fps();
-                if (framerate < 0) return;
-                if (framerate < 58) {
-                    self.setGeometricErrorMultiplier(Math.max(0.05, self.geometricErrorMultiplier - 0.05));
-                } else if (framerate > 58) {
-                    self.setGeometricErrorMultiplier(self.geometricErrorMultiplier + 0.05);
-                }
-            }, 1000);
-        }
 
         this.meshCallback = properties.meshCallback;
         this.loadOutsideView = properties.loadOutsideView;
+        this.cameraOnLoad = properties.cameraOnLoad;
+        this.parentTile = properties.parentTile;
 
         // declare properties specific to the tile for clarity
         this.childrenTiles = [];
@@ -179,23 +167,37 @@ class OGC3DTile extends THREE.Object3D {
                         });
                         self.add(mesh);
                         self.meshContent = mesh;
-                    })
+                    }, !self.cameraOnLoad ? () => 0 : () => {
+                        return self.calculateDistanceToCamera(self.cameraOnLoad);
+                    }, () => self.getSiblings(), self.level, self.uuid);
                 } else if (url.includes(".json")) {
-                    self.controller = new AbortController();
-                    fetch(url, { signal: self.controller.signal }).then(result => {
-                        if (!result.ok) {
-                            throw new Error(`couldn't load "${properties.url}". Request failed with status ${result.status} : ${result.statusText}`);
-                        }
-                        result.json().then(json => {
-                            // when json content is downloaded, it is inserted into this tile's original JSON as a child
-                            // and the content object is deleted from the original JSON
-                            if (!self.json.children) self.json.children = [];
-                            json.rootPath = path.dirname(url);
-                            self.json.children.push(json);
-                            delete self.json.content;
-                            self.hasUnloadedJSONContent = false;
+                    self.tileLoader.get(this.uuid, url, json => {
+                        if (!!self.deleted) return;
+                        if (!self.json.children) self.json.children = [];
+                        json.rootPath = path.dirname(url);
+                        self.json.children.push(json);
+                        delete self.json.content;
+                        self.hasUnloadedJSONContent = false;
+                    });
+
+                    /* self.controller = new AbortController();
+                    setTimeout(() => {
+                        fetch(url, { signal: self.controller.signal }).then(result => {
+                            if (!result.ok) {
+                                throw new Error(`couldn't load "${properties.url}". Request failed with status ${result.status} : ${result.statusText}`);
+                            }
+                            result.json().then(json => {
+                                // when json content is downloaded, it is inserted into this tile's original JSON as a child
+                                // and the content object is deleted from the original JSON
+                                if (!self.json.children) self.json.children = [];
+                                json.rootPath = path.dirname(url);
+                                self.json.children.push(json);
+                                delete self.json.content;
+                                self.hasUnloadedJSONContent = false;
+                            }).catch(error => { });
                         }).catch(error => { });
-                    }).catch(error => { });
+                    }, 0); */
+
                 }
 
             }
@@ -216,6 +218,7 @@ class OGC3DTile extends THREE.Object3D {
 
         });
         this.parent = null;
+        this.parentTile = null;
         this.dispatchEvent({ type: 'removed' });
     }
     disposeChildren() {
@@ -324,6 +327,7 @@ class OGC3DTile extends THREE.Object3D {
         function loadJsonChildren() {
             self.json.children.forEach(childJSON => {
                 let childTile = new OGC3DTile({
+                    parentTile: self,
                     parentGeometricError: self.geometricError,
                     parentBoundingVolume: self.boundingVolume,
                     parentRefinement: self.refinement,
@@ -332,7 +336,8 @@ class OGC3DTile extends THREE.Object3D {
                     geometricErrorMultiplier: self.geometricErrorMultiplier,
                     loadOutsideView: self.loadOutsideView,
                     level: self.level + 1,
-                    tileLoader: self.tileLoader
+                    tileLoader: self.tileLoader,
+                    cameraOnLoad: camera
                 });
                 self.childrenTiles.push(childTile);
                 self.add(childTile);
@@ -455,9 +460,43 @@ class OGC3DTile extends THREE.Object3D {
             //throw Error("Region bounding volume not supported");
             return -1;
         }
-
     }
 
+    getSiblings() {
+        const self = this;
+        const tiles = [];
+        if (!self.parentTile) return tiles;
+        let p = self.parentTile;
+        while (!p.hasMeshContent && !!p.parentTile) {
+            p = p.parentTile;
+        }
+        p.childrenTiles.forEach(child => {
+            if (!!child && child != self) {
+                while (!child.hasMeshContent && !!child.childrenTiles[0]) {
+                    child = child.childrenTiles[0];
+                }
+                tiles.push(child);
+            }
+        });
+        return tiles;
+    }
+    calculateDistanceToCamera(camera) {
+        if (this.boundingVolume instanceof OBB) {
+            // box
+            tempSphere.copy(this.boundingVolume.sphere);
+            tempSphere.applyMatrix4(this.matrixWorld);
+            //if (!frustum.intersectsSphere(tempSphere)) return -1;
+        } else if (this.boundingVolume instanceof THREE.Sphere) {
+            //sphere
+            tempSphere.copy(this.boundingVolume);
+            tempSphere.applyMatrix4(this.matrixWorld);
+            //if (!frustum.intersectsSphere(tempSphere)) return -1;
+        }
+        if (this.boundingVolume instanceof THREE.Box3) {
+            return -1; // region not supported
+        }
+        return Math.max(0, camera.position.distanceTo(tempSphere.center) - tempSphere.radius);
+    }
     setGeometricErrorMultiplier(geometricErrorMultiplier) {
         this.geometricErrorMultiplier = geometricErrorMultiplier;
         this.childrenTiles.forEach(child => child.setGeometricErrorMultiplier(geometricErrorMultiplier));

package/src/tileset/TileLoader.js

@@ -1,64 +1,142 @@
 import { LinkedHashMap } from 'js-utils-z';
 import { B3DMDecoder } from "../decoder/B3DMDecoder";
-import { setIntervalAsync } from 'set-interval-async/dynamic';
 
 const ready = [];
 const downloads = [];
+const nextReady = [];
+const nextDownloads = [];
+
 function scheduleDownload(f) {
     downloads.unshift(f);
+    //setTimeout(()=>download(),0);
 }
 function download() {
-    if(downloads.length <=0) return;
-    const nextDownload = downloads.shift();
+    if (nextDownloads.length == 0) {
+        getNextDownloads();
+        if (nextDownloads.length == 0) return;
+    }
+    const nextDownload = nextDownloads.shift();
     if (!!nextDownload && nextDownload.shouldDoDownload()) {
         nextDownload.doDownload();
     }
 }
-function meshReceived(cache, register, key) {
-    ready.unshift([cache, register, key]);
+function meshReceived(cache, register, key, distanceFunction, getSiblings, level, uuid) {
+    ready.unshift([cache, register, key, distanceFunction, getSiblings, level, uuid]);
+    //setTimeout(()=>loadBatch(),1);
 }
 function loadBatch() {
-    for (let i = 0; i < 1; i++) {
-        const data = ready.shift();
-        if (!data) return;
-        const cache = data[0];
-        const register = data[1];
-        const key = data[2];
-        const mesh = cache.get(key);
-        if (!!mesh) {
-            Object.keys(register[key]).forEach(tile => {
-                const callback = register[key][tile];
-                if (!!callback) {
-                    callback(mesh);
-                    register[key][tile] = null;
-                }
-            });
+    if (nextReady.length == 0) {
+        getNextReady();
+        if (nextReady.length == 0) return;
+    }
+    const data = nextReady.shift();
+    if (!data) return;
+    const cache = data[0];
+    const register = data[1];
+    const key = data[2];
+    const mesh = cache.get(key);
+    if (!!mesh && !!register[key]) {
+        Object.keys(register[key]).forEach(tile => {
+            const callback = register[key][tile];
+            if (!!callback) {
+                callback(mesh);
+                register[key][tile] = null;
+            }
+        });
+    }
+}
+
+function getNextDownloads() {
+    let smallestLevel = Number.MAX_VALUE;
+    let smallestDistance = Number.MAX_VALUE;
+    let closest = -1;
+    for (let i = downloads.length - 1; i >= 0; i--) {
+        if (!downloads[i].shouldDoDownload()) {
+            downloads.splice(i, 1);
+            continue;
+        }
+        if(!downloads[i].distanceFunction){ // if no distance function, must be a json, give absolute priority!
+            nextDownloads.push(downloads.splice(i, 1)[0]);
+        }
+    }
+    if(nextDownloads.length>0) return;
+    for (let i = downloads.length - 1; i >= 0; i--) {
+        const dist = downloads[i].distanceFunction();
+        if (dist < smallestDistance) {
+            smallestDistance = dist;
+            closest = i;
+        } else if (dist == smallestDistance && downloads[i].level < smallestLevel) {
+            smallestLevel = downloads[i].level;
+            closest = i
+        }
+    }
+    if (closest >= 0) {
+        const closestItem = downloads.splice(closest, 1).pop();
+        nextDownloads.push(closestItem);
+        const siblings = closestItem.getSiblings();
+        for (let i = downloads.length - 1; i >= 0; i--) {
+            if (siblings.includes(downloads[i].uuid)) {
+                nextDownloads.push(downloads.splice(i, 1).pop());
+            }
+        }
+    }
+}
+
+function getNextReady() {
+    let smallestLevel = Number.MAX_VALUE;
+    let smallestDistance = Number.MAX_VALUE;
+    let closest = -1;
+    for (let i = ready.length - 1; i >= 0; i--) {
+        
+        if(!ready[i][3]){// if no distance function, must be a json, give absolute priority!
+            nextReady.push(ready.splice(i,1)[0]);
+        }
+    }
+    if(nextReady.length>0) return;
+    for (let i = ready.length - 1; i >= 0; i--) {
+        const dist = ready[i][3]();
+        if (dist < smallestDistance) {
+            smallestDistance = dist;
+            smallestLevel = ready[i][5]
+            closest = i
+        } else if (dist == smallestDistance && ready[i][5] < smallestLevel) {
+            smallestLevel = ready[i][5]
+            closest = i
+        }
+    }
+    if (closest >= 0) {
+        const closestItem = ready.splice(closest, 1).pop();
+        nextReady.push(closestItem);
+        const siblings = closestItem[4]();
+        for (let i = ready.length - 1; i >= 0; i--) {
+            if (siblings.includes(ready[i][6])) {
+                nextready.push(ready.splice(i, 1).pop());
+            }
         }
     }
 }
-setIntervalAsync(() => {
-    loadBatch();
-}, 10)
-setIntervalAsync(() => {
-    download();
-}, 10)
+setInterval(() => {
+    download()
+}, 1)
+setInterval(() => {
+    loadBatch()
+}, 1)
 
 class TileLoader {
-    constructor(meshCallback, stats) {
+    constructor(meshCallback, maxCachedItems) {
         this.meshCallback = meshCallback;
         this.cache = new LinkedHashMap();
-        this.maxSize = 1000;
-        this.stats = stats;
+        this.maxCachedItems = !!maxCachedItems ? maxCachedItems : 1000;
         this.register = {};
     }
 
-    get(tileIdentifier, path, callback) {
+    get(tileIdentifier, path, callback, distanceFunction, getSiblings, level, uuid) {
         const self = this;
         const key = simplifyPath(path);
 
 
-        if (!path.includes(".b3dm")) {
-            console.error("the 3DTiles cache can only be used to load B3DM data");
+        if (!path.includes(".b3dm") && !path.includes(".json")) {
+            console.error("the 3DTiles cache can only be used to load B3DM and json data");
             return;
         }
         if (!self.register[key]) {
@@ -71,13 +149,11 @@ class TileLoader {
 
         const cachedObject = self.cache.get(key);
         if (!!cachedObject) {
-            meshReceived(self.cache, self.register, key);
+            meshReceived(self.cache, self.register, key, distanceFunction, getSiblings, level, uuid);
         } else if (Object.keys(self.register[key]).length == 1) {
-            scheduleDownload({
-                "shouldDoDownload":()=>{
-                    return Object.keys(self.register[key]).length > 0;
-                },
-                "doDownload": () => {
+            let downloadFunction;
+            if (path.includes(".b3dm")) {
+                downloadFunction = () => {
                     fetch(path).then(result => {
                         if (!result.ok) {
                             console.error("could not load tile with path : " + path)
@@ -86,25 +162,40 @@ class TileLoader {
                         result.arrayBuffer().then(buffer => B3DMDecoder.parseB3DM(buffer, self.meshCallback)).then(mesh => {
                             self.cache.put(key, mesh);
                             self.checkSize();
-                            meshReceived(self.cache, self.register, key);
+                            meshReceived(self.cache, self.register, key, distanceFunction, getSiblings, level, uuid);
                         });
 
                     });
                 }
+            }else if (path.includes(".json")) {
+                downloadFunction = () => {
+                    fetch(path).then(result => {
+                        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}`);
+                        }
+                        result.json().then(json => {
+                            self.cache.put(key, json);
+                            self.checkSize();
+                            meshReceived(self.cache, self.register, key);
+                        });
+                    });
+                }
+            }
+            scheduleDownload({
+                "shouldDoDownload": () => {
+                    return !!self.register[key] && Object.keys(self.register[key]).length > 0;
+                },
+                "doDownload": downloadFunction,
+                "distanceFunction": distanceFunction,
+                "getSiblings": getSiblings,
+                "level": level,
+                "uuid": uuid
             })
         }
     }
 
-    meshReceived(key, mesh) {
-        const self = this;
-        Object.keys(self.register[key]).forEach(tile => {
-            const callback = self.register[key][tile];
-            if (!!callback) {
-                callback(mesh);
-                self.register[key][tile] = null;
-            }
-        });
-    }
+
 
     invalidate(path, tileIdentifier) {
         const key = simplifyPath(path);
@@ -113,46 +204,43 @@ class TileLoader {
 
     checkSize() {
         const self = this;
-        
+
         let i = 0;
-        function memOverflowCheck(){
-            if(!!self.stats && self.stats.memory()>0){
-                if(self.stats.memory()/self.stats.maxMemory()<0.25){
-                    return false;
-                }
-                return true;
-            }
-            return self.cache.size() > self.maxSize;
-        }
-        while (memOverflowCheck() && i < self.cache.size()) {
+
+        while (self.cache.size() > self.maxCachedItems && i < self.cache.size()) {
+            console.log(self.cache.size())
             i++;
             const entry = self.cache.head();
-            if (Object.keys(self.register[entry.key]).length > 0) {
-                self.cache.remove(entry.key);
-                self.cache.put(entry.key, entry.value);
-            } else {
-                self.cache.remove(entry.key);
-                delete self.register[entry.key];
-                entry.value.traverse((o) => {
-                    
-                    if (o.material) {
-                        // dispose materials
-                        if (o.material.length) {
-                            for (let i = 0; i < o.material.length; ++i) {
-                                o.material[i].dispose();
+            const reg = self.register[entry.key];
+            if (!!reg) {
+                if (Object.keys(reg).length > 0) {
+                    self.cache.remove(entry.key);
+                    self.cache.put(entry.key, entry.value);
+                } else {
+                    self.cache.remove(entry.key);
+                    delete self.register[entry.key];
+                    entry.value.traverse((o) => {
+
+                        if (o.material) {
+                            // dispose materials
+                            if (o.material.length) {
+                                for (let i = 0; i < o.material.length; ++i) {
+                                    o.material[i].dispose();
+                                }
+                            }
+                            else {
+                                o.material.dispose()
                             }
                         }
-                        else {
-                            o.material.dispose()
-                        }
-                    }
-                    if (o.geometry) {
-                        // dispose geometry
-                        o.geometry.dispose();
+                        if (o.geometry) {
+                            // dispose geometry
+                            o.geometry.dispose();
 
-                    }
-                });
+                        }
+                    });
+                }
             }
+
         }
     }
 }

package/src/tileset/TilesetStats.js

@@ -1,65 +0,0 @@
-var TilesetStats = function () {
-
-	
-	var beginTime = ( performance || Date ).now(), prevTime = beginTime, frames = 0;
-
-	var fps = -1;
-
-	if ( self.performance && self.performance.memory ) {
-
-		var mem = -1;
-		var maxMem = -1;
-
-	}
-
-
-	return {
-
-		begin: function () {
-
-			beginTime = ( performance || Date ).now();
-
-		},
-
-		end: function () {
-
-			frames ++;
-
-			var time = ( performance || Date ).now();
-
-			if ( time >= prevTime + 1000 ) {
-
-				fps = ( frames * 1000 ) / ( time - prevTime );
-
-				prevTime = time;
-				frames = 0;
-
-				if ( !!mem ) {
-
-					var memory = performance.memory;
-					mem = memory.usedJSHeapSize;
-					maxMem = memory.jsHeapSizeLimit;
-
-				}
-
-			}
-
-			return time;
-
-		},
-
-		update: function () {
-
-			beginTime = this.end();
-
-		},
-
-		fps: ()=>fps,
-		memory: ()=>mem,
-		maxMemory: ()=>maxMem
-
-	};
-
-};
-
-export default TilesetStats;