t3d-3dtiles 0.1.0

package/src/loaders/B3DMLoader.js

@@ -0,0 +1,49 @@
+import { GLTFLoader } from '../libs/glTF/GLTFLoader.js';
+
+import { ReferenceParser } from '../libs/glTF/parsers/ReferenceParser.js';
+import { Validator } from '../libs/glTF/parsers/Validator.js';
+import { BufferParser } from '../libs/glTF/parsers/BufferParser.js';
+import { BufferViewParser } from '../libs/glTF/parsers/BufferViewParser.js';
+import { ImageParser } from '../libs/glTF/parsers/ImageParser.js';
+import { TextureParser } from '../libs/glTF/parsers/TextureParser.js';
+import { AccessorParser } from '../libs/glTF/parsers/AccessorParser.js';
+import { PrimitiveParser } from '../libs/glTF/parsers/PrimitiveParser.js';
+import { NodeParser } from '../libs/glTF/parsers/NodeParser.js';
+import { SkinParser } from '../libs/glTF/parsers/SkinParser.js';
+import { SceneParser } from '../libs/glTF/parsers/SceneParser.js';
+import { AnimationParser } from '../libs/glTF/parsers/AnimationParser.js';
+
+import { HeaderParser } from './parsers/HeaderParser.js';
+import { TableParser } from './parsers/TableParser.js';
+import { B3DMParser } from './parsers/b3dm/B3DMParser.js';
+import { MaterialParser } from './parsers/b3dm/MaterialParser.js';
+import { B3DMRootParser } from './parsers/b3dm/B3DMRootParser.js';
+
+/**
+ * B3DMLoader is a loader for the B3DM format.
+ */
+export class B3DMLoader extends GLTFLoader {
+
+	constructor(manager) {
+		super(manager, [
+			HeaderParser, // insert HeaderParser
+			TableParser, // insert TableParser
+			B3DMParser, // insert B3DMParser
+			ReferenceParser,
+			Validator,
+			BufferParser,
+			BufferViewParser,
+			ImageParser,
+			TextureParser,
+			MaterialParser, // replace MaterialParser
+			AccessorParser,
+			PrimitiveParser,
+			NodeParser,
+			SkinParser,
+			SceneParser,
+			AnimationParser,
+			B3DMRootParser // insert B3DMRootParser
+		]);
+	}
+
+}

package/src/loaders/CMPTLoader.js

@@ -0,0 +1,48 @@
+import { GLTFLoader } from '../libs/glTF/GLTFLoader.js';
+
+import { HeaderParser } from './parsers/HeaderParser.js';
+import { CMPTParser } from './parsers/cmpt/CMPTParser.js';
+import { CMPTRootParser } from './parsers/cmpt/CMPTRootParser.js';
+
+import { B3DMLoader } from './B3DMLoader.js';
+import { I3DMLoader } from './I3DMLoader.js';
+import { PNTSLoader } from './PNTSLoader.js';
+
+/**
+ * CMPTLoader is a loader for the CMPT format.
+ */
+export class CMPTLoader extends GLTFLoader {
+
+	constructor(manager) {
+		super(manager, [
+			HeaderParser,
+			CMPTParser,
+			CMPTRootParser
+		]);
+
+		const b3dmLoader = new B3DMLoader(manager);
+		const i3dmLoader = new I3DMLoader(manager);
+		const pntsLoader = new PNTSLoader(manager);
+
+		this._loaders = new Map([
+			['b3dm', b3dmLoader],
+			['i3dm', i3dmLoader],
+			['pnts', pntsLoader]
+		]);
+	}
+
+	setDRACOLoader(dracoLoader) {
+		for (const loader of this._loaders.values()) {
+			loader.setDRACOLoader(dracoLoader);
+		}
+		return super.setDRACOLoader(dracoLoader);
+	}
+
+	setKTX2Loader(ktx2Loader) {
+		for (const loader of this._loaders.values()) {
+			loader.setKTX2Loader(ktx2Loader);
+		}
+		return super.setKTX2Loader(ktx2Loader);
+	}
+
+}

package/src/loaders/I3DMLoader.js

