@jdultra/threedtiles 7.0.1 → 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.1",
+    "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.75.0",
-        "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);
 
@@ -80,12 +120,12 @@ function initScene() {
     scene.matrixAutoUpdate = false;
     //scene.matrixWorldAutoUpdate = false;
     scene.background = new THREE.Color(0xE5E3E4);
-    const dirLight = new THREE.DirectionalLight(0xFFFFFF, 1.0);
-    dirLight.position.set(100,100,100);
-    dirLight.lookAt(new THREE.Vector3(0,0,0));
-    //scene.add(new THREE.AmbientLight(0xFFFFFF, 1.0));
+    //const dirLight = new THREE.DirectionalLight(0xFFFFFF, 1.0);
+    //dirLight.position.set(100,100,100);
+    //dirLight.lookAt(new THREE.Vector3(0,0,0));
+    scene.add(new THREE.AmbientLight(0xFFFFFF, 1.0));
 
-    scene.add(dirLight)
+    //scene.add(dirLight)
 
     /* const light = new THREE.PointLight(0xbbbbff, 2, 5000);
     const sphere = new THREE.SphereGeometry(2, 16, 8);
@@ -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,
+        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);