@jdultra/threedtiles 7.0.2 → 8.0.0

package/.babelrc

@@ -0,0 +1,8 @@
+{
+    "presets": [
+        "@babel/preset-env"
+    ],
+    "plugins": [
+        "@babel/plugin-syntax-dynamic-import"
+    ]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jdultra/threedtiles",
-    "version": "7.0.2",
+    "version": "8.0.0",
     "description": "An OGC 3DTiles viewer for Three.js",
     "main": "tileset.js",
     "scripts": {
@@ -35,17 +35,18 @@
         "uuid": "^8.3.2"
     },
     "devDependencies": {
-        "@babel/core": "^7.20.12",
-        "@babel/preset-env": "^7.20.2",
-        "babel-loader": "^8.3.0",
+        "@babel/core": "^7.21.4",
+        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+        "@babel/preset-env": "^7.21.4",
+        "babel-loader": "^9.1.2",
         "copy-webpack-plugin": "^6.3.2",
         "core-js": "^3.27.1",
         "html-loader": "^1.3.2",
         "html-webpack-plugin": "^4.5.0",
         "mini-css-extract-plugin": "^1.6.2",
-        "webpack": "^5.76.2",
-        "webpack-cli": "4.9.1",
-        "webpack-dev-server": "^4.11.1",
+        "webpack": "^5.79.0",
+        "webpack-cli": "^5.0.1",
+        "webpack-dev-server": "^4.13.2",
         "webpack-glsl-loader": "^1.0.1",
         "whatwg-fetch": "^3.5.0"
     }

package/src/decoder/B3DMDecoder.js

@@ -1,109 +1,114 @@
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
 import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
+import { KTX2Loader } from "three/examples/jsm/loaders/KTX2Loader";
 import * as THREE from 'three';
-import {FeatureTable, BatchTable} from './FeatureTable';
+import { FeatureTable, BatchTable } from './FeatureTable';
 
-const gltfLoader = new GLTFLoader();
-const dracoLoader = new DRACOLoader();
-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,
-			0,1,0,0,
-			0,0,0,1);
-
-//const legacyGLTFLoader = new LegacyGLTFLoader();
+zUpToYUpMatrix.set(
+	1, 0, 0, 0,
+	0, 0, -1, 0,
+	0, 1, 0, 0,
+	0, 0, 0, 1);
+
+export class B3DMDecoder {
+	constructor(renderer) {
+		this.gltfLoader = new GLTFLoader();
+		const dracoLoader = new DRACOLoader();
+		dracoLoader.setDecoderPath('https://www.gstatic.com/draco/versioned/decoders/1.4.3/');
+		this.gltfLoader.setDRACOLoader(dracoLoader);
+		if (renderer) {
+			const ktx2Loader = new KTX2Loader();
+			ktx2Loader.setTranscoderPath('https://storage.googleapis.com/ogc-3d-tiles/basis/').detectSupport(renderer);
+			this.gltfLoader.setKTX2Loader(ktx2Loader)
+		}
 
-function parseB3DM(arrayBuffer, meshCallback, geometricError, zUpToYUp) {
-	const dataView = new DataView(arrayBuffer);
+		this.tempMatrix = new THREE.Matrix4();
+	}
 
-	const magic =
-		String.fromCharCode(dataView.getUint8(0)) +
-		String.fromCharCode(dataView.getUint8(1)) +
-		String.fromCharCode(dataView.getUint8(2)) +
-		String.fromCharCode(dataView.getUint8(3));
-	console.assert(magic === 'b3dm');
+	parseB3DM(arrayBuffer, meshCallback, geometricError, zUpToYUp) {
+		const dataView = new DataView(arrayBuffer);
 
-	//const version = dataView.getUint32(4, true);
-	//console.assert(version === 1);
+		const magic =
+			String.fromCharCode(dataView.getUint8(0)) +
+			String.fromCharCode(dataView.getUint8(1)) +
+			String.fromCharCode(dataView.getUint8(2)) +
+			String.fromCharCode(dataView.getUint8(3));
+		console.assert(magic === 'b3dm');
 
-	const byteLength = dataView.getUint32(8, true);
-	console.assert(byteLength === arrayBuffer.byteLength);
+		const byteLength = dataView.getUint32(8, true);
+		console.assert(byteLength === arrayBuffer.byteLength);
 
-	const featureTableJSONByteLength = dataView.getUint32(12, true);
-	const featureTableBinaryByteLength = dataView.getUint32(16, true);
-	const batchTableJSONByteLength = dataView.getUint32(20, true);
-	const batchTableBinaryByteLength = dataView.getUint32(24, true);
+		const featureTableJSONByteLength = dataView.getUint32(12, true);
+		const featureTableBinaryByteLength = dataView.getUint32(16, true);
+		const batchTableJSONByteLength = dataView.getUint32(20, true);
+		const batchTableBinaryByteLength = dataView.getUint32(24, true);
 
-	const featureTableStart = 28;
-	const featureTable = new FeatureTable(arrayBuffer, featureTableStart, featureTableJSONByteLength, featureTableBinaryByteLength);
+		const featureTableStart = 28;
+		const featureTable = new FeatureTable(arrayBuffer, featureTableStart, featureTableJSONByteLength, featureTableBinaryByteLength);
 
-	const batchTableStart = featureTableStart + featureTableJSONByteLength + featureTableBinaryByteLength;
-	const batchTable = new BatchTable(arrayBuffer, featureTable.getData('BATCH_LENGTH'), batchTableStart, batchTableJSONByteLength, batchTableBinaryByteLength);
+		const batchTableStart = featureTableStart + featureTableJSONByteLength + featureTableBinaryByteLength;
+		const batchTable = new BatchTable(arrayBuffer, featureTable.getData('BATCH_LENGTH'), batchTableStart, batchTableJSONByteLength, batchTableBinaryByteLength);
 
-	const glbStart = batchTableStart + batchTableJSONByteLength + batchTableBinaryByteLength;
-	const glbBytes = new Uint8Array(arrayBuffer, glbStart, byteLength - glbStart);
+		const glbStart = batchTableStart + batchTableJSONByteLength + batchTableBinaryByteLength;
+		const glbBytes = new Uint8Array(arrayBuffer, glbStart, byteLength - glbStart);
 
 
-	const gltfBuffer = glbBytes.slice().buffer;
+		const gltfBuffer = glbBytes.slice().buffer;
 
 
-	return new Promise((resolve, reject) => {
+		return new Promise((resolve, reject) => {
 
-		gltfLoader.parse(gltfBuffer, null, model => {
+			this.gltfLoader.parse(gltfBuffer, null, model => {
 
-			////TODO
+				////TODO
 
-			//model.batchTable = b3dm.batchTable;
-			//model.featureTable = b3dm.featureTable;
+				//model.batchTable = b3dm.batchTable;
+				//model.featureTable = b3dm.featureTable;
 
-			//model.scene.batchTable = b3dm.batchTable;
-			//model.scene.featureTable = b3dm.featureTable;
+				//model.scene.batchTable = b3dm.batchTable;
+				//model.scene.featureTable = b3dm.featureTable;
 
-			//const scene = mergeColoredObject(model.scene);
+				//const scene = mergeColoredObject(model.scene);
 
-			//model.scene.applyMatrix4(ytozUpMatrix);
+				//model.scene.applyMatrix4(ytozUpMatrix);
 
-			const rtcCenter = featureTable.getData('RTC_CENTER');
-			if (rtcCenter) {
-				tempMatrix.makeTranslation(rtcCenter[0], rtcCenter[1], rtcCenter[2])
-				model.scene.applyMatrix4(tempMatrix);
-			}else if(!!model.userData.gltfExtensions && !!model.userData.gltfExtensions.CESIUM_RTC){
-				tempMatrix.makeTranslation(model.userData.gltfExtensions.CESIUM_RTC.center[0], model.userData.gltfExtensions.CESIUM_RTC.center[1], model.userData.gltfExtensions.CESIUM_RTC.center[2])
-				model.scene.applyMatrix4(tempMatrix);
-			}
-			
-			if(!zUpToYUp){
-				model.scene.applyMatrix4(zUpToYUpMatrix);
-			}
-			
-			model.scene.traverse((o) => {
-				
-				if (o.isMesh) {
-					o.geometricError = geometricError
-					if(zUpToYUp){
-						o.applyMatrix4(zUpToYUpMatrix);
-					}
-					if (!!meshCallback) {
-						meshCallback(o);
-					}
+				const rtcCenter = featureTable.getData('RTC_CENTER');
+				if (rtcCenter) {
+					this.tempMatrix.makeTranslation(rtcCenter[0], rtcCenter[1], rtcCenter[2])
+					model.scene.applyMatrix4(this.tempMatrix);
+				} else if (!!model.userData.gltfExtensions && !!model.userData.gltfExtensions.CESIUM_RTC) {
+					this.tempMatrix.makeTranslation(model.userData.gltfExtensions.CESIUM_RTC.center[0], model.userData.gltfExtensions.CESIUM_RTC.center[1], model.userData.gltfExtensions.CESIUM_RTC.center[2])
+					model.scene.applyMatrix4(this.tempMatrix);
+				}
 
+				if (!zUpToYUp) {
+					model.scene.applyMatrix4(zUpToYUpMatrix);
 				}
+
+				model.scene.traverse((o) => {
+
+					if (o.isMesh) {
+						o.geometricError = geometricError
+						if (zUpToYUp) {
+							o.applyMatrix4(zUpToYUpMatrix);
+						}
+						if (!!meshCallback) {
+							meshCallback(o);
+						}
+
+					}
+				});
+				resolve(model.scene);
+			}, error => {
+				console.error(error);
 			});
-			resolve(model.scene);
-		}, error => {
-			console.error(error);
 		});
-	});
-}
+	}
 
-const B3DMDecoder = {
-	parseB3DM: parseB3DM,
-	parseB3DMInstanced: (arrayBuffer, meshCallback, maxCount, zUpToYUp) => { // expects GLTF with one node level
+	parseB3DMInstanced(arrayBuffer, meshCallback, maxCount, zUpToYUp) { // expects GLTF with one node level
 
-		return parseB3DM(arrayBuffer, meshCallback, zUpToYUp).then(mesh => {
+		return this.parseB3DM(arrayBuffer, meshCallback, zUpToYUp).then(mesh => {
 			// todo several meshes in a single gltf
 			let instancedMesh;
 			mesh.updateWorldMatrix(false, true)
@@ -117,130 +122,4 @@ const B3DMDecoder = {
 		});
 
 	}
-}
-
-/**
- * //TODO find something else than this workaround
- * 
- * Because B3DM doesn't support colored faces, they are usually encoded as separate meshes each one with a global color.
- * However, when a mesh has many different face colors, this becomes very inneficient.
- * This method doesn't fix the slow decoding of the GLTFLoader but at least merges meshes together and transfers the face color to vertex color 
- * which is much more efficient at render time. 
- * Textured meshes with the same texture are also merged and color is discarded
- * 
- * Big assumption! all the meshes are assumed to have the same transformation matrix
- * 
- * @param {*} scene 
- * @returns 
- */
-/*function mergeColoredObject(scene) {
-	
-	const coloredMeshes = {};
-	const texturedMeshes = {};
-	scene.traverse((element) => {
-		if (element.isMesh) {
-			if (element.material) {
-				// dispose materials
-				if (element.material.length) {
-					// not supported
-				}
-				else {
-					if (!element.material.map) {
-						let color = element.material.color;
-						color = "rgb("+Math.floor(color.r*255)+","+Math.floor(color.g*255)+","+Math.floor(color.b*255)+")";
-						if (!coloredMeshes[color]) {
-							coloredMeshes[color] = [];
-						}
-						coloredMeshes[color].push(element);
-					} else {
-						if (!texturedMeshes[element.material.map]) {
-							texturedMeshes[element.material.map] = [];
-						}
-						texturedMeshes[element.material.map].push(element);
-					}
-				}
-			}
-		}
-	});
-
-	let coloredMeshMaterial;
-	const fullColoredGeometriesToMerge = [];
-	for (const color in coloredMeshes) {
-		if (coloredMeshes.hasOwnProperty(color)) {
-			const threeColor = new Color(color);
-			//const geometriesToMerge = [];
-			coloredMeshes[color].forEach(mesh => {
-				if(!coloredMeshMaterial){
-					coloredMeshMaterial = mesh.material.clone();
-					delete coloredMeshMaterial.color;
-					coloredMeshMaterial.vertexColors = true;
-				}
-				const colors = [];
-			for (let i = 0; i < mesh.geometry.attributes.position.count; i++) {
-				colors.push(threeColor.r);
-				colors.push(threeColor.g);
-				colors.push(threeColor.b);
-			}
-			mesh.geometry.setAttribute('color', new BufferAttribute(new Float32Array(colors), 3));
-
-			fullColoredGeometriesToMerge.push(mesh.geometry);
-			});
-			
-		}
-	}
-
-	let mergedColoredMesh;
-	if(fullColoredGeometriesToMerge.length>0){
-		let mergedColoredGeometry = BufferGeometryUtils.mergeBufferGeometries(fullColoredGeometriesToMerge, false);
-		mergedColoredMesh = new Mesh(mergedColoredGeometry, coloredMeshMaterial);
-		//mergedColoredMesh.matrix = matrix;
-		for (const color in coloredMeshes) {
-			if (coloredMeshes.hasOwnProperty(color)) {
-				coloredMeshes[color].forEach(mesh => {
-					mesh.material.dispose();
-					mesh.geometry.dispose();
-				});
-			}
-		}
-	}
-	
-
-	const mergedTexturedMeshes = [];
-	for(const map in texturedMeshes){
-		if (texturedMeshes.hasOwnProperty(map)) {
-			if(texturedMeshes[map].length==1){
-				mergedTexturedMeshes.push(texturedMeshes[map][0]);
-				continue;
-			}
-			const geometries = [];
-			let material;
-			texturedMeshes[map].forEach(mesh => {
-				if(!material){
-					material = mesh.material.clone();
-					delete material.color;
-					material.vertexColors = false;
-				}
-				geometries.push(mesh.geometry);
-			});
-			
-			const mergedGeometry = BufferGeometryUtils.mergeBufferGeometries(geometries, false);
-			const mesh = new Mesh(mergedGeometry, material);
-			//mesh.matrix = matrix;
-			mergedTexturedMeshes.push(mesh);
-			texturedMeshes[map].forEach(mesh => {
-				mesh.material.dispose();
-				mesh.geometry.dispose();
-			});
-		}
-	}
-
-	scene.clear();
-	if(!!mergedColoredMesh) scene.add(mergedColoredMesh);
-	mergedTexturedMeshes.forEach(mesh=>scene.add(mesh));
-	console.log();
-	scene.matrix = new THREE.Matrix4();
-	return scene;
-}*/
-
-export { B3DMDecoder }
-
+}

package/src/index.js

@@ -13,6 +13,9 @@ import { InstancedOGC3DTile } from "./tileset/instanced/InstancedOGC3DTile.js"
 import { InstancedTileLoader } from "./tileset/instanced/InstancedTileLoader.js"
 import { Sky } from 'three/addons/objects/Sky.js';
 
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
+import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
+import { KTX2Loader } from "three/examples/jsm/loaders/KTX2Loader";
 
 const occlusionCullingService = new OcclusionCullingService();
 occlusionCullingService.setSide(THREE.DoubleSide);
@@ -23,6 +26,43 @@ const camera = initCamera(domContainer.offsetWidth, domContainer.offsetHeight);
 const stats = initStats(domContainer);
 const renderer = initRenderer(camera, domContainer);
 const ogc3DTiles = initTileset(scene, 2.0);
+//const instancedTileLoader = createInstancedTileLoader(scene);
+//const ogc3DTiles = initInstancedTilesets(instancedTileLoader);
+
+
+/*const gltfLoader = new GLTFLoader();
+const dracoLoader = new DRACOLoader();
+dracoLoader.setDecoderPath('https://www.gstatic.com/draco/versioned/decoders/1.4.3/');
+gltfLoader.setDRACOLoader(dracoLoader);
+
+const ktx2Loader = new KTX2Loader();
+ktx2Loader.setTranscoderPath('jsm/libs/basis/');
+//gltfLoader.setKTX2Loader(ktx2Loader)
+
+
+gltfLoader.load(
+    // resource URL
+    'http://localhost:8080/3/15.glb',
+    // called when the resource is loaded
+    function (gltf) {
+
+        scene.add(gltf.scene);
+
+    },
+    // called while loading is progressing
+    function (xhr) {
+
+        console.log((xhr.loaded / xhr.total * 100) + '% loaded');
+
+    },
+    // called when loading has errors
+    function (error) {
+
+        console.log('An error happened : ' + error);
+
+    }
+);*/
+// Optional: Provide a DRACOLoader instance to decode compressed mesh data
 
 const controller = initController(camera, domContainer);
 
@@ -150,21 +190,26 @@ function initStats(dom) {
 
 function initTileset(scene, gem) {
 
-    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
-    }, points => {
-        points.material.size = Math.min(1.0, 0.5 * Math.sqrt(points.geometricError));
-        points.material.sizeAttenuation = true;
+    const tileLoader = new TileLoader({
+        renderer: renderer,
+        maxCachedItems: 100,
+        meshCallback: 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
+        },
+        pointsCallback: 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/berlinTileset/tileset.json",
-        url: "https://storage.googleapis.com/ogc-3d-tiles/ayutthaya/tiledWithSkirts/tileset.json",
-        //url: "http://localhost:8080/tileset.json",
-        geometricErrorMultiplier: 1,
+        //url: "https://storage.googleapis.com/ogc-3d-tiles/ayutthaya/tiledWithSkirts/tileset.json",
+        url: "http://localhost:8080/tileset.json",
+        geometricErrorMultiplier: gem,
         loadOutsideView: true,
         tileLoader: tileLoader,
         //occlusionCullingService: occlusionCullingService,
@@ -179,7 +224,7 @@ function initTileset(scene, gem) {
 
     //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.rotateOnAxis(new THREE.Vector3(1, 0, 0), -Math.PI * 0.5) // Z-UP to Y-UP
     //ogc3DTile.translateOnAxis(new THREE.Vector3(0, 0, 1), 1)
     /* 
     ogc3DTile.translateOnAxis(new THREE.Vector3(0, 0, 1), 10) // Z-UP to Y-UP
@@ -191,13 +236,20 @@ function initTileset(scene, gem) {
 
 
 function createInstancedTileLoader(scene) {
-    return new InstancedTileLoader(scene, 100, 1,
-        mesh => {
+    return new InstancedTileLoader(scene, {
+        renderer: renderer,
+        maxCachedItems : 100,
+        maxInstances : 1,
+        meshCallback: 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;
-        });
+        },
+        pointsCallback: points => {
+            points.material.size = Math.min(1.0, 0.5 * Math.sqrt(points.geometricError));
+            points.material.sizeAttenuation = true;
+        }
+    });
 }
 function initInstancedTilesets(instancedTileLoader) {
 
@@ -211,14 +263,14 @@ function initInstancedTilesets(instancedTileLoader) {
     const tileset = new InstancedOGC3DTile({
         //url: "https://storage.googleapis.com/ogc-3d-tiles/berlinTileset/tileset.json",
         url: "http://localhost:8080/tileset.json",
-        geometricErrorMultiplier: 0.1,
+        geometricErrorMultiplier: 1,
         loadOutsideView: true,
         tileLoader: instancedTileLoader,
         static: false,
         centerModel: true,
         renderer: renderer
     });
-    //tileset.rotateOnAxis(new THREE.Vector3(1, 0, 0), Math.PI * -0.5) // Z-UP to Y-UP
+    tileset.rotateOnAxis(new THREE.Vector3(1, 0, 0), Math.PI * -1) // Z-UP to Y-UP
 
     tileset.updateMatrix()
     scene.add(tileset);
@@ -242,18 +294,6 @@ function initInstancedTilesets(instancedTileLoader) {
     //initLODMultiplierSlider(instancedTilesets);
 }
 
-function initLODMultiplierSlider(instancedTilesets) {
-    var slider = document.getElementById("lodMultiplier");
-    var output = document.getElementById("multiplierValue");
-    output.innerHTML = slider.value;
-
-    slider.oninput = () => {
-        instancedTilesets.forEach(tileset => {
-            tileset.setGeometricErrorMultiplier(slider.value * 0.1)
-        })
-        output.innerHTML = slider.value;
-    }
-}
 
 function initCamera(width, height) {
     const camera = new THREE.PerspectiveCamera(60, width / height, 0.1, 20000);

package/src/tileset/OGC3DTile.js

@@ -4,12 +4,14 @@ import { TileLoader } from "./TileLoader";
 import { v4 as uuidv4 } from "uuid";
 import * as path from "path-browserify"
 import { clamp } from "three/src/math/MathUtils";
+import { Octree } from 'three/addons/math/Octree.js';
+import { OctreeHelper } from 'three/addons/helpers/OctreeHelper.js';
 
 const tempSphere = new THREE.Sphere(new THREE.Vector3(0, 0, 0), 1);
 const tempVec1 = new THREE.Vector3(0, 0, 0);
 const tempVec2 = new THREE.Vector3(0, 0, 0);
 const upVector = new THREE.Vector3(0, 1, 0);
-const rendererSize = new THREE.Vector2(1000,1000);
+const rendererSize = new THREE.Vector2(1000, 1000);
 const tempQuaternion = new THREE.Quaternion();
 
 
@@ -46,16 +48,16 @@ class OGC3DTile extends THREE.Object3D {
         if (!!properties.tileLoader) {
             this.tileLoader = properties.tileLoader;
         } else {
-            this.tileLoader = new TileLoader(
-                200,
-                !properties.meshCallback ? mesh => {
-                    mesh.material.wireframe = false;
-                    mesh.material.side = THREE.DoubleSide;
-                } : properties.meshCallback,
-                !properties.pointsCallback ? points => {
-                    points.material.size = 0.1;
-                    points.material.sizeAttenuation = true;
-                } : properties.pointsCallback);
+            const tileLoaderOptions = {};
+            tileLoaderOptions.meshCallback = !properties.meshCallback ? mesh => {
+                mesh.material.wireframe = false;
+                mesh.material.side = THREE.DoubleSide;
+            } : properties.meshCallback;
+            tileLoaderOptions.pointsCallback = !properties.pointsCallback ? points => {
+                points.material.size = 0.1;
+                points.material.sizeAttenuation = true;
+            } : properties.pointsCallback;
+            this.tileLoader = new TileLoader(tileLoaderOptions);
         }
         // set properties general to the entire tileset
         this.geometricErrorMultiplier = !!properties.geometricErrorMultiplier ? properties.geometricErrorMultiplier : 1.0;
@@ -93,6 +95,7 @@ class OGC3DTile extends THREE.Object3D {
         this.centerModel = properties.centerModel;
         this.abortController = new AbortController();
         this.layers.disable(0);
+        this.octree = new Octree();
 
         if (!!properties.json) { // If this tile is created as a child of another tile, properties.json is not null
             self.setup(properties);
@@ -123,11 +126,11 @@ class OGC3DTile extends THREE.Object3D {
                                 (this.json.boundingVolume.region[1] + this.json.boundingVolume.region[3]) * 0.5,
                                 (this.json.boundingVolume.region[4] + this.json.boundingVolume.region[5]) * 0.5,
                                 tempVec1);
-                            
+
                             tempQuaternion.setFromUnitVectors(tempVec1.normalize(), upVector.normalize());
                             self.applyQuaternion(tempQuaternion);
                         }
-                        
+
                         self.translateX(-tempSphere.center.x * self.scale.x);
                         self.translateY(-tempSphere.center.y * self.scale.y);
                         self.translateZ(-tempSphere.center.z * self.scale.z);
@@ -169,7 +172,7 @@ class OGC3DTile extends THREE.Object3D {
             mat.elements = this.json.transform;
             this.applyMatrix4(mat);
         }
-        
+
         // decode volume
         if (!!this.json.boundingVolume) {
             if (!!this.json.boundingVolume.box) {
@@ -190,7 +193,7 @@ class OGC3DTile extends THREE.Object3D {
             this.boundingVolume = properties.parentBoundingVolume;
         }
 
-        
+
 
         if (!!this.json.content) { //if there is a content, json or otherwise, schedule it to be loaded 
             if (!!this.json.content.uri && this.json.content.uri.includes("json")) {
@@ -215,7 +218,7 @@ class OGC3DTile extends THREE.Object3D {
 
         return absoluteURL || absolutePath;
     }
-      
+
     load() {
         var self = this;
         if (self.deleted) return;
@@ -238,12 +241,12 @@ class OGC3DTile extends THREE.Object3D {
             if (!!url) {
                 if (url.includes(".b3dm") || url.includes(".glb") || url.includes(".gltf")) {
                     self.contentURL = url;
-                    
+
                     self.tileLoader.get(self.abortController, this.uuid, url, mesh => {
                         if (!!self.deleted) return;
                         mesh.traverse((o) => {
                             if (o.isMesh) {
-                                
+
                                 o.layers.disable(0);
                                 if (self.occlusionCullingService) {
                                     const position = o.geometry.attributes.position;
@@ -259,17 +262,19 @@ class OGC3DTile extends THREE.Object3D {
                                 //o.material.visible = false;
                             }
                         });
-
+                        //let s = Date.now();
+                        //self.octree.fromGraphNode( mesh );
+                        //console.log(Date.now()-s);
                         self.add(mesh);
                         self.updateWorldMatrix(false, true);
                         // mesh.layers.disable(0);
                         self.meshContent = mesh;
                     }, !self.cameraOnLoad ? () => 0 : () => {
                         return self.calculateDistanceToCamera(self.cameraOnLoad);
-                    }, () => self.getSiblings(), 
-                    self.level,
-                    !!self.json.boundingVolume.region,
-                    self.geometricError
+                    }, () => self.getSiblings(),
+                        self.level,
+                        !!self.json.boundingVolume.region,
+                        self.geometricError
                     );
                 } else if (url.includes(".json")) {
                     self.tileLoader.get(self.abortController, this.uuid, url, json => {
@@ -549,7 +554,7 @@ class OGC3DTile extends THREE.Object3D {
             return;
         }
         self.materialVisibility = visibility
-        
+
         self.meshDisplayed = true;
         if (!!self.meshContent.traverse) {
             self.meshContent.traverse(function (element) {
@@ -597,7 +602,7 @@ class OGC3DTile extends THREE.Object3D {
             return 0;
         }
         const scale = this.matrixWorld.getMaxScaleOnAxis();
-        if(!!this.renderer){
+        if (!!this.renderer) {
             this.renderer.getDrawingBufferSize(rendererSize);
         }
         let s = rendererSize.y;