@@ -0,0 +1,49 @@
+import { GLTFLoader } from '../libs/glTF/GLTFLoader.js';
+
+import { ReferenceParser } from '../libs/glTF/parsers/ReferenceParser.js';
+import { Validator } from '../libs/glTF/parsers/Validator.js';
+import { BufferParser } from '../libs/glTF/parsers/BufferParser.js';
+import { BufferViewParser } from '../libs/glTF/parsers/BufferViewParser.js';
+import { ImageParser } from '../libs/glTF/parsers/ImageParser.js';
+import { TextureParser } from '../libs/glTF/parsers/TextureParser.js';
+import { AccessorParser } from '../libs/glTF/parsers/AccessorParser.js';
+import { NodeParser } from '../libs/glTF/parsers/NodeParser.js';
+import { SkinParser } from '../libs/glTF/parsers/SkinParser.js';
+import { SceneParser } from '../libs/glTF/parsers/SceneParser.js';
+import { AnimationParser } from '../libs/glTF/parsers/AnimationParser.js';
+
+import { HeaderParser } from './parsers/HeaderParser.js';
+import { TableParser } from './parsers/TableParser.js';
+import { I3DMParser } from './parsers/i3dm/I3DMParser.js';
+import { MaterialParser } from './parsers/i3dm/MaterialParser.js';
+import { PrimitiveParser } from './parsers/i3dm/PrimitiveParser.js';
+import { I3DMRootParser } from './parsers/i3dm/I3DMRootParser.js';
+
+/**
+ * I3DMLoader is a loader for the I3DM format.
+ */
+export class I3DMLoader extends GLTFLoader {
+
+	constructor(manager) {
+		super(manager, [
+			HeaderParser, // insert HeaderParser
+			TableParser, // insert TableParser
+			I3DMParser, // insert I3DMParser
+			ReferenceParser,
+			Validator,
+			BufferParser,
+			BufferViewParser,
+			ImageParser,
+			TextureParser,
+			MaterialParser, // replace MaterialParser
+			AccessorParser,
+			PrimitiveParser, // replace PrimitiveParser
+			NodeParser,
+			SkinParser,
+			SceneParser,
+			AnimationParser,
+			I3DMRootParser // insert I3DMSetupParser
+		]);
+	}
+
+}

package/src/loaders/PNTSLoader.js

@@ -0,0 +1,20 @@
+import { GLTFLoader } from '../libs/glTF/GLTFLoader.js';
+
+import { HeaderParser } from './parsers/HeaderParser.js';
+import { TableParser } from './parsers/TableParser.js';
+import { PNTSRootParser } from './parsers/pnts/PNTSRootParser.js';
+
+/**
+ * PNTSLoader is a loader for the PNTS format.
+ */
+export class PNTSLoader extends GLTFLoader {
+
+	constructor(manager) {
+		super(manager, [
+			HeaderParser,
+			TableParser,
+			PNTSRootParser
+		]);
+	}
+
+}

package/src/loaders/TileGLTFLoader.js

@@ -0,0 +1,17 @@
+import { GLTFLoader } from '../libs/glTF/GLTFLoader.js';
+
+import { IndexParser } from './parsers/gltf/IndexParser.js';
+
+/**
+ * TileGLTFLoader is a gltf loader
+ * that extends the default gltf loader with additional parsers
+ * to support the tile gltf format.
+ */
+export class TileGLTFLoader extends GLTFLoader {
+
+	constructor(manager) {
+		super(manager);
+		this.replaceParser(IndexParser, 0);
+	}
+
+}

package/src/loaders/parsers/HeaderParser.js

