t3d-3dtiles 0.1.0

package/examples/jsm/CesiumIon.js

@@ -0,0 +1,30 @@
+const CesiumIon = {};
+
+CesiumIon.fetchAssetJson = async function(assetId, accessToken) {
+	const url = new URL(`https://api.cesium.com/v1/assets/${assetId}/endpoint`);
+	url.searchParams.append('access_token', accessToken);
+
+	const res = await fetch(url, { mode: 'cors' });
+
+	if (!res.ok) throw `${res.status} : ${res.statusText}`;
+
+	return await res.json();
+};
+
+CesiumIon.initTiles3D = function(tiles3D, assetJson) {
+	const assetVersion = new URL(assetJson.url).searchParams.get('v');
+
+	tiles3D.fetchOptions.mode = 'cors';
+	tiles3D.fetchOptions.headers = {};
+	tiles3D.fetchOptions.headers.Authorization = `Bearer ${assetJson.accessToken}`;
+
+	tiles3D.preprocessURL = uri => {
+		uri = new URL(uri);
+		if (/^http/.test(uri.protocol)) {
+			uri.searchParams.append('v', assetVersion);
+		}
+		return uri.toString();
+	};
+};
+
+export default CesiumIon;

package/examples/jsm/Tiles3DDebugger.js

@@ -0,0 +1,219 @@
+import { PBRMaterial, PointsMaterial, SHADING_TYPE, DRAW_MODE, Sphere } from 't3d';
+import { InstancedPBRMaterial, InstancedBasicMaterial } from 't3d-3dtiles';
+import { Tiles3DHelper } from './helpers/Tiles3DHelper.js';
+
+export class Tiles3DDebugger {
+
+	constructor(tiles3D) {
+		this.helper = new Tiles3DHelper(tiles3D);
+		tiles3D.add(this.helper);
+
+		this.colorMode = NONE;
+
+		this.maxDebugDepth = -1;
+		this.maxDebugDistance = -1;
+		this.maxDebugError = -1;
+
+		this.customColorCallback = null;
+
+		this.getDebugColor = (value, target) => {
+			target.setRGB(value, value, value);
+		};
+
+		let extremeDebugDepth = -1;
+		let extremeDebugError = -1;
+
+		tiles3D.addEventListener('TileSetLoaded', ({ json, url }) => {
+			// only update for the root tileset
+
+			if (url !== tiles3D.rootURL) return;
+
+			// initialize the extreme values of the hierarchy
+
+			let maxDepth = -1;
+			tiles3D.traverse(tile => {
+				maxDepth = Math.max(maxDepth, tile.__depth);
+			});
+
+			let maxError = -1;
+			tiles3D.traverse(tile => {
+				maxError = Math.max(maxError, tile.cached.geometricError);
+			});
+
+			extremeDebugDepth = maxDepth;
+			extremeDebugError = maxError;
+		});
+
+		this.update = () => {
+			if (!tiles3D.root) return;
+
+			// get max values to use for materials
+			let maxDepth = -1;
+			if (this.maxDebugDepth === -1) {
+				maxDepth = extremeDebugDepth;
+			} else {
+				maxDepth = this.maxDebugDepth;
+			}
+
+			let maxError = -1;
+			if (this.maxDebugError === -1) {
+				maxError = extremeDebugError;
+			} else {
+				maxError = this.maxDebugError;
+			}
+
+			let maxDistance = -1;
+			if (this.maxDebugDistance === -1) {
+				const boundingVolume = tiles3D.root.cached.boundingVolume;
+				const rootSphere = boundingVolume.getBoundingSphere(_sphere_1);
+				maxDistance = rootSphere.radius;
+			} else {
+				maxDistance = this.maxDebugDistance;
+			}
+
+			const errorTarget = tiles3D.errorTarget;
+			const colorMode = this.colorMode;
+			const visibleTiles = tiles3D.visibleTiles;
+
+			visibleTiles.forEach(tile => {
+				const scene = tile.cached.scene;
+
+				// create a random color per-tile
+				let h, s, l;
+				if (colorMode === RANDOM_COLOR) {
+					h = Math.random();
+					s = 0.5 + Math.random() * 0.5;
+					l = 0.375 + Math.random() * 0.25;
+				}
+
+				scene.traverse(c => {
+					if (!c[ORIGINAL_MATERIAL]) {
+						c[ORIGINAL_MATERIAL] = c.material;
+					}
+
+					if (colorMode === RANDOM_NODE_COLOR) {
+						h = Math.random();
+						s = 0.5 + Math.random() * 0.5;
+						l = 0.375 + Math.random() * 0.25;
+					}
+
+					if (c.material) {
+						const originalMaterial = c[ORIGINAL_MATERIAL];
+
+						if (colorMode === NONE && c.material !== originalMaterial) {
+							c.material.dispose();
+							c.material = c[ORIGINAL_MATERIAL];
+						} else if (colorMode !== NONE && c.material === originalMaterial) {
+							if (c.material.drawMode === DRAW_MODE.POINTS) {
+								const pointsMaterial = new PointsMaterial();
+								pointsMaterial.size = originalMaterial.size;
+								pointsMaterial.sizeAttenuation = originalMaterial.sizeAttenuation;
+								c.material = pointsMaterial;
+							} else {
+								if (c.material.isInstancedPBRMaterial) {
+									c.material = new InstancedPBRMaterial();
+								} else if (c.material.isInstancedBasicMaterial) {
+									c.material = new InstancedBasicMaterial();
+								} else {
+									c.material = new PBRMaterial();
+								}
+
+								c.material.shading = SHADING_TYPE.FLAT_SHADING;
+							}
+						}
+
+						if (colorMode !== RANDOM_COLOR) {
+							delete c.material[HAS_RANDOM_COLOR];
+						}
+
+						if (colorMode !== RANDOM_NODE_COLOR) {
+							delete c.material[HAS_RANDOM_NODE_COLOR];
+						}
+
+						switch (colorMode) {
+							case DEPTH: {
+								const val = tile.__depth / maxDepth;
+								this.getDebugColor(val, c.material.diffuse);
+								break;
+							}
+							case RELATIVE_DEPTH: {
+								const val = tile.__depthFromRenderedParent / maxDepth;
+								this.getDebugColor(val, c.material.diffuse);
+								break;
+							}
+							case SCREEN_ERROR: {
+								const val = tile.__error / errorTarget;
+								if (val > 1.0) {
+									c.material.diffuse.setRGB(1.0, 0.0, 0.0);
+								} else {
+									this.getDebugColor(val, c.material.diffuse);
+								}
+								break;
+							}
+							case GEOMETRIC_ERROR: {
+								const val = Math.min(tile.cached.geometricError / maxError, 1);
+								this.getDebugColor(val, c.material.diffuse);
+								break;
+							}
+							case DISTANCE: {
+								// We don't update the distance if the geometric error is 0.0 so
+								// it will always be black.
+								const val = Math.min(tile.__distanceFromCamera / maxDistance, 1);
+								this.getDebugColor(val, c.material.diffuse);
+								break;
+							}
+							case IS_LEAF: {
+								if (!tile.children || tile.children.length === 0) {
+									this.getDebugColor(1.0, c.material.diffuse);
+								} else {
+									this.getDebugColor(0.0, c.material.diffuse);
+								}
+								break;
+							}
+							case RANDOM_NODE_COLOR: {
+								if (!c.material[HAS_RANDOM_NODE_COLOR]) {
+									c.material.diffuse.setHSL(h, s, l);
+									c.material[HAS_RANDOM_NODE_COLOR] = true;
+								}
+								break;
+							}
+							case RANDOM_COLOR: {
+								if (!c.material[HAS_RANDOM_COLOR]) {
+									c.material.diffuse.setHSL(h, s, l);
+									c.material[HAS_RANDOM_COLOR] = true;
+								}
+								break;
+							}
+							case CUSTOM_COLOR: {
+								if (this.customColorCallback) {
+									this.customColorCallback(tile, c);
+								} else {
+									console.warn('Tiles3DDebugger: customColorCallback not defined');
+								}
+								break;
+							}
+						}
+					}
+				});
+			});
+		};
+	}
+
+}
+
+const _sphere_1 = new Sphere();
+
+const ORIGINAL_MATERIAL = Symbol('ORIGINAL_MATERIAL');
+const HAS_RANDOM_COLOR = Symbol('HAS_RANDOM_COLOR');
+const HAS_RANDOM_NODE_COLOR = Symbol('HAS_RANDOM_NODE_COLOR');
+
+export const NONE = 0;
+export const SCREEN_ERROR = 1;
+export const GEOMETRIC_ERROR = 2;
+export const DISTANCE = 3;
+export const DEPTH = 4;
+export const RELATIVE_DEPTH = 5;
+export const IS_LEAF = 6;
+export const RANDOM_COLOR = 7;
+export const RANDOM_NODE_COLOR = 8;
+export const CUSTOM_COLOR = 9;

