t3d-3dtiles 0.1.0

package/src/libs/glTF/parsers/NodeParser.js

@@ -0,0 +1,145 @@
+import { Bone, Camera, Object3D, Mesh, SkinnedMesh, Vector4 } from 't3d';
+import { KHR_lights_punctual as _KHR_lights_punctual } from '../extensions/KHR_lights_punctual.js';
+
+export class NodeParser {
+
+	static parse(context) {
+		const {
+			gltf: { nodes: gltfNodes, cameras: gltfCameras, extensions: gltfExtensions }
+		} = context;
+
+		if (!gltfNodes) return;
+
+		const cameras = [];
+		const lights = [];
+		const nodes = gltfNodes.map(gltfNode => {
+			const {
+				matrix, translation, rotation, scale,
+				camera: cameraID, mesh: meshID,
+				extensions = {}
+			} = gltfNode;
+			const { KHR_lights_punctual } = extensions;
+
+			let node = null;
+
+			if (gltfNode.isBone) {
+				// .isBone isn't in glTF spec. Marked in IndexParser
+				node = new Bone();
+			} else if (meshID !== undefined) {
+				node = createMesh(context, gltfNode);
+			} else if (cameraID !== undefined) {
+				node = createCamera(gltfCameras[cameraID]);
+				cameras.push(node);
+			} else if (KHR_lights_punctual) {
+				const lightIndex = KHR_lights_punctual.light;
+				const gltfLights = gltfExtensions.KHR_lights_punctual.lights;
+				node = _KHR_lights_punctual.getLight(gltfLights[lightIndex]);
+				lights.push(node);
+			} else {
+				node = new Object3D();
+			}
+
+			node.name = gltfNode.name || '';
+			if (!!node.name && node.children.length > 0) {
+				for (let i = 0; i < node.children.length; i++) {
+					node.children[i].name = node.name + '_' + i;
+				}
+			}
+
+			if (matrix !== undefined) {
+				node.matrix.fromArray(matrix);
+				node.matrix.decompose(node.position, node.quaternion, node.scale);
+			} else {
+				if (translation !== undefined) {
+					node.position.fromArray(translation);
+				}
+
+				if (rotation !== undefined) {
+					node.quaternion.fromArray(rotation);
+				}
+
+				if (scale !== undefined) {
+					node.scale.fromArray(scale);
+				}
+			}
+
+			return node;
+		});
+
+		context.nodes = nodes;
+		context.cameras = cameras;
+		context.lights = lights;
+	}
+
+}
+
+function createCamera(cameraDef) {
+	const { orthographic, perspective, type } = cameraDef;
+
+	const camera = new Camera();
+
+	if (type == 'perspective') {
+		const { aspectRatio, yfov, zfar, znear } = perspective;
+		camera.setPerspective(yfov, aspectRatio || 1, znear || 1, zfar || 2e6);
+	} else if (type == 'orthographic') {
+		const { xmag, ymag, zfar, znear } = orthographic;
+		// https:// github.com/KhronosGroup/glTF/issues/1663
+		camera.setOrtho(-xmag, xmag, -ymag, ymag, znear || 1, zfar || 2e6);
+	}
+
+	return camera;
+}
+
+function createMesh(context, gltfNode) {
+	const { primitives } = context;
+
+	const { mesh: meshID, skin: skinID } = gltfNode;
+
+	const meshes = primitives[meshID].map(primitive => {
+		const { geometry, material, weights } = primitive;
+
+		let mesh;
+
+		if (skinID !== undefined) {
+			mesh = new SkinnedMesh(geometry, material);
+
+			if (geometry.attributes.skinWeight && !geometry.attributes.skinWeight.normalized) {
+				normalizeSkinWeights(geometry.attributes.skinWeight);
+			}
+		} else {
+			mesh = new Mesh(geometry, material);
+
+			if (weights) {
+				mesh.morphTargetInfluences = weights.slice();
+			}
+		}
+
+		return mesh;
+	});
+
+	if (meshes.length > 1) {
+		const parent = new Object3D();
+		meshes.forEach(mesh => parent.add(mesh));
+		return parent;
+	} else {
+		return meshes[0];
+	}
+}
+
+const _vec4_1 = new Vector4();
+
+function normalizeSkinWeights(skinWeight) {
+	const offset = skinWeight.offset;
+	const buffer = skinWeight.buffer;
+	const stride = buffer.stride;
+	for (let i = 0, l = buffer.count; i < l; i++) {
+		_vec4_1.fromArray(buffer.array, i * stride + offset);
+		const scale = 1.0 / _vec4_1.getManhattanLength();
+		if (scale !== Infinity) {
+			_vec4_1.multiplyScalar(scale);
+		} else {
+			_vec4_1.set(1, 0, 0, 0); // do something reasonable
+		}
+		_vec4_1.toArray(buffer.array, i * stride + offset);
+	}
+}

