t3d-3dtiles 0.1.0

package/examples/jsm/math/LineSegment.js

@@ -0,0 +1,234 @@
+import { Vector3, Matrix4, Triangle, Ray } from 't3d';
+
+export class LineSegment {
+
+	constructor(startPoint = new Vector3(), endPoint = new Vector3()) {
+		this.startPoint = startPoint;
+		this.endPoint = endPoint;
+	}
+
+	setPoints(startPoint, endPoint) {
+		this.startPoint.copy(startPoint);
+		this.endPoint.copy(endPoint);
+		return this;
+	}
+
+	copy(lineSegment) {
+		this.startPoint.copy(lineSegment.startPoint);
+		this.endPoint.copy(lineSegment.endPoint);
+		return this;
+	}
+
+	applyMatrix4(m) {
+		this.startPoint.applyMatrix4(m);
+		this.endPoint.applyMatrix4(m);
+		return this;
+	}
+
+	getLength() {
+		return this.startPoint.distanceTo(this.endPoint);
+	}
+
+	getLengthSquared() {
+		return this.startPoint.distanceToSquared(this.endPoint);
+	}
+
+	getCenter(target) {
+		return target.addVectors(this.startPoint, this.endPoint).multiplyScalar(0.5);
+	}
+
+	getOBB(radius, target) {
+		const center = this.getCenter(_vec3_1);
+		const halfSize = _vec3_2.set(radius, radius, this.getLength() * 0.5 + radius); // expand box size by radius
+
+		const rotationMatrix4 = _mat4_1.identity().lookAtRH(this.startPoint, this.endPoint, _up);
+
+		target.box.min.subVectors(center, halfSize);
+		target.box.max.addVectors(center, halfSize);
+		target.rotation.setFromMatrix4(rotationMatrix4);
+
+		return target;
+	}
+
+	closestLineToLineSegment(lineSegment, target) {
+		const lineVec = _lineVec1.subVectors(this.endPoint, this.startPoint);
+		const lineVec2 = _lineVec2.subVectors(lineSegment.endPoint, lineSegment.startPoint);
+		const r = _lineVec3.subVectors(this.startPoint, lineSegment.startPoint);
+		const a = lineVec.getLengthSquared();
+		const invA = 1.0 / a;
+		const e = lineVec2.getLengthSquared();
+		const f = lineVec2.dot(r);
+		const EPSILON = 1E-5;
+		let s, t;
+
+		if (a <= EPSILON && e <= EPSILON) {
+			// Both segments degenerate into points
+			target.startPoint.copy(this.startPoint);
+			target.endPoint.copy(lineSegment.startPoint);
+			return target;
+		}
+
+		if (a <= EPSILON) {
+			// First segment degenerates into a point
+			s = 0.0;
+			t = f / e;
+			t = Math.min(Math.max(t, 0.0), 1.0);
+		} else {
+			const c = lineVec.dot(r);
+			if (e <= EPSILON) {
+				// Second segment degenerates into a point
+				t = 0.0;
+				s = Math.min(Math.max(-c * invA, 0.0), 1.0);
+			} else {
+				// The general nondegenerate case starts here
+				const b = lineVec.dot(lineVec2);
+				const denom = a * e - b * b;
+				// If segments not parallel, compute closest point on L1 to L2 and clamp to segment S1. Else pick arbitrary s (here 0)
+				if (denom !== 0.0) { s = Math.min(Math.max((b * f - c * e) / denom, 0.0), 1.0) } else { s = 0.0 }
+				// Compute point on L2 closest to S1(s) using
+				// t = Dot((P1 + D1 * s) - P2, D2) / Dot(D2, D2) = (b * s + f) / e
+				t = (b * s + f) / e;
+				// If t in [0,1] done. Else clamp t, recompute s for the new value of t using s = Dot((P2 + D2 * t) - P1, D1) / Dot(D1, D1) = (t * b - c) / a and clamp s to [0, 1]
+				if (t < 0.0) {
+					t = 0.0;
+					s = Math.min(Math.max(-c * invA, 0.0), 1.0);
+				} else if (t > 1.0) {
+					t = 1.0;
+					s = Math.min(Math.max((b - c) * invA, 0.0), 1.0);
+				}
+			}
+		}
+
+		target.startPoint.addVectors(this.startPoint, lineVec.multiplyScalar(s));
+		target.endPoint.addVectors(lineSegment.startPoint, lineVec2.multiplyScalar(t));
+		return target;
+	}
+
+	intersectTriangle(triangle, target) {
+		const lineVec = _lineVec0.subVectors(this.endPoint, this.startPoint).normalize();
+		const ray = _ray.set(this.startPoint, lineVec);
+		const backfaceCulling = false;
+
+		const intersect = ray.intersectTriangle(triangle.a, triangle.b, triangle.c, backfaceCulling, target);
+		if (intersect === null) return null;
+
+		const distance = this.startPoint.distanceTo(target);
+		const t = distance / this.getLength();
+		if (t >= 0.0 && t <= 1.0) {
+			return true;
+		}
+		return false;
+	}
+
+	closestLineToTriangle(triangle, target) {
+		let min = Infinity, d;
+
+		const intersectWithTriangle = this.intersectTriangle(triangle, _vec3_1);
+		if (intersectWithTriangle) {
+			target.startPoint.copy(_vec3_1);
+			target.endPoint.copy(_vec3_1);
+			return target;
+		} else {
+			const isPointAintri = Triangle.containsPoint(this.startPoint, triangle.a, triangle.b, triangle.c);
+			const isPointBintri = Triangle.containsPoint(this.endPoint, triangle.a, triangle.b, triangle.c);
+
+			// segment endpoint A and plane of triangle (when A projects inside V0V1V2)
+			let computed = false;
+			let a = NaN, b = NaN, c = NaN, nd = NaN;
+			if (isPointAintri) {
+				const lineVec1 = _lineVec1.subVectors(triangle.b, triangle.a);
+				const lineVec2 = _lineVec2.subVectors(triangle.c, triangle.a);
+				a = lineVec1.y * lineVec2.z - lineVec1.z * lineVec2.y;
+				b = lineVec1.z * lineVec2.x - lineVec1.x * lineVec2.z;
+				c = lineVec1.x * lineVec2.y - lineVec1.y * lineVec2.x;
+				const lineVec3 = _lineVec3.set(a, b, c);
+				computed = true;
+				nd = -lineVec3.normalize().dot(triangle.a);
+
+				d = lineVec3.dot(this.startPoint) + nd;
+				const l = d;
+				d *= d;
+				if (d < min) {
+					min = d;
+					target.startPoint.copy(this.startPoint);
+					target.endPoint.subVectors(this.startPoint, lineVec3.multiplyScalar(l));
+				}
+			}
+
+			// segment endpoint B and plane of triangle (when B projects inside V0V1V2)
+			if (isPointBintri) {
+				const lineVec3 = _lineVec3;
+				if (!computed) {
+					const lineVec1 = _lineVec1.subVectors(triangle.b, triangle.a);
+					const lineVec2 = _lineVec2.subVectors(triangle.c, triangle.a);
+					a = lineVec1.y * lineVec2.z - lineVec1.z * lineVec2.y;
+					b = lineVec1.z * lineVec2.x - lineVec1.x * lineVec2.z;
+					c = lineVec1.x * lineVec2.y - lineVec1.y * lineVec2.x;
+					lineVec3.set(a, b, c);
+					computed = true;
+					nd = -lineVec3.normalize().dot(triangle.a);
+				}
+				d = lineVec3.dot(this.endPoint) + nd;
+				const l = d;
+				d *= d;
+				if (d < min) {
+					min = d;
+					target.startPoint.copy(this.endPoint);
+					target.endPoint.subVectors(this.endPoint, lineVec3.multiplyScalar(l));
+				}
+			}
+
+			if (isPointBintri && isPointAintri) {
+				return target;
+			}
+
+			// AB -> V0V1
+			_lineSegmentEdge.setPoints(triangle.a, triangle.b);
+			this.closestLineToLineSegment(_lineSegmentEdge, _tampTarget);
+			min = _tampTarget.getLength();
+			target.startPoint.copy(_tampTarget.startPoint);
+			target.endPoint.copy(_tampTarget.endPoint);
+
+			// AB -> V1V2
+			_lineSegmentEdge.setPoints(triangle.b, triangle.c);
+			this.closestLineToLineSegment(_lineSegmentEdge, _tampTarget);
+			d = _tampTarget.getLength();
+			if (d < min) {
+				min = d;
+				target.startPoint.copy(_tampTarget.startPoint);
+				target.endPoint.copy(_tampTarget.endPoint);
+			}
+
+			// AB -> V2V0
+			_lineSegmentEdge.setPoints(triangle.c, triangle.a);
+			this.closestLineToLineSegment(_lineSegmentEdge, _tampTarget);
+			d = _tampTarget.getLength();
+			if (d < min) {
+				min = d;
+				target.startPoint.copy(_tampTarget.startPoint);
+				target.endPoint.copy(_tampTarget.endPoint);
+			}
+
+			return target;
+		}
+	}
+
+}
+
+const _vec3_1 = new Vector3();
+const _vec3_2 = new Vector3();
+const _mat4_1 = new Matrix4();
+
+const _up = new Vector3(0, 1, 0);
+
+const _ray = new Ray();
+
+const _lineVec0 = new Vector3();
+
+const _lineVec1 = new Vector3();
+const _lineVec2 = new Vector3();
+const _lineVec3 = new Vector3();
+
+const _lineSegmentEdge = new LineSegment();
+
+const _tampTarget = new LineSegment();

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "t3d-3dtiles",
+  "version": "0.1.0",
+  "description": "An extension for 3D Tiles based on t3d.js",
+  "type": "module",
+  "main": "./build/t3d.3dtiles.js",
+  "module": "./build/t3d.3dtiles.module.js",
+  "exports": {
+    ".": "./build/t3d.3dtiles.module.js",
+    "./src/*": "./src/*",
+    "./addons/*": "./examples/jsm/*"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/uinosoft/t3d-3dtiles"
+  },
+  "files": [
+    "build",
+    "examples/jsm",
+    "LICENSE",
+    "package.json",
+    "README.md",
+    "src"
+  ],
+  "keywords": [
+    "3dtiles",
+    "t3d",
+    "javascript",
+    "3d",
+    "webgl",
+    "webgl2",
+    "canvas",
+    "html5"
+  ],
+  "author": "uino",
+  "license": "BSD-3-Clause",
+  "devDependencies": {
+    "@babel/core": "^7.18.10",
+    "@babel/preset-env": "^7.18.10",
+    "@rollup/plugin-babel": "^6.0.3",
+    "@rollup/plugin-terser": "^0.4.0",
+    "eslint": "^8.57.0",
+    "eslint-plugin-html": "^8.1.1",
+    "eslint-plugin-import": "^2.29.0",
+    "rollup": "^4.18.0"
+  },
+  "peerDependencies": {
+    "t3d": "^0.2.7"
+  },
+  "scripts": {
+    "dev": "rollup -w -c",
+    "build": "rollup -c",
+    "lint": "eslint src",
+    "lint-fix": "eslint src --fix",
+    "lint-examples": "eslint examples --ext .html"
+  }
+}