package/examples/jsm/Tiles3DUtils.js

@@ -0,0 +1,32 @@
+import * as t3d from 't3d';
+
+export function setTiles3DToOrigin(tiles3D, parent) {
+	const sphere = new t3d.Sphere();
+	tiles3D.getBoundingSphere(sphere);
+
+	const position = sphere.center;
+
+	const surfaceDirection = position.clone().normalize();
+	const up = new t3d.Vector3(0, 1, 0);
+	const rotationToNorthPole = rotationBetweenDirections(surfaceDirection, up);
+
+	parent.quaternion.x = rotationToNorthPole.x;
+	parent.quaternion.y = rotationToNorthPole.y;
+	parent.quaternion.z = rotationToNorthPole.z;
+	parent.quaternion.w = rotationToNorthPole.w;
+
+	tiles3D.position.sub(position);
+}
+
+function rotationBetweenDirections(dir1, dir2) {
+	const rotation = new t3d.Quaternion();
+	const a = new t3d.Vector3();
+	a.crossVectors(dir1, dir2);
+	rotation.x = a.x;
+	rotation.y = a.y;
+	rotation.z = a.z;
+	rotation.w = 1 + dir1.clone().dot(dir2);
+	rotation.normalize();
+
+	return rotation;
+}

package/examples/jsm/helpers/LineSegmentHelper.js