package/src/libs/glTF/parsers/PrimitiveParser.js

@@ -0,0 +1,289 @@
+import { Geometry, PBRMaterial, VERTEX_COLOR, SHADING_TYPE, PointsMaterial, Material, BasicMaterial } from 't3d';
+import { GLTFUtils } from '../GLTFUtils.js';
+import { ATTRIBUTES, ACCESSOR_COMPONENT_TYPES, WEBGL_DRAW_MODES } from '../Constants.js';
+import { KHR_draco_mesh_compression as _KHR_draco_mesh_compression } from '../extensions/KHR_draco_mesh_compression.js';
+
+export class PrimitiveParser {
+
+	static parse(context, loader) {
+		const { gltf, accessors, materials, bufferViews } = context;
+
+		if (!gltf.meshes) return;
+
+		const materialCache = new Map();
+		const geometryPromiseCache = new Map();
+
+		const meshPromises = [];
+		for (let i = 0; i < gltf.meshes.length; i++) {
+			const gltfMesh = gltf.meshes[i];
+
+			const primitivePromises = [];
+			for (let j = 0; j < gltfMesh.primitives.length; j++) {
+				const gltfPrimitive = gltfMesh.primitives[j];
+				const {
+					extensions = {},
+					mode,
+					material
+				} = gltfPrimitive;
+				const { KHR_draco_mesh_compression } = extensions;
+
+				let geometryPromise;
+
+				const geometryKey = createGeometryKey(gltfPrimitive);
+				if (geometryPromiseCache.has(geometryKey)) {
+					geometryPromise = geometryPromiseCache.get(geometryKey);
+				} else {
+					if (KHR_draco_mesh_compression) {
+						geometryPromise = _KHR_draco_mesh_compression.getGeometry(KHR_draco_mesh_compression, bufferViews, gltfPrimitive.attributes, gltf.accessors, loader.getDRACOLoader());
+					} else {
+						geometryPromise = Promise.resolve(new Geometry());
+					}
+
+					geometryPromise = geometryPromise.then(geometry => {
+						parseGeometryFromGLTFPrimitive(geometry, gltfPrimitive, gltf, accessors);
+						return geometry;
+					});
+
+					geometryPromiseCache.set(geometryKey, geometryPromise);
+				}
+
+				const primitivePromise = geometryPromise.then(geometry => {
+					const primitive = {
+						mode,
+						geometry,
+						material: material === undefined ? new PBRMaterial() : materials[material],
+						weights: (Object.keys(geometry.morphAttributes).length > 0 && gltfMesh.weights) ? gltfMesh.weights.slice(0) : undefined,
+						skinned: gltfMesh.isSkinned
+					};
+					assignFinalMaterial(primitive, materialCache);
+					return primitive;
+				});
+
+				primitivePromises.push(primitivePromise);
+			}
+			meshPromises.push(Promise.all(primitivePromises));
+		}
+
+		materialCache.clear();
+		geometryPromiseCache.clear();
+
+		return Promise.all(meshPromises).then(primitives => {
+			context.primitives = primitives;
+		});
+	}
+
+}
+
+function parseGeometryFromGLTFPrimitive(geometry, gltfPrimitive, gltf, accessors) {
+	const { attributes, indices, targets } = gltfPrimitive;
+
+	// set attributes
+
+	for (const attributeSemantic in attributes) {
+		const accessorIdx = attributes[attributeSemantic];
+
+		const attributeName = ATTRIBUTES[attributeSemantic] === undefined ? attributeSemantic : ATTRIBUTES[attributeSemantic];
+		// Skip attributes already provided by e.g. Draco extension.
+		if (attributeName in geometry.attributes) continue;
+
+		geometry.addAttribute(attributeName, accessors[accessorIdx]);
+	}
+
+	// set index
+
+	if (indices !== undefined && !geometry.index) {
+		geometry.setIndex(accessors[indices]);
+	}
+
+	// compute bounds
+
+	const { boundingBox, boundingSphere } = geometry;
+	if (attributes.POSITION !== undefined) {
+		const accessorIdx = attributes.POSITION;
+		const accessor = gltf.accessors[accessorIdx];
+
+		if (accessor.min && accessor.max) {
+			boundingBox.min.fromArray(accessor.min);
+			boundingBox.max.fromArray(accessor.max);
+
+			if (accessor.normalized) {
+				const boxScale = GLTFUtils.getNormalizedComponentScale(ACCESSOR_COMPONENT_TYPES[accessor.componentType]);
+				boundingBox.min.multiplyScalar(boxScale);
+				boundingBox.max.multiplyScalar(boxScale);
+			}
+		} else {
+			geometry.computeBoundingBox();
+		}
+	} else {
+		geometry.computeBoundingBox();
+	}
+	boundingBox.getCenter(boundingSphere.center);
+	boundingSphere.radius = boundingBox.min.distanceTo(boundingBox.max) / 2;
+
+	// set morph targets
+
+	if (targets) {
+		let hasMorphPosition = false;
+		let hasMorphNormal = false;
+
+		for (let i = 0, il = targets.length; i < il; i++) {
+			const target = targets[i];
+
+			if (target.POSITION !== undefined) hasMorphPosition = true;
+			if (target.NORMAL !== undefined) hasMorphNormal = true;
+
+			if (hasMorphPosition && hasMorphNormal) break;
+		}
+
+		if (hasMorphPosition || hasMorphNormal) {
+			const morphPositions = [];
+			const morphNormals = [];
+
+			for (let i = 0, il = targets.length; i < il; i++) {
+				const target = targets[i];
+
+				if (hasMorphPosition) {
+					morphPositions.push(target.POSITION !== undefined ? accessors[target.POSITION] : geometry.attributes[ATTRIBUTES.POSITION]);
+				}
+				if (hasMorphNormal) {
+					morphNormals.push(target.NORMAL !== undefined ? accessors[target.NORMAL] : geometry.attributes[ATTRIBUTES.NORMAL]);
+				}
+			}
+
+			if (hasMorphPosition) {
+				geometry.morphAttributes.position = morphPositions;
+			}
+			if (hasMorphNormal) {
+				geometry.morphAttributes.normal = morphNormals;
+			}
+		}
+	}
+
+	return geometry;
+}
+
+function assignFinalMaterial(primitive, materialCache) {
+	let { geometry, material, skinned, mode } = primitive;
+
+	// If the material will be modified later on, clone it now.
+	const useVertexTangents = geometry.attributes[ATTRIBUTES.TANGENT] !== undefined;
+	const useVertexColors = geometry.attributes[ATTRIBUTES.COLOR_0] !== undefined;
+	const useFlatShading = geometry.attributes[ATTRIBUTES.NORMAL] === undefined;
+	const useSkinning = skinned;
+
+	if (mode === WEBGL_DRAW_MODES.POINTS) {
+		const cacheKey = 'PointsMaterial:' + material.id;
+		let pointsMaterial = materialCache.get(cacheKey);
+		if (!pointsMaterial) {
+			pointsMaterial = new PointsMaterial();
+			Material.prototype.copy.call(pointsMaterial, material);
+			pointsMaterial.diffuse.copy(material.diffuse);
+			pointsMaterial.diffuseMap = material.map;
+			pointsMaterial.drawMode = mode;
+			pointsMaterial.acceptLight = false; // PointsMaterial doesn't support lights yet
+			materialCache.set(cacheKey, pointsMaterial);
+		}
+		material = pointsMaterial;
+	} else if (mode === WEBGL_DRAW_MODES.LINES || mode === WEBGL_DRAW_MODES.LINE_STRIP || mode === WEBGL_DRAW_MODES.LINE_LOOP) {
+		const cacheKey = 'BasicMaterial:' + material.id;
+		let basicMaterial = materialCache.get(cacheKey);
+		if (!basicMaterial) {
+			basicMaterial = new BasicMaterial();
+			basicMaterial.envMap = undefined; // force close env map
+			basicMaterial.diffuse.copy(material.diffuse);
+			basicMaterial.diffuseMap = material.diffuseMap;
+			basicMaterial.drawMode = mode;
+			materialCache.set(cacheKey, basicMaterial);
+		}
+		material = basicMaterial;
+	} else if (mode === WEBGL_DRAW_MODES.TRIANGLE_STRIP) {
+		// TODO
+		console.warn('TRIANGLE_STRIP will be removed later.');
+		material.drawMode = WEBGL_DRAW_MODES.TRIANGLE_STRIP;
+	} else if (mode === WEBGL_DRAW_MODES.TRIANGLE_FAN) {
+		// TODO
+		console.warn('TRIANGLE_FAN will be removed later.');
+		material.drawMode = WEBGL_DRAW_MODES.TRIANGLE_FAN;
+	}
+
+	if (useVertexTangents || useVertexColors || useFlatShading || useSkinning) {
+		let cacheKey = 'ClonedMaterial:' + material.id + ':';
+
+		if (useVertexTangents) cacheKey += 'vertex-tangents:';
+		if (useVertexColors) {
+			if (geometry.attributes[ATTRIBUTES.COLOR_0].size === 3) {
+				cacheKey += 'vertex-colors-rgb:';
+			} else if (geometry.attributes[ATTRIBUTES.COLOR_0].size === 4) {
+				cacheKey += 'vertex-colors-rgba:';
+			}
+		}
+		if (useFlatShading) cacheKey += 'flat-shading:';
+
+		let cachedMaterial = materialCache.get(cacheKey);
+
+		if (!cachedMaterial) {
+			cachedMaterial = material.clone();
+
+			if (useVertexTangents) {
+				cachedMaterial.vertexTangents = true;
+
+				// revert flip y fix for tangents
+				// https://github.com/mrdoob/three.js/issues/11438#issuecomment-507003995
+				if (cachedMaterial.normalMap) {
+					cachedMaterial.normalScale.y *= -1;
+				}
+			}
+
+			if (useVertexColors) {
+				if (geometry.attributes[ATTRIBUTES.COLOR_0].size === 3) {
+					cachedMaterial.vertexColors = VERTEX_COLOR.RGB;
+				} else if (geometry.attributes[ATTRIBUTES.COLOR_0].size === 4) {
+					cachedMaterial.vertexColors = VERTEX_COLOR.RGBA;
+				} else {
+					console.warn('Illegal vertex color size: ' + geometry.attributes[ATTRIBUTES.COLOR_0].size);
+				}
+			}
+
+			if (useFlatShading) {
+				cachedMaterial.shading = SHADING_TYPE.FLAT_SHADING;
+			}
+		}
+
+		material = cachedMaterial;
+	}
+
+	primitive.material = material;
+}
+
+function createGeometryKey(primitive) {
+	const dracoExtension = primitive.extensions && primitive.extensions.KHR_draco_mesh_compression;
+	let geometryKey;
+
+	if (dracoExtension) {
+		geometryKey = 'draco:' + dracoExtension.bufferView
+				+ ':' + dracoExtension.indices
+				+ ':' + createAttributesKey(dracoExtension.attributes);
+	} else {
+		geometryKey = primitive.indices + ':' + createAttributesKey(primitive.attributes) + ':' + primitive.mode;
+	}
+
+	if (primitive.targets) {
+		for (let i = 0, il = primitive.targets.length; i < il; i++) {
+			geometryKey += ':' + createAttributesKey(primitive.targets[i]);
+		}
+	}
+
+	return geometryKey;
+}
+
+function createAttributesKey(attributes) {
+	let attributesKey = '';
+
+	const keys = Object.keys(attributes).sort();
+
+	for (let i = 0, il = keys.length; i < il; i++) {
+		attributesKey += keys[i] + ':' + attributes[keys[i]] + ';';
+	}
+
+	return attributesKey;
+}

