@jdultra/threedtiles 7.0.2 → 8.0.1

package/.babelrc

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

package/README.md

@@ -14,7 +14,7 @@ The fastest 3DTiles viewer for three.js
 
 [Instanced Tileset (pilot a swarm of highly detailed spaceships)](https://www.jdultra.com/instanced/index.html)
 
-NPM dependency: "@jdultra/threedtiles": "^6.0.4"
+NPM dependency: "@jdultra/threedtiles": "^8.0.0"
 
 Adding a tileset to a scene is as easy as :
 
@@ -68,6 +68,7 @@ Contact: emeric.beaufays@jdultra.com
 - Instanced tilesets
 - Center tileset and re-orient geolocated data
 - gltf/glb tiles (OGC3DTiles 1.1)
+- draco and ktx2 compression support
 - 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.
@@ -90,7 +91,10 @@ const ogc3DTile = new OGC3DTile({
 A lower value will result in lower detail tiles being loaded and a higher value results in higher detail tiles being loaded.
 A value of 1.0 is the default.
 
-
+#### geometricErrorMultiplier vs maxScreenSpaceError
+Many viewers use the maxScreenSpaceError instead of a geometric error multiplier and there is a direct correspondance.
+A geometricErrorMultiplier of 1 corresponds to a maxScreenSpaceError of 16.
+A geometricErrorMultiplier of 0.5 corresponds to a maxScreenSpaceError of 32.
 
 ### 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 and the user might see some holes in the model.
@@ -154,25 +158,34 @@ If using a shared cache between tilesets, check out the next section.
 You may instanciate a cache through the TileLoader class and re-use it for several or all your tilesets. 
 The limitation is that all the tilesets using the same cache will have the same callback.
 
-The TileLoader constructor takes 2 arguments. The first is a callback for meshes (see above section) and the second is
-the maximum number of items in the cache (default is 1000).
+The TileLoader takes an optional object as argument:
+@param {Object} [options] - Optional configuration object.
+@param {number} [options.maxCachedItems=100] - the cache size.
+@param {function} [options.meshCallback] - A callback to call on newly decoded meshes.
+@param {function} [options.pointsCallback] - A callback to call on newly decoded points.
+@param {renderer} [options.renderer] - The renderer, this is required for KTX2 support.
 
 ```
 import { TileLoader } from "@jdultra/threedtiles/src/tileset/TileLoader";
 
-const ogc3DTile = new OGC3DTile({
-        url: "https://storage.googleapis.com/ogc-3d-tiles/ayutthaya/tileset.json",
+const tileLoader = new TileLoader({
         renderer: renderer,
-        tileLoader: new TileLoader(2000, mesh => {
+        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;
-            }, 
-            points=>{
-                points.material.size = 0.1;
-                points.material.sizeAttenuation = true;
-            }
-        ),
+            //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/ayutthaya/tileset.json",
+        renderer: renderer,
+        tileLoader: tileLoader,
         meshCallback: mesh => { mesh.material.wireframe = true;} // This callback will not be used as the callback provided to the TileLoader takes priority
     });
 ```
@@ -242,12 +255,19 @@ higher performance when displaying the same Tileset many times.
 // First create the InstancedTileLoader that will manage caching
 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;
+    {
+        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;
+        },
+        pointsCallback: points => {
+            points.material.size = Math.min(1.0, 0.5 * Math.sqrt(points.geometricError));
+            points.material.sizeAttenuation = true;
+        }
     }
 );
 
@@ -321,7 +341,12 @@ scene.matrixWorldAutoUpdate = false;
 scene.updateMatrixWorld(true);
 
 ```
-#### tileset update loop
+### Draco and Ktx2
+Compressed meshes via Draco and compressed textures in Ktx2 format are supported automatically using the threejs plugins.
+KTX uses an external wasm loaded at runtime so if you have trouble packaging your app correctly, check out the 
+[Getting started](https://drive.google.com/file/d/1kJ-yfYmy8ShOMMPPXgqW2gMgGkLOIidf/view?usp=share_link) project for a sample webpack configuration.
+
+### tileset update loop
 Updating a single tileset via OGC3DTile#update or InstancedOGC3DTile#update is quite fast, even when the tree is deep.
 For a single tileset, it's safe to call it regularly with a setInterval:
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jdultra/threedtiles",
-    "version": "7.0.2",
+    "version": "8.0.1",
     "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);
@@ -22,7 +25,44 @@ const domContainer = initDomContainer("screen");
 const camera = initCamera(domContainer.offsetWidth, domContainer.offsetHeight);
 const stats = initStats(domContainer);
 const renderer = initRenderer(camera, domContainer);
-const ogc3DTiles = initTileset(scene, 2.0);
+const ogc3DTiles = initTileset(scene, 1.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);