@@ -0,0 +1,74 @@
+import { Object3D, SphereGeometry, BasicMaterial, Mesh, Geometry, Buffer, Attribute, DRAW_MODE, Vector3 } from 't3d';
+
+export class LineSegmentHelper extends Object3D {
+
+	constructor(lineSegment, pointRadius = 1, pointColor = 0x00ffff, lineColor = 0x00ffff) {
+		super();
+
+		// create start and end points
+
+		const pointGeometry = new SphereGeometry(1);
+		const pointMaterial = new BasicMaterial();
+
+		this.start = new Mesh(pointGeometry, pointMaterial);
+		this.start.scale.setScalar(pointRadius);
+		this.add(this.start);
+
+		this.end = new Mesh(pointGeometry, pointMaterial);
+		this.end.scale.setScalar(pointRadius);
+		this.add(this.end);
+
+		// create line
+
+		const lineArray = new Float32Array([0, 0, -0.5, 0, 0, 0.5]);
+		const lineGeometry = new Geometry();
+		lineGeometry.addAttribute('a_Position', new Attribute(new Buffer(lineArray, 3)));
+		lineGeometry.computeBoundingBox();
+		lineGeometry.computeBoundingSphere();
+
+		const lineMaterial = new BasicMaterial();
+		lineMaterial.drawMode = DRAW_MODE.LINES;
+
+		this.line = new Mesh(lineGeometry, lineMaterial);
+		this.line.raycast = () => {}; // disable raycasting
+		this.add(this.line);
+
+		//
+
+		this.lineSegment = lineSegment;
+
+		this.setPointColor(pointColor);
+		this.setLineColor(lineColor);
+	}
+
+	setPointColor(color) {
+		// both points share the same material
+		// so we only need to update one of them
+		this.start.material.diffuse.setHex(color);
+	}
+
+	setLineColor(color) {
+		this.line.material.diffuse.setHex(color);
+	}
+
+	updateMatrix(force) {
+		const { lineSegment } = this;
+		const { startPoint, endPoint } = lineSegment;
+
+		// TODO set center to group position
+
+		this.start.position.copy(startPoint);
+		this.end.position.copy(endPoint);
+
+		lineSegment.getCenter(this.line.position);
+		this.line.scale.z = lineSegment.getLength();
+		_vec3_1.subVectors(endPoint, startPoint).normalize();
+		this.line.quaternion.setFromUnitVectors(_zAxis, _vec3_1);
+
+		super.updateMatrix(force);
+	}
+
+}
+
+const _vec3_1 = new Vector3();
+const _zAxis = new Vector3(0, 0, 1);

