t3d-3dtiles 0.1.0

package/src/libs/ImageBitmapLoader.js

@@ -0,0 +1,56 @@
+import { Loader } from 't3d';
+
+class ImageBitmapLoader extends Loader {
+
+	constructor(manager) {
+		super(manager);
+
+		if (typeof createImageBitmap === 'undefined') {
+			console.warn('ImageBitmapLoader: createImageBitmap() not supported.');
+		}
+
+		if (typeof fetch === 'undefined') {
+			console.warn('ImageBitmapLoader: fetch() not supported.');
+		}
+
+		this.options = { premultiplyAlpha: 'none' };
+	}
+
+	setOptions(options) {
+		this.options = options;
+		return this;
+	}
+
+	load(url, onLoad, _onProgress, onError) {
+		if (url === undefined) url = '';
+		if (this.path !== undefined) url = this.path + url;
+
+		url = this.manager.resolveURL(url);
+
+		const scope = this;
+
+		const fetchOptions = {};
+		fetchOptions.credentials = (this.crossOrigin === 'anonymous') ? 'same-origin' : 'include';
+		fetchOptions.headers = this.requestHeader;
+
+		fetch(url, fetchOptions).then(function(res) {
+			return res.blob();
+		}).then(function(blob) {
+			return createImageBitmap(blob, Object.assign(scope.options, { colorSpaceConversion: 'none' }));
+		}).then(function(imageBitmap) {
+			if (onLoad) onLoad(imageBitmap);
+
+			scope.manager.itemEnd(url);
+		}).catch(function(e) {
+			if (onError) onError(e);
+
+			scope.manager.itemError(url);
+			scope.manager.itemEnd(url);
+		});
+
+		scope.manager.itemStart(url);
+	}
+
+}
+
+export { ImageBitmapLoader };

package/src/libs/glTF/Constants.js

@@ -0,0 +1,85 @@
+import {
+	TEXTURE_FILTER,
+	TEXTURE_WRAP
+} from 't3d';
+
+export const ATTRIBUTES = {
+	POSITION: 'a_Position',
+	NORMAL: 'a_Normal',
+	TANGENT: 'a_Tangent',
+	TEXCOORD_0: 'a_Uv',
+	TEXCOORD_1: 'a_Uv2',
+	TEXCOORD_2: 'a_Uv3',
+	TEXCOORD_3: 'a_Uv4',
+	TEXCOORD_4: 'a_Uv5',
+	TEXCOORD_5: 'a_Uv6',
+	TEXCOORD_6: 'a_Uv7',
+	TEXCOORD_7: 'a_Uv8',
+	COLOR_0: 'a_Color',
+	WEIGHTS_0: 'skinWeight',
+	JOINTS_0: 'skinIndex',
+
+	TEXCOORD0: 'a_Uv', // deprecated
+	TEXCOORD: 'a_Uv', // deprecated
+	COLOR0: 'a_Color', // deprecated
+	COLOR: 'a_Color', // deprecated
+	WEIGHT: 'skinWeight', // deprecated
+	JOINT: 'skinIndex' // deprecated
+};
+
+export const ALPHA_MODES = {
+	OPAQUE: 'OPAQUE',
+	MASK: 'MASK',
+	BLEND: 'BLEND'
+};
+
+export const PATH_PROPERTIES = {
+	scale: 'scale',
+	translation: 'position',
+	rotation: 'quaternion',
+	weights: 'morphTargetInfluences'
+};
+
+export const ACCESSOR_TYPE_SIZES = {
+	'SCALAR': 1,
+	'VEC2': 2,
+	'VEC3': 3,
+	'VEC4': 4,
+	'MAT2': 4,
+	'MAT3': 9,
+	'MAT4': 16
+};
+
+export const ACCESSOR_COMPONENT_TYPES = {
+	5120: Int8Array,
+	5121: Uint8Array,
+	5122: Int16Array,
+	5123: Uint16Array,
+	5125: Uint32Array,
+	5126: Float32Array
+};
+
+export const WEBGL_FILTERS = {
+	9728: TEXTURE_FILTER.NEAREST,
+	9729: TEXTURE_FILTER.LINEAR,
+	9984: TEXTURE_FILTER.NEAREST_MIPMAP_NEAREST,
+	9985: TEXTURE_FILTER.LINEAR_MIPMAP_NEAREST,
+	9986: TEXTURE_FILTER.NEAREST_MIPMAP_LINEAR,
+	9987: TEXTURE_FILTER.LINEAR_MIPMAP_LINEAR
+};
+
+export const WEBGL_WRAPPINGS = {
+	33071: TEXTURE_WRAP.CLAMP_TO_EDGE,
+	33648: TEXTURE_WRAP.MIRRORED_REPEAT,
+	10497: TEXTURE_WRAP.REPEAT
+};
+
+export const WEBGL_DRAW_MODES = {
+	POINTS: 0,
+	LINES: 1,
+	LINE_LOOP: 2,
+	LINE_STRIP: 3,
+	TRIANGLES: 4,
+	TRIANGLE_STRIP: 5,
+	TRIANGLE_FAN: 6
+};