package/src/libs/glTF/parsers/ReferenceParser.js

@@ -0,0 +1,67 @@
+import { GLTFUtils } from '../GLTFUtils.js';
+
+// Marks the special nodes/meshes in json for efficient parse.
+export class ReferenceParser {
+
+	static parse(context, loader) {
+		const { gltf, path } = context;
+		const { nodes = [], skins = [], meshes = [], buffers, images } = gltf;
+
+		// Nothing in the node definition indicates whether it is a Bone or an
+		// Object3D. Use the skins' joint references to mark bones.
+		skins.forEach(skin => {
+			const { joints = [] } = skin;
+			joints.forEach(joint => {
+				nodes[joint].isBone = true;
+			});
+		});
+
+		// Nothing in the mesh definition indicates whether it is
+		// a SkinnedMesh or Mesh. Use the node's mesh reference
+		// to mark SkinnedMesh if node has skin.
+		nodes.forEach(node => {
+			if (node.mesh !== undefined) {
+				if (node.skin !== undefined) {
+					meshes[node.mesh].isSkinned = true;
+				}
+			}
+		});
+
+		// setup loading list for detail load progress
+		if (loader.detailLoadProgress) {
+			const loadItems = new Set();
+
+			if (buffers) {
+				buffers.forEach(buffer => {
+					if (!buffer.uri) {
+						// glb or other
+						return;
+					}
+					const bufferUrl = GLTFUtils.resolveURL(buffer.uri, path);
+					loadItems.add(bufferUrl);
+				});
+			}
+
+			if (images) {
+				images.forEach((image, index) => {
+					const { uri, bufferView: bufferViewIndex } = image;
+
+					let imageUrl = uri;
+
+					if (bufferViewIndex !== undefined) {
+						imageUrl = 'blob<' + index + '>'; // fake url for blob image
+					}
+
+					imageUrl = GLTFUtils.resolveURL(imageUrl, path);
+
+					loadItems.add(imageUrl);
+				});
+			}
+
+			loadItems.forEach(item => loader.manager.itemStart(item));
+
+			context.loadItems = loadItems;
+		}
+	}
+
+}