@@ -0,0 +1,104 @@
+import { getUrlExtension } from '../../utils/Utils.js';
+
+/**
+ * This parser is used to parse the header of a 3D Tiles resource.
+ * For 'b3dm', 'i3dm', 'pnts' and 'cmpt' formats.
+ */
+export class HeaderParser {
+
+	static parse(context, loader) {
+		const buffer = context.options.buffer;
+
+		// TODO: this should be able to take a uint8array with an offset and length
+		const dataView = new DataView(buffer);
+
+		// 32-byte header for i3dm and 28-byte header for the others.
+
+		// 4 bytes for the magic, can be 'b3dm', 'i3dm', 'pnts', 'cmpt' for now.
+		// 'vctr' is not supported yet.
+
+		const magic =
+            String.fromCharCode(dataView.getUint8(0)) +
+            String.fromCharCode(dataView.getUint8(1)) +
+            String.fromCharCode(dataView.getUint8(2)) +
+            String.fromCharCode(dataView.getUint8(3));
+
+		const urlExtension = getUrlExtension(context.url);
+
+		if (magic !== urlExtension) {
+			throw `Not a ${urlExtension} type resource, with url ${context.url}!`;
+		}
+
+		// 4 bytes for the version number.
+
+		const version = dataView.getUint32(4, true);
+
+		if (version !== 1) {
+			throw `${urlExtension} version must be 1, with url ${context.url}!`;
+		}
+
+		// 4 bytes for the byte length of the entire tile content.
+
+		const byteLength = dataView.getUint32(8, true);
+
+		if (byteLength !== buffer.byteLength) {
+			throw `${urlExtension} data byte length check failed, with url ${context.url}!`;
+		}
+
+		// output the header information to the context and return
+		// if the tile content is cmpt.
+
+		if (urlExtension === 'cmpt') {
+			// 4 bytes for the tiles length
+			const tilesLength = dataView.getUint32(12, true);
+
+			context.header = {
+				magic,
+				version,
+				byteLength,
+				tilesLength
+			};
+
+			return;
+		}
+
+		// 4 bytes for the byte length of the feature table JSON.
+
+		const featureTableJSONByteLength = dataView.getUint32(12, true);
+
+		// 4 bytes for the byte length of the feature table binary.
+
+		const featureTableBinaryByteLength = dataView.getUint32(16, true);
+
+		// 4 bytes for the byte length of the batch table JSON.
+
+		const batchTableJSONByteLength = dataView.getUint32(20, true);
+
+		// 4 bytes for the byte length of the batch table binary.
+
+		const batchTableBinaryByteLength = dataView.getUint32(24, true);
+
+		// 4 bytes for the gltf format if the tile content format is i3dm.
+
+		let gltfFormat = null;
+		if (urlExtension === 'i3dm') {
+			gltfFormat = dataView.getUint32(28, true);
+		}
+
+		// output the header information to the context.
+
+		context.header = {
+			magic,
+			version,
+			byteLength,
+			featureTableJSONByteLength,
+			featureTableBinaryByteLength,
+			batchTableJSONByteLength,
+			batchTableBinaryByteLength,
+			gltfFormat
+		};
+
+		return;
+	}
+
+}

package/src/loaders/parsers/LoadParser.js

@@ -0,0 +1,22 @@
+import { getUrlExtension } from '../../utils/Utils.js';
+
+export class LoadParser {
+
+	static parse(context, loader) {
+		const extension = getUrlExtension(context.url);
+		let pr = null;
+		if (extension === 'gltf') {
+			pr = loader.loadFile(context.url)
+				.then(buffer => {
+					context.options.buffer = buffer;
+				});
+		} else {
+			pr = loader.loadFile(context.url, 'arraybuffer')
+				.then(buffer => {
+					context.options.buffer = buffer;
+				});
+		}
+		return pr;
+	}
+
+}

package/src/loaders/parsers/TableParser.js

