@jdultra/threedtiles 5.1.4 → 6.0.1

package/README.md

@@ -47,6 +47,11 @@ Currently, the library is limmited to B3DM files.
 - Occlusion culling
 - Instanced tilesets
 - Center tileset and re-orient geolocated data
+- gltf/glb tiles (OGC3DTiles 1.1)
+- point clouds (only through gltf/glb tiles)
+
+Support for OGC3DTiles 1.1 is underway. gltf/glb tiles are already supported but not yet implicit tiling.
+There is no plan to support .pnts or .i3dm tiles as points and instanced meshes are already supported through gltf tiles.
 
 ### geometric Error Multiplier
 The geometric error multiplier allows you to multiply the geometric error by a factor.
@@ -109,6 +114,20 @@ const ogc3DTile = new OGC3DTile({
         }
 });
 ```
+
+#### Points callback
+Add a callback on loaded point tiles in order to set a material or do some logic on the points.
+
+```
+const ogc3DTile = new OGC3DTile({
+    url: "https://storage.googleapis.com/ogc-3d-tiles/ayutthaya/tileset.json",
+    renderer: renderer,
+    pointsCallback: points => {
+            points.material.size = 0.1;
+            points.material.sizeAttenuation = true;
+        }
+});
+```
 If using a shared cache between tilesets, check out the next section.
 
 ### Cache
@@ -124,12 +143,15 @@ import { TileLoader } from "@jdultra/threedtiles/src/tileset/TileLoader";
 const ogc3DTile = new OGC3DTile({
         url: "https://storage.googleapis.com/ogc-3d-tiles/ayutthaya/tileset.json",
         renderer: renderer,
-        tileLoader: new TileLoader(mesh => {
+        tileLoader: new TileLoader(2000, mesh => {
             //// Insert code to be called on every newly decoded mesh e.g.:
             mesh.material.wireframe = false;
             mesh.material.side = THREE.DoubleSide;
             }, 
-            2000
+            points=>{
+                points.material.size = 0.1;
+                points.material.sizeAttenuation = true;
+            }
         ),
         meshCallback: mesh => { mesh.material.wireframe = true;} // This callback will not be used as the callback provided to the TileLoader takes priority
     });
@@ -198,13 +220,15 @@ higher performance when displaying the same Tileset many times.
 
 ```
 // First create the InstancedTileLoader that will manage caching