package/examples/jsm/helpers/OBBHelper.js

@@ -0,0 +1,48 @@
+import { BasicMaterial, Mesh, Geometry, Buffer, Attribute, DRAW_MODE } from 't3d';
+
+export class OBBHelper extends Mesh {
+
+	constructor(obb, color = 0xffff00) {
+		const lineBoxVertices = new Float32Array([
+			-0.5, -0.5, -0.5, 0.5, -0.5, -0.5,
+			0.5, -0.5, -0.5, 0.5, 0.5, -0.5,
+			0.5, 0.5, -0.5, -0.5, 0.5, -0.5,
+			-0.5, 0.5, -0.5, -0.5, -0.5, -0.5,
+			-0.5, -0.5, 0.5, 0.5, -0.5, 0.5,
+			0.5, -0.5, 0.5, 0.5, 0.5, 0.5,
+			0.5, 0.5, 0.5, -0.5, 0.5, 0.5,
+			-0.5, 0.5, 0.5, -0.5, -0.5, 0.5,
+			-0.5, -0.5, -0.5, -0.5, -0.5, 0.5,
+			0.5, -0.5, -0.5, 0.5, -0.5, 0.5,
+			0.5, 0.5, -0.5, 0.5, 0.5, 0.5,
+			-0.5, 0.5, -0.5, -0.5, 0.5, 0.5
+		]);
+		const lineBoxGeometry = new Geometry();
+		lineBoxGeometry.addAttribute('a_Position', new Attribute(new Buffer(lineBoxVertices, 3)));
+		lineBoxGeometry.computeBoundingBox();
+		lineBoxGeometry.computeBoundingSphere();
+
+		const lineMaterial = new BasicMaterial();
+		lineMaterial.drawMode = DRAW_MODE.LINES;
+
+		super(lineBoxGeometry, lineMaterial);
+
+		this.obb = obb;
+
+		this.setColor(color);
+	}
+
+	setColor(color) {
+		this.material.diffuse.setHex(color);
+	}
+
+	updateMatrix(force) {
+		const { box, rotation } = this.obb;
+		box.getCenter(this.position);
+		box.getSize(this.scale);
+		this.quaternion.setFromRotationMatrix(this.matrix.setFromMatrix3(rotation));
+
+		super.updateMatrix(force);
+	}
+
+}

package/examples/jsm/helpers/Tiles3DHelper.js

