@jdultra/threedtiles 3.3.0 → 3.3.1

package/README.md

@@ -39,7 +39,7 @@ Currently, the library is limmited to B3DM files.
 - 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
 - Optimal tile load order
-- Occlusion culling (demo)
+- Occlusion culling
 
 ### geometric Error Multiplier
 The geometric error multiplier allows you to multiply the geometric error by a factor.
@@ -60,8 +60,8 @@ A value of 1.0 is the default.
 
 
 ### 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.
+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 and the user might see some holes in the model.
+Instead of this behaviour, you can force the lowest possible LODs to be loaded for tiles outside the view so that there are no gaps in the mesh when the camera moves. This also allows displaying shadows correctly.
 
 ```
 const ogc3DTile = new OGC3DTile({
@@ -78,6 +78,7 @@ const ogc3DTile = new OGC3DTile({
     url: "https://storage.googleapis.com/ogc-3d-tiles/ayutthaya/tileset.json",
     meshCallback: mesh => {
             mesh.material.wireframe = true;
+            mesh.material.side = THREE.DoubleSide;
         }
 });
 ```
@@ -116,12 +117,14 @@ const ogc3DTile = new OGC3DTile({
 
 ogc3DTile.translateOnAxis(new THREE.Vector3(0,1,0), -450);
 ogc3DTile.rotateOnAxis(new THREE.Vector3(1,0,0), -Math.PI*0.5);
-...
+```
 
 
 ### Occlusion culling
 Occlusion culling prevents the refinment of data that is hidden by other data, like a wall. It can have a big impact on frame-rate and loading speed for interior scenes.
-A word of warning: activating occlusion culling causes an extra render-pass and as such, has an impact on frame-rate. It will be most beneficial on interior scenes where most of the data is occluded by walls.
+
+A word of warning: activating occlusion culling causes an extra render-pass and as such, has an impact on frame-rate. 
+It will be most beneficial on interior scenes where most of the data is occluded by walls. All the tiles that don't need to be downloaded or drawn will balance out the cost of the extra render pass.
 
 
 First, instantiate an OcclusionCullingService:
@@ -146,7 +149,7 @@ function animate() {
 }
 ```
 
-Finally, you may want to set what side of the faces are drawn in the occlusion pass. By default, THREE.FrontSide is used:
+Finally, if you are drawing the back-side of faces or both-sides (see Callback section), you'll need to specify it for the occlusion pass too. By default, THREE.FrontSide is used:
 
 ```
 const occlusionCullingService = new OcclusionCullingService();
@@ -172,5 +175,5 @@ I'm working on this project in parallel https://github.com/ebeaufay/UltraGlobe w
 
 I also have code to convert meshes to 3DTiles with no limit to the size of the dataset relative to faces or textures.
 It works for all types of meshes: photogrametry, BIM, colored or textured meshes with a single texture atlas or many individual textures. 
-I'm keeping the code private for now but I'll convert any dataset you have for free.
+I'm keeping the code private for now but feel free to contact me about it.
 Contact: emericbeaufays@gmail.com

package/package.json

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

package/src/index.js

@@ -27,11 +27,12 @@ function initScene() {
     const scene = new THREE.Scene();
     scene.matrixAutoUpdate = false;
     scene.background = new THREE.Color(0xaaffcc);
-    scene.add(new THREE.AmbientLight(0xFFFFFF, 0.2));
-    const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.8 );
+    scene.add(new THREE.AmbientLight(0xFFFFFF, 0.8));
+    const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.2 );
     directionalLight.position.set(100,100,100)
     directionalLight.lookAt(-1,-1,-1)
     scene.add( directionalLight );
+    scene.autoUpdate = false;
     return scene;
 }
 
@@ -84,24 +85,36 @@ function initCamera() {
 
 function initTileset(scene) {
 
+    const 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;
+    }, 1000)
     const ogc3DTile = new OGC3DTile({
         url: "https://storage.googleapis.com/ogc-3d-tiles/ayutthaya/tiledWithSkirts/tileset.json",
-        //url: "http://localhost:8081/tileset.json",
+        //url: "http://localhost:8080/tileset.json",
         geometricErrorMultiplier: 0.5,
         loadOutsideView: false,
-        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;
-        }, 1000),
-        occlusionCullingService: occlusionCullingService
+        tileLoader: tileLoader,
+        occlusionCullingService: occlusionCullingService,
+        static: false
+    });
+    ogc3DTile.translateZ(200) // Z-UP to Y-UP
+    const ogc3DTile2 = new OGC3DTile({
+        url: "https://storage.googleapis.com/ogc-3d-tiles/ayutthaya/tiledWithSkirts/tileset.json",
+        //url: "http://localhost:8080/tileset.json",
+        geometricErrorMultiplier: 0.5,
+        loadOutsideView: false,
+        //tileLoader: tileLoader,
+        occlusionCullingService: occlusionCullingService,
+        static: false
     });
 
 
     
     //// The OGC3DTile object is a threejs Object3D so you may do all the usual opperations like transformations e.g.:
-    //-172683.125,301451.125,1367762.21875
     //ogc3DTile.rotateOnAxis(new THREE.Vector3(1, 0, 0), Math.PI * -0.5) // Z-UP to Y-UP
+    //// If the OGC3DTile object is marked as "static" (constructorParameter), these operations will not work.
     
     
     //// 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
@@ -122,11 +135,13 @@ function initTileset(scene) {
     function startInterval() {
         interval = setIntervalAsync(function () {
             ogc3DTile.update(camera);
+            ogc3DTile2.update(camera);
         }, 20);
     }
     startInterval();
 
     scene.add(ogc3DTile)
+    scene.add(ogc3DTile2)
     return ogc3DTile;
 }
 

package/src/tileset/OGC3DTile.js

@@ -34,10 +34,6 @@ class OGC3DTile extends THREE.Object3D {
         super();
         const self = this;
 
-        if(properties.static){
-            this.matrixAutoUpdate = false;
-        }
-        
         this.uuid = uuidv4();
         if (!!properties.tileLoader) {
             this.tileLoader = properties.tileLoader;
@@ -47,21 +43,24 @@ class OGC3DTile extends THREE.Object3D {
                     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;
-
+            }
+            // set properties general to the entire tileset
+            this.geometricErrorMultiplier = !!properties.geometricErrorMultiplier ? properties.geometricErrorMultiplier : 1.0;
+            
         this.meshCallback = properties.meshCallback;
         this.loadOutsideView = properties.loadOutsideView;
         this.cameraOnLoad = properties.cameraOnLoad;
         this.parentTile = properties.parentTile;
         this.occlusionCullingService = properties.occlusionCullingService;
+        this.static = properties.static;
         if (this.occlusionCullingService) {
             this.color = new THREE.Color();
             this.color.setHex(Math.random() * 0xffffff);
             this.colorID = clamp(self.color.r * 255, 0, 255) << 16 ^ clamp(self.color.g * 255, 0, 255) << 8 ^ clamp(self.color.b * 255, 0, 255) << 0;
         }
-
+        if(this.static){
+            this.matrixAutoUpdate = false;
+        }
         // declare properties specific to the tile for clarity
         this.childrenTiles = [];
         this.meshContent;
@@ -181,6 +180,7 @@ class OGC3DTile extends THREE.Object3D {
                         if (!!self.deleted) return;
                         mesh.traverse((o) => {
                             if (o.isMesh) {
+                                o.layers.disable(0);
                                 if (self.occlusionCullingService) {
                                     const position = o.geometry.attributes.position;
                                     const colors = [];
@@ -189,12 +189,16 @@ class OGC3DTile extends THREE.Object3D {
                                     }
                                     o.geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));
                                 }
+                                if(self.static){
+                                    o.matrixAutoUpdate = false;
+                                }
                                 o.material.visible = false;
                             }
                         });
                         
                         self.add(mesh);
                         self.updateWorldMatrix(false, true);
+                        // mesh.layers.disable(0);
                         self.meshContent = mesh;
                     }, !self.cameraOnLoad ? () => 0 : () => {
                         return self.calculateDistanceToCamera(self.cameraOnLoad);
@@ -363,7 +367,8 @@ class OGC3DTile extends THREE.Object3D {
                     level: self.level + 1,
                     tileLoader: self.tileLoader,
                     cameraOnLoad: camera,
-                    occlusionCullingService:self.occlusionCullingService
+                    occlusionCullingService:self.occlusionCullingService,
+                    static: self.static
                 });
                 self.childrenTiles.push(childTile);
                 self.add(childTile);
@@ -456,9 +461,18 @@ class OGC3DTile extends THREE.Object3D {
         const self = this;
         if(self.hasMeshContent && self.meshContent){
             if(visibility){
-                self.layers.enable(0);
+                
+                self.meshContent.traverse((o) => {
+                    if (o.isMesh) {
+                        o.layers.enable(0);
+                    }
+                });
             }else{
-                self.layers.disable(0);
+                self.meshContent.traverse((o) => {
+                    if (o.isMesh) {
+                        o.layers.disable(0);
+                    }
+                });
             }
         }
         if (self.materialVisibility == visibility) {

package/src/tileset/TileLoader.js

@@ -1,152 +1,168 @@
 import { LinkedHashMap } from 'js-utils-z';
 import { B3DMDecoder } from "../decoder/B3DMDecoder";
 import { setIntervalAsync } from 'set-interval-async/dynamic';
+import { initial } from 'lodash';
+import * as THREE from 'three';
 
-const ready = [];
-const downloads = [];
-const nextReady = [];
-const nextDownloads = [];
 let concurentDownloads = 0;
 
-function scheduleDownload(f) {
-    downloads.unshift(f);
-}
-function download() {
-    if (nextDownloads.length == 0) {
-        getNextDownloads();
-        if (nextDownloads.length == 0) return;
-    }
-    while (nextDownloads.length > 0 && concurentDownloads < 500) {
-        const nextDownload = nextDownloads.shift();
-        if (!!nextDownload && nextDownload.shouldDoDownload()) {
-            nextDownload.doDownload();
-        }
-    }
-
+class TileLoader {
+    constructor(meshCallback, maxCachedItems) {
+        this.meshCallback = meshCallback;
+        this.cache = new LinkedHashMap();
+        this.maxCachedItems = !!maxCachedItems ? maxCachedItems : 100;
+        this.register = {};
 
 
-    return;
-}
-function meshReceived(cache, register, key, distanceFunction, getSiblings, level, uuid) {
-    ready.unshift([cache, register, key, distanceFunction, getSiblings, level, uuid]);
-}
-function loadBatch() {
-    if (nextReady.length == 0) {
-        getNextReady();
-        if (nextReady.length == 0) return 0;
+        this.ready = [];
+        this.downloads = [];
+        this.nextReady = [];
+        this.nextDownloads = [];
+        this.init();
     }
-    const data = nextReady.shift();
-    if (!data) return 0;
-    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;
-            }
-        });
+
+    init(){
+        
+        const self = this;
+        setIntervalAsync(() => {
+            self.download();
+            /* const start = Date.now();
+            let uploaded = 0;
+            do{
+                uploaded = download();
+            }while(uploaded > 0 && (Date.now() - start)<= 2 ) */
+        
+        }, 10);
+        setIntervalAsync(() => {
+            const start = Date.now();
+            let loaded = 0;
+            do {
+                loaded = self.loadBatch();
+            } while (loaded > 0 && (Date.now() - start) <= 0)
+        
+        }, 10);
     }
-    return 1;
-}
 
-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;
+    scheduleDownload(f) {
+        this.downloads.unshift(f);
+    }
+    download() {
+        if (this.nextDownloads.length == 0) {
+            this.getNextDownloads();
+            if (this.nextDownloads.length == 0) return;
         }
-        if (!downloads[i].distanceFunction) { // if no distance function, must be a json, give absolute priority!
-            nextDownloads.push(downloads.splice(i, 1)[0]);
+        while (this.nextDownloads.length > 0 && concurentDownloads < 500) {
+            const nextDownload = this.nextDownloads.shift();
+            if (!!nextDownload && nextDownload.shouldDoDownload()) {
+                nextDownload.doDownload();
+            }
         }
+    
+    
+    
+        return;
+    }
+    meshReceived(cache, register, key, distanceFunction, getSiblings, level, uuid) {
+        this.ready.unshift([cache, register, key, distanceFunction, getSiblings, level, uuid]);
     }
-    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
+    loadBatch() {
+        if (this.nextReady.length == 0) {
+            this.getNextReady();
+            if (this.nextReady.length == 0) return 0;
+        }
+        const data = this.nextReady.shift();
+        if (!data) return 0;
+        const cache = data[0];
+        const register = data[1];
+        const key = data[2];
+        const mesh = cache.get(key);
+        if(mesh instanceof THREE.InstancedMesh){
+            console.log("instanced");
+        }else{
+            console.log(" not instanced");
+        }
+        if (!!mesh && !!register[key]) {
+            Object.keys(register[key]).forEach(tile => {
+                const callback = register[key][tile];
+                if (!!callback) {
+                    callback(mesh);
+                    register[key][tile] = null;
+                }
+            });
         }
+        return 1;
     }
-    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());
+    
+    getNextDownloads() {
+        let smallestLevel = Number.MAX_VALUE;
+        let smallestDistance = Number.MAX_VALUE;
+        let closest = -1;
+        for (let i = this.downloads.length - 1; i >= 0; i--) {
+            if (!this.downloads[i].shouldDoDownload()) {
+                this.downloads.splice(i, 1);
+                continue;
+            }
+            if (!this.downloads[i].distanceFunction) { // if no distance function, must be a json, give absolute priority!
+                this.nextDownloads.push(this.downloads.splice(i, 1)[0]);
             }
         }
-    }
-}
-
-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 (this.nextDownloads.length > 0) return;
+        for (let i = this.downloads.length - 1; i >= 0; i--) {
+            const dist = this.downloads[i].distanceFunction();
+            if (dist < smallestDistance) {
+                smallestDistance = dist;
+                closest = i;
+            } else if (dist == smallestDistance && this.downloads[i].level < smallestLevel) {
+                smallestLevel = this.downloads[i].level;
+                closest = i
+            }
         }
-    }
-    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 = this.downloads.splice(closest, 1).pop();
+            this.nextDownloads.push(closestItem);
+            const siblings = closestItem.getSiblings();
+            for (let i = this.downloads.length - 1; i >= 0; i--) {
+                if (siblings.includes(this.downloads[i].uuid)) {
+                    this.nextDownloads.push(this.downloads.splice(i, 1).pop());
+                }
+            }
         }
     }
-    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());
+    
+    getNextReady() {
+        let smallestLevel = Number.MAX_VALUE;
+        let smallestDistance = Number.MAX_VALUE;
+        let closest = -1;
+        for (let i = this.ready.length - 1; i >= 0; i--) {
+    
+            if (!this.ready[i][3]) {// if no distance function, must be a json, give absolute priority!
+                this.nextReady.push(this.ready.splice(i, 1)[0]);
+            }
+        }
+        if (this.nextReady.length > 0) return;
+        for (let i = this.ready.length - 1; i >= 0; i--) {
+            const dist = this.ready[i][3]();
+            if (dist < smallestDistance) {
+                smallestDistance = dist;
+                smallestLevel = this.ready[i][5]
+                closest = i
+            } else if (dist == smallestDistance && this.ready[i][5] < smallestLevel) {
+                smallestLevel = this.ready[i][5]
+                closest = i
+            }
+        }
+        if (closest >= 0) {
+            const closestItem = this.ready.splice(closest, 1).pop();
+            this.nextReady.push(closestItem);
+            const siblings = closestItem[4]();
+            for (let i = this.ready.length - 1; i >= 0; i--) {
+                if (siblings.includes(this.ready[i][6])) {
+                    this.nextready.push(this.ready.splice(i, 1).pop());
+                }
             }
         }
     }
-}
-setIntervalAsync(() => {
-    download();
-    /* const start = Date.now();
-    let uploaded = 0;
-    do{
-        uploaded = download();
-    }while(uploaded > 0 && (Date.now() - start)<= 2 ) */
 
-}, 10);
-setIntervalAsync(() => {
-    const start = Date.now();
-    let loaded = 0;
-    do {
-        loaded = loadBatch();
-    } while (loaded > 0 && (Date.now() - start) <= 1)
-
-}, 10);
-
-class TileLoader {
-    constructor(meshCallback, maxCachedItems) {
-        this.meshCallback = meshCallback;
-        this.cache = new LinkedHashMap();
-        this.maxCachedItems = !!maxCachedItems ? maxCachedItems : 1000;
-        this.register = {};
-    }
 
     get(tileIdentifier, path, callback, distanceFunction, getSiblings, level) {
         const self = this;
@@ -167,7 +183,7 @@ class TileLoader {
 
         const cachedObject = self.cache.get(key);
         if (!!cachedObject) {
-            meshReceived(self.cache, self.register, key, distanceFunction, getSiblings, level, tileIdentifier);
+            this.meshReceived(self.cache, self.register, key, distanceFunction, getSiblings, level, tileIdentifier);
         } else if (Object.keys(self.register[key]).length == 1) {
             let downloadFunction;
             if (path.includes(".b3dm")) {
@@ -182,7 +198,7 @@ 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, distanceFunction, getSiblings, level, tileIdentifier);
+                            this.meshReceived(self.cache, self.register, key, distanceFunction, getSiblings, level, tileIdentifier);
                         });
 
                     });
@@ -199,12 +215,12 @@ class TileLoader {
                         result.json().then(json => {
                             self.cache.put(key, json);
                             self.checkSize();
-                            meshReceived(self.cache, self.register, key);
+                            this.meshReceived(self.cache, self.register, key);
                         });
                     });
                 }
             }
-            scheduleDownload({
+            this.scheduleDownload({
                 "shouldDoDownload": () => {
                     return !!self.register[key] && Object.keys(self.register[key]).length > 0;
                 },