@@ -0,0 +1,66 @@
+import { BatchTable } from '../../utils/BatchTable.js';
+import { FeatureTable } from '../../utils/FeatureTable.js';
+
+/**
+ * This parser is used to parse the feature table and batch table of a 3D Tiles resource.
+ * For 'b3dm', 'i3dm' and 'pnts' formats.
+ */
+export class TableParser {
+
+	static parse(context, loader) {
+		const { header, options } = context;
+		const buffer = options.buffer;
+
+		const featureTableStart = header.magic === 'i3dm' ? 32 : 28;
+		const featureTableEnd = featureTableStart + header.featureTableJSONByteLength + header.featureTableBinaryByteLength;
+		const batchTableStart = featureTableEnd;
+		const batchTableEnd = batchTableStart + header.batchTableJSONByteLength + header.batchTableBinaryByteLength;
+
+		// parse the feature table
+
+		const featureTableBuffer = buffer.slice(
+			featureTableStart,
+			featureTableEnd
+		);
+
+		const featureTable = new FeatureTable(
+			featureTableBuffer,
+			0,
+			header.featureTableJSONByteLength,
+			header.featureTableBinaryByteLength
+		);
+
+		// parse the batch table
+
+		let batchSize;
+		if (header.magic === 'b3dm') {
+			batchSize = featureTable.getData('BATCH_LENGTH');
+		} else if (header.magic === 'i3dm') {
+			batchSize = featureTable.getData('INSTANCES_LENGTH');
+		} else if (header.magic === 'pnts') {
+			batchSize = featureTable.getData('BATCH_LENGTH') || featureTable.getData('POINTS_LENGTH');
+		} else {
+			throw `Unrecognized magic: ${header.magic}!`;
+		}
+
+		const batchTableBuffer = buffer.slice(
+			batchTableStart,
+			batchTableEnd
+		);
+
+		const batchTable = new BatchTable(
+			batchTableBuffer,
+			batchSize,
+			0,
+			header.batchTableJSONByteLength,
+			header.batchTableBinaryByteLength
+		);
+
+		// output the tables to the context
+
+		context.featureTable = featureTable;
+		context.batchTable = batchTable;
+		context.batchTableEnd = batchTableEnd;
+	}
+
+}

package/src/loaders/parsers/b3dm/B3DMParser.js

@@ -0,0 +1,18 @@
+import { GLTFUtils } from '../../../libs/glTF/GLTFUtils.js';
+
+export class B3DMParser {
+
+	static parse(context, loader) {
+		const glbBytes = new Uint8Array(
+			context.options.buffer,
+			context.batchTableEnd,
+			context.header.byteLength - context.batchTableEnd
+		);
+
+		const glbData = GLTFUtils.parseGLB(glbBytes.slice().buffer);
+
+		context.gltf = glbData.gltf;
+		context.buffers = glbData.buffers;
+	}
+
+}

package/src/loaders/parsers/b3dm/B3DMRootParser.js

@@ -0,0 +1,22 @@
+export class B3DMRootParser {
+
+	static parse(context, loader) {
+		const { root, featureTable, options } = context;
+
+		// fix rtc center
+
+		const rtcCenter = featureTable.getData('RTC_CENTER');
+		if (rtcCenter) {
+			root.position.x += rtcCenter[0];
+			root.position.y += rtcCenter[1];
+			root.position.z += rtcCenter[2];
+		}
+
+		if (options.adjustmentTransform) {
+			root.matrix.transform(root.position, root.scale, root.quaternion);
+			root.matrix.multiply(options.adjustmentTransform);
+			root.matrix.decompose(root.position, root.quaternion, root.scale);
+		}
+	}
+
+}

package/src/loaders/parsers/b3dm/MaterialParser.js

