@jdultra/threedtiles 3.3.1 → 4.0.0

package/README.md

@@ -1,12 +1,14 @@
-# threedtiles
+# T H R E E D T I L E S : http://www.jdultra.com/
 
-3DTiles viewer for three.js
 
-Photogrametry : https://ebeaufay.github.io/ThreedTilesViewer.github.io/
 
-IFC : https://storage.googleapis.com/jdultra.com/ifc/index.html
+The fastest 3DTiles viewer for three.js
 
-Occlusion culling : [https://storage.googleapis.com/jdultra.com/occlusionCulling/index.html](https://storage.googleapis.com/www.jdultra.com/occlusion/index.html)
+[Photogrametry (OBJ conversion)](https://ebeaufay.github.io/ThreedTilesViewer.github.io/)
+
+[PBR material (GlTF conversion)](https://www.jdultra.com/pbr/)
+
+[Occlusion culling (IFC conversion)](https://www.jdultra.com/occlusion/index.html)
 
 Adding a tileset to a scene is as easy as :
 
@@ -26,7 +28,7 @@ It's up to the user to call updates on the tileset. You might call them whenever
 ```
 setInterval(function () {
     ogc3DTile.update(camera);
-}, 200);
+}, 20);
 ```
 
 Currently, the library is limmited to B3DM files.
@@ -71,6 +73,21 @@ const ogc3DTile = new OGC3DTile({
 ```
 
 ### Callback
+
+#### onLoadCallback
+Add a callback that is called once when the first tile is loaded and geometry is available.
+This can be useful to position the tileset at a specific location when it is not centered on origin for example.
+
+```
+const ogc3DTile = new OGC3DTile({
+    url: "https://storage.googleapis.com/ogc-3d-tiles/ayutthaya/tileset.json",
+    onLoadCallback: tilese => {
+            console.log(tileset.boundingVolume);
+        }
+});
+```
+
+#### Mesh callback
 Add a callback on loaded tiles in order to set a material or do some logic on the meshes.
 
 ```
@@ -123,8 +140,8 @@ 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. All the tiles that don't need to be downloaded or drawn will balance out the cost of the extra render pass.
+A word of warning: activating occlusion culling 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 occlusion logic.
 
 
 First, instantiate an OcclusionCullingService:
@@ -157,7 +174,7 @@ occlusionCullingService.setSide(THREE.DoubleSide);
 ```
 
 
-### static tilesets (Performance tip)
+### static tilesets and other performance tips
 When you know your tileset will be static, you can specify it in the OGC3DTile object constructor parameter.
 This will skip recalculating the transformation matrix of every tile each frame and give a few extra frames per second.
 
@@ -168,12 +185,22 @@ const ogc3DTile = new OGC3DTile({
     });
 ```
 
-# Displaying meshes on a globe
-I'm working on this project in parallel https://github.com/ebeaufay/UltraGlobe which allows displaying a globe with multi resolution imagery, elevation and 3DTiles.
+Either way, it's advised to set the autoUpdate property of the scene to false and update the matrices manually whenever you move things around.
+
+```
+scene.autoUpdate = false;
+```
+
+# Projects that use this library
+https://github.com/ebeaufay/UltraGlobe allows displaying a globe with multi resolution imagery, elevation and 3DTiles.
+
+Don't hesitate to tell me if you have a project that stems from this code. I'd love to link to it here and I'm always open to implementing extra features.
+Contact: emeric.beaufays@jdultra.com
+
 
 # Mesh to 3DTiles Converter
 
 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 feel free to contact me about it.
-Contact: emericbeaufays@gmail.com
+Contact: emeric.beaufays@jdultra.com

package/index.html

@@ -48,12 +48,9 @@
 <body>
   <div id="screen"></div>
   <div style="position: absolute; top: 1%; z-index: 100; right:1%; ">
-    <input type="range" min="0.1" max="2" value="1.0", step="0.001" class="slider" id="lodMultiplier" >
+    <input type="range" min="0.0" max="1.0" value="1.0", step="0.001" 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://skfb.ly/6UoNJ">ORIGINAL MODEL</a>
-  </div>
 </body>
 
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jdultra/threedtiles",
-    "version": "3.3.1",
+    "version": "4.0.0",
     "description": "An OGC 3DTiles viewer for Three.js",
     "main": "tileset.js",
     "scripts": {
@@ -23,29 +23,30 @@
     "author": "Emeric Beaufays",
     "license": "MIT",
     "dependencies": {
-        "gltf-validator": ">=2.0.0-dev.3.3",
+        "gltf-validator": "^2.0.0-dev.3.9",
         "js-utils-z": "1.2.1",
         "lodash": ">=4.17.20",
-        "lru-cache": "^7.4.1",
-        "mnemonist": "^0.39.0",
+        "lru-cache": "^7.14.1",
+        "mnemonist": "^0.39.5",
         "path-browserify": "^1.0.1",
-        "regenerator-runtime": ">=0.13.7",
+        "regenerator-runtime": "^0.13.11",
         "set-interval-async": "^2.0.3",
-        "three": "0.140.2",
+        "three": "0.146.0",
         "uuid": "^8.3.2"
     },
     "devDependencies": {
-        "@babel/core": "^7.12.9",
-        "@babel/preset-env": "^7.12.7",
-        "babel-loader": "^8.2.2",
+        "@babel/core": "^7.20.2",
+        "@babel/preset-env": "^7.20.2",
+        "babel-loader": "^8.3.0",
         "copy-webpack-plugin": "^6.3.2",
-        "core-js": "^3.8.0",
+        "core-js": "^3.26.1",
         "html-loader": "^1.3.2",
         "html-webpack-plugin": "^4.5.0",
-        "mini-css-extract-plugin": "^1.3.1",
-        "webpack": "^5.65.0",
+        "mini-css-extract-plugin": "^1.6.2",
+        "webpack": "^5.75.0",
         "webpack-cli": "4.9.1",
-        "webpack-dev-server": "^4.7.4",
+        "webpack-dev-server": "^4.11.1",
+        "webpack-glsl-loader": "^1.0.1",
         "whatwg-fetch": "^3.5.0"
     }
 }

package/src/decoder/B3DMDecoder.js

@@ -1,92 +1,91 @@
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
 import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
-//import { LegacyGLTFLoader } from './LegacyGLTFLoader.js';
+import * as THREE from 'three';
 
 const gltfLoader = new GLTFLoader();
 const dracoLoader = new DRACOLoader();
-dracoLoader.setDecoderPath( 'https://www.gstatic.com/draco/versioned/decoders/1.4.3/' );
-gltfLoader.setDRACOLoader( dracoLoader );
+dracoLoader.setDecoderPath('https://www.gstatic.com/draco/versioned/decoders/1.4.3/');
+gltfLoader.setDRACOLoader(dracoLoader);
+const dummy = new THREE.Object3D();
 //const legacyGLTFLoader = new LegacyGLTFLoader();
-const B3DMDecoder = {
-	parseB3DM: (arrayBuffer, meshCallback) => {
-		const dataView = new DataView(arrayBuffer);
 
-		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');
+function parseB3DM(arrayBuffer, meshCallback) {
+	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 version = dataView.getUint32(4, true);
+	console.assert(version === 1);
 
-		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 byteLength = dataView.getUint32(8, true);
+	console.assert(byteLength === arrayBuffer.byteLength);
 
-		const featureTableStart = 28;
-		//const featureTable = new FeatureTable( arrayBuffer, featureTableStart, featureTableJSONByteLength, featureTableBinaryByteLength );
+	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 batchTableStart = featureTableStart + featureTableJSONByteLength + featureTableBinaryByteLength;
-		//const batchTable = new BatchTable( arrayBuffer, featureTable.getData( 'BATCH_LENGTH' ), batchTableStart, batchTableJSONByteLength, batchTableBinaryByteLength );
+	const featureTableStart = 28;
+	//const featureTable = new FeatureTable( arrayBuffer, featureTableStart, featureTableJSONByteLength, featureTableBinaryByteLength );
 
-		const glbStart = batchTableStart + batchTableJSONByteLength + batchTableBinaryByteLength;
-		const glbBytes = new Uint8Array(arrayBuffer, glbStart, byteLength - glbStart);
+	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 gltfBuffer = glbBytes.slice().buffer;
 
+	const gltfBuffer = glbBytes.slice().buffer;
 
-		return new Promise((resolve, reject) => {
 
-			gltfLoader.parse(gltfBuffer, null, model => {
+	return new Promise((resolve, reject) => {
 
-				////TODO
-				//model.batchTable = b3dm.batchTable;
-				//model.featureTable = b3dm.featureTable;
+		gltfLoader.parse(gltfBuffer, null, model => {
 
-				//model.scene.batchTable = b3dm.batchTable;
-				//model.scene.featureTable = b3dm.featureTable;
+			////TODO
+			//model.batchTable = b3dm.batchTable;
+			//model.featureTable = b3dm.featureTable;
 
-				//const scene = mergeColoredObject(model.scene);
-				model.scene.traverse((o) => {
-					if (o.isMesh) {
-						if (!!meshCallback) {
-							meshCallback(o);
-						}
+			//model.scene.batchTable = b3dm.batchTable;
+			//model.scene.featureTable = b3dm.featureTable;
 
+			//const scene = mergeColoredObject(model.scene);
+			model.scene.traverse((o) => {
+				if (o.isMesh) {
+					if (!!meshCallback) {
+						meshCallback(o);
 					}
-				});
-				resolve(model.scene);
-			}, error=>{
-				console.error(error);
-				/* legacyGLTFLoader.parse(gltfBuffer, model => {
-
-					////TODO
-					//model.batchTable = b3dm.batchTable;
-					//model.featureTable = b3dm.featureTable;
-	
-					//model.scene.batchTable = b3dm.batchTable;
-					//model.scene.featureTable = b3dm.featureTable;
-	
-					//const scene = mergeColoredObject(model.scene);
-					model.scene.traverse((o) => {
-						if (o.isMesh) {
-							if (!!meshCallback) {
-								meshCallback(o);
-							}
-	
-						}
-					});
-					resolve(model.scene);
-				}, null); */
+
+				}
 			});
+			resolve(model.scene);
+		}, error => {
+			console.error(error);
 		});
+	});
+}
+
+const B3DMDecoder = {
+	parseB3DM: parseB3DM,
+	parseB3DMInstanced: (arrayBuffer, meshCallback, maxCount) => { // expects GLTF with one node level
+
+		return parseB3DM(arrayBuffer, meshCallback).then(mesh => {
+			let instancedMesh;
+			mesh.traverse(child => {
+				if (child.isMesh) {
+					instancedMesh = new THREE.InstancedMesh(child.geometry, child.material, maxCount);
+					instancedMesh.baseMatrix = child.matrix;
+					//console.log(child.matrix.elements[12])
+				}
+			});
+			return instancedMesh;
+		});
+
 	}
 }
 

package/src/index.js

@@ -6,33 +6,86 @@ import { TileLoader } from "./tileset/TileLoader";
 import { MapControls, OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 import { setIntervalAsync } from 'set-interval-async/dynamic';
 import { OcclusionCullingService } from "./tileset/OcclusionCullingService";
+import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer';
+import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
+import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass.js';
+import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
 
+import { InstancedOGC3DTile} from "./tileset/instanced/InstancedOGC3DTile.js"
+import { InstancedTileLoader} from "./tileset/instanced/InstancedTileLoader.js"
+
+import { B3DMDecoder } from "./decoder/B3DMDecoder";
 
 const occlusionCullingService = new OcclusionCullingService();
 occlusionCullingService.setSide(THREE.DoubleSide);
 const scene = initScene();
+
 const domContainer = initDomContainer("screen");
 const camera = initCamera();
-const ogc3DTiles = initTileset(scene);
-initLODMultiplierSlider(ogc3DTiles)
+//const ogc3DTiles = initTileset(scene);
+
+
+const instancedTileLoader = createInstancedTileLoader(scene);
+initInstancedTilesets(instancedTileLoader);
+
 const controller = initController(camera, domContainer);
 
 const stats = initStats(domContainer);
 const renderer = initRenderer(camera, domContainer);
+const composer = initComposer(scene, camera, renderer);
+
+
+/* fetch("https://storage.googleapis.com/ogc-3d-tiles/droneship/1/2007.b3dm").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}`);
+    }
+    return result.arrayBuffer();
+
+})
+.then(resultArrayBuffer=>{
+    return B3DMDecoder.parseB3DMInstanced(resultArrayBuffer, self.meshCallback, 1);
+})
+.then(mesh=>{
+    scene.add(mesh)
+        
+}) */
 
 
 animate();
 
+
+function initComposer(scene, camera, renderer) {
+    const renderScene = new RenderPass(scene, camera);
+    const bloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 0.4, 0.5, 0);
+
+
+    const composer = new EffectComposer(renderer);
+    composer.addPass(renderScene);
+    composer.addPass(bloomPass);
+    return composer;
+}
 function initScene() {
     const scene = new THREE.Scene();
     scene.matrixAutoUpdate = false;
-    scene.background = new THREE.Color(0xaaffcc);
-    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;
+    scene.background = new THREE.Color(0x000000);
+    scene.add(new THREE.AmbientLight(0xFFFFFF, 0.2));
+    
+    const light = new THREE.PointLight(0xbbbbff, 2, 5000);
+    const sphere = new THREE.SphereGeometry(2, 16, 8);
+    light.add(new THREE.Mesh(sphere, new THREE.MeshBasicMaterial({ color: 0xbbbbff })));
+    scene.add(light);
+    light.position.set(200, 200, 200);
+
+
+    const light2 = new THREE.PointLight(0xffbbbb, 2, 5000);
+    const sphere2 = new THREE.SphereGeometry(2, 16, 8);
+    light2.add(new THREE.Mesh(sphere2, new THREE.MeshBasicMaterial({ color: 0xffbbbb })));
+    scene.add(light2);
+    light2.position.set(200, 100, -100);
+
+    scene.matrixWorldAutoUpdate = true;
     return scene;
 }
 
@@ -51,6 +104,8 @@ function initRenderer(camera, dom) {
     renderer.setPixelRatio(window.devicePixelRatio);
     renderer.setSize(dom.offsetWidth, dom.offsetHeight);
     renderer.outputEncoding = THREE.sRGBEncoding;
+    //renderer.toneMapping = THREE.ReinhardToneMapping;
+    //renderer.toneMappingExposure = Math.pow(0.8, 4.0);
     renderer.autoClear = false;
 
     dom.appendChild(renderer.domElement);
@@ -77,8 +132,8 @@ function initStats(dom) {
 
 
 function initCamera() {
-    const camera = new THREE.PerspectiveCamera(70, window.offsetWidth / window.offsetHeight, 0.1, 1000);
-    camera.position.set(-10, 5, 20);
+    const camera = new THREE.PerspectiveCamera(40, window.offsetWidth / window.offsetHeight, 1, 100000);
+    camera.position.set(100, 10, 100);
     camera.matrixAutoUpdate = true;
     return camera;
 }
@@ -88,70 +143,117 @@ 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;
+        mesh.material.side = THREE.FrontSide;
     }, 1000)
     const ogc3DTile = new OGC3DTile({
-        url: "https://storage.googleapis.com/ogc-3d-tiles/ayutthaya/tiledWithSkirts/tileset.json",
-        //url: "http://localhost:8080/tileset.json",
-        geometricErrorMultiplier: 0.5,
+        url: "https://storage.googleapis.com/ogc-3d-tiles/droneship/tileset.json",
+        //url: "https://storage.googleapis.com/ogc-3d-tiles/berlinTileset/tileset.json",
+        geometricErrorMultiplier: 1.0,
         loadOutsideView: false,
         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
+        //occlusionCullingService: occlusionCullingService,
+        static: false,
+
     });
 
 
-    
+
+
     //// The OGC3DTile object is a threejs Object3D so you may do all the usual opperations like transformations e.g.:
     //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
 
 
-    
+
     var interval;
     document.addEventListener('keyup', (e) => {
         console.log(camera.position)
-        if (!e.key || e.key !== "p") return;
-        if (!!interval) {
-            clearInterval(interval);
-            interval = null;
-        } else {
-            startInterval();
+        if (!!e.key && e.key !== "p") {
+
+            if (!!interval) {
+                clearInterval(interval);
+                interval = null;
+            } else {
+                startInterval();
+            }
+        }
+        if (!!e.key && e.key !== "l") {
+
+            console.log("new THREE.Vector3(" + camera.position.x + "," + camera.position.y + "," + camera.position.z + ")");
+            console.log("new THREE.Quaternion(" + camera.quaternion.x + "," + camera.quaternion.y + "," + camera.quaternion.z + "," + camera.quaternion.w + ")");
+
         }
+
     });
     function startInterval() {
         interval = setIntervalAsync(function () {
             ogc3DTile.update(camera);
-            ogc3DTile2.update(camera);
+
         }, 20);
     }
     startInterval();
 
     scene.add(ogc3DTile)
-    scene.add(ogc3DTile2)
     return ogc3DTile;
 }
 
-function initLODMultiplierSlider(tileset) {
+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.FrontSide;
+    }, 1000, 1000);
+}
+function initInstancedTilesets(instancedTileLoader){
+
+    const instancedTilesets = [];
+
+    for(let x = 0; x<10; x++){
+        for(let y = 0; y<10; y++){
+            for(let z = 0; z<10; z++){
+                const tileset = new InstancedOGC3DTile({
+                    url: "https://storage.googleapis.com/ogc-3d-tiles/droneship/tileset.json",
+                    //url: "http://localhost:8080/tileset.json",
+                    geometricErrorMultiplier: 0.5,
+                    loadOutsideView: false,
+                    tileLoader: instancedTileLoader,
+                    static: false,
+                });
+                tileset.translateOnAxis(new THREE.Vector3(1, 0, 0), 50*x)
+                tileset.translateOnAxis(new THREE.Vector3(0, 1, 0), 15*y)
+                tileset.translateOnAxis(new THREE.Vector3(0, 0, 1), 25*z)
+                scene.add(tileset);
+                instancedTilesets.push(tileset);
+
+                idleCallback();
+
+                function idleCallback(){
+                    tileset.update(camera);
+                    setTimeout(()=>{
+                        window.requestIdleCallback(idleCallback,{timeout:50})
+                    },20)
+                    
+                }
+            }
+        }
+    }
+
+    initLODMultiplierSlider(instancedTilesets);
+}
+
+function initLODMultiplierSlider(instancedTilesets) {
     var slider = document.getElementById("lodMultiplier");
     var output = document.getElementById("multiplierValue");
     output.innerHTML = slider.value;
 
     slider.oninput = () => {
-        tileset.setGeometricErrorMultiplier(slider.value)
+        instancedTilesets.forEach(tileset=>{
+            tileset.setGeometricErrorMultiplier(slider.value)
+        })
         output.innerHTML = slider.value;
     }
 }
@@ -160,8 +262,8 @@ function initController(camera, dom) {
     const controller = new OrbitControls(camera, dom);
 
     controller.target.set(0, 0, 0);
-    controller.minDistance = 1;
-    controller.maxDistance = 5000;
+    controller.minDistance = 0.01;
+    controller.maxDistance = 100000;
     controller.update();
     return controller;
 }
@@ -169,13 +271,13 @@ function initController(camera, dom) {
 
 function animate() {
     requestAnimationFrame(animate);
-    renderer.render(scene, camera);
-    occlusionCullingService.update(scene, renderer, camera)
+    instancedTileLoader.update();
+    composer.render();
+    //occlusionCullingService.update(scene, renderer, camera)
     stats.update();
-
-
 }
 
 
 
 
+

package/src/tileset/OGC3DTile.js

@@ -76,14 +76,14 @@ 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
 
+        this.abortController = new AbortController();
         this.layers.disable(0);
 
         if (!!properties.json) { // If this tile is created as a child of another tile, properties.json is not null
             self.setup(properties);
             if (properties.onLoadCallback) properties.onLoadCallback(self);
         } else if (properties.url) { // If only the url to the tileset.json is provided
-            self.controller = new AbortController();
-            fetch(properties.url, { signal: self.controller.signal }).then(result => {
+            fetch(properties.url, { signal: self.abortController.signal }).then(result => {
                 if (!result.ok) {
                     throw new Error(`couldn't load "${properties.url}". Request failed with status ${result.status} : ${result.statusText}`);
                 }
@@ -176,7 +176,7 @@ class OGC3DTile extends THREE.Object3D {
             if (!!url) {
                 if (url.includes(".b3dm")) {
                     self.contentURL = url;
-                    self.tileLoader.get(this.uuid, url, mesh => {
+                    self.tileLoader.get(self.abortController,this.uuid, url, mesh => {
                         if (!!self.deleted) return;
                         mesh.traverse((o) => {
                             if (o.isMesh) {
@@ -192,7 +192,7 @@ class OGC3DTile extends THREE.Object3D {
                                 if(self.static){
                                     o.matrixAutoUpdate = false;
                                 }
-                                o.material.visible = false;
+                                //o.material.visible = false;
                             }
                         });
                         
@@ -204,7 +204,7 @@ class OGC3DTile extends THREE.Object3D {
                         return self.calculateDistanceToCamera(self.cameraOnLoad);
                     }, () => self.getSiblings(), self.level);
                 } else if (url.includes(".json")) {
-                    self.tileLoader.get(this.uuid, url, json => {
+                    self.tileLoader.get(self.abortController,this.uuid, url, json => {
                         if (!!self.deleted) return;
                         if (!self.json.children) self.json.children = [];
                         json.rootPath = path.dirname(url);
@@ -228,8 +228,8 @@ class OGC3DTile extends THREE.Object3D {
             if (!!element.contentURL) {
                 self.tileLoader.invalidate(element.contentURL, element.uuid);
             }
-            if (!!element.controller) { // abort tile request
-                element.controller.abort();
+            if (!!element.abortController) { // abort tile request
+                element.abortController.abort();
             }
 
         });
@@ -450,7 +450,7 @@ class OGC3DTile extends THREE.Object3D {
             return true;
         }
 
-        return true;
+        return false;
 
     }