package/src/libs/glTF/GLTFLoader.js

@@ -0,0 +1,169 @@
+import { DefaultLoadingManager, FileLoader, ImageLoader } from 't3d';
+
+import { ImageBitmapLoader } from '../ImageBitmapLoader.js';
+import { IndexParser } from './parsers/IndexParser.js';
+import { ReferenceParser } from './parsers/ReferenceParser.js';
+import { Validator } from './parsers/Validator.js';
+import { BufferParser } from './parsers/BufferParser.js';
+import { BufferViewParser } from './parsers/BufferViewParser.js';
+import { ImageParser } from './parsers/ImageParser.js';
+import { TextureParser } from './parsers/TextureParser.js';
+import { MaterialParser } from './parsers/MaterialParser.js';
+import { AccessorParser } from './parsers/AccessorParser.js';
+import { PrimitiveParser } from './parsers/PrimitiveParser.js';
+import { NodeParser } from './parsers/NodeParser.js';
+import { SkinParser } from './parsers/SkinParser.js';
+import { SceneParser } from './parsers/SceneParser.js';
+import { AnimationParser } from './parsers/AnimationParser.js';
+
+import { GLTFResource } from './GLTFResource.js';
+import { GLTFUtils } from './GLTFUtils.js';
+
+const DefaultParsePipeline = [
+	IndexParser,
+	ReferenceParser,
+	Validator,
+	BufferParser,
+	BufferViewParser,
+	ImageParser,
+	TextureParser,
+	MaterialParser,
+	AccessorParser,
+	PrimitiveParser,
+	NodeParser,
+	SkinParser,
+	SceneParser,
+	AnimationParser
+];
+
+export class GLTFLoader {
+
+	constructor(manager = DefaultLoadingManager, parsers = DefaultParsePipeline) {
+		this.manager = manager;
+
+		// If ture, loading manager will dispatch progress for every buffer and image.
+		// otherwise, loading manager will only dispatch progress for the whole gltf resource.
+		this.detailLoadProgress = true;
+
+		// If set false, need add Promise.catch to catch errors.
+		this.autoLogError = true;
+
+		this._parsers = parsers.slice(0);
+
+		this._dracoLoader = null;
+		this._meshoptDecoder = null;
+		this._ktx2Loader = null;
+
+		this._fileLoader = new FileLoader();
+
+		const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent) === true;
+		const isFirefox = navigator.userAgent.indexOf('Firefox') > -1;
+		const firefoxVersion = isFirefox ? navigator.userAgent.match(/Firefox\/([0-9]+)\./)[1] : -1;
+
+		if (typeof createImageBitmap === 'undefined' || isSafari || (isFirefox && firefoxVersion < 98)) {
+			this._imageLoader = new ImageLoader();
+		} else {
+			this._imageLoader = new ImageBitmapLoader();
+		}
+	}
+
+	load(url, options = {}) {
+		this.manager.itemStart(url);
+
+		return new Promise((resolve, reject) => {
+			const resource = new GLTFResource();
+			resource.url = url;
+			resource.path = GLTFUtils.extractUrlBase(url);
+			resource.options = options;
+
+			this._parse(resource)
+				.then(resolve)
+				.then(() => this.manager.itemEnd(url))
+				.catch(e => {
+					if (this.autoLogError) {
+						console.error(e);
+					}
+
+					if (this.detailLoadProgress && resource.loadItems) {
+						resource.loadItems.forEach(item => {
+							this.manager.itemEnd(item);
+						});
+					}
+
+					this.manager.itemError(url);
+					this.manager.itemEnd(url);
+
+					reject(`Error loading glTF model from ${url} .`);
+				});
+		});
+	}
+
+	_parse(context) {
+		let lastParser;
+		return new Promise((resolve, reject) => {
+			this._parsers.forEach(parser => {
+				if (lastParser) {
+					lastParser = lastParser.then(() => parser.parse(context, this));
+				} else {
+					lastParser = parser.parse(context, this);
+				}
+			});
+
+			if (lastParser) {
+				lastParser.then(() => resolve(context)).catch(reject);
+			} else {
+				resolve(context);
+			}
+		});
+	}
+
+	setDRACOLoader(dracoLoader) {
+		this._dracoLoader = dracoLoader;
+		return this;
+	}
+
+	getDRACOLoader() {
+		return this._dracoLoader;
+	}
+
+	setMeshoptDecoder(meshoptDecoder) {
+		this._meshoptDecoder = meshoptDecoder;
+		return this;
+	}
+	getMeshoptDecoder() {
+		return this._meshoptDecoder;
+	}
+
+	setKTX2Loader(ktx2Loader) {
+		this._ktx2Loader = ktx2Loader;
+		return this;
+	}
+	getKTX2Loader() {
+		return this._ktx2Loader;
+	}
+
+	loadFile(url, type = 'json') {
+		this._fileLoader.setResponseType(type);
+
+		return new Promise((resolve, reject) => {
+			url = this.manager.resolveURL(url);
+			this._fileLoader.load(url, resolve, undefined, reject);
+		});
+	}
+
+	loadImage(url) {
+		return new Promise((resolve, reject) => {
+			url = this.manager.resolveURL(url);
+			this._imageLoader.load(url, resolve, undefined, reject);
+		});
+	}
+
+	insertParser(parser, index) {
+		this._parsers.splice(index, 0, parser);
+	}
+
+	replaceParser(parser, index) {
+		this._parsers.splice(index, 1, parser);
+	}
+
+}