@@ -0,0 +1,156 @@
+import {
+	PBRMaterial,
+	DRAW_SIDE,
+	TEXEL_ENCODING_TYPE
+} from 't3d';
+import { KHR_materials_unlit as _KHR_materials_unlit } from '../../../libs/glTF/extensions/KHR_materials_unlit.js';
+import { KHR_materials_pbrSpecularGlossiness as _KHR_materials_pbrSpecularGlossiness } from '../../../libs/glTF/extensions/KHR_materials_pbrSpecularGlossiness.js';
+import { KHR_materials_clearcoat as _KHR_materials_clearcoat } from '../../../libs/glTF/extensions/KHR_materials_clearcoat.js';
+import { KHR_texture_transform } from '../../../libs/glTF/extensions/KHR_texture_transform.js';
+import { ALPHA_MODES } from '../../../libs/glTF/Constants.js';
+
+export class MaterialParser {
+
+	static parse(context) {
+		const { gltf, textures } = context;
+
+		if (!gltf.materials) return;
+
+		const materials = [];
+		for (let i = 0; i < gltf.materials.length; i++) {
+			const {
+				extensions = {},
+				pbrMetallicRoughness,
+				normalTexture,
+				occlusionTexture,
+				emissiveTexture,
+				emissiveFactor,
+				alphaMode,
+				alphaCutoff,
+				doubleSided,
+				name = ''
+			} = gltf.materials[i];
+
+			const { KHR_materials_unlit, KHR_materials_pbrSpecularGlossiness, KHR_materials_clearcoat, KHR_techniques_webgl } = extensions;
+
+			let material = null;
+			if (KHR_materials_unlit) {
+				material = _KHR_materials_unlit.getMaterial();
+			} else if (KHR_materials_pbrSpecularGlossiness) {
+				material = _KHR_materials_pbrSpecularGlossiness.getMaterial();
+				_KHR_materials_pbrSpecularGlossiness.parseParams(material, KHR_materials_pbrSpecularGlossiness, textures);
+			} else if (KHR_materials_clearcoat) {
+				material = _KHR_materials_clearcoat.getMaterial();
+				_KHR_materials_clearcoat.parseParams(material, KHR_materials_clearcoat, textures);
+			} else if (KHR_techniques_webgl) { // @parser-modification - add KHR_techniques_webgl
+				material = new PBRMaterial();
+
+				const { values } = KHR_techniques_webgl;
+				const { u_diffuse } = values;
+
+				if (u_diffuse) {
+					material.diffuseMap = textures[u_diffuse.index];
+					material.diffuseMapCoord = u_diffuse.texCoord || 0;
+				}
+			} else {
+				material = new PBRMaterial();
+			}
+
+			material.name = name;
+
+			if (pbrMetallicRoughness) {
+				const { baseColorFactor, baseColorTexture, metallicFactor, roughnessFactor, metallicRoughnessTexture } = pbrMetallicRoughness;
+
+				if (Array.isArray(baseColorFactor)) {
+					material.diffuse.fromArray(baseColorFactor);
+					material.opacity = (baseColorFactor[3] !== undefined) ? baseColorFactor[3] : 1;
+				}
+
+				if (baseColorTexture) {
+					material.diffuseMap = textures[baseColorTexture.index];
+					material.diffuseMapCoord = baseColorTexture.texCoord || 0;
+					if (material.diffuseMap) {
+						material.diffuseMap.encoding = TEXEL_ENCODING_TYPE.SRGB;
+						parseTextureTransform(material, 'diffuseMap', baseColorTexture.extensions);
+					}
+				}
+
+				if (!KHR_materials_unlit && !KHR_materials_pbrSpecularGlossiness) {
+					material.metalness = metallicFactor !== undefined ? metallicFactor : 1;
+					material.roughness = roughnessFactor !== undefined ? roughnessFactor : 1;
+					if (metallicRoughnessTexture) {
+						material.metalnessMap = textures[metallicRoughnessTexture.index];
+						material.roughnessMap = textures[metallicRoughnessTexture.index];
+						// parseTextureTransform(material, 'metalnessMap', metallicRoughnessTexture.extensions);
+						// parseTextureTransform(material, 'roughnessMap', metallicRoughnessTexture.extensions);
+					}
+				}
+			}
+
+			if (emissiveFactor) {
+				material.emissive.fromArray(emissiveFactor);
+			}
+
+			if (emissiveTexture) {
+				material.emissiveMap = textures[emissiveTexture.index];
+				material.emissiveMapCoord = emissiveTexture.texCoord || 0;
+				if (material.emissiveMap) {
+					material.emissiveMap.encoding = TEXEL_ENCODING_TYPE.SRGB;
+					parseTextureTransform(material, 'emissiveMap', emissiveTexture.extensions);
+				}
+			}
+
+			if (occlusionTexture) {
+				material.aoMap = textures[occlusionTexture.index];
+				material.aoMapCoord = occlusionTexture.texCoord || 0;
+				if (occlusionTexture.strength !== undefined) {
+					material.aoMapIntensity = occlusionTexture.strength;
+				}
+				if (material.aoMap) {
+					parseTextureTransform(material, 'aoMap', occlusionTexture.extensions);
+				}
+			}
+
+			if (!KHR_materials_unlit) {
+				if (normalTexture) {
+					material.normalMap = textures[normalTexture.index];
+
+					material.normalScale.set(1, -1);
+					if (normalTexture.scale !== undefined) {
+						// fix flip y for normal map
+						// https://github.com/mrdoob/three.js/issues/11438#issuecomment-507003995
+						material.normalScale.set(normalTexture.scale, -normalTexture.scale);
+					}
+
+					if (material.normalMap) {
+						// parseTextureTransform(material, 'normalMap', normalTexture.extensions);
+					}
+				}
+			}
+
+			material.side = doubleSided === true ? DRAW_SIDE.DOUBLE : DRAW_SIDE.FRONT;
+
+			if (alphaMode === ALPHA_MODES.BLEND) {
+				material.transparent = true;
+			} else {
+				material.transparent = false;
+
+				if (alphaMode === ALPHA_MODES.MASK) {
+					material.alphaTest = alphaCutoff !== undefined ? alphaCutoff : 0.5;
+				}
+			}
+
+			materials[i] = material;
+		}
+
+		context.materials = materials;
+	}
+
+}
+
+function parseTextureTransform(material, key, extensions = {}) {
+	const extension = extensions.KHR_texture_transform;
+	if (extension) {
+		KHR_texture_transform.transform(material[key + 'Transform'], extension);
+	}
+}