@@ -0,0 +1,135 @@
+import { Color3, Object3D } from 't3d';
+import { Box3Helper } from 't3d/addons/objects/Box3Helper.js';
+import { SphereHelper } from 't3d/addons/objects/SphereHelper.js';
+
+export class Tiles3DHelper extends Object3D {
+
+	constructor(tiles3D) {
+		super();
+
+		const boxGroup = new Object3D();
+		boxGroup.name = 'Tiles3DHelper.boxGroup';
+		this.add(boxGroup);
+
+		const sphereGroup = new Object3D();
+		sphereGroup.name = 'Tiles3DHelper.sphereGroup';
+		this.add(sphereGroup);
+
+		const helperMap = new Map();
+
+		function getHelperCache(tile) {
+			let helperCache = helperMap.get(tile);
+			if (!helperCache) {
+				helperCache = {
+					box: null,
+					sphere: null
+				};
+				helperMap.set(tile, helperCache);
+			}
+			return helperCache;
+		}
+
+		tiles3D.addEventListener('TileVisibilityChanged', ({ scene, tile, visible }) => {
+			const helperCache = getHelperCache(tile);
+
+			if (visible) {
+				if (helperCache.box !== null) {
+					boxGroup.add(helperCache.box);
+					helperCache.box.updateMatrix(true);
+				}
+
+				if (helperCache.sphere !== null) {
+					sphereGroup.add(helperCache.sphere);
+					helperCache.sphere.updateMatrix(true);
+				}
+			} else {
+				if (helperCache.box !== null) {
+					boxGroup.remove(helperCache.box);
+				}
+
+				if (helperCache.sphere !== null) {
+					sphereGroup.remove(helperCache.sphere);
+				}
+			}
+		});
+
+		tiles3D.addEventListener('TileLoaded', ({ scene, tile }) => {
+			const helperCache = getHelperCache(tile);
+			const boundingVolume = tile.cached.boundingVolume;
+
+			if (boundingVolume.obb) {
+				// Create debug bounding box
+				// In some cases the bounding box may have a scale of 0 in one dimension resulting
+				// in the NaNs in an extracted rotation so we disable matrix updates instead.
+				const boxWrapper = new Object3D();
+				boxWrapper.name = 'Tiles3DHelper.boxWrapper';
+				boxWrapper.matrix.copy(boundingVolume.obb._originBoxTransform);
+				boxWrapper.matrixAutoUpdate = false;
+				boxWrapper.matrixNeedsUpdate = false;
+
+				const boxHelper = new Box3Helper(boundingVolume.obb._originBox, getIndexedRandomColor(tile.__depth));
+				boxHelper.name = 'Box3Helper';
+				boxHelper.raycast = emptyRaycast;
+				boxWrapper.add(boxHelper);
+
+				helperCache.box = boxWrapper;
+
+				if (tiles3D.visibleTiles.has(tile)) {
+					boxGroup.add(boxWrapper);
+					boxWrapper.updateMatrix(true);
+				}
+			}
+
+			if (boundingVolume.sphere) {
+				const sphereHelper = new SphereHelper(boundingVolume.sphere, getIndexedRandomColor(tile.__depth));
+				sphereHelper.name = 'SphereHelper';
+				sphereHelper.raycast = emptyRaycast;
+
+				helperCache.sphere = sphereHelper;
+
+				if (tiles3D.visibleTiles.has(tile)) {
+					sphereGroup.add(sphereHelper);
+					sphereHelper.updateMatrix(true);
+				}
+			}
+		});
+
+		tiles3D.addEventListener('TileDisposed', ({ scene, tile }) => {
+			const helperCache = getHelperCache(tile);
+
+			if (helperCache.box !== null) {
+				helperCache.box.children[0].geometry.dispose();
+				helperCache.box.children[0].material.dispose();
+				delete helperCache.box;
+			}
+
+			if (helperCache.sphere !== null) {
+				helperCache.sphere.geometry.dispose();
+				helperCache.sphere.material.dispose();
+				delete helperCache.sphere;
+			}
+		});
+
+		this.boxGroup = boxGroup;
+		this.sphereGroup = sphereGroup;
+	}
+
+}
+
+function emptyRaycast() {}
+
+const _color3_1 = new Color3();
+
+const _colors = {};
+
+// Return a consistant random color for an index
+const getIndexedRandomColor = index => {
+	if (!_colors[index]) {
+		const h = Math.random();
+		const s = 0.5 + Math.random() * 0.5;
+		const l = 0.375 + Math.random() * 0.25;
+
+		_colors[index] = _color3_1.setHSL(h, s, l).getHex();
+	}
+	return _colors[index];
+};

package/examples/jsm/math/Intersects.js

