@jdultra/threedtiles 3.0.7 → 3.1.2

package/.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

package/README.md

@@ -14,7 +14,7 @@ import { OGC3DTile } from "./tileset/OGC3DTile";
 ...
 
 const ogc3DTile = new OGC3DTile({
-    url: "https://ebeaufay.github.io/ThreedTilesViewer.github.io/momoyama/tileset.json"
+    url: "https://storage.googleapis.com/ogc-3d-tiles/ayutthaya/tileset.json"
 });
 
 scene.add(ogc3DTile);
@@ -33,6 +33,9 @@ setInterval(function () {
 - Allows tilesets transformations. Translate, scale and rotate a tilesets in real-time.
 - callback on loaded geometry to assign a custom material or use the meshes for computations.
 - Optionally load low detail tiles outside of view frustum for correct shadows and basic mesh present when the camera moves quickly.
+- Share a cache between tileset instances
+- Automatically tune the geometric error multiplier to 60 FPS
+- Automatic scaling of the cache
 
 ### geometric Error Multiplier
 The geometric error multiplier allows you to multiply the geometric error by a factor.
@@ -43,20 +46,43 @@ you may also set this value at initialization:
 
 ```
 const ogc3DTile = new OGC3DTile({
-    url: "https://ebeaufay.github.io/ThreedTilesViewer.github.io/momoyama/tileset.json",
+    url: "https://storage.googleapis.com/ogc-3d-tiles/ayutthaya/tileset.json",
     geometricErrorMultiplier: 2.0
 });
 ```
 A lower value will result in lower detail tiles being loaded and a higher value results in higher detail tiles being loaded.
 A value of 1.0 is the default.
 
+#### Automatic Geometric error multiplier
+In order to reach a steady 60 FPS, you can specify a TilesetStats object. 
+This object is basically the Stats object from the Three.js samples without the UI component.
+It must be updated in the animate function and given to the tileset at construction.
+```
+import TilesetStats from '@jdultra/threedtiles/src/tileset/TilesetStats';
+
+const tilesetStats = TilesetStats();
+
+const ogc3DTile = new OGC3DTile({
+    url: "https://storage.googleapis.com/ogc-3d-tiles/ayutthaya/tileset.json",
+    stats: tilesetStats
+});
+
+function animate() {
+    
+    ...
+    
+    tilesetStats.update();
+}
+```
+
+
 ### load tiles outside of view
 By default, only the tiles that intersect the view frustum are loaded. When the camera moves, the scene will have to load the missing tiles.
 Instead of this behaviour, you can force the lowest possible LODs to be loaded for tiles around the view so that there are no gaps in the mesh when the camera moves or when displaying shadows.
 
 ```
 const ogc3DTile = new OGC3DTile({
-    url: "https://ebeaufay.github.io/ThreedTilesViewer.github.io/momoyama/tileset.json",
+    url: "https://storage.googleapis.com/ogc-3d-tiles/ayutthaya/tileset.json",
     loadOutsideView: true
 });
 ```
@@ -66,13 +92,33 @@ Add a callback on loaded tiles in order to set a material or do some logic on th
 
 ```
 const ogc3DTile = new OGC3DTile({
-    url: "https://ebeaufay.github.io/ThreedTilesViewer.github.io/momoyama/tileset.json",
+    url: "https://storage.googleapis.com/ogc-3d-tiles/ayutthaya/tileset.json",
     meshCallback: mesh => {
             mesh.material.wireframe = true;
         }
 });
 ```
 
+### Cache
+You may instanciate a cache through the TileLoader class and re-use it for several or all your tilesets. 
+The limitation is that all the tilesets using the same cache will have the same callback.
+
+If a TilesetStats object is passed, it will be used to monitor the size of the cache when the browser allows it, otherwise, each cache is limitted to 1000 items.
+
+```
+import { TileLoader } from "@jdultra/threedtiles/src/tileset/TileLoader";
+
+const ogc3DTile = new OGC3DTile({
+        url: "https://storage.googleapis.com/ogc-3d-tiles/ayutthaya/tileset.json",
+        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),
+        meshCallback: mesh => { mesh.material.wireframe = true;} // This callback will not be used as the callback provided to the TileLoader takes priority
+    });
+```
+
 ### Transformations
 The OGC 3DTile object is a regular three.js Object3D so it can be transformed via the standard three.js API:
 

package/index.html

@@ -4,53 +4,11 @@
 <head>
   <meta charset="utf-8" />
   <title>Three 3DTiles viewer sample</title>
-  <style>
-    .slidecontainer {
-      width: 100%;
-    }
-
-    .slider {
-      -webkit-appearance: none;
-      width: 100%;
-      height: 15px;
-      border-radius: 5px;
-      background: #d3d3d3;
-      outline: none;
-      opacity: 0.7;
-      -webkit-transition: .2s;
-      transition: opacity .2s;
-    }
-
-    .slider:hover {
-      opacity: 1;
-    }
-
-    .slider::-webkit-slider-thumb {
-      -webkit-appearance: none;
-      appearance: none;
-      width: 25px;
-      height: 25px;
-      border-radius: 50%;
-      background: #0439aa;
-      cursor: pointer;
-    }
-
-    .slider::-moz-range-thumb {
-      width: 25px;
-      height: 25px;
-      border-radius: 50%;
-      background: #04AA6D;
-      cursor: pointer;
-    }
-  </style>
+  <link rel="manifest" href="manifest.json">
 </head>
 
 <body>
   <div id="screen"></div>
-  <div style="position: absolute; top: 1%; z-index: 100; right:1%; ">
-    <input type="range" min="0.1" max="4" value="1.0", step="0.1" class="slider" id="lodMultiplier" >
-    <p style="color: #0439aa;">LOD multiplier: <span id="multiplierValue"></span></p>
-  </div>
   <div style="position: absolute; bottom: 1%; z-index: 100;"> 
     <a href="https://openheritage3d.org/project.php?id=taz6-n215">ORIGINAL MODEL</a>
   </div>

package/manifest.json

@@ -0,0 +1,4 @@
+{
+    "display":      "fullscreen",
+    "orientation":  "landscape"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jdultra/threedtiles",
-    "version": "3.0.7",
+    "version": "3.1.2",
     "description": "An OGC 3DTiles viewer for Three.js",
     "main": "tileset.js",
     "scripts": {
@@ -24,10 +24,15 @@
     "license": "MIT",
     "dependencies": {
         "gltf-validator": ">=2.0.0-dev.3.3",
+        "js-utils-z": "1.2.1",
         "lodash": ">=4.17.20",
+        "lru-cache": "^7.4.1",
+        "mnemonist": "^0.39.0",
+        "path-browserify": "^1.0.1",
         "regenerator-runtime": ">=0.13.7",
+        "set-interval-async": "^2.0.3",
         "three": "0.131.0",
-        "js-utils-z": "1.2.1"
+        "uuid": "^8.3.2"
     },
     "devDependencies": {
         "@babel/core": "^7.12.9",
@@ -38,9 +43,9 @@
         "html-loader": "^1.3.2",
         "html-webpack-plugin": "^4.5.0",
         "mini-css-extract-plugin": "^1.3.1",
-        "webpack": "4.44.2",
-        "webpack-cli": "^3.3.12",
-        "webpack-dev-server": "3.11.0",
+        "webpack": "^5.65.0",
+        "webpack-cli": "4.9.1",
+        "webpack-dev-server": "^4.7.4",
         "whatwg-fetch": "^3.5.0"
     }
 }

package/src/decoder/B3DMDecoder.js

@@ -1,13 +1,10 @@
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
-import * as THREE from 'three';
 import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
 import { LegacyGLTFLoader } from './LegacyGLTFLoader.js';
-import { Color, DoubleSide, BufferAttribute, Mesh } from "three";
-import { BufferGeometryUtils } from 'three/examples/jsm/utils/BufferGeometryUtils.js';
 
 const gltfLoader = new GLTFLoader();
 const dracoLoader = new DRACOLoader();
-dracoLoader.setDecoderPath( '/src/draco/' );
+dracoLoader.setDecoderPath( 'https://www.gstatic.com/draco/versioned/decoders/1.4.3/' );
 gltfLoader.setDRACOLoader( dracoLoader );
 const legacyGLTFLoader = new LegacyGLTFLoader();
 const B3DMDecoder = {
@@ -106,7 +103,7 @@ const B3DMDecoder = {
  * @param {*} scene 
  * @returns 
  */
-function mergeColoredObject(scene) {
+/*function mergeColoredObject(scene) {
 	
 	const coloredMeshes = {};
 	const texturedMeshes = {};
@@ -213,7 +210,7 @@ function mergeColoredObject(scene) {
 	console.log();
 	scene.matrix = new THREE.Matrix4();
 	return scene;
-}
+}*/
 
 export { B3DMDecoder }
 

package/src/index.js

@@ -1,75 +1,28 @@
 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);
-initLODMultiplierSlider(ogc3DTiles);
 const controller = initController(camera, domContainer);
-const skybox = initSkybox(controller, camera, scene);
 
 const stats = initStats(domContainer);
 const renderer = initRenderer(camera, domContainer);
 
 animate();
 
-function initSkybox(controller, camera, scene) {
-    const geometry = new THREE.BoxGeometry(8000, 8000, 8000);
-    const textures = [
-        loadTexture("./skybox/back.png"),
-        loadTexture("./skybox/front.png"),
-        loadTexture("./skybox/top.png"),
-        loadTexture("./skybox/bottom.png"),
-        loadTexture("./skybox/right.png"),
-        loadTexture("./skybox/left.png"),
-    ];
-    function loadTexture(url) {
-        return new THREE.TextureLoader().load(url, (texture => {
-            texture.wrapS = THREE.ClampToEdgeWrapping;
-            texture.wrapT = THREE.ClampToEdgeWrapping;
-            texture.magFilter = THREE.LinearFilter;
-            texture.minFilter = THREE.LinearFilter;
-        }))
-
-    }
-    const materials = [];
-    textures.forEach(tex => {
-        materials.push(new THREE.MeshBasicMaterial({ map: tex, side: THREE.BackSide }));
-    })
-    const mesh = new THREE.Mesh(geometry, materials);
-    mesh.position.copy(camera.position);
-    controller.addEventListener("change", () => {
-        mesh.position.copy(camera.position);
-    });
-    scene.add(mesh);
-    return mesh;
-}
-function initLODMultiplierSlider(tileset) {
-    var slider = document.getElementById("lodMultiplier");
-    var output = document.getElementById("multiplierValue");
-    output.innerHTML = slider.value;
-
-    slider.oninput = () => {
-        tileset.setGeometricErrorMultiplier(slider.value)
-        output.innerHTML = slider.value;
-    }
-}
 function initScene() {
     const scene = new THREE.Scene();
-    scene.background = new THREE.Color(0xFF0000);
-    scene.add(new THREE.AmbientLight(0xFFFFFF, 0.5));
-
-    var dirLight = new THREE.DirectionalLight(0xffffff, 0.5);
-    dirLight.position.set(-400, 500, -100);
-    dirLight.target.position.set(0, 0, 0);
-
-    scene.add(dirLight);
-    scene.add(dirLight.target);
+    scene.background = new THREE.Color(0x000000);
+    scene.add(new THREE.AmbientLight(0xFFFFFF, 1.0));
     return scene;
 }
 
@@ -109,16 +62,15 @@ function initRenderer(camera, dom) {
 }
 
 function initStats(dom) {
-    const stats = new Stats();
-    dom.appendChild(stats.dom);
+    const stats = Stats();
+    document.body.appendChild(stats.dom);
     return stats;
 }
 
 
 function initCamera() {
     const camera = new THREE.PerspectiveCamera(70, window.offsetWidth / window.offsetHeight, 1, 10000);
-    camera.position.set(-60, 5, -30);
-    camera.lookAt(-100, 0, 0);
+    camera.position.set(10, 10, 10);
 
     return camera;
 }
@@ -127,33 +79,33 @@ function initTileset(scene) {
 
     const ogc3DTile = new OGC3DTile({
         url: "https://storage.googleapis.com/ogc-3d-tiles/ayutthaya/tileset.json",
-        //url: "https://storage.googleapis.com/ogc-3d-tiles/castleX/tileset.json",
-        //url: "https://storage.googleapis.com/ogc-3d-tiles/berlinSubsetTiled/tileset.json",
-        //url: "https://storage.googleapis.com/ogc-3d-tiles/ayutthaya/tileset.json",
-        //url: "https://s3.us-east-2.wasabisys.com/construkted-assets/arkcnfuk9fw/tileset.json",
-        //url: "https://s3.us-east-2.wasabisys.com/construkted-assets/a73faxnydqk/tileset.json",
-        //url: "https://s3.us-east-2.wasabisys.com/construkted-assets/e63mubnpmg/tileset.json",
-        //url: "https://assets.cesium.com/697512/tileset.json?v=1",
-        //url:"https://a.3d.blc.shc.eu/WAB/base_layer/cesium_mesh_2020/tileset.json",
         geometricErrorMultiplier: 1,
         loadOutsideView: true,
-        meshCallback: mesh => {
+        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
     });
+    
 
     //// The OGC3DTile object is a threejs Object3D so you may do all the usual opperations like transformations e.g.:
     //ogc3DTile.translateOnAxis(new THREE.Vector3(0,1,0), -10)
     //ogc3DTile.translateOnAxis(new THREE.Vector3(1,0,0), -65)
     //ogc3DTile.translateOnAxis(new THREE.Vector3(0,0,1), -80)
-    //ogc3DTile.scale.set(0.01,0.01,0.01);
-    //ogc3DTile.rotateOnAxis(new THREE.Vector3(1, 0, 0), -Math.PI * 0.5) // Z-UP to Y-UP
+    //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.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)
     //// It's up to the user to call updates on the tileset. You might call them whenever the camera moves or at regular time intervals like here
 
+    
+
     var interval ;
     document.addEventListener('keyup', (e) => {
+        console.log(camera.position)
         if(!e.key || e.key !== "p") return;
         if(!!interval){
             clearInterval(interval);
@@ -165,10 +117,9 @@ function initTileset(scene) {
     function startInterval(){
         interval = setInterval(function () {
             ogc3DTile.update(camera);
-        }, 200);
+        }, 25);
     }
     startInterval();
-    
 
     scene.add(ogc3DTile)
     return ogc3DTile;
@@ -177,9 +128,9 @@ function initTileset(scene) {
 function initController(camera, dom) {
     const controller = new OrbitControls(camera, dom);
 
-    controller.target.set(-20, -20, 35);
+    controller.target.set(-11.50895,0.058452500000001, 3.1369285);
     controller.minDistance = 1;
-    controller.maxDistance = 500;
+    controller.maxDistance = 5000;
     controller.update();
     return controller;
 }
@@ -190,7 +141,7 @@ function animate() {
 
     camera.updateMatrixWorld();
     renderer.render(scene, camera);
-
+    tilesetStats.update();
     stats.update();
 
 }

package/src/tileset/OGC3DTile.js

@@ -1,19 +1,11 @@
 import * as THREE from 'three';
 import { OBB } from "../geometry/obb";
-import { B3DMDecoder } from "../decoder/B3DMDecoder";
-import { Cache } from "../cache/Cache";
+import { TileLoader } from "./TileLoader";
+import { v4 as uuidv4 } from "uuid";
+import { setIntervalAsync } from 'set-interval-async/dynamic';
+// import { clearIntervalAsync } from 'set-interval-async';
 const path = require('path');
 
-const tilesToLoad = [];
-function scheduleLoadTile(tile) {
-    tilesToLoad.push(tile);
-}
-
-setInterval(() => {
-    const tile = tilesToLoad.shift();
-    if (!!tile) tile.load();
-}, 5)
-
 const tempSphere = new THREE.Sphere(new THREE.Vector3(0, 0, 0, 1));
 
 
@@ -30,13 +22,42 @@ class OGC3DTile extends THREE.Object3D {
      *   parentRefinement: optional,
      *   geometricErrorMultiplier: Double,
      *   loadOutsideView: Boolean,
-     *   cache : Cache
+     *   tileLoader : TileLoader,
+     *   stats: TilesetStats,
+     *   meshCallback: function
      * } properties 
      */
     constructor(properties) {
         super();
+        const self = this;
+        this.uuid = uuidv4();
+        if (!!properties.tileLoader) {
+            this.tileLoader = properties.tileLoader;
+        } else {
+            this.tileLoader = new TileLoader(!properties.meshCallback ?
+                mesh => {
+                    mesh.material.wireframe = false;
+                    mesh.material.side = THREE.DoubleSide;
+                } : properties.meshCallback);
+        }
         // 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;
 
@@ -55,7 +76,6 @@ class OGC3DTile extends THREE.Object3D {
         this.hasMeshContent = false; // true when the provided json has a content field pointing to a B3DM file
         this.hasUnloadedJSONContent = false; // true when the provided json has a content field pointing to a JSON file that is not yet loaded
 
-        const self = this;
         if (!!properties.json) { // If this tile is created as a child of another tile, properties.json is not null
             self.setup(properties);
         } else if (properties.url) { // If only the url to the tileset.json is provided
@@ -95,9 +115,9 @@ class OGC3DTile extends THREE.Object3D {
         }
         // decode transform
         if (!!this.json.transform) {
-            //this.matrix = new THREE.Matrix4();
-            this.matrix.elements = this.json.transform;
-            this.updateWorldMatrix(false, false);
+            let mat = new THREE.Matrix4();
+            mat.elements = this.json.transform;
+            this.applyMatrix4(mat);
         }
         // decode volume
         if (!!this.json.boundingVolume) {
@@ -124,11 +144,13 @@ class OGC3DTile extends THREE.Object3D {
             } else {
                 this.hasMeshContent = true;
             }
-            scheduleLoadTile(this);
+            this.load();
+            //scheduleLoadTile(this);
         }
     }
     load() {
         var self = this;
+        if (self.deleted) return;
         if (!!self.json.content) {
             let url;
             if (!!self.json.content.uri) {
@@ -146,24 +168,24 @@ class OGC3DTile extends THREE.Object3D {
             }
 
             if (!!url) {
-                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}`);
-                    }
-                    if (url.includes("b3dm")) {// if the content is B3DM
-                        result.arrayBuffer().then(buffer => B3DMDecoder.parseB3DM(buffer, self.meshCallback)).then(mesh => {
-                            mesh.traverse((o) => {
-                                if (o.isMesh) {
-                                    o.material.visible = false;
-                                }
-                            });
-                            self.add(mesh);
-                            self.meshContent = mesh;
-
-
-                        }).catch(error => { });
-                    } else if (url.includes("json")) {// if the content is json
+                if (url.includes(".b3dm")) {
+                    self.contentURL = url;
+                    self.tileLoader.get(this.uuid, url, mesh => {
+                        if (!!self.deleted) return;
+                        mesh.traverse((o) => {
+                            if (o.isMesh) {
+                                o.material.visible = false;
+                            }
+                        });
+                        self.add(mesh);
+                        self.meshContent = mesh;
+                    })
+                } 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
@@ -173,50 +195,36 @@ class OGC3DTile extends THREE.Object3D {
                             delete self.json.content;
                             self.hasUnloadedJSONContent = false;
                         }).catch(error => { });
-                    }
-                }).catch(error => {
-                });
+                    }).catch(error => { });
+                }
+
             }
         }
     }
 
-    disposeChildren() {
-        var self = this;
+    dispose() {
 
-        self.childrenTiles.forEach(tile => tile.traverse(function (element) {
+        const self = this;
+        self.deleted = true;
+        this.traverse(function (element) {
+            if (!!element.contentURL) {
+                self.tileLoader.invalidate(element.contentURL, element.uuid);
+            }
             if (!!element.controller) { // abort tile request
                 element.controller.abort();
             }
-            if (element.material) {
-                // dispose materials
-                if (element.material.length) {
-                    for (let i = 0; i < element.material.length; ++i) {
-                        element.material[i].dispose();
-                    }
-                }
-                else {
-                    element.material.dispose()
-                }
-
-            }
-            if (element.geometry) {
-                // dispose geometry
-                element.geometry.dispose();
-
-            }
-        }));
-        for (let i = 0; i < this.childrenTiles.length; i++) {
 
-            const object = this.childrenTiles[i];
-
-            object.parent = null;
-
-            object.dispatchEvent({ type: 'removed' });
+        });
+        this.parent = null;
+        this.dispatchEvent({ type: 'removed' });
+    }
+    disposeChildren() {
+        var self = this;
 
-        }
-        this.childrenTiles = [];
-        this.children = [];
-        if (!!this.meshContent) this.children.push(this.meshContent);
+        self.childrenTiles.forEach(tile => tile.dispose());
+        self.childrenTiles = [];
+        self.children = [];
+        if (!!self.meshContent) self.children.push(self.meshContent);
     }
 
 
@@ -228,14 +236,14 @@ class OGC3DTile extends THREE.Object3D {
     _update(camera, frustum) {
         const self = this;
 
+        self.childrenTiles.forEach(child => child._update(camera, frustum));
         if (!!self.boundingVolume && !!self.geometricError) {
-            var metric = self.calculateUpdateMetric(camera, frustum);
+            self.metric = self.calculateUpdateMetric(camera, frustum);
         }
 
-        updateNodeVisibility(metric);
-        updateTree(metric);
-        self.childrenTiles.forEach(child => child._update(camera, frustum));
-        trimTree(metric);
+        updateNodeVisibility(self.metric);
+        updateTree(self.metric);
+        trimTree(self.metric);
 
 
         function updateTree(metric) {
@@ -293,7 +301,7 @@ class OGC3DTile extends THREE.Object3D {
                     self.changeContentVisibility(false);
                 } else {
                     //self.changeContentVisibility(true);
-                    
+
                 }
             }
         }
@@ -322,9 +330,9 @@ class OGC3DTile extends THREE.Object3D {
                     json: childJSON,
                     rootPath: self.rootPath,
                     geometricErrorMultiplier: self.geometricErrorMultiplier,
-                    meshCallback: self.meshCallback,
                     loadOutsideView: self.loadOutsideView,
-                    level: self.level + 1
+                    level: self.level + 1,
+                    tileLoader: self.tileLoader
                 });
                 self.childrenTiles.push(childTile);
                 self.add(childTile);
@@ -376,7 +384,7 @@ class OGC3DTile extends THREE.Object3D {
             return true;
         }
 
-        return false;
+        return true;
 
     }
 
@@ -455,28 +463,4 @@ class OGC3DTile extends THREE.Object3D {
         this.childrenTiles.forEach(child => child.setGeometricErrorMultiplier(geometricErrorMultiplier));
     }
 }
-
-/**
- * 
- * @param {Integer} size a number of vertices 
- */
-function createMeshCache(size = 5000000, meshCallback = () => { }) {
-    /* return new Cache(
-        (url, self)=>{
-            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.arrayBuffer().then(buffer => B3DMDecoder.parseB3DM(buffer, self.meshCallback)).then(mesh => {
-                    mesh.traverse((o) => {
-                        if (o.isMesh) {
-                            o.material.visible = false;
-                        }
-                    });
-                    return mesh;
-                }).catch(error => { });
-            }
-        }
-    ) */
-}
-export { OGC3DTile, createMeshCache };
+export { OGC3DTile };

package/src/tileset/TileLoader.js

@@ -0,0 +1,188 @@
+import { LinkedHashMap } from 'js-utils-z';
+import { B3DMDecoder } from "../decoder/B3DMDecoder";
+import { setIntervalAsync } from 'set-interval-async/dynamic';
+
+const ready = [];
+const downloads = [];
+function scheduleDownload(f) {
+    downloads.unshift(f);
+}
+function download() {
+    if(downloads.length <=0) return;
+    const nextDownload = downloads.shift();
+    if (!!nextDownload && nextDownload.shouldDoDownload()) {
+        nextDownload.doDownload();
+    }
+}
+function meshReceived(cache, register, key) {
+    ready.unshift([cache, register, key]);
+}
+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;
+                }
+            });
+        }
+    }
+}
+setIntervalAsync(() => {
+    loadBatch();
+}, 10)
+setIntervalAsync(() => {
+    download();
+}, 10)
+
+class TileLoader {
+    constructor(meshCallback, stats) {
+        this.meshCallback = meshCallback;
+        this.cache = new LinkedHashMap();
+        this.maxSize = 1000;
+        this.stats = stats;
+        this.register = {};
+    }
+
+    get(tileIdentifier, path, callback) {
+        const self = this;
+        const key = simplifyPath(path);
+
+
+        if (!path.includes(".b3dm")) {
+            console.error("the 3DTiles cache can only be used to load B3DM data");
+            return;
+        }
+        if (!self.register[key]) {
+            self.register[key] = {};
+        }
+        if (!!self.register[key][tileIdentifier]) {
+            console.error(" a tile should only be loaded once");
+        }
+        self.register[key][tileIdentifier] = callback;
+
+        const cachedObject = self.cache.get(key);
+        if (!!cachedObject) {
+            meshReceived(self.cache, self.register, key);
+        } else if (Object.keys(self.register[key]).length == 1) {
+            scheduleDownload({
+                "shouldDoDownload":()=>{
+                    return Object.keys(self.register[key]).length > 0;
+                },
+                "doDownload": () => {
+                    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.arrayBuffer().then(buffer => B3DMDecoder.parseB3DM(buffer, self.meshCallback)).then(mesh => {
+                            self.cache.put(key, mesh);
+                            self.checkSize();
+                            meshReceived(self.cache, self.register, key);
+                        });
+
+                    });
+                }
+            })
+        }
+    }
+
+    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);
+        delete this.register[key][tileIdentifier];
+    }
+
+    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()) {
+            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();
+                            }
+                        }
+                        else {
+                            o.material.dispose()
+                        }
+                    }
+                    if (o.geometry) {
+                        // dispose geometry
+                        o.geometry.dispose();
+
+                    }
+                });
+            }
+        }
+    }
+}
+
+function simplifyPath(main_path) {
+
+    var parts = main_path.split('/'),
+        new_path = [],
+        length = 0;
+    for (var i = 0; i < parts.length; i++) {
+        var part = parts[i];
+        if (part === '.' || part === '' || part === '..') {
+            if (part === '..' && length > 0) {
+                length--;
+            }
+            continue;
+        }
+        new_path[length++] = part;
+    }
+
+    if (length === 0) {
+        return '/';
+    }
+
+    var result = '';
+    for (var i = 0; i < length; i++) {
+        result += '/' + new_path[i];
+    }
+
+    return result;
+}
+
+export { TileLoader };

package/src/tileset/TilesetStats.js

@@ -0,0 +1,65 @@
+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;

package/webpack.config.js

@@ -83,19 +83,13 @@ module.exports = {
           }]
         },
         {
-          test: /\.(png|gif)$/,
-          use: [{
-            loader: "file-loader",
-            options: {
-              name: "images/[name].[contenthash].[ext]"
-            }
-          }]
-        }
+          test: /\.(png|svg|jpg|jpeg|gif)$/i,
+          type: 'asset/resource',
+        },
       ],
     },
     optimization: {
       minimizer: [new TerserPlugin({
-        cache: true,
         parallel: true,
         terserOptions: {
             ecma: undefined,
@@ -119,8 +113,14 @@ module.exports = {
     devServer: {
       hot: true,
       open: true,
-      openPage: "",
       port: DEFAULT_WEBPACK_PORT
+    },
+    resolve: {
+      extensions: [".js", ".jsx", ".json", ".ts", ".tsx"],// other stuff
+      fallback: {
+        "fs": false,
+        "path": require.resolve("path-browserify")
+      }
     }
   
 };

package/src/cache/Cache.js

@@ -1,44 +0,0 @@
-
-import { LinkedHashMap } from 'js-utils-z';
-
-class Cache {
-    constructor(loader, counter, dispose, max) {
-        this.loader = loader;
-        this.counter = counter;
-        this.dispose = dispose;
-        this.max = max;
-        this.currentSize = 0;
-        this.objects = new LinkedHashMap();
-    }
-
-    get(name){
-        if(this.objects.has(name)){
-            const item = this.objects.remove(name);
-            item.users++;
-            this.objects.put(name, item, false);
-            return new Promise.resolve({dispose:()=>item.users--,content:item.content});
-        }else{
-            return this.loader(name).then(content=>{
-                const item = { users: 1, content: content };
-                this.objects.put(name, item, false);
-                currentSize+=this.counter(item);
-                checkSize();
-                return {dispose:()=>item.users--,content:item.content};
-            });
-        }
-    }
-
-    checkSize(){
-        let object = this.objects.head();
-        while(this.currentSize > this.max && !!object){
-            if(object.value.users <=0){
-                const item = this.objects.remove(object.key);
-                this.currentSize -= this.counter(item.content);
-                this.dispose(item.content);
-            }
-            object = object.next();
-        }
-    }
-}
-
-export{Cache};