package/src/libs/glTF/GLTFResource.js

@@ -0,0 +1,28 @@
+let resourceId = 0;
+
+export class GLTFResource {
+
+	constructor() {
+		this.id = ++resourceId;
+		this.url = ''; // url string
+		this.path = ''; // path string
+		this.options = null; // load options
+		this.gltf = null; // gltf json after IndexParser
+		this.loadItems = null; // String[] after IndexParser. Store all urls that need to load.
+		this.buffers = null; // ArrayBuffer[] after BufferParser
+		this.bufferViews = null; // ArrayBuffer[] after BufferViewParser
+		this.images = null; // Image[] after ImageParser
+		this.textures = null; // Texture2D[] after TextureParser
+		this.materials = null; // Material[] after MaterialParser
+		this.accessors = null; // Attribute[] after AccessorParser
+		this.primitives = null; // { mode, geometry, material, weights, skinned }[] after PrimitiveParser
+		this.nodes = null; // Object3D[] after NodeParser
+		this.cameras = null; // Camera[] after NodeParser
+		this.lights = null; // Light[] after NodeParser
+		this.skins = null; // Skeleton[] after SkinParser
+		this.root = null; // root after SceneParser
+		this.roots = null; // root[] after SceneParser
+		this.animations = null; // KeyframeClip[] after AnimationParser
+	}
+
+}

package/src/libs/glTF/GLTFUtils.js