@@ -0,0 +1,100 @@
+import { Triangle, Matrix4, Sphere } from 't3d';
+import { OBB } from 't3d-3dtiles';
+import { LineSegment } from './LineSegment.js';
+
+/**
+ * Get the closest intersection point between a path and the 3D Tiles.
+ * The path is defined by a line segment with a distance threshold,
+ * so the actual area is a capsule.
+ * @param {Object} tiles3D - The 3D Tiles Object.
+ * @param {LineSegment} lineSegment - The line segment.
+ * @param {Number} minDistance - The distance threshold.
+ * @return {Object|null} - The intersection object or null.
+ */
+export function getIntersectWithPath(tiles3D, lineSegment, minDistance) {
+	// Get obb in tiles root space
+	const obb = _lineSegment_1.copy(lineSegment)
+		.applyMatrix4(_mat4_1.getInverse(tiles3D.worldMatrix))
+		.getOBB(minDistance, _obb_1);
+	// TODO: obb.applyMatrix4 has bug, so don't use this until it's fixed
+	// const obb = lineSegment.getOBB(minDistance, _obb_1);
+	// obb.applyMatrix4(_mat4_1.getInverse(tiles3D.worldMatrix));
+
+	let intersectWithTile = null;
+
+	tiles3D.activeTiles.forEach(tile => {
+		if (!intersectsOBB(tile.cached.boundingVolume, obb)) return;
+
+		// TODO: traverse scene
+		const positions = tile.cached.geometry[0].attributes.a_Position.buffer.array;
+		const indexes = tile.cached.geometry[0].index.buffer.array;
+
+		// TODO: use mesh worldMatrix
+		const toWorldMatrix = tile.cached.scene.children[0].worldMatrix;
+		const toTileRootMatrix = _mat4_2.copy(toWorldMatrix).premultiply(_mat4_1);
+
+		for (let i = 0; i < indexes.length; i = i + 3) {
+			// TODO: more complex buffer structure, like non-indexed buffer
+
+			const { a, b, c } = _triangle_1;
+
+			const indexA = indexes[i], indexB = indexes[i + 1], indexC = indexes[i + 2];
+			a.fromArray(positions, 3 * indexA);
+			b.fromArray(positions, 3 * indexB);
+			c.fromArray(positions, 3 * indexC);
+
+			// Early out if obb doesn't intersect with the triangle's bounding sphere
+			// Should compute triangle circumcenter to get a more accurate sphere?
+			_sphere_1.setFromPoints(_triangle_1_array).applyMatrix4(toTileRootMatrix);
+			if (!obb.intersectsSphere(_sphere_1)) continue;
+
+			a.applyMatrix4(toWorldMatrix);
+			b.applyMatrix4(toWorldMatrix);
+			c.applyMatrix4(toWorldMatrix);
+
+			_lineSegment_1.startPoint.set(0, 0, 0);
+			_lineSegment_1.endPoint.set(0, 0, 0);
+			lineSegment.closestLineToTriangle(_triangle_1, _lineSegment_1);
+
+			// TODO: use distance squared
+			const closestDis = _lineSegment_1.getLength();
+			if (closestDis < minDistance) {
+				if (!intersectWithTile || closestDis < intersectWithTile.distance) {
+					intersectWithTile = {
+						tile,
+						distance: closestDis,
+						startPoint: _lineSegment_1.startPoint.toArray(),
+						endPoint: _lineSegment_1.endPoint.toArray()
+					};
+				}
+			}
+		}
+	});
+
+	return intersectWithTile;
+}
+
+const _obb_1 = new OBB();
+const _mat4_1 = new Matrix4();
+const _mat4_2 = new Matrix4();
+const _lineSegment_1 = new LineSegment();
+const _triangle_1 = new Triangle();
+const _triangle_1_array = [_triangle_1.a, _triangle_1.b, _triangle_1.c];
+const _sphere_1 = new Sphere();
+
+function intersectsOBB(boundingVolume, obb) {
+	const _sphere = boundingVolume.sphere;
+	const _obb = boundingVolume.obb;
+
+	// Early out if we don't hit this tile sphere
+	if (_sphere && !obb.intersectsSphere(_sphere)) {
+		return false;
+	}
+
+	// Early out if we don't this this tile box
+	if (_obb && !_obb.intersectsOBB(obb)) {
+		return false;
+	}
+
+	return true;
+}