package/src/Tiles3D.js

@@ -0,0 +1,402 @@
+import { EventDispatcher, LoadingManager, Matrix4, Object3D } from 't3d';
+import { traverseSet } from './utils/Utils.js';
+import { raycastTraverse, raycastTraverseFirstHit, distanceSort } from './utils/IntersectionUtils.js';
+import RequestState from './utils/RequestState.js';
+import { CameraList } from './utils/CameraList.js';
+import { TilesLoader } from './utils/TilesLoader.js';
+import { ModelLoader } from './utils/ModelLoader.js';
+import { schedulingTiles } from './utils/TilesScheduler.js';
+
+export class Tiles3D extends Object3D {
+
+	constructor(url, manager = new LoadingManager()) {
+		super();
+
+		// options
+
+		this.fetchOptions = {};
+		this.errorTarget = 6.0;
+		this.errorThreshold = Infinity;
+		this.loadSiblings = true;
+		this.displayActiveTiles = false;
+		this.maxDepth = Infinity;
+		this.stopAtEmptyTiles = true;
+
+		this.preprocessURL = null;
+		manager.setURLModifier(url => {
+			if (this.preprocessURL) {
+				return this.preprocessURL(url);
+			} else {
+				return url;
+			}
+		});
+		this.manager = manager;
+
+		// stats
+
+		this.stats = {
+			parsing: 0,
+			downloading: 0,
+			failed: 0,
+			inFrustum: 0,
+			used: 0,
+			active: 0,
+			visible: 0
+		};
+
+		this.frameCount = 0;
+
+		this.activeTiles = new Set();
+		this.visibleTiles = new Set();
+
+		// internals
+
+		this._rootURL = url;
+		this._rootTileSet = null;
+
+		this._autoDisableRendererCulling = true;
+
+		this.$cameras = new CameraList();
+		this.$tilesLoader = new TilesLoader();
+		this.$modelLoader = new ModelLoader(manager);
+		this.$events = new EventDispatcher();
+	}
+
+	get rootURL() {
+		return this._rootURL;
+	}
+
+	get rootTileSet() {
+		const rootTileSet = this._rootTileSet;
+
+		if (!rootTileSet) {
+			const url = this._rootURL;
+			this._rootTileSet = this.$tilesLoader.fetchTileSet(this.preprocessURL ? this.preprocessURL(url) : url, null, this.fetchOptions)
+				.then(json => {
+					this._rootTileSet = json;
+				})
+				.then(json => {
+					// Push this onto the end of the event stack to ensure this runs
+					// after the base renderer has placed the provided json where it
+					// needs to be placed and is ready for an update.
+					Promise.resolve().then(() => {
+						// TODO dispatch event only if this is the root tileset for now, we can
+						// dispatch this event for all tilesets in the future
+						_TileSetLoadedEvent.json = json;
+						_TileSetLoadedEvent.url = url;
+						this.$events.dispatchEvent(_TileSetLoadedEvent);
+					});
+				})
+				.catch(err => {
+					console.error(err);
+					this._rootTileSet = err;
+				});
+			return null;
+		} else if (rootTileSet instanceof Promise || rootTileSet instanceof Error) {
+			return null;
+		}
+
+		return rootTileSet;
+	}
+
+	get root() {
+		const rootTileSet = this.rootTileSet;
+		return rootTileSet ? rootTileSet.root : null;
+	}
+
+	get autoDisableRendererCulling() {
+		return this._autoDisableRendererCulling;
+	}
+
+	set autoDisableRendererCulling(value) {
+		if (this._autoDisableRendererCulling !== value) {
+			super._autoDisableRendererCulling = value;
+			this.traverse(tile => {
+				const scene = tile.cached.scene;
+				if (scene) {
+					scene.traverse(c => {
+						c.frustumCulled = c[INITIAL_FRUSTUM_CULLED] && !value;
+					});
+				}
+			});
+		}
+	}
+
+	setDRACOLoader(dracoLoader) {
+		this.$modelLoader.setDRACOLoader(dracoLoader);
+	}
+
+	setKTX2Loader(ktx2Loader) {
+		this.$modelLoader.setKTX2Loader(ktx2Loader);
+	}
+
+	addEventListener(type, listener, thisObject) {
+		this.$events.addEventListener(type, listener, thisObject);
+	}
+
+	removeEventListener(type, listener, thisObject) {
+		this.$events.removeEventListener(type, listener, thisObject);
+	}
+
+	update() {
+		const rootTile = this.root;
+		if (!rootTile) return;
+
+		const { stats } = this;
+		stats.inFrustum = 0;
+		stats.used = 0;
+		stats.active = 0;
+		stats.visible = 0;
+
+		this.frameCount++;
+
+		this.$cameras.updateInfos(this.worldMatrix);
+
+		schedulingTiles(rootTile, this);
+	}
+
+	addCamera(camera) {
+		return this.$cameras.add(camera);
+	}
+
+	removeCamera(camera) {
+		return this.$cameras.remove(camera);
+	}
+
+	resize(width, height) {
+		this.$cameras.setResolution(width, height);
+	}
+
+	raycast(ray, intersects) {
+		if (!this.root) {
+			return null;
+		}
+
+		raycastTraverse(this.root, this, ray, intersects);
+
+		intersects.sort(distanceSort);
+	}
+
+	raycastFirst(ray) {
+		if (!this.root) {
+			return null;
+		}
+
+		return raycastTraverseFirstHit(this.root, this, ray);
+	}
+
+	getBoundingBox(box) {
+		if (!this.root) {
+			return false;
+		}
+
+		const boundingVolume = this.root.cached.boundingVolume;
+
+		if (boundingVolume) {
+			boundingVolume.getBoundingBox(box);
+			return true;
+		} else {
+			return false;
+		}
+	}
+
+	getOrientedBoundingBox(targetBox, targetMatrix) {
+		if (!this.root) {
+			return false;
+		}
+
+		const boundingVolume = this.root.cached.boundingVolume;
+
+		if (boundingVolume) {
+			boundingVolume.getOrientedBoundingBox(targetBox, targetMatrix);
+			return true;
+		} else {
+			return false;
+		}
+	}
+
+	getBoundingSphere(sphere) {
+		if (!this.root) {
+			return false;
+		}
+
+		const boundingVolume = this.root.cached.boundingVolume;
+
+		if (boundingVolume) {
+			boundingVolume.getBoundingSphere(sphere);
+			return true;
+		} else {
+			return false;
+		}
+	}
+
+	traverse(beforecb, aftercb) {
+		const rootTile = this.root;
+		if (!rootTile) return;
+		traverseSet(rootTile, beforecb, aftercb);
+	}
+
+	resetFailedTiles() {
+		const stats = this.stats;
+		if (stats.failed === 0) {
+			return;
+		}
+
+		this.traverse(tile => {
+			if (tile.__loadingState === RequestState.FAILED) {
+				tile.__loadingState = RequestState.UNLOADED;
+			}
+		});
+
+		stats.failed = 0;
+	}
+
+	dispose() {
+		const lruCache = this.$tilesLoader.lruCache;
+		this.traverse(tile => {
+			lruCache.remove(tile);
+		});
+
+		this.stats = {
+			parsing: 0,
+			downloading: 0,
+			failed: 0,
+			inFrustum: 0,
+			used: 0,
+			active: 0,
+			visible: 0
+		};
+		this.frameCount = 0;
+	}
+
+	// override Object3D methods
+	updateMatrix(force) {
+		if (this.matrixAutoUpdate || this.matrixNeedsUpdate) {
+			this.matrix.transform(this.position, this.scale, this.quaternion);
+
+			this.matrixNeedsUpdate = false;
+			this.worldMatrixNeedsUpdate = true;
+		}
+
+		if (this.worldMatrixNeedsUpdate || force) {
+			if (this.parent === null) {
+				tempMat.copy(this.matrix);
+			} else {
+				tempMat.multiplyMatrices(this.parent.worldMatrix, this.matrix);
+			}
+			this.worldMatrixNeedsUpdate = false;
+
+			if (!matrixEquals(tempMat, this.worldMatrix)) {
+				this.worldMatrix.copy(tempMat);
+
+				// update children
+				// the children will not have to change unless the parent group has updated
+				const children = this.children;
+				for (let i = 0, l = children.length; i < l; i++) {
+					children[i].updateMatrix();
+				}
+			}
+		}
+	}
+
+	$parseTile(buffer, tile, extension) {
+		return this.$modelLoader.loadTileContent(buffer, tile, extension, this)
+			.then(scene => {
+				scene.traverse(c => {
+					c[INITIAL_FRUSTUM_CULLED] = c.frustumCulled; // store initial value
+					c.frustumCulled = c.frustumCulled && !this._autoDisableRendererCulling;
+				});
+
+				_TileLoadedEvent.scene = scene;
+				_TileLoadedEvent.tile = tile;
+				this.$events.dispatchEvent(_TileLoadedEvent);
+			});
+	}
+
+	$setTileVisible(tile, visible) {
+		const scene = tile.cached.scene;
+		if (!scene) {
+			return;
+		}
+		const visibleTiles = this.visibleTiles;
+		if (visible) {
+			this.add(scene);
+			visibleTiles.add(tile);
+			scene.updateMatrix(true); // TODO: remove this?
+		} else {
+			this.remove(scene);
+			visibleTiles.delete(tile);
+		}
+
+		_TileVisibilityChangedEvent.scene = scene;
+		_TileVisibilityChangedEvent.tile = tile;
+		_TileVisibilityChangedEvent.visible = visible;
+		this.$events.dispatchEvent(_TileVisibilityChangedEvent);
+	}
+
+	$setTileActive(tile, active) {
+		const activeTiles = this.activeTiles;
+		if (active) {
+			activeTiles.add(tile);
+		} else {
+			activeTiles.delete(tile);
+		}
+	}
+
+	$disposeTile(tile) {
+		// This could get called before the tile has finished downloading
+		const cached = tile.cached;
+		if (cached.scene) {
+			const materials = cached.materials;
+			const geometry = cached.geometry;
+			const textures = cached.textures;
+
+			for (let i = 0, l = geometry.length; i < l; i++) {
+				geometry[i].dispose();
+			}
+
+			for (let i = 0, l = materials.length; i < l; i++) {
+				materials[i].dispose();
+			}
+
+			for (let i = 0, l = textures.length; i < l; i++) {
+				const texture = textures[i];
+				texture.dispose();
+			}
+
+			_TileDisposedEvent.scene = cached.scene;
+			_TileDisposedEvent.tile = tile;
+			this.$events.dispatchEvent(_TileDisposedEvent);
+
+			cached.scene = null;
+			cached.materials = null;
+			cached.textures = null;
+			cached.geometry = null;
+		}
+
+		tile._loadIndex++;
+	}
+
+}
+
+const INITIAL_FRUSTUM_CULLED = Symbol('INITIAL_FRUSTUM_CULLED');
+
+const _TileSetLoadedEvent = { type: 'TileSetLoaded', json: null, url: null };
+const _TileLoadedEvent = { type: 'TileLoaded', scene: null, tile: null };
+const _TileDisposedEvent = { type: 'TileDisposed', scene: null, tile: null };
+const _TileVisibilityChangedEvent = { type: 'TileVisibilityChanged', scene: null, tile: null, visible: false };
+
+const tempMat = new Matrix4();
+
+const matrixEquals = (matrixA, matrixB, epsilon = Number.EPSILON) => {
+	const te = matrixA.elements;
+	const me = matrixB.elements;
+
+	for (let i = 0; i < 16; i++) {
+		if (Math.abs(te[i] - me[i]) > epsilon) {
+			return false;
+		}
+	}
+
+	return true;
+};