@@ -0,0 +1,131 @@
+// Characters [].:/ are reserved for track binding syntax.
+const RESERVED_CHARS_RE = '\\[\\]\\.:\\/';
+const reservedRe = new RegExp('[' + RESERVED_CHARS_RE + ']', 'g');
+
+export class GLTFUtils {
+
+	constructor() {}
+
+	// deprecated since v0.2.0
+	static sanitizeNodeName(name) {
+		return name.replace(/\s/g, '_').replace(reservedRe, '');
+	}
+
+	static extractUrlBase(url) {
+		const parts = url.split('/');
+		parts.pop();
+		return (parts.length < 1 ? '.' : parts.join('/')) + '/';
+	}
+
+	// url: aa.bin ;  path:example/resource/model/     (for example)example/resource/model/aa.bin
+	static resolveURL(url, path) {
+		// Invalid URL
+		if (typeof url !== 'string' || url === '') return '';
+
+		// Absolute URL http://,https://,//
+		if (/^(https?:)?\/\//i.test(url)) return url;
+
+		// Data URI
+		if (/^data:/i.test(url)) return url;
+
+		// Blob URL
+		if (/^blob:/i.test(url)) return url;
+
+		// Relative URL
+		return path + url;
+	}
+
+	static decodeText(array) {
+		if (typeof TextDecoder !== 'undefined') {
+			return new TextDecoder().decode(array);
+		}
+
+		// Avoid the String.fromCharCode.apply(null, array) shortcut, which
+		// throws a "maximum call stack size exceeded" error for large arrays.
+
+		let s = '';
+
+		for (let i = 0, il = array.length; i < il; i++) {
+			// Implicitly assumes little-endian.
+			s += String.fromCharCode(array[i]);
+		}
+
+		try {
+			// merges multi-byte utf-8 characters.
+
+			return decodeURIComponent(escape(s));
+		} catch (e) { // see #16358
+			return s;
+		}
+	}
+
+	static parseGLB(glb) {
+		const UINT32_LENGTH = 4;
+		const GLB_HEADER_MAGIC = 0x46546C67; // 'glTF'
+		const GLB_HEADER_LENGTH = 12;
+		const GLB_CHUNK_TYPES = { JSON: 0x4E4F534A, BIN: 0x004E4942 };
+
+		const dataView = new DataView(glb);
+
+		const header = {
+			magic: dataView.getUint32(0, true),
+			version: dataView.getUint32(UINT32_LENGTH, true),
+			length: dataView.getUint32(2 * UINT32_LENGTH, true)
+		};
+
+		if (header.magic !== GLB_HEADER_MAGIC) {
+			console.error('Invalid glb magic number. Expected 0x46546C67, found 0x' + header.magic.toString(16));
+			return null;
+		} else if (header.version < 2.0) {
+			console.error('GLTFLoader: Legacy binary file detected.');
+		}
+
+		let chunkLength = dataView.getUint32(GLB_HEADER_LENGTH, true);
+		let chunkType = dataView.getUint32(GLB_HEADER_LENGTH + UINT32_LENGTH, true);
+
+		if (chunkType !== GLB_CHUNK_TYPES.JSON) {
+			console.error('Invalid glb chunk type. Expected 0x4E4F534A, found 0x' + chunkType.toString(16));
+			return null;
+		}
+
+		const glTFData = new Uint8Array(glb, GLB_HEADER_LENGTH + 2 * UINT32_LENGTH, chunkLength);
+		const gltf = JSON.parse(GLTFUtils.decodeText(glTFData));
+
+		const buffers = [];
+		let byteOffset = GLB_HEADER_LENGTH + 2 * UINT32_LENGTH + chunkLength;
+
+		while (byteOffset < header.length) {
+			chunkLength = dataView.getUint32(byteOffset, true);
+			chunkType = dataView.getUint32(byteOffset + UINT32_LENGTH, true);
+
+			if (chunkType !== GLB_CHUNK_TYPES.BIN) {
+				console.error('Invalid glb chunk type. Expected 0x004E4942, found 0x' + chunkType.toString(16));
+				return null;
+			}
+
+			const currentOffset = byteOffset + 2 * UINT32_LENGTH;
+			const buffer = glb.slice(currentOffset, currentOffset + chunkLength);
+			buffers.push(buffer);
+
+			byteOffset += chunkLength + 2 * UINT32_LENGTH;
+		}
+
+		return { gltf, buffers };
+	}
+
+	// Reference: github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_mesh_quantization#encoding-quantized-data
+	static getNormalizedComponentScale(constructor) {
+		if (constructor === Int8Array) {
+			return 1 / 127;
+		} else if (constructor === Uint8Array) {
+			return 1 / 255;
+		} else if (constructor === Int16Array) {
+			return 1 / 32767;
+		} else if (constructor === Uint16Array) {
+			return 1 / 65535;
+		} else {
+			throw new Error('Unsupported normalized accessor component type.');
+		}
+	}
+
+}

package/src/libs/glTF/extensions/EXT_meshopt_compression.js

@@ -0,0 +1,35 @@
+/**
+ * meshopt BufferView Compression Extension
+ *
+ * Specification: https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Vendor/EXT_meshopt_compression
+ */
+export class EXT_meshopt_compression {
+
+	static loadBufferView(extensionDef, buffers, meshoptDecoder) {
+		const buffer = buffers[extensionDef.buffer];
+
+		if (!meshoptDecoder || !meshoptDecoder.supported) {
+			throw new Error('GLTFLoader: setMeshoptDecoder must be called before loading compressed files.');
+		}
+
+		const byteOffset = extensionDef.byteOffset || 0;
+		const byteLength = extensionDef.byteLength || 0;
+
+		const count = extensionDef.count;
+		const stride = extensionDef.byteStride;
+
+		const source = new Uint8Array(buffer, byteOffset, byteLength);
+
+		if (meshoptDecoder.decodeGltfBufferAsync) {
+			return meshoptDecoder.decodeGltfBufferAsync(count, stride, source, extensionDef.mode, extensionDef.filter).then(res => res.buffer);
+		} else {
+			// Support for MeshoptDecoder 0.18 or earlier, without decodeGltfBufferAsync
+			return meshoptDecoder.ready.then(() => {
+				const result = new ArrayBuffer(count * stride);
+				meshoptDecoder.decodeGltfBuffer(new Uint8Array(result), count, stride, source, extensionDef.mode, extensionDef.filter);
+				return result;
+			});
+		}
+	}
+
+}

package/src/libs/glTF/extensions/KHR_draco_mesh_compression.js

@@ -0,0 +1,54 @@
+import { ATTRIBUTES, ACCESSOR_COMPONENT_TYPES } from '../Constants.js';
+
+/**
+ * KHR_draco_mesh_compression extension
+ * https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_draco_mesh_compression
+ */
+export class KHR_draco_mesh_compression {
+
+	static getGeometry(params, bufferViews, attributes, accessors, dracoLoader) {
+		const { bufferView: bufferViewIndex, attributes: gltfAttributeMap } = params;
+
+		if (!dracoLoader) {
+			throw new Error('GLTFLoader: No DRACOLoader instance provided.');
+		}
+
+		const attributeMap = {};
+
+		for (const attributeSemantic in gltfAttributeMap) {
+			const attributeName = ATTRIBUTES[attributeSemantic] === undefined ? attributeSemantic : ATTRIBUTES[attributeSemantic];
+			attributeMap[attributeName] = gltfAttributeMap[attributeSemantic];
+		}
+
+		const attributeNormalizedMap = {};
+		const attributeTypeMap = {};
+
+		for (const attributeNameItem in attributes) {
+			const attributeName = ATTRIBUTES[attributeNameItem] || attributeNameItem.toLowerCase();
+
+			if (gltfAttributeMap[attributeNameItem] !== undefined) {
+				const accessorDef = accessors[attributes[attributeNameItem]];
+				const componentType = ACCESSOR_COMPONENT_TYPES[accessorDef.componentType];
+
+				attributeTypeMap[attributeName] = componentType.name;
+				attributeNormalizedMap[attributeName] = accessorDef.normalized === true;
+			}
+		}
+
+		const bufferView = bufferViews[bufferViewIndex];
+
+		return new Promise(function(resolve) {
+			dracoLoader.decodeDracoFile(bufferView, function(geometry) {
+				for (const attributeName in geometry.attributes) {
+					const attribute = geometry.attributes[attributeName];
+					const normalized = attributeNormalizedMap[attributeName];
+
+					if (normalized !== undefined) attribute.normalized = normalized;
+				}
+
+				resolve(geometry);
+			}, attributeMap, attributeTypeMap);
+		});
+	}
+
+}

package/src/libs/glTF/extensions/KHR_lights_punctual.js

@@ -0,0 +1,53 @@
+import { DirectionalLight, PointLight, SpotLight } from 't3d';
+
+/**
+ * KHR_lights_punctual extension
+ * https://github.com/KhronosGroup/glTF/blob/master/extensions/2.0/Khronos/KHR_lights_punctual/README.md
+ */
+export class KHR_lights_punctual {
+
+	static getLight(params) {
+		const { color, intensity = 1, type, range, spot } = params;
+
+		let lightNode;
+
+		if (type === 'directional') {
+			lightNode = new DirectionalLight();
+		} else if (type === 'point') {
+			lightNode = new PointLight();
+
+			if (range !== undefined) {
+				lightNode.distance = range;
+			}
+
+			// https://github.com/KhronosGroup/glTF/blob/master/extensions/2.0/Khronos/KHR_lights_punctual/README.md#range-property
+			// lightNode.decay = 2;
+		} else if (type === 'spot') {
+			lightNode = new SpotLight();
+
+			if (range !== undefined) {
+				lightNode.distance = range;
+			}
+
+			// https://github.com/KhronosGroup/glTF/blob/master/extensions/2.0/Khronos/KHR_lights_punctual/README.md#range-property
+			// lightNode.decay = 2;
+
+			if (spot) {
+				const { innerConeAngle = 0, outerConeAngle = Math.PI / 4 } = spot;
+				lightNode.angle = outerConeAngle;
+				lightNode.penumbra = 1.0 - innerConeAngle / outerConeAngle;
+			}
+		} else {
+			throw new Error('Unexpected light type: ' + type);
+		}
+
+		if (color) {
+			lightNode.color.fromArray(color);
+		}
+
+		lightNode.intensity = intensity;
+
+		return lightNode;
+	}
+
+}

package/src/libs/glTF/extensions/KHR_materials_clearcoat.js

@@ -0,0 +1,42 @@
+import { PBRMaterial, Vector2 } from 't3d';
+/**
+ * Clearcoat Materials Extension
+ * Specification: https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_materials_clearcoat
+ */
+export class KHR_materials_clearcoat {
+
+	static getMaterial() {
+		return new PBRMaterial();
+	}
+
+	static parseParams(material, extension, textures) {
+		const { clearcoatFactor, clearcoatTexture, clearcoatRoughnessFactor, clearcoatRoughnessTexture, clearcoatNormalTexture } = extension;
+
+		if (clearcoatFactor) {
+			material.clearcoat = clearcoatFactor;
+		}
+		if (clearcoatTexture) {
+			material.clearcoatMap = textures[clearcoatTexture.index];
+			// material does not yet support the transform of clearcoatMap.
+			// parseTextureTransform(material, 'clearcoatMap', clearcoatTexture.extensions);
+		}
+		if (clearcoatRoughnessFactor) {
+			material.clearcoatRoughness = clearcoatRoughnessFactor;
+		}
+		if (clearcoatRoughnessTexture) {
+			material.clearcoatRoughnessMap = textures[clearcoatRoughnessTexture.index];
+			// material does not yet support the transform of clearcoatRoughnessMap.
+			// parseTextureTransform(material, 'clearcoatRoughnessMap', clearcoatRoughnessTexture.extensions);
+		}
+		if (clearcoatNormalTexture) {
+			material.clearcoatNormalMap = textures[clearcoatNormalTexture.index];
+			// material does not yet support the transform of clearcoatNormalMap.
+			// parseTextureTransform(material, 'clearcoatNormalMap', clearcoatNormalTexture.extensions);
+			if (clearcoatNormalTexture.scale) {
+				const scale = clearcoatNormalTexture.scale;
+				material.clearcoatNormalScale = new Vector2(scale, scale);
+			}
+		}
+	}
+
+}