package/src/libs/glTF/parsers/SceneParser.js

@@ -0,0 +1,41 @@
+import { Object3D } from 't3d';
+
+export class SceneParser {
+
+	static parse(context) {
+		const { gltf, nodes } = context;
+
+		const roots = gltf.scenes.map(sceneDef => {
+			const { name: sceneName = '', nodes: nodeIds = [] } = sceneDef;
+
+			const group = new Object3D();
+			group.name = sceneName;
+
+			for (let i = 0; i < nodeIds.length; i++) {
+				buildNodeHierachy(nodeIds[i], group, gltf.nodes, nodes);
+			}
+
+			return group;
+		});
+
+		context.roots = roots;
+		context.root = roots[gltf.scene || 0];
+	}
+
+}
+
+function buildNodeHierachy(nodeId, parentNode, gltfNodes, nodes) {
+	const node = nodes[nodeId];
+	const nodeDef = gltfNodes[nodeId];
+
+	parentNode.add(node);
+
+	if (nodeDef.children) {
+		const children = nodeDef.children;
+
+		for (let i = 0, il = children.length; i < il; i++) {
+			const child = children[i];
+			buildNodeHierachy(child, node, gltfNodes, nodes);
+		}
+	}
+}

package/src/libs/glTF/parsers/SkinParser.js