package/src/loaders/parsers/cmpt/CMPTParser.js

@@ -0,0 +1,37 @@
+export class CMPTParser {
+
+	static parse(context, loader) {
+		const buffer = context.options.buffer;
+		const tilesLength = context.header.tilesLength;
+
+		const tiles = [];
+		let offset = 16;
+
+		for (let i = 0; i < tilesLength; i++) {
+			const tileView = new DataView(buffer, offset, 12);
+
+			const tileMagic =
+				String.fromCharCode(tileView.getUint8(0)) +
+				String.fromCharCode(tileView.getUint8(1)) +
+				String.fromCharCode(tileView.getUint8(2)) +
+				String.fromCharCode(tileView.getUint8(3));
+
+			const tileVersion = tileView.getUint32(4, true);
+
+			const byteLength = tileView.getUint32(8, true);
+
+			const tileBuffer = new Uint8Array(buffer, offset, byteLength);
+
+			tiles.push({
+				type: tileMagic,
+				buffer: tileBuffer,
+				version: tileVersion
+			});
+
+			offset += byteLength;
+		}
+
+		context.tiles = tiles;
+	}
+
+}

package/src/loaders/parsers/cmpt/CMPTRootParser.js

@@ -0,0 +1,44 @@
+import { Object3D } from 't3d';
+
+export class CMPTRootParser {
+
+	static parse(context, loader) {
+		const { tiles, options, path } = context;
+
+		const adjustmentTransform = options.adjustmentTransform;
+
+		const promises = [];
+
+		for (const i in tiles) {
+			const { type, buffer } = tiles[i];
+
+			const config = {
+				fetchOptions: options.fetchOptions,
+				path,
+				buffer: buffer.slice().buffer
+			};
+			if (type === 'b3dm' || type === 'i3dm') {
+				config.adjustmentTransform = adjustmentTransform;
+			}
+
+			const _loader = loader._loaders.get(type);
+			if (_loader) {
+				promises.push(_loader.load(`${path}/temp.${type}`, config));
+			}
+		}
+
+		return Promise.all(promises).then(results => {
+			const group = new Object3D();
+
+			results.forEach(result => {
+				group.add(result.root);
+			});
+
+			return {
+				tiles: results,
+				root: group
+			};
+		});
+	}
+
+}

package/src/loaders/parsers/gltf/IndexParser.js

@@ -0,0 +1,24 @@
+import { GLTFUtils } from '../../../libs/glTF/GLTFUtils.js';
+
+export class IndexParser {
+
+	static parse(context, loader) {
+		const { url, options } = context;
+		const buffer = options.buffer;
+
+		const _isGLB = isGLB(url);
+
+		if (_isGLB) {
+			const glbData = GLTFUtils.parseGLB(buffer);
+			context.gltf = glbData.gltf;
+			context.buffers = glbData.buffers;
+		} else {
+			context.gltf = buffer;
+		}
+	}
+
+}
+
+const isGLB = url => {
+	return url.substring(url.lastIndexOf('.') + 1) === 'glb';
+};