npm - @jdultra/threedtiles - Versions diffs - 3.0.8 → 3.1.0 - Mend

@jdultra/threedtiles 3.0.8 → 3.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/.vscode/settings.json +2 -0
package/index.html +0 -43
package/package.json +7 -3
package/src/decoder/B3DMDecoder.js +3 -6
package/src/index.js +27 -73
package/src/tileset/OGC3DTile.js +87 -104
package/src/tileset/TileLoader.js +188 -0
package/src/tileset/TilesetStats.js +65 -0
package/src/cache/Cache.js +0 -44

package/.vscode/settings.json ADDED Viewed

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

package/index.html CHANGED Viewed

@@ -4,53 +4,10 @@
 <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>
 </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/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "@jdultra/threedtiles",
-    "version": "3.0.8",
+    "version": "3.1.0",
     "description": "An OGC 3DTiles viewer for Three.js",
     "main": "tileset.js",
     "scripts": {
@@ -26,9 +26,13 @@
         "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",
-        "three": "0.131.0"
+        "set-interval-async": "^2.0.3",
+        "three": "0.131.0",
+        "uuid": "^8.3.2"
     },
     "devDependencies": {
         "@babel/core": "^7.12.9",
@@ -41,7 +45,7 @@
         "mini-css-extract-plugin": "^1.3.1",
         "webpack": "^5.65.0",
         "webpack-cli": "4.9.1",
-        "webpack-dev-server": "4.7.1",
+        "webpack-dev-server": "^4.7.4",
         "whatwg-fetch": "^3.5.0"
     }
 }

package/src/decoder/B3DMDecoder.js CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -1,81 +1,31 @@
 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';
-import back from './images/skybox/back.png';
-import front from './images/skybox/front.png';
-import top from './images/skybox/top.png';
-import bottom from './images/skybox/bottom.png';
-import right from './images/skybox/right.png';
-import left from './images/skybox/left.png';
 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(back),
-        loadTexture(front),
-        loadTexture(top),
-        loadTexture(bottom),
-        loadTexture(right),
-        loadTexture(left),
-    ];
-    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;
 }
@@ -115,16 +65,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, 80, -30);
-    camera.lookAt(-100, 40, 0);
+    camera.position.set(10, 10, 10);
     return camera;
 }
@@ -132,28 +81,34 @@ function initCamera() {
 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",
         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.1,0.1,0.1);
-    //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 +120,9 @@ function initTileset(scene) {
     function startInterval(){
         interval = setInterval(function () {
             ogc3DTile.update(camera);
-        }, 200);
+        }, 25);
     }
     startInterval();
     scene.add(ogc3DTile)
     return ogc3DTile;
@@ -177,9 +131,9 @@ function initTileset(scene) {
 function initController(camera, dom) {
     const controller = new OrbitControls(camera, dom);
-    controller.target.set(-20, 40, 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 +144,7 @@ function animate() {
     camera.updateMatrixWorld();
     renderer.render(scene, camera);
+    tilesetStats.update();
     stats.update();
 }

package/src/tileset/OGC3DTile.js CHANGED Viewed

@@ -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,41 @@ 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(() => {
+                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);
+                }
+                self.setGeometricErrorMultiplier(self.geometricErrorMultiplier * (self.stats.fps() / 60));
+            }, 1000);
+        }
         this.meshCallback = properties.meshCallback;
         this.loadOutsideView = properties.loadOutsideView;
@@ -55,7 +75,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 +114,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 +143,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 +167,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 +194,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 +235,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 +300,7 @@ class OGC3DTile extends THREE.Object3D {
                     self.changeContentVisibility(false);
                 } else {
                     //self.changeContentVisibility(true);
                 }
             }
         }
@@ -322,9 +329,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 +383,7 @@ class OGC3DTile extends THREE.Object3D {
             return true;
         }
-        return false;
+        return true;
     }
@@ -455,28 +462,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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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/src/cache/Cache.js DELETED Viewed

@@ -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};