@@ -0,0 +1,53 @@
+import { Matrix4, Skeleton } from 't3d';
+
+export class SkinParser {
+
+	static parse(context) {
+		const { gltf, accessors, nodes } = context;
+
+		const gltfSkins = gltf.skins;
+
+		if (!gltfSkins) return;
+
+		const skins = gltfSkins.map(skin => {
+			const { inverseBindMatrices, joints } = skin;
+
+			const attribute = accessors[inverseBindMatrices];
+
+			const bones = [];
+			const boneInverses = [];
+			joints.forEach((jointId, index) => {
+				const jointNode = nodes[jointId];
+
+				if (jointNode) {
+					bones.push(jointNode);
+
+					const boneInverse = new Matrix4();
+					if (attribute) {
+						boneInverse.fromArray(attribute.buffer.array, index * 16);
+					}
+					boneInverses.push(boneInverse);
+				} else {
+					console.warn('Joint ' + jointId + ' could not be found.');
+				}
+			});
+
+			return new Skeleton(bones, boneInverses);
+		});
+
+		context.skins = skins;
+
+		// Bind all skined meshes
+		nodes.forEach((node, index) => {
+			const { skin: skinID } = gltf.nodes[index];
+
+			if (skinID !== undefined) {
+				node.traverse(function(mesh) {
+					if (!mesh.isSkinnedMesh) return;
+					mesh.bind(skins[skinID], mesh.worldMatrix); // TODO need updateMatrix ?
+				});
+			}
+		});
+	}
+
+}