-const instancedTileLoader = new InstancedTileLoader(scene, mesh => {
-    //// Insert code to be called on every newly decoded mesh e.g.:
-    mesh.material.wireframe = false;
-    mesh.material.side = THREE.DoubleSide;
-}, 
-1000, // cache size as in the number of tiles cached in memory
-100, // max number of tilesets from the same source
+const instancedTileLoader = new InstancedTileLoader(
+    scene, 
+    100, // cache size as in the number of tiles cached in memory
+    1, // max number of tilesets from the same source
+    mesh => {
+        //// Insert code to be called on every newly decoded mesh e.g.:
+        mesh.material.wireframe = false;
+        mesh.material.side = THREE.DoubleSide;
+    }
 );
 
 // then create some tilesets

package/package.json

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

package/src/decoder/B3DMDecoder.js

@@ -5,9 +5,9 @@ import {FeatureTable, BatchTable} from './FeatureTable';
 
 const gltfLoader = new GLTFLoader();
 const dracoLoader = new DRACOLoader();
-const tempMatrix = new THREE.Matrix4();
 dracoLoader.setDecoderPath('https://www.gstatic.com/draco/versioned/decoders/1.4.3/');
 gltfLoader.setDRACOLoader(dracoLoader);
+const tempMatrix = new THREE.Matrix4();
 const zUpToYUpMatrix = new THREE.Matrix4();
 zUpToYUpMatrix.set(1,0,0,0,
 			0,0,-1,0,
@@ -16,7 +16,7 @@ zUpToYUpMatrix.set(1,0,0,0,
 
 //const legacyGLTFLoader = new LegacyGLTFLoader();
 
-function parseB3DM(arrayBuffer, meshCallback, zUpToYUp) {
+function parseB3DM(arrayBuffer, meshCallback, geometricError, zUpToYUp) {
 	const dataView = new DataView(arrayBuffer);
 
 	const magic =
@@ -75,6 +75,7 @@ function parseB3DM(arrayBuffer, meshCallback, zUpToYUp) {
 			model.scene.traverse((o) => {
 				
 				if (o.isMesh) {
+					o.geometricError = geometricError
 					if(zUpToYUp){
 						o.applyMatrix4(zUpToYUpMatrix);
 					}
@@ -96,6 +97,7 @@ const B3DMDecoder = {
 	parseB3DMInstanced: (arrayBuffer, meshCallback, maxCount, zUpToYUp) => { // expects GLTF with one node level
 
 		return parseB3DM(arrayBuffer, meshCallback, zUpToYUp).then(mesh => {
+			// todo several meshes in a single gltf
 			let instancedMesh;
 			mesh.updateWorldMatrix(false, true)
 			mesh.traverse(child => {

package/src/index.js

@@ -49,7 +49,7 @@ function initScene() {
     const scene = new THREE.Scene();
     scene.matrixAutoUpdate = false;
     //scene.matrixWorldAutoUpdate = false;
-    scene.background = new THREE.Color(0xffffff);
+    scene.background = new THREE.Color(0x888888);
     scene.add(new THREE.AmbientLight(0xFFFFFF, 1.0));
     
     /* const light = new THREE.PointLight(0xbbbbff, 2, 5000);
@@ -112,8 +112,8 @@ function initStats(dom) {
 
 
 function initCamera(width, height) {
-    const camera = new THREE.PerspectiveCamera(60, width / height, 1, 100000);
-    camera.position.set(15,0,0);
+    const camera = new THREE.PerspectiveCamera(60, width / height, 0.1, 1000);
+    camera.position.set(-0.5,-0.7,10);
     camera.lookAt(0,0,0);
 
     camera.matrixAutoUpdate = true;
@@ -122,34 +122,32 @@ function initCamera(width, height) {
 
 function initTileset(scene, gem) {
 
-    const tileLoader = new TileLoader(mesh => {
+    const tileLoader = new TileLoader(100, mesh => {
         //// Insert code to be called on every newly decoded mesh e.g.:
         mesh.material.wireframe = false;
         mesh.material.side = THREE.DoubleSide;
         mesh.material.metalness = 0.0
-    }, 100);
+    }, points=>{
+        points.material.size = Math.min(1.0,0.5*Math.sqrt(points.geometricError));
+        points.material.sizeAttenuation = true;
+    });
 
     const ogc3DTile = new OGC3DTile({
         url: "https://storage.googleapis.com/ogc-3d-tiles/baltimore/tileset.json",
+        //url: "http://localhost:8080/tileset.json",
         //url: "https://storage.googleapis.com/ogc-3d-tiles/berlinTileset/tileset.json",
-        geometricErrorMultiplier: gem,
+        geometricErrorMultiplier: 1,
         loadOutsideView: false,
         tileLoader: tileLoader,
         //occlusionCullingService: occlusionCullingService,
         static: false,
         centerModel:true,
         renderer: renderer,
-         onLoadCallback: (tile)=>{ // move tileset base to origin
-            if (!!tile.json.boundingVolume.region) {
-                const halfHeight = (tile.json.boundingVolume.region[5] - tile.json.boundingVolume.region[4]) * 0.5;
-                ogc3DTile.translateOnAxis(new THREE.Vector3(0, 1, 0), halfHeight);
-            }
-        } 
-
+         
     });
     setIntervalAsync(function () {
         ogc3DTile.update(camera);
-    }, 20);
+    }, 10);
 
     
 
@@ -165,12 +163,13 @@ function initTileset(scene, gem) {
 
 
 function createInstancedTileLoader(scene) {
-    return new InstancedTileLoader(scene, mesh => {
-        //// Insert code to be called on every newly decoded mesh e.g.:
-        mesh.material.wireframe = false;
-        mesh.material.side = THREE.DoubleSide;
-        mesh.material.metalness = 0.0;
-    }, 0, 1);
+    return new InstancedTileLoader(scene, 100, 1,
+        mesh => {
+            //// Insert code to be called on every newly decoded mesh e.g.:
+            mesh.material.wireframe = false;
+            mesh.material.side = THREE.DoubleSide;
+            mesh.material.metalness = 0.0;
+        });
 }
 function initInstancedTilesets(instancedTileLoader) {
 
@@ -183,7 +182,8 @@ function initInstancedTilesets(instancedTileLoader) {
 
     const tileset = new InstancedOGC3DTile({
         url: "https://storage.googleapis.com/ogc-3d-tiles/berlinTileset/tileset.json",
-        geometricErrorMultiplier: 1.0,
+        //url: "http://localhost:8080/tileset.json",
+        geometricErrorMultiplier: 0.1,
         loadOutsideView: true,
         tileLoader: instancedTileLoader,
         static: false,
@@ -235,7 +235,7 @@ function initController(camera, dom) {
 
 
     controller.minDistance = 0.1;
-    controller.maxDistance = 100000;
+    controller.maxDistance = 1000;
     controller.update();
     return controller;
 }

package/src/tileset/OGC3DTile.js

@@ -28,6 +28,7 @@ class OGC3DTile extends THREE.Object3D {
      *   loadOutsideView: Boolean,
      *   tileLoader : TileLoader,
      *   meshCallback: function,
+     *   pointsCallback: function,
      *   cameraOnLoad: camera,
      *   parentTile: OGC3DTile,
      *   onLoadCallback: function,
@@ -45,11 +46,16 @@ class OGC3DTile extends THREE.Object3D {
         if (!!properties.tileLoader) {
             this.tileLoader = properties.tileLoader;
         } else {
-            this.tileLoader = new TileLoader(!properties.meshCallback ?
-                mesh => {
+            this.tileLoader = new TileLoader(
+                200,
+                !properties.meshCallback ? mesh => {
                     mesh.material.wireframe = false;
                     mesh.material.side = THREE.DoubleSide;
-                } : properties.meshCallback);
+                } : properties.meshCallback,
+                !properties.pointsCallback ? points => {
+                    points.material.size = 0.1;
+                    points.material.sizeAttenuation = true;
+                } : properties.pointsCallback);
         }
         // set properties general to the entire tileset
         this.geometricErrorMultiplier = !!properties.geometricErrorMultiplier ? properties.geometricErrorMultiplier : 1.0;
@@ -214,7 +220,7 @@ class OGC3DTile extends THREE.Object3D {
             }
 
             if (!!url) {
-                if (url.includes(".b3dm")) {
+                if (url.includes(".b3dm") || url.includes(".glb") || url.includes(".gltf")) {
                     self.contentURL = url;
                     if(!!self.json.boundingVolume.region){
                         //self.applyMatrix4(zUpToYUp);
@@ -248,7 +254,8 @@ class OGC3DTile extends THREE.Object3D {
                         return self.calculateDistanceToCamera(self.cameraOnLoad);
                     }, () => self.getSiblings(), 
                     self.level,
-                    !!this.json.boundingVolume.region
+                    !!self.json.boundingVolume.region,
+                    self.geometricError
                     );
                 } else if (url.includes(".json")) {
                     self.tileLoader.get(self.abortController, this.uuid, url, json => {
@@ -371,6 +378,9 @@ class OGC3DTile extends THREE.Object3D {
                 if (allChildrenReady) {
                     self.changeContentVisibility(false);
                 }
+                else{
+                    console.log("loading...")
+                }
             }
         }
 
@@ -542,10 +552,10 @@ class OGC3DTile extends THREE.Object3D {
         function setMeshVisibility(mesh, visibility) {
             mesh.material.visible = visibility;
             if (!!visibility) {
-                self.meshesToDisplay++;
+                self.meshesToDisplay=1;
                 mesh.onAfterRender = () => {
                     delete mesh.onAfterRender;
-                    self.meshesDisplayed++;
+                    self.meshesDisplayed=1;
                 };
             }
 

package/src/tileset/TileLoader.js

@@ -3,12 +3,24 @@ import { B3DMDecoder } from "../decoder/B3DMDecoder";
 import { setIntervalAsync } from 'set-interval-async/dynamic';
 import { initial } from 'lodash';
 import * as THREE from 'three';
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
+import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
 
 let concurentDownloads = 0;
+const zUpToYUpMatrix = new THREE.Matrix4();
+zUpToYUpMatrix.set(1, 0, 0, 0,
+    0, 0, -1, 0,
+    0, 1, 0, 0,
+    0, 0, 0, 1);
+const gltfLoader = new GLTFLoader();
+const dracoLoader = new DRACOLoader();
+dracoLoader.setDecoderPath('https://www.gstatic.com/draco/versioned/decoders/1.4.3/');
+gltfLoader.setDRACOLoader(dracoLoader);
 
 class TileLoader {
-    constructor(meshCallback, maxCachedItems) {
+    constructor(maxCachedItems, meshCallback, pointsCallback) {
         this.meshCallback = meshCallback;
+        this.pointsCallback = pointsCallback;
         this.cache = new LinkedHashMap();
         this.maxCachedItems = !!maxCachedItems ? maxCachedItems : 100;
         this.register = {};
@@ -21,8 +33,8 @@ class TileLoader {
         this.init();
     }
 
-    init(){
-        
+    init() {
+
         const self = this;
         setIntervalAsync(() => {
             self.download();
@@ -33,7 +45,7 @@ class TileLoader {
             do {
                 loaded = self.loadBatch();
             } while (loaded > 0 && (Date.now() - start) <= 0)
-        
+
         }, 10);
     }
 
@@ -67,7 +79,7 @@ class TileLoader {
         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];
@@ -79,7 +91,7 @@ class TileLoader {
         }
         return 1;
     }
-    
+
     getNextDownloads() {
         let smallestDistance = Number.MAX_VALUE;
         let closest = -1;
@@ -94,7 +106,7 @@ class TileLoader {
         }
         if (this.nextDownloads.length > 0) return;
         for (let i = this.downloads.length - 1; i >= 0; i--) {
-            const dist = this.downloads[i].distanceFunction()*this.downloads[i].level;
+            const dist = this.downloads[i].distanceFunction() * this.downloads[i].level;
             if (dist < smallestDistance) {
                 smallestDistance = dist;
                 closest = i;
@@ -111,12 +123,12 @@ class TileLoader {
             }
         }
     }
-    
+
     getNextReady() {
         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]);
             }
@@ -142,19 +154,19 @@ class TileLoader {
     }
 
 
-    get(abortController, tileIdentifier, path, callback, distanceFunction, getSiblings, level, zUpToYUp) {
+    get(abortController, tileIdentifier, path, callback, distanceFunction, getSiblings, level, zUpToYUp, geometricError) {
         const self = this;
         const key = simplifyPath(path);
 
         const realAbortController = new AbortController();
-        abortController.signal.addEventListener("abort", ()=>{
-            if(!self.register[key] || Object.keys(self.register[key]).length == 0){
+        abortController.signal.addEventListener("abort", () => {
+            if (!self.register[key] || Object.keys(self.register[key]).length == 0) {
                 realAbortController.abort();
             }
         })
 
-        if (!path.includes(".b3dm") && !path.includes(".json")) {
-            console.error("the 3DTiles cache can only be used to load B3DM and json data");
+        if (!path.includes(".b3dm") && !path.includes(".json") && !path.includes(".gltf") && !path.includes(".glb")) {
+            console.error("the 3DTiles cache can only be used to load B3DM, gltf and json data");
             return;
         }
         if (!self.register[key]) {
@@ -173,7 +185,7 @@ class TileLoader {
             if (path.includes(".b3dm")) {
                 downloadFunction = () => {
                     concurentDownloads++;
-                    fetch(path, {signal: realAbortController.signal}).then(result => {
+                    fetch(path, { signal: realAbortController.signal }).then(result => {
                         concurentDownloads--;
                         if (!result.ok) {
                             console.error("could not load tile with path : " + path)
@@ -182,33 +194,62 @@ class TileLoader {
                         return result.arrayBuffer();
 
                     })
-                    .then(resultArrayBuffer=>{
-                        return B3DMDecoder.parseB3DM(resultArrayBuffer, self.meshCallback, zUpToYUp);
-                    })
-                    .then(mesh=>{
-                        self.cache.put(key, mesh);
+                        .then(resultArrayBuffer => {
+                            return B3DMDecoder.parseB3DM(resultArrayBuffer, self.meshCallback, geometricError, zUpToYUp);
+                        })
+                        .then(mesh => {
+                            self.cache.put(key, mesh);
                             self.checkSize();
                             this.meshReceived(self.cache, self.register, key, distanceFunction, getSiblings, level, tileIdentifier);
-                    })
-                    .catch(()=>{});;
+                        })
+                        .catch(() => { });;
+                }
+            } else if (path.includes(".glb") || path.includes(".gltf")) {
+                downloadFunction = () => {
+                    concurentDownloads++;
+                    gltfLoader.load(path, gltf => {
+                        gltf.scene.traverse((o) => {
+                            o.geometricError = geometricError;
+                            if (o.isMesh) {
+                                if (zUpToYUp) {
+                                    o.applyMatrix4(zUpToYUpMatrix);
+                                }
+                                if (!!self.meshCallback) {
+                                    self.meshCallback(o);
+                                }
+                            }
+                            if (o.isPoints) {
+                                if (zUpToYUp) {
+                                    o.applyMatrix4(zUpToYUpMatrix);
+                                }
+                                if (!!self.pointsCallback) {
+                                    self.pointsCallback(o);
+                                }
+                            }
+                        });
+                        self.cache.put(key, gltf.scene);
+                        self.checkSize();
+                        self.meshReceived(self.cache, self.register, key, distanceFunction, getSiblings, level, tileIdentifier);
+                    });
+
                 }
             } else if (path.includes(".json")) {
                 downloadFunction = () => {
                     concurentDownloads++;
-                    fetch(path, {signal: realAbortController.signal}).then(result => {
+                    fetch(path, { signal: realAbortController.signal }).then(result => {
                         concurentDownloads--;
                         if (!result.ok) {
                             console.error("could not load tile with path : " + path)
                             throw new Error(`couldn't load "${path}". Request failed with status ${result.status} : ${result.statusText}`);
                         }
                         return result.json();
-                        
+
                     }).then(json => {
                         self.cache.put(key, json);
                         self.checkSize();
-                        this.meshReceived(self.cache, self.register, key);
+                        self.meshReceived(self.cache, self.register, key);
                     })
-                    .catch(e=>console.error("tile download aborted"));
+                        .catch(e => console.error("tile download aborted"));
                 }
             }
             this.scheduleDownload({
@@ -228,7 +269,7 @@ class TileLoader {
 
     invalidate(path, tileIdentifier) {
         const key = simplifyPath(path);
-        if(!!this.register[key]){
+        if (!!this.register[key]) {
             delete this.register[key][tileIdentifier];
         }
     }

package/src/tileset/instanced/InstancedTile.js

@@ -212,14 +212,15 @@ class InstancedTile extends THREE.Object3D {
             }
 
             if (!!url) {
-                if (url.includes(".b3dm")) {
+                if (url.includes(".b3dm")|| url.includes(".glb") || url.includes(".gltf")) {
                     self.contentURL = url;
                     
                     self.tileLoader.get(self.abortController, url, self.uuid, self, !self.cameraOnLoad ? () => 0 : () => {
                         return self.calculateDistanceToCamera(self.cameraOnLoad);
                     }, () => self.getSiblings(), 
                     self.level,
-                    !!self.json.boundingVolume.region);
+                    !!self.json.boundingVolume.region,
+                    self.geometricError);
                 } else if (url.includes(".json")) {
                     self.tileLoader.get(self.abortController, url, self.uuid, self);
 

package/src/tileset/instanced/InstancedTileLoader.js

@@ -4,11 +4,23 @@ import { setIntervalAsync } from 'set-interval-async/dynamic';
 import * as THREE from 'three';
 import { MeshTile } from './MeshTile';
 import { JsonTile } from './JsonTile';
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
+import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
+
 
 let concurentDownloads = 0;
+const gltfLoader = new GLTFLoader();
+const dracoLoader = new DRACOLoader();
+dracoLoader.setDecoderPath('https://www.gstatic.com/draco/versioned/decoders/1.4.3/');
+gltfLoader.setDRACOLoader(dracoLoader);
+const zUpToYUpMatrix = new THREE.Matrix4();
+zUpToYUpMatrix.set(1, 0, 0, 0,
+    0, 0, -1, 0,
+    0, 1, 0, 0,
+    0, 0, 0, 1);
 
 class InstancedTileLoader {
-    constructor(scene, meshCallback, maxCachedItems, maxInstances) {
+    constructor(scene, maxCachedItems, maxInstances, meshCallback) {
         this.meshCallback = meshCallback;
         this.maxInstances = maxInstances;
         this.cache = new LinkedHashMap();
@@ -76,6 +88,43 @@ class InstancedTileLoader {
                             
                     })
                     .catch(e=>console.error(e));
+                }if(nextDownload.path.includes(".glb") || (nextDownload.path.includes(".gltf"))){
+                    gltfLoader.load(nextDownload.path, gltf => {
+                        gltf.scene.traverse((o) => {
+                            o.geometricError = nextDownload.geometricError;
+                            if (o.isMesh) {
+                                if (nextDownload.zUpToYUp) {
+                                    o.applyMatrix4(zUpToYUpMatrix);
+                                }
+                                if (!!self.meshCallback) {
+                                    self.meshCallback(o);
+                                }
+                            }
+                            if (o.isPoints) {
+                                console.error("instanced point cloud is not supported");
+                            }
+                        });
+                        let instancedMesh;
+                        gltf.scene.updateWorldMatrix(false, true)
+                        gltf.scene.traverse(child => {
+                            //TODO several meshes in a single gltf
+                            if (child.isMesh) {
+                                instancedMesh = new THREE.InstancedMesh(child.geometry, child.material, self.maxInstances);
+                                instancedMesh.baseMatrix = child.matrixWorld;
+                            }
+                            
+                        });
+                        self.ready.unshift(nextDownload);
+                        if(!instancedMesh){
+                            gltf.scene.traverse(c=>{
+                                if(c.dispose) c.dispose();
+                                if(c.material) c.material.dispose();
+                            });
+                        }else{
+                            nextDownload.tile.setObject(instancedMesh);
+                        }
+                    });
+                    
                 }else if(nextDownload.path.includes(".json")){
                     concurentDownloads++;
                     fetch(nextDownload.path, {signal: nextDownload.abortController.signal}).then(result => {
@@ -138,12 +187,12 @@ class InstancedTileLoader {
         }
     }
 
-    get(abortController, path, uuid, instancedOGC3DTile, distanceFunction, getSiblings, level, zUpToYUp) {
+    get(abortController, path, uuid, instancedOGC3DTile, distanceFunction, getSiblings, level, zUpToYUp, geometricError) {
         const self = this;
         const key = simplifyPath(path);
 
-        if (!path.includes(".b3dm") && !path.includes(".json")) {
-            console.error("the 3DTiles cache can only be used to load B3DM and json data");
+        if (!path.includes(".b3dm") && !path.includes(".json") && !path.includes(".glb") && !path.includes(".gltf")) {
+            console.error("the 3DTiles cache can only be used to load B3DM, gltf and json data");
             return;
         }
 
@@ -153,7 +202,7 @@ class InstancedTileLoader {
             return;
         } else {
 
-            if (path.includes(".b3dm")) {
+            if (path.includes(".b3dm") || path.includes(".glb") || path.includes(".gltf")) {
                 const tile = new MeshTile(self.scene);
                 tile.addInstance(instancedOGC3DTile);
                 
@@ -175,6 +224,7 @@ class InstancedTileLoader {
                     level: level,
                     uuid: uuid,
                     zUpToYUp: zUpToYUp,
+                    geometricError: geometricError,
                     shouldDoDownload: () => {
                         return true;
                     },