package/src/libs/glTF/parsers/TextureParser.js

@@ -0,0 +1,71 @@
+import {
+	Texture2D,
+	TEXTURE_FILTER,
+	TEXTURE_WRAP
+} from 't3d';
+import { WEBGL_WRAPPINGS, WEBGL_FILTERS } from '../Constants.js';
+
+export class TextureParser {
+
+	static parse(context) {
+		const { gltf, images } = context;
+
+		if (!gltf.textures) return;
+
+		// TODO need to cache textures by source and samplers?
+
+		return Promise.all(
+			gltf.textures.map((params, index) => {
+				const { sampler, source = 0, name: textureName } = params;
+
+				const texture = new Texture2D();
+
+				if (params.extensions) {
+					const { KHR_texture_basisu } = params.extensions;
+					if (KHR_texture_basisu) {
+						const transcodeResult = images[KHR_texture_basisu.source];
+
+						const { image, mipmaps, type, format, minFilter, magFilter, generateMipmaps, encoding, premultiplyAlpha } = transcodeResult;
+						texture.image = image;
+						texture.mipmaps = mipmaps;
+						texture.type = type;
+						texture.format = format;
+						texture.minFilter = minFilter;
+						texture.magFilter = magFilter;
+						texture.generateMipmaps = generateMipmaps;
+						texture.encoding = encoding;
+						texture.premultiplyAlpha = premultiplyAlpha;
+					} else if (Object.values(params.extensions).length && Object.values(params.extensions)[0].hasOwnProperty('source')) {
+						texture.image = images[Object.values(params.extensions)[0].source];
+					} else {
+						console.error('GLTFLoader: Couldn\'t load texture');
+						return null;
+					}
+				} else {
+					texture.image = images[source];
+				}
+
+				texture.version++;
+				texture.name = textureName || texture.image.__name || `texture_${index}`;
+				texture.flipY = false;
+
+				const samplers = gltf.samplers || {};
+				parseSampler(texture, samplers[sampler]);
+
+				return texture;
+			})
+		).then(textures => {
+			context.textures = textures;
+		});
+	}
+
+}
+
+function parseSampler(texture, sampler = {}) {
+	const { magFilter, minFilter, wrapS, wrapT } = sampler;
+
+	texture.magFilter = WEBGL_FILTERS[magFilter] || TEXTURE_FILTER.LINEAR;
+	texture.minFilter = WEBGL_FILTERS[minFilter] || TEXTURE_FILTER.LINEAR_MIPMAP_LINEAR;
+	texture.wrapS = WEBGL_WRAPPINGS[wrapS] || TEXTURE_WRAP.REPEAT;
+	texture.wrapT = WEBGL_WRAPPINGS[wrapT] || TEXTURE_WRAP.REPEAT;
+}

package/src/libs/glTF/parsers/Validator.js

@@ -0,0 +1,16 @@
+export class Validator {
+
+	static parse(context) {
+		const {
+			gltf: {
+				asset: { version }
+			}
+		} = context;
+
+		const gltfVersion = Number(version);
+		if (!(gltfVersion >= 2 && gltfVersion < 3)) {
+			throw 'Only support gltf 2.x.';
+		}
+	}
+
+}