From 0d66b882da74c8a1d9b9baa3113d047c08624a91 Mon Sep 17 00:00:00 2001
From: Frank Yang <frankyang233@gmail.com>
Date: Wed, 26 Nov 2025 13:21:28 -0600
Subject: [PATCH 1/2] lod generator standalone

---
 tools/lod-generator/LODGenerator.js  | 160 +++++
 tools/lod-generator/QEMSimplifier.js | 590 ++++++++++++++++++
 tools/lod-generator/README.md        |  96 +++
 tools/lod-generator/index.html       | 880 +++++++++++++++++++++++++++
 4 files changed, 1726 insertions(+)
 create mode 100644 tools/lod-generator/LODGenerator.js
 create mode 100644 tools/lod-generator/QEMSimplifier.js
 create mode 100644 tools/lod-generator/README.md
 create mode 100644 tools/lod-generator/index.html

diff --git a/tools/lod-generator/LODGenerator.js b/tools/lod-generator/LODGenerator.js
new file mode 100644
index 00000000000000..4deef8ada6c03c
--- /dev/null
+++ b/tools/lod-generator/LODGenerator.js
@@ -0,0 +1,160 @@
+/**
+ * LOD Generator - Creates THREE.LOD objects from meshes
+ * 
+ * Standalone module for generating Level of Detail meshes
+ * using the QEM simplification algorithm.
+ */
+
+import * as THREE from 'three';
+import { QEMSimplifier } from './QEMSimplifier.js';
+
+const DEFAULT_LEVELS = [
+	{ ratio: 1.0, distance: 0 },
+	{ ratio: 0.5, distance: 50 },
+	{ ratio: 0.25, distance: 100 },
+	{ ratio: 0.1, distance: 200 }
+];
+
+class LODGenerator {
+
+	constructor( options = {} ) {
+		this.simplifier = new QEMSimplifier();
+		this.workerEnabled = options.useWorker ?? false;
+	}
+
+	generate( mesh, config = {} ) {
+		this._validateInput( mesh, config );
+
+		const levels = config.levels ?? DEFAULT_LEVELS;
+		const hysteresis = config.hysteresis ?? 0.05;
+		const geometry = mesh.geometry;
+		const material = mesh.material;
+
+		const lod = new THREE.LOD();
+		lod.name = mesh.name ? `${mesh.name}_LOD` : 'LOD';
+
+		lod.position.copy( mesh.position );
+		lod.rotation.copy( mesh.rotation );
+		lod.scale.copy( mesh.scale );
+		lod.quaternion.copy( mesh.quaternion );
+
+		for ( let i = 0; i < levels.length; i++ ) {
+			const level = levels[ i ];
+			let levelGeometry;
+
+			if ( level.ratio >= 1.0 ) {
+				levelGeometry = geometry.clone();
+			} else {
+				levelGeometry = this.simplifier.simplify( geometry, {
+					ratio: level.ratio,
+					preserveBoundary: config.preserveBoundary ?? true,
+					preserveUVSeams: config.preserveUVSeams ?? true
+				} );
+			}
+
+			const levelMesh = new THREE.Mesh( levelGeometry, material );
+			levelMesh.name = `LOD${i}`;
+			levelMesh.castShadow = mesh.castShadow;
+			levelMesh.receiveShadow = mesh.receiveShadow;
+
+			lod.addLevel( levelMesh, level.distance, hysteresis );
+
+			if ( config.onProgress ) config.onProgress( i, 1.0 );
+		}
+
+		return lod;
+	}
+
+	async generateAsync( mesh, config = {} ) {
+		return new Promise( ( resolve ) => {
+			setTimeout( () => resolve( this.generate( mesh, config ) ), 0 );
+		} );
+	}
+
+	_validateInput( mesh, config ) {
+		if ( !mesh || !mesh.isMesh ) throw new Error( 'LODGenerator: Input must be a THREE.Mesh' );
+		if ( !mesh.geometry ) throw new Error( 'LODGenerator: Mesh must have geometry' );
+
+		if ( config.levels ) {
+			for ( const level of config.levels ) {
+				if ( typeof level.ratio !== 'number' || level.ratio < 0 || level.ratio > 1 ) {
+					throw new Error( 'LODGenerator: Level ratio must be between 0 and 1' );
+				}
+				if ( typeof level.distance !== 'number' || level.distance < 0 ) {
+					throw new Error( 'LODGenerator: Level distance must be non-negative' );
+				}
+			}
+		}
+	}
+
+	getStats() {
+		return this.simplifier.stats;
+	}
+
+	static disposeLOD( lod ) {
+		if ( !lod ) return;
+		lod.levels.forEach( level => {
+			if ( level.object && level.object.geometry ) level.object.geometry.dispose();
+		} );
+	}
+
+}
+
+class LODDistanceCalculator {
+
+	constructor( camera ) {
+		this.camera = camera;
+		this.screenHeight = window.innerHeight;
+	}
+
+	calculateDistance( boundingRadius, targetScreenCoverage = 0.5 ) {
+		if ( this.camera.isPerspectiveCamera ) {
+			const fovRad = THREE.MathUtils.degToRad( this.camera.fov );
+			const screenSize = 2 * Math.tan( fovRad / 2 );
+			const objectScreenSize = targetScreenCoverage * screenSize;
+			return boundingRadius / objectScreenSize;
+		}
+		return boundingRadius / ( targetScreenCoverage * this.camera.top * 2 );
+	}
+
+	autoAssign( lod, options = {} ) {
+		const preset = options.preset ?? 'balanced';
+		const boundingRadius = options.boundingRadius ?? this._calculateBoundingRadius( lod );
+
+		const presets = {
+			performance: [ 0.3, 0.15, 0.05, 0.02 ],
+			balanced: [ 0.5, 0.25, 0.1, 0.03 ],
+			quality: [ 0.7, 0.4, 0.2, 0.05 ]
+		};
+
+		const coverages = presets[ preset ] || presets.balanced;
+
+		lod.levels.forEach( ( level, index ) => {
+			if ( index === 0 ) {
+				level.distance = 0;
+			} else {
+				const coverage = coverages[ Math.min( index - 1, coverages.length - 1 ) ];
+				level.distance = this.calculateDistance( boundingRadius, coverage );
+			}
+		} );
+
+		return lod;
+	}
+
+	_calculateBoundingRadius( lod ) {
+		const box = new THREE.Box3();
+		lod.levels.forEach( level => {
+			if ( level.object && level.object.geometry ) {
+				level.object.geometry.computeBoundingBox();
+				box.union( level.object.geometry.boundingBox );
+			}
+		} );
+		const sphere = new THREE.Sphere();
+		box.getBoundingSphere( sphere );
+		return sphere.radius;
+	}
+
+}
+
+export { LODGenerator, LODDistanceCalculator, DEFAULT_LEVELS };
+
diff --git a/tools/lod-generator/QEMSimplifier.js b/tools/lod-generator/QEMSimplifier.js
new file mode 100644
index 00000000000000..3bbb6a787680a7
--- /dev/null
+++ b/tools/lod-generator/QEMSimplifier.js
@@ -0,0 +1,590 @@
+/**
+ * Quadric Error Metric (QEM) Mesh Simplifier
+ * 
+ * Based on "Surface Simplification Using Quadric Error Metrics"
+ * by Michael Garland and Paul S. Heckbert (SIGGRAPH 1997)
+ */
+
+import * as THREE from 'three';
+
+const _tempVec = new THREE.Vector3();
+const _tempVec2 = new THREE.Vector3();
+const _edge1 = new THREE.Vector3();
+const _edge2 = new THREE.Vector3();
+
+class Quadric {
+
+	constructor() {
+		this.a = 0; this.b = 0; this.c = 0; this.d = 0;
+		this.e = 0; this.f = 0; this.g = 0;
+		this.h = 0; this.i = 0; this.j = 0;
+	}
+
+	setFromPlane( a, b, c, d ) {
+		this.a = a * a; this.b = a * b; this.c = a * c; this.d = a * d;
+		this.e = b * b; this.f = b * c; this.g = b * d;
+		this.h = c * c; this.i = c * d; this.j = d * d;
+		return this;
+	}
+
+	add( q ) {
+		this.a += q.a; this.b += q.b; this.c += q.c; this.d += q.d;
+		this.e += q.e; this.f += q.f; this.g += q.g;
+		this.h += q.h; this.i += q.i; this.j += q.j;
+		return this;
+	}
+
+	copy( q ) {
+		this.a = q.a; this.b = q.b; this.c = q.c; this.d = q.d;
+		this.e = q.e; this.f = q.f; this.g = q.g;
+		this.h = q.h; this.i = q.i; this.j = q.j;
+		return this;
+	}
+
+	evaluate( x, y, z ) {
+		return (
+			this.a * x * x + 2 * this.b * x * y + 2 * this.c * x * z + 2 * this.d * x +
+			this.e * y * y + 2 * this.f * y * z + 2 * this.g * y +
+			this.h * z * z + 2 * this.i * z + this.j
+		);
+	}
+
+	solveOptimal( target ) {
+		const det =
+			this.a * ( this.e * this.h - this.f * this.f ) -
+			this.b * ( this.b * this.h - this.f * this.c ) +
+			this.c * ( this.b * this.f - this.e * this.c );
+
+		if ( Math.abs( det ) < 1e-10 ) return null;
+
+		const invDet = 1 / det;
+		target.x = invDet * ( -this.d * ( this.e * this.h - this.f * this.f ) + this.g * ( this.b * this.h - this.f * this.c ) - this.i * ( this.b * this.f - this.e * this.c ) );
+		target.y = invDet * ( -this.a * ( this.g * this.h - this.f * this.i ) + this.b * ( this.d * this.h - this.i * this.c ) - this.c * ( this.d * this.f - this.g * this.c ) );
+		target.z = invDet * ( -this.a * ( this.e * this.i - this.g * this.f ) + this.b * ( this.b * this.i - this.g * this.c ) - this.d * ( this.b * this.f - this.e * this.c ) );
+		return target;
+	}
+
+}
+
+class HEVertex {
+
+	constructor( position, index ) {
+		this.position = position.clone();
+		this.index = index;
+		this.halfEdge = null;
+		this.quadric = new Quadric();
+		this.removed = false;
+		this.uv = null;
+		this.normal = null;
+		this.color = null;
+	}
+
+}
+
+class HalfEdge {
+
+	constructor( vertex, face ) {
+		this.vertex = vertex;
+		this.face = face;
+		this.next = null;
+		this.prev = null;
+		this.twin = null;
+		this.collapseError = 0;
+		this.collapseTarget = new THREE.Vector3();
+		this.heapIndex = -1;
+	}
+
+	get endVertex() { return this.next.vertex; }
+	isBoundary() { return this.twin === null; }
+
+}
+
+class HEFace {
+
+	constructor( index ) {
+		this.index = index;
+		this.halfEdge = null;
+		this.normal = new THREE.Vector3();
+		this.removed = false;
+	}
+
+	computeNormal() {
+		const v0 = this.halfEdge.vertex.position;
+		const v1 = this.halfEdge.next.vertex.position;
+		const v2 = this.halfEdge.prev.vertex.position;
+		_edge1.subVectors( v1, v0 );
+		_edge2.subVectors( v2, v0 );
+		this.normal.crossVectors( _edge1, _edge2 ).normalize();
+		return this.normal;
+	}
+
+}
+
+class HalfEdgeMesh {
+
+	constructor() {
+		this.vertices = [];
+		this.halfEdges = [];
+		this.faces = [];
+	}
+
+	buildFromBufferGeometry( geometry ) {
+		const posAttr = geometry.getAttribute( 'position' );
+		const uvAttr = geometry.getAttribute( 'uv' );
+		const normalAttr = geometry.getAttribute( 'normal' );
+		const colorAttr = geometry.getAttribute( 'color' );
+		const index = geometry.index;
+
+		for ( let i = 0; i < posAttr.count; i++ ) {
+			const pos = new THREE.Vector3().fromBufferAttribute( posAttr, i );
+			const vertex = new HEVertex( pos, i );
+			if ( uvAttr ) vertex.uv = new THREE.Vector2().fromBufferAttribute( uvAttr, i );
+			if ( normalAttr ) vertex.normal = new THREE.Vector3().fromBufferAttribute( normalAttr, i );
+			if ( colorAttr ) vertex.color = new THREE.Color().fromBufferAttribute( colorAttr, i );
+			this.vertices.push( vertex );
+		}
+
+		const edgeMap = new Map();
+		const getEdgeKey = ( i1, i2 ) => i1 < i2 ? `${i1}_${i2}` : `${i2}_${i1}`;
+
+		const indices = index ? index.array : null;
+		const faceCount = index ? index.count / 3 : posAttr.count / 3;
+
+		for ( let f = 0; f < faceCount; f++ ) {
+			const face = new HEFace( f );
+			this.faces.push( face );
+
+			const i0 = indices ? indices[ f * 3 ] : f * 3;
+			const i1 = indices ? indices[ f * 3 + 1 ] : f * 3 + 1;
+			const i2 = indices ? indices[ f * 3 + 2 ] : f * 3 + 2;
+
+			const v0 = this.vertices[ i0 ];
+			const v1 = this.vertices[ i1 ];
+			const v2 = this.vertices[ i2 ];
+
+			const he0 = new HalfEdge( v0, face );
+			const he1 = new HalfEdge( v1, face );
+			const he2 = new HalfEdge( v2, face );
+
+			he0.next = he1; he1.next = he2; he2.next = he0;
+			he0.prev = he2; he1.prev = he0; he2.prev = he1;
+
+			face.halfEdge = he0;
+			if ( !v0.halfEdge ) v0.halfEdge = he0;
+			if ( !v1.halfEdge ) v1.halfEdge = he1;
+			if ( !v2.halfEdge ) v2.halfEdge = he2;
+
+			this.halfEdges.push( he0, he1, he2 );
+
+			const edges = [ [ i0, i1, he0 ], [ i1, i2, he1 ], [ i2, i0, he2 ] ];
+			for ( const [ a, b, he ] of edges ) {
+				const key = getEdgeKey( a, b );
+				const existing = edgeMap.get( key );
+				if ( existing ) {
+					he.twin = existing;
+					existing.twin = he;
+				} else {
+					edgeMap.set( key, he );
+				}
+			}
+
+			face.computeNormal();
+		}
+	}
+
+}
+
+class EdgeHeap {
+
+	constructor() {
+		this.heap = [];
+		this.size = 0;
+	}
+
+	insert( edge ) {
+		edge.heapIndex = this.size;
+		this.heap[ this.size ] = edge;
+		this.size++;
+		this._bubbleUp( edge.heapIndex );
+	}
+
+	extractMin() {
+		if ( this.size === 0 ) return null;
+		const min = this.heap[ 0 ];
+		min.heapIndex = -1;
+		this.size--;
+		if ( this.size > 0 ) {
+			this.heap[ 0 ] = this.heap[ this.size ];
+			this.heap[ 0 ].heapIndex = 0;
+			this._bubbleDown( 0 );
+		}
+		return min;
+	}
+
+	remove( edge ) {
+		if ( edge.heapIndex < 0 || edge.heapIndex >= this.size ) return;
+		const idx = edge.heapIndex;
+		edge.heapIndex = -1;
+		this.size--;
+		if ( idx === this.size ) return;
+		this.heap[ idx ] = this.heap[ this.size ];
+		this.heap[ idx ].heapIndex = idx;
+		this._bubbleUp( idx );
+		this._bubbleDown( idx );
+	}
+
+	_bubbleUp( idx ) {
+		while ( idx > 0 ) {
+			const parentIdx = Math.floor( ( idx - 1 ) / 2 );
+			if ( this.heap[ idx ].collapseError >= this.heap[ parentIdx ].collapseError ) break;
+			this._swap( idx, parentIdx );
+			idx = parentIdx;
+		}
+	}
+
+	_bubbleDown( idx ) {
+		while ( true ) {
+			const left = 2 * idx + 1;
+			const right = 2 * idx + 2;
+			let smallest = idx;
+			if ( left < this.size && this.heap[ left ].collapseError < this.heap[ smallest ].collapseError ) smallest = left;
+			if ( right < this.size && this.heap[ right ].collapseError < this.heap[ smallest ].collapseError ) smallest = right;
+			if ( smallest === idx ) break;
+			this._swap( idx, smallest );
+			idx = smallest;
+		}
+	}
+
+	_swap( i, j ) {
+		const temp = this.heap[ i ];
+		this.heap[ i ] = this.heap[ j ];
+		this.heap[ j ] = temp;
+		this.heap[ i ].heapIndex = i;
+		this.heap[ j ].heapIndex = j;
+	}
+
+}
+
+class QEMSimplifier {
+
+	constructor() {
+		this.mesh = null;
+		this.heap = null;
+		this.stats = null;
+		this.preserveBoundary = true;
+		this.preserveUVSeams = true;
+		this.boundaryWeight = 100.0;
+	}
+
+	simplify( geometry, options = {} ) {
+		const startTime = performance.now();
+		const ratio = options.ratio ?? 0.5;
+		this.preserveBoundary = options.preserveBoundary ?? true;
+		this.preserveUVSeams = options.preserveUVSeams ?? true;
+		this.boundaryWeight = options.boundaryWeight ?? 100.0;
+
+		geometry = geometry.clone();
+
+		if ( geometry.index === null ) {
+			const positions = geometry.getAttribute( 'position' );
+			const indices = [];
+			for ( let i = 0; i < positions.count; i++ ) indices.push( i );
+			geometry.setIndex( indices );
+		}
+
+		this.mesh = new HalfEdgeMesh();
+		this.mesh.buildFromBufferGeometry( geometry );
+		this._computeVertexQuadrics();
+
+		this.heap = new EdgeHeap();
+		this._initializeEdgeHeap();
+
+		const originalFaceCount = this.mesh.faces.length;
+		const targetFaces = Math.max( 4, Math.floor( originalFaceCount * ratio ) );
+
+		let failedAttempts = 0;
+		const maxFailedAttempts = Math.min( 10000, this.mesh.halfEdges.length );
+
+		while ( this.heap.size > 0 && failedAttempts < maxFailedAttempts ) {
+			const currentFaces = this._countActiveFaces();
+			if ( currentFaces <= targetFaces ) break;
+
+			const edge = this.heap.extractMin();
+			if ( !edge ) break;
+			if ( edge.collapseError === Infinity ) { failedAttempts++; continue; }
+			if ( !this._isCollapseValid( edge ) ) { failedAttempts++; continue; }
+
+			this._collapseEdge( edge );
+			failedAttempts = 0;
+		}
+
+		const result = this._buildOutputGeometry();
+
+		this.stats = {
+			originalVertices: geometry.getAttribute( 'position' ).count,
+			originalTriangles: originalFaceCount,
+			finalVertices: result.getAttribute( 'position' ).count,
+			finalTriangles: result.index.count / 3,
+			ratio: ( result.index.count / 3 ) / originalFaceCount,
+			timeTaken: performance.now() - startTime
+		};
+
+		return result;
+	}
+
+	_countActiveFaces() {
+		let count = 0;
+		for ( const face of this.mesh.faces ) if ( !face.removed ) count++;
+		return count;
+	}
+
+	_computeVertexQuadrics() {
+		for ( const face of this.mesh.faces ) {
+			const n = face.normal;
+			const v = face.halfEdge.vertex.position;
+			const d = -n.dot( v );
+			const faceQuadric = new Quadric().setFromPlane( n.x, n.y, n.z, d );
+
+			let he = face.halfEdge;
+			do {
+				he.vertex.quadric.add( faceQuadric );
+				he = he.next;
+			} while ( he !== face.halfEdge );
+		}
+
+		if ( this.preserveBoundary ) this._addBoundaryConstraints();
+	}
+
+	_addBoundaryConstraints() {
+		for ( const he of this.mesh.halfEdges ) {
+			if ( he.isBoundary() ) {
+				const v0 = he.vertex.position;
+				const v1 = he.endVertex.position;
+				_tempVec.subVectors( v1, v0 ).normalize();
+				_tempVec2.crossVectors( _tempVec, he.face.normal ).normalize();
+				const d = -_tempVec2.dot( v0 );
+				const constraint = new Quadric().setFromPlane(
+					_tempVec2.x * this.boundaryWeight,
+					_tempVec2.y * this.boundaryWeight,
+					_tempVec2.z * this.boundaryWeight,
+					d * this.boundaryWeight
+				);
+				he.vertex.quadric.add( constraint );
+				he.endVertex.quadric.add( constraint );
+			}
+		}
+	}
+
+	_initializeEdgeHeap() {
+		const processed = new Set();
+		for ( const he of this.mesh.halfEdges ) {
+			const key = this._edgeKey( he );
+			if ( processed.has( key ) ) continue;
+			processed.add( key );
+			this._computeEdgeError( he );
+			this.heap.insert( he );
+		}
+	}
+
+	_edgeKey( edge ) {
+		const i1 = edge.vertex.index;
+		const i2 = edge.endVertex.index;
+		return i1 < i2 ? `${i1}_${i2}` : `${i2}_${i1}`;
+	}
+
+	_computeEdgeError( edge ) {
+		const v1 = edge.vertex;
+		const v2 = edge.endVertex;
+
+		if ( v1.removed || v2.removed ) {
+			edge.collapseError = Infinity;
+			return;
+		}
+
+		const Q = new Quadric();
+		Q.copy( v1.quadric );
+		Q.add( v2.quadric );
+
+		const optimal = Q.solveOptimal( edge.collapseTarget );
+		if ( optimal === null ) {
+			edge.collapseTarget.addVectors( v1.position, v2.position ).multiplyScalar( 0.5 );
+		}
+
+		edge.collapseError = Q.evaluate( edge.collapseTarget.x, edge.collapseTarget.y, edge.collapseTarget.z );
+
+		if ( this.preserveBoundary && edge.isBoundary() ) {
+			edge.collapseError += this.boundaryWeight * 1000;
+		}
+	}
+
+	_isCollapseValid( edge ) {
+		const v1 = edge.vertex;
+		const v2 = edge.endVertex;
+		if ( v1.removed || v2.removed ) return false;
+		if ( edge.face.removed ) return false;
+		if ( !this._checkNoInversion( edge ) ) return false;
+		return true;
+	}
+
+	_checkNoInversion( edge ) {
+		const target = edge.collapseTarget;
+		const v1 = edge.vertex;
+		const v2 = edge.endVertex;
+
+		const facesToCheck = [];
+		for ( const face of this.mesh.faces ) {
+			if ( face.removed ) continue;
+			if ( this._faceContainsEdge( face, v1, v2 ) ) continue;
+
+			let fhe = face.halfEdge;
+			let containsV1OrV2 = false;
+			do {
+				if ( fhe.vertex === v1 || fhe.vertex === v2 ) { containsV1OrV2 = true; break; }
+				fhe = fhe.next;
+			} while ( fhe !== face.halfEdge );
+
+			if ( containsV1OrV2 ) facesToCheck.push( face );
+		}
+
+		for ( const face of facesToCheck ) {
+			const fv = [];
+			let fhe = face.halfEdge;
+			do {
+				fv.push( fhe.vertex );
+				fhe = fhe.next;
+			} while ( fhe !== face.halfEdge );
+
+			const newPositions = fv.map( v => ( v === v1 || v === v2 ) ? target : v.position );
+
+			_edge1.subVectors( newPositions[ 1 ], newPositions[ 0 ] );
+			_edge2.subVectors( newPositions[ 2 ], newPositions[ 0 ] );
+			_tempVec.crossVectors( _edge1, _edge2 );
+
+			if ( _tempVec.lengthSq() < 1e-20 ) return false;
+
+			_tempVec.normalize();
+			if ( _tempVec.dot( face.normal ) < -0.2 ) return false;
+		}
+
+		return true;
+	}
+
+	_faceContainsEdge( face, v1, v2 ) {
+		let he = face.halfEdge;
+		do {
+			const a = he.vertex;
+			const b = he.endVertex;
+			if ( ( a === v1 && b === v2 ) || ( a === v2 && b === v1 ) ) return true;
+			he = he.next;
+		} while ( he !== face.halfEdge );
+		return false;
+	}
+
+	_collapseEdge( edge ) {
+		const v1 = edge.vertex;
+		const v2 = edge.endVertex;
+
+		v1.position.copy( edge.collapseTarget );
+		v1.quadric.add( v2.quadric );
+		this._interpolateAttributes( v1, v2, edge.collapseTarget );
+
+		if ( !edge.face.removed ) edge.face.removed = true;
+		if ( edge.twin && !edge.twin.face.removed ) edge.twin.face.removed = true;
+
+		for ( const he of this.mesh.halfEdges ) {
+			if ( he.vertex === v2 ) he.vertex = v1;
+		}
+
+		v2.removed = true;
+
+		if ( v1.halfEdge && ( v1.halfEdge.face.removed || v1.halfEdge.vertex !== v1 ) ) {
+			for ( const he of this.mesh.halfEdges ) {
+				if ( he.vertex === v1 && !he.face.removed ) { v1.halfEdge = he; break; }
+			}
+		}
+
+		this._updateAffectedEdges( v1 );
+	}
+
+	_interpolateAttributes( v1, v2, target ) {
+		const d1 = v1.position.distanceTo( target );
+		const d2 = v2.position.distanceTo( target );
+		const total = d1 + d2;
+		const t = total > 0 ? d1 / total : 0.5;
+
+		if ( v1.uv && v2.uv ) v1.uv.lerp( v2.uv, t );
+		else if ( v2.uv ) v1.uv = v2.uv.clone();
+
+		if ( v1.normal && v2.normal ) v1.normal.lerp( v2.normal, t ).normalize();
+		else if ( v2.normal ) v1.normal = v2.normal.clone();
+
+		if ( v1.color && v2.color ) v1.color.lerp( v2.color, t );
+		else if ( v2.color ) v1.color = v2.color.clone();
+	}
+
+	_updateAffectedEdges( vertex ) {
+		const edgesToUpdate = new Set();
+
+		for ( const he of this.mesh.halfEdges ) {
+			if ( he.face.removed ) continue;
+			if ( he.vertex === vertex || he.endVertex === vertex ) edgesToUpdate.add( he );
+		}
+
+		for ( const he of edgesToUpdate ) {
+			this._computeEdgeError( he );
+			if ( he.heapIndex >= 0 ) {
+				this.heap.remove( he );
+				if ( he.collapseError < Infinity ) this.heap.insert( he );
+			} else if ( he.collapseError < Infinity ) {
+				this.heap.insert( he );
+			}
+		}
+	}
+
+	_buildOutputGeometry() {
+		const positions = [];
+		const uvs = [];
+		const normals = [];
+		const colors = [];
+		const indices = [];
+
+		const vertexMap = new Map();
+		let newIndex = 0;
+
+		for ( const face of this.mesh.faces ) {
+			if ( face.removed ) continue;
+
+			let he = face.halfEdge;
+			const faceIndices = [];
+
+			do {
+				const v = he.vertex;
+				if ( !vertexMap.has( v ) ) {
+					vertexMap.set( v, newIndex );
+					positions.push( v.position.x, v.position.y, v.position.z );
+					if ( v.uv ) uvs.push( v.uv.x, v.uv.y );
+					if ( v.normal ) normals.push( v.normal.x, v.normal.y, v.normal.z );
+					if ( v.color ) colors.push( v.color.r, v.color.g, v.color.b );
+					newIndex++;
+				}
+				faceIndices.push( vertexMap.get( v ) );
+				he = he.next;
+			} while ( he !== face.halfEdge );
+
+			indices.push( faceIndices[ 0 ], faceIndices[ 1 ], faceIndices[ 2 ] );
+		}
+
+		const geometry = new THREE.BufferGeometry();
+		geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );
+		if ( uvs.length > 0 ) geometry.setAttribute( 'uv', new THREE.Float32BufferAttribute( uvs, 2 ) );
+		if ( normals.length > 0 ) geometry.setAttribute( 'normal', new THREE.Float32BufferAttribute( normals, 3 ) );
+		if ( colors.length > 0 ) geometry.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
+		geometry.setIndex( indices );
+
+		return geometry;
+	}
+
+}
+
+export { QEMSimplifier, Quadric, HalfEdgeMesh };
+
diff --git a/tools/lod-generator/README.md b/tools/lod-generator/README.md
new file mode 100644
index 00000000000000..b8b968e12777af
--- /dev/null
+++ b/tools/lod-generator/README.md
@@ -0,0 +1,96 @@
+# LOD Generator Tool
+
+A standalone Level of Detail (LOD) generator for Three.js meshes using Quadric Error Metric (QEM) simplification.
+
+## Features
+
+- **QEM Mesh Simplification** - High-quality mesh reduction algorithm
+- **Multiple LOD Levels** - Configurable reduction ratios and distances
+- **Live Preview** - Auto mode switches LODs based on camera distance
+- **Drag & Drop** - Load models by dropping files
+- **ZIP Export** - Export all LOD levels as separate GLB files
+- **No Three.js Modifications** - Completely standalone tool
+
+## Files
+
+```
+tools/lod-generator/
+├── index.html          # Main tool interface
+├── LODGenerator.js     # LOD generation API
+├── QEMSimplifier.js    # QEM simplification algorithm
+└── README.md           # This file
+```
+
+## Usage
+
+### Running the Tool
+
+Start a local web server from the Three.js root:
+
+```bash
+# Python
+python3 -m http.server 8000
+
+# Node.js
+npx serve .
+```
+
+Open: `http://localhost:8000/tools/lod-generator/`
+
+### Using the Tool
+
+1. **Load a Model** - Click "Load File" or drag-and-drop a GLB/GLTF/OBJ/FBX file
+2. **Configure LODs** - Adjust reduction % and distance for each level
+3. **Generate** - Click "Generate" to create simplified meshes
+4. **Preview** - Use "Auto" mode or click individual LOD buttons
+5. **Export** - Click "Export ZIP" to download all LOD levels
+
+### Programmatic API
+
+```javascript
+import { LODGenerator } from './LODGenerator.js';
+
+const generator = new LODGenerator();
+
+const lod = generator.generate(mesh, {
+    levels: [
+        { ratio: 1.0, distance: 0 },
+        { ratio: 0.5, distance: 50 },
+        { ratio: 0.25, distance: 100 }
+    ],
+    preserveBoundary: true,
+    preserveUVSeams: true
+});
+
+scene.add(lod);
+
+// In render loop
+lod.update(camera);
+```
+
+### QEM Simplifier API
+
+```javascript
+import { QEMSimplifier } from './QEMSimplifier.js';
+
+const simplifier = new QEMSimplifier();
+const simplified = simplifier.simplify(geometry, { ratio: 0.5 });
+```
+
+## Algorithm
+
+Uses the **Quadric Error Metric** algorithm from:
+
+> "Surface Simplification Using Quadric Error Metrics"  
+> Michael Garland & Paul S. Heckbert, SIGGRAPH 1997
+
+## Supported Formats
+
+- GLB/GLTF
+- OBJ
+- FBX
+
+## License
+
+MIT (same as Three.js)
+
diff --git a/tools/lod-generator/index.html b/tools/lod-generator/index.html
new file mode 100644
index 00000000000000..fd9b59bb4e3635
--- /dev/null
+++ b/tools/lod-generator/index.html
@@ -0,0 +1,880 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<title>LOD Generator Tool</title>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+	<style>
+		* { margin: 0; padding: 0; box-sizing: border-box; }
+
+		body {
+			font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
+			background: #0d1117;
+			color: #c9d1d9;
+			overflow: hidden;
+		}
+
+		#viewport {
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+		}
+
+		#header {
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			height: 48px;
+			background: linear-gradient(90deg, #161b22 0%, #0d1117 100%);
+			border-bottom: 1px solid #30363d;
+			display: flex;
+			align-items: center;
+			padding: 0 20px;
+			z-index: 100;
+		}
+
+		#header h1 {
+			font-size: 16px;
+			font-weight: 600;
+			color: #58a6ff;
+		}
+
+		#header h1 span {
+			color: #8b949e;
+			font-weight: 400;
+			margin-left: 8px;
+		}
+
+		#panel {
+			position: absolute;
+			top: 58px;
+			right: 10px;
+			width: 320px;
+			background: #161b22;
+			border: 1px solid #30363d;
+			border-radius: 6px;
+			padding: 16px;
+			z-index: 100;
+			max-height: calc(100vh - 70px);
+			overflow-y: auto;
+		}
+
+		#panel::-webkit-scrollbar { width: 8px; }
+		#panel::-webkit-scrollbar-track { background: transparent; }
+		#panel::-webkit-scrollbar-thumb { background: #30363d; border-radius: 4px; }
+
+		.section { margin-bottom: 16px; }
+
+		.section-title {
+			font-size: 12px;
+			font-weight: 600;
+			text-transform: uppercase;
+			letter-spacing: 0.5px;
+			color: #8b949e;
+			margin-bottom: 10px;
+			display: flex;
+			align-items: center;
+			gap: 6px;
+		}
+
+		.btn {
+			background: #238636;
+			border: 1px solid rgba(240,246,252,0.1);
+			color: #fff;
+			padding: 8px 16px;
+			border-radius: 6px;
+			cursor: pointer;
+			font-size: 13px;
+			font-weight: 500;
+			transition: background 0.15s;
+			display: inline-flex;
+			align-items: center;
+			gap: 6px;
+		}
+
+		.btn:hover { background: #2ea043; }
+		.btn:disabled { background: #21262d; color: #484f58; cursor: not-allowed; }
+
+		.btn.loading {
+			background: #238636;
+			pointer-events: none;
+			position: relative;
+		}
+
+		.btn .spinner {
+			width: 14px;
+			height: 14px;
+			border: 2px solid rgba(255,255,255,0.3);
+			border-top-color: #fff;
+			border-radius: 50%;
+			animation: spin 0.8s linear infinite;
+		}
+
+		@keyframes spin {
+			to { transform: rotate(360deg); }
+		}
+
+		.btn.secondary {
+			background: #21262d;
+			border-color: #30363d;
+			color: #c9d1d9;
+		}
+
+		.btn.secondary:hover { background: #30363d; }
+
+		.lod-card {
+			background: #0d1117;
+			border: 1px solid #30363d;
+			border-radius: 6px;
+			padding: 12px;
+			margin-bottom: 8px;
+			transition: border-color 0.15s;
+		}
+
+		.lod-card.active {
+			border-color: #58a6ff;
+			border-left-width: 3px;
+		}
+
+		.lod-card-header {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			margin-bottom: 8px;
+		}
+
+		.lod-card-title {
+			font-weight: 600;
+			font-size: 13px;
+			color: #c9d1d9;
+		}
+
+		.remove-btn {
+			background: transparent;
+			border: 1px solid #30363d;
+			color: #8b949e;
+			padding: 2px 8px;
+			border-radius: 4px;
+			cursor: pointer;
+			font-size: 12px;
+		}
+
+		.remove-btn:hover { border-color: #f85149; color: #f85149; }
+
+		.slider-row { margin: 8px 0; }
+
+		.slider-row label {
+			display: flex;
+			justify-content: space-between;
+			font-size: 12px;
+			color: #8b949e;
+			margin-bottom: 4px;
+		}
+
+		.slider-row label strong { color: #c9d1d9; }
+
+		input[type="range"] {
+			width: 100%;
+			height: 6px;
+			border-radius: 3px;
+			background: #30363d;
+			outline: none;
+			-webkit-appearance: none;
+		}
+
+		input[type="range"]::-webkit-slider-thumb {
+			-webkit-appearance: none;
+			width: 14px;
+			height: 14px;
+			border-radius: 50%;
+			background: #58a6ff;
+			cursor: pointer;
+		}
+
+		input[type="number"] {
+			width: 60px;
+			padding: 4px 8px;
+			background: #0d1117;
+			border: 1px solid #30363d;
+			color: #c9d1d9;
+			border-radius: 4px;
+			font-size: 12px;
+		}
+
+		.stats-text {
+			font-size: 11px;
+			color: #8b949e;
+			margin-top: 4px;
+		}
+
+		.preview-buttons {
+			display: flex;
+			flex-wrap: wrap;
+			gap: 4px;
+		}
+
+		.preview-btn {
+			flex: 1;
+			min-width: 50px;
+			padding: 6px 8px;
+			background: #21262d;
+			border: 1px solid #30363d;
+			color: #8b949e;
+			border-radius: 4px;
+			cursor: pointer;
+			font-size: 11px;
+			font-weight: 500;
+			transition: all 0.15s;
+		}
+
+		.preview-btn:hover { background: #30363d; color: #c9d1d9; }
+
+		.preview-btn.active {
+			background: #388bfd;
+			border-color: #58a6ff;
+			color: #fff;
+		}
+
+		.current-lod-box {
+			background: rgba(56, 139, 253, 0.1);
+			border: 1px solid #388bfd;
+			border-radius: 6px;
+			padding: 12px;
+			margin-top: 10px;
+			text-align: center;
+		}
+
+		.current-lod-box .label {
+			font-size: 10px;
+			text-transform: uppercase;
+			letter-spacing: 0.5px;
+			color: #8b949e;
+		}
+
+		.current-lod-box .value {
+			font-size: 20px;
+			font-weight: 700;
+			color: #58a6ff;
+			margin: 4px 0;
+		}
+
+		.current-lod-box .details {
+			font-size: 11px;
+			color: #8b949e;
+		}
+
+		.checkbox-row {
+			display: flex;
+			align-items: center;
+			gap: 8px;
+			margin: 6px 0;
+		}
+
+		.checkbox-row input[type="checkbox"] {
+			width: 16px;
+			height: 16px;
+			accent-color: #58a6ff;
+		}
+
+		.checkbox-row label { font-size: 12px; color: #c9d1d9; }
+
+		.progress-bar {
+			height: 4px;
+			background: #21262d;
+			border-radius: 2px;
+			margin-top: 10px;
+			overflow: hidden;
+		}
+
+		.progress-fill {
+			height: 100%;
+			background: linear-gradient(90deg, #238636, #2ea043);
+			width: 0%;
+			transition: width 0.2s;
+		}
+
+		.info-text {
+			font-size: 12px;
+			color: #8b949e;
+			line-height: 1.5;
+		}
+
+		.info-text strong { color: #c9d1d9; }
+
+		#dropzone {
+			position: fixed;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			background: rgba(56, 139, 253, 0.15);
+			display: none;
+			align-items: center;
+			justify-content: center;
+			z-index: 1000;
+			pointer-events: none;
+		}
+
+		#dropzone.active { display: flex; }
+
+		#dropzone-box {
+			background: #161b22;
+			border: 2px dashed #58a6ff;
+			border-radius: 12px;
+			padding: 48px 64px;
+			text-align: center;
+		}
+
+		#dropzone-box .icon { font-size: 40px; margin-bottom: 12px; }
+		#dropzone-box .text { font-size: 16px; color: #c9d1d9; }
+
+		.hidden { display: none !important; }
+	</style>
+</head>
+<body>
+	<div id="viewport"></div>
+
+	<div id="header">
+		<h1>🎚️ LOD Generator<span>three.js tool</span></h1>
+	</div>
+
+	<div id="panel">
+		<div class="section">
+			<div class="section-title">📂 Load Model</div>
+			<button class="btn" id="loadBtn">Load File</button>
+			<button class="btn secondary" id="sampleBtn">Sample</button>
+			<input type="file" id="fileInput" accept=".glb,.gltf,.obj,.fbx" class="hidden">
+		</div>
+
+		<div class="section">
+			<div class="section-title">📊 Model Info</div>
+			<div class="info-text" id="modelInfo">Drag & drop or load a GLB, GLTF, OBJ, or FBX file.</div>
+		</div>
+
+		<div class="section">
+			<div class="section-title">⚙️ LOD Levels</div>
+			<div id="lodLevels"></div>
+			<button class="btn secondary" id="addLevelBtn" style="width:100%;margin-top:4px;">+ Add Level</button>
+		</div>
+
+		<div class="section">
+			<div class="section-title">🔧 Options</div>
+			<div class="checkbox-row">
+				<input type="checkbox" id="preserveBoundary" checked>
+				<label for="preserveBoundary">Preserve Boundaries</label>
+			</div>
+			<div class="checkbox-row">
+				<input type="checkbox" id="preserveUV" checked>
+				<label for="preserveUV">Preserve UV Seams</label>
+			</div>
+			<div class="checkbox-row">
+				<input type="checkbox" id="showWireframe">
+				<label for="showWireframe">Show Wireframe</label>
+			</div>
+		</div>
+
+		<div class="section">
+			<div class="section-title">👁️ Preview</div>
+			<div class="preview-buttons" id="previewButtons">
+				<button class="preview-btn active" data-level="auto">Auto</button>
+			</div>
+			<div class="current-lod-box hidden" id="currentLodBox">
+				<div class="label">Currently Rendering</div>
+				<div class="value" id="currentLodValue">LOD 0</div>
+				<div class="details" id="currentLodDetails">Distance: 0 | Triangles: -</div>
+			</div>
+		</div>
+
+		<div class="section">
+			<button class="btn" id="generateBtn" disabled style="width:calc(50% - 4px);">⚡ Generate</button>
+			<button class="btn secondary" id="exportBtn" disabled style="width:calc(50% - 4px);">💾 Export ZIP</button>
+			<div class="progress-bar">
+				<div class="progress-fill" id="progressBar"></div>
+			</div>
+		</div>
+
+		<div class="section">
+			<div class="section-title">📈 Statistics</div>
+			<div class="info-text" id="statsInfo">Generate LODs to see statistics.</div>
+		</div>
+	</div>
+
+	<div id="dropzone">
+		<div id="dropzone-box">
+			<div class="icon">📦</div>
+			<div class="text">Drop 3D model here</div>
+		</div>
+	</div>
+
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
+
+	<script type="importmap">
+	{
+		"imports": {
+			"three": "https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js",
+			"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/"
+		}
+	}
+	</script>
+
+	<script type="module">
+		import * as THREE from 'three';
+		import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+		import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
+		import { GLTFExporter } from 'three/addons/exporters/GLTFExporter.js';
+		import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
+		import { FBXLoader } from 'three/addons/loaders/FBXLoader.js';
+		import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
+
+		import { LODGenerator, LODDistanceCalculator } from './LODGenerator.js';
+
+		let renderer, scene, camera, controls;
+		let currentMesh = null;
+		let currentLOD = null;
+		let generator = null;
+		let previewLevel = 'auto';
+		let originalMaterial = null;
+		let wireframeMaterial = null;
+		let lastActiveLOD = -1;
+
+		let lodLevels = [
+			{ ratio: 1.0, distance: 0 },
+			{ ratio: 0.5, distance: 50 },
+			{ ratio: 0.25, distance: 100 },
+			{ ratio: 0.1, distance: 150 }
+		];
+
+		const viewport = document.getElementById('viewport');
+		const fileInput = document.getElementById('fileInput');
+		const loadBtn = document.getElementById('loadBtn');
+		const sampleBtn = document.getElementById('sampleBtn');
+		const modelInfo = document.getElementById('modelInfo');
+		const lodLevelsEl = document.getElementById('lodLevels');
+		const addLevelBtn = document.getElementById('addLevelBtn');
+		const previewButtons = document.getElementById('previewButtons');
+		const generateBtn = document.getElementById('generateBtn');
+		const exportBtn = document.getElementById('exportBtn');
+		const progressBar = document.getElementById('progressBar');
+		const statsInfo = document.getElementById('statsInfo');
+		const dropzone = document.getElementById('dropzone');
+		const showWireframeEl = document.getElementById('showWireframe');
+		const currentLodBox = document.getElementById('currentLodBox');
+
+		init();
+
+		function init() {
+			renderer = new THREE.WebGLRenderer({ antialias: true });
+			renderer.setPixelRatio(window.devicePixelRatio);
+			renderer.setSize(window.innerWidth, window.innerHeight);
+			renderer.setClearColor(0x0d1117);
+			renderer.setAnimationLoop(animate);
+			viewport.appendChild(renderer.domElement);
+
+			scene = new THREE.Scene();
+
+			camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 2000);
+			camera.position.set(0, 0, 5);
+
+			controls = new OrbitControls(camera, renderer.domElement);
+			controls.enableDamping = true;
+			controls.dampingFactor = 0.05;
+
+			scene.add(new THREE.AmbientLight(0xffffff, 0.6));
+			const dirLight = new THREE.DirectionalLight(0xffffff, 1.0);
+			dirLight.position.set(5, 10, 7.5);
+			scene.add(dirLight);
+			const dirLight2 = new THREE.DirectionalLight(0x4488ff, 0.4);
+			dirLight2.position.set(-5, -5, -5);
+			scene.add(dirLight2);
+
+			const grid = new THREE.GridHelper(20, 20, 0x30363d, 0x21262d);
+			grid.position.y = -1;
+			scene.add(grid);
+
+			wireframeMaterial = new THREE.MeshBasicMaterial({ color: 0x58a6ff, wireframe: true });
+
+			generator = new LODGenerator();
+
+			loadBtn.onclick = () => fileInput.click();
+			fileInput.onchange = (e) => { if (e.target.files[0]) handleFile(e.target.files[0]); };
+			sampleBtn.onclick = loadSampleModel;
+			addLevelBtn.onclick = addLODLevel;
+			generateBtn.onclick = generateLODs;
+			exportBtn.onclick = exportZIP;
+			showWireframeEl.onchange = updateWireframe;
+
+			document.ondragover = (e) => { e.preventDefault(); dropzone.classList.add('active'); };
+			document.ondragleave = (e) => { if (!e.relatedTarget) dropzone.classList.remove('active'); };
+			document.ondrop = (e) => { e.preventDefault(); dropzone.classList.remove('active'); if (e.dataTransfer.files[0]) handleFile(e.dataTransfer.files[0]); };
+
+			window.onresize = () => {
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+				renderer.setSize(window.innerWidth, window.innerHeight);
+			};
+
+			renderLODLevels();
+		}
+
+		function handleFile(file) {
+			const name = file.name.toLowerCase();
+			const reader = new FileReader();
+
+			reader.onload = (e) => {
+				if (name.endsWith('.glb') || name.endsWith('.gltf')) {
+					loadGLTF(e.target.result, file.name);
+				} else if (name.endsWith('.obj')) {
+					loadOBJ(e.target.result);
+				} else if (name.endsWith('.fbx')) {
+					loadFBX(e.target.result);
+				}
+			};
+
+			if (name.endsWith('.glb')) reader.readAsArrayBuffer(file);
+			else reader.readAsDataURL(file);
+		}
+
+		function loadGLTF(data, name) {
+			const loader = new GLTFLoader();
+			if (data instanceof ArrayBuffer) {
+				loader.parse(data, '', (gltf) => processLoadedModel(gltf.scene, name), (err) => alert('Load failed'));
+			} else {
+				loader.load(data, (gltf) => processLoadedModel(gltf.scene, name));
+			}
+		}
+
+		function loadOBJ(data) {
+			const loader = new OBJLoader();
+			processLoadedModel(loader.parse(data), 'obj_model');
+		}
+
+		function loadFBX(data) {
+			const loader = new FBXLoader();
+			loader.load(data, (fbx) => processLoadedModel(fbx, 'fbx_model'));
+		}
+
+		function loadSampleModel() {
+			const loader = new GLTFLoader();
+			const draco = new DRACOLoader();
+			draco.setDecoderPath('https://www.gstatic.com/draco/versioned/decoders/1.5.6/');
+			loader.setDRACOLoader(draco);
+			loader.load('https://threejs.org/examples/models/gltf/LeePerrySmith/LeePerrySmith.glb',
+				(gltf) => processLoadedModel(gltf.scene, 'LeePerrySmith'),
+				undefined,
+				(err) => alert('Failed to load sample model'));
+		}
+
+		function processLoadedModel(object, name = 'model') {
+			if (currentMesh) { scene.remove(currentMesh); currentMesh = null; }
+			if (currentLOD) { scene.remove(currentLOD); LODGenerator.disposeLOD(currentLOD); currentLOD = null; }
+
+			currentLodBox.classList.add('hidden');
+			lastActiveLOD = -1;
+
+			let mesh = null;
+			object.traverse((child) => { if (child.isMesh && !mesh) mesh = child; });
+
+			if (!mesh) { alert('No mesh found'); return; }
+
+			currentMesh = mesh.clone();
+			currentMesh.name = name;
+			originalMaterial = currentMesh.material;
+
+			const box = new THREE.Box3().setFromObject(currentMesh);
+			const center = box.getCenter(new THREE.Vector3());
+			const size = box.getSize(new THREE.Vector3());
+			const maxDim = Math.max(size.x, size.y, size.z);
+			const scale = 3 / maxDim;
+
+			currentMesh.position.sub(center);
+			currentMesh.scale.multiplyScalar(scale);
+			currentMesh.position.set(0, 0, 0);
+
+			scene.add(currentMesh);
+
+			const geo = currentMesh.geometry;
+			const tris = geo.index ? geo.index.count / 3 : geo.getAttribute('position').count / 3;
+			const verts = geo.getAttribute('position').count;
+
+			modelInfo.innerHTML = `<strong>Name:</strong> ${name}<br><strong>Triangles:</strong> ${Math.floor(tris).toLocaleString()}<br><strong>Vertices:</strong> ${verts.toLocaleString()}`;
+
+			generateBtn.disabled = false;
+			exportBtn.disabled = true;
+
+			renderLODLevels();
+
+			camera.position.set(0, 0, 5);
+			controls.target.set(0, 0, 0);
+			controls.update();
+		}
+
+		function renderLODLevels() {
+			lodLevelsEl.innerHTML = '';
+			previewButtons.innerHTML = '<button class="preview-btn ' + (previewLevel === 'auto' ? 'active' : '') + '" data-level="auto">Auto</button>';
+
+			lodLevels.forEach((level, index) => {
+				const card = document.createElement('div');
+				card.className = 'lod-card';
+				card.id = `lodCard${index}`;
+
+				const isOriginal = level.ratio >= 1.0;
+				const estTris = currentMesh ? Math.floor(getTriangleCount() * level.ratio) : '?';
+
+				card.innerHTML = `
+					<div class="lod-card-header">
+						<span class="lod-card-title">LOD ${index}</span>
+						${index > 0 ? `<button class="remove-btn" onclick="window.removeLODLevel(${index})">×</button>` : ''}
+					</div>
+					${isOriginal ? '<div class="stats-text">Original (100%)</div>' : `
+						<div class="slider-row">
+							<label>Reduction: <strong>${Math.round(level.ratio * 100)}%</strong></label>
+							<input type="range" min="0.01" max="0.99" step="0.01" value="${level.ratio}" onchange="window.updateLODRatio(${index}, this.value)">
+						</div>
+					`}
+					<div class="slider-row">
+						<label>Distance: <input type="number" min="0" value="${level.distance}" onchange="window.updateLODDistance(${index}, this.value)"></label>
+					</div>
+					<div class="stats-text" id="levelStats${index}">~${typeof estTris === 'number' ? estTris.toLocaleString() : estTris} triangles</div>
+				`;
+
+				lodLevelsEl.appendChild(card);
+
+				const btn = document.createElement('button');
+				btn.className = 'preview-btn' + (previewLevel === index ? ' active' : '');
+				btn.dataset.level = index;
+				btn.textContent = `LOD${index}`;
+				btn.onclick = () => setPreviewLevel(index);
+				previewButtons.appendChild(btn);
+			});
+
+			previewButtons.querySelector('[data-level="auto"]').onclick = () => setPreviewLevel('auto');
+		}
+
+		function getTriangleCount() {
+			if (!currentMesh || !currentMesh.geometry) return 0;
+			const geo = currentMesh.geometry;
+			return geo.index ? geo.index.count / 3 : geo.getAttribute('position').count / 3;
+		}
+
+		window.updateLODRatio = (index, value) => { lodLevels[index].ratio = parseFloat(value); renderLODLevels(); };
+		window.updateLODDistance = (index, value) => { lodLevels[index].distance = parseFloat(value); if (currentLOD && currentLOD.levels[index]) currentLOD.levels[index].distance = parseFloat(value); };
+		window.removeLODLevel = (index) => { if (lodLevels.length > 2) { lodLevels.splice(index, 1); renderLODLevels(); } };
+
+		function addLODLevel() {
+			const last = lodLevels[lodLevels.length - 1];
+			lodLevels.push({ ratio: Math.max(0.01, last.ratio * 0.5), distance: last.distance + 50 });
+			renderLODLevels();
+		}
+
+		function setPreviewLevel(level) {
+			previewLevel = level;
+			lastActiveLOD = -1;
+
+			previewButtons.querySelectorAll('.preview-btn').forEach(btn => {
+				const btnLevel = btn.dataset.level === 'auto' ? 'auto' : parseInt(btn.dataset.level);
+				btn.classList.toggle('active', btnLevel === level);
+			});
+
+			if (currentLOD) {
+				if (level === 'auto') {
+					currentLOD.autoUpdate = true;
+					currentLOD.update(camera);
+				} else {
+					currentLOD.autoUpdate = false;
+					currentLOD.levels.forEach((l, i) => { l.object.visible = (i === level); });
+				}
+			}
+		}
+
+		function updateWireframe() {
+			const show = showWireframeEl.checked;
+			const target = currentLOD || currentMesh;
+			if (target) target.traverse((child) => { if (child.isMesh) child.material = show ? wireframeMaterial : originalMaterial; });
+		}
+
+		async function generateLODs() {
+			if (!currentMesh) return;
+
+			// Show loading state with spinner
+			generateBtn.disabled = true;
+			generateBtn.classList.add('loading');
+			generateBtn.innerHTML = '<span class="spinner"></span> Generating...';
+			progressBar.style.width = '0%';
+
+			// Use setTimeout to allow UI to update before heavy processing
+			await new Promise(resolve => setTimeout(resolve, 50));
+
+			const startTime = performance.now();
+
+			try {
+				if (currentLOD) { scene.remove(currentLOD); LODGenerator.disposeLOD(currentLOD); }
+				scene.remove(currentMesh);
+
+				currentLOD = generator.generate(currentMesh, {
+					levels: lodLevels,
+					preserveBoundary: document.getElementById('preserveBoundary').checked,
+					preserveUVSeams: document.getElementById('preserveUV').checked,
+					onProgress: (level, progress) => { progressBar.style.width = `${((level + progress) / lodLevels.length) * 100}%`; }
+				});
+
+				scene.add(currentLOD);
+
+				const timeTaken = performance.now() - startTime;
+				updateStats(timeTaken);
+
+				currentLOD.levels.forEach((level, i) => {
+					const el = document.getElementById(`levelStats${i}`);
+					if (el && level.object.geometry) {
+						const geo = level.object.geometry;
+						const tris = geo.index ? geo.index.count / 3 : geo.getAttribute('position').count / 3;
+						el.textContent = `${Math.floor(tris).toLocaleString()} triangles`;
+					}
+				});
+
+				updateWireframe();
+				exportBtn.disabled = false;
+				currentLodBox.classList.remove('hidden');
+
+			} catch (error) {
+				console.error('LOD generation failed:', error);
+				alert('LOD generation failed: ' + error.message);
+				scene.add(currentMesh);
+			}
+
+			// Reset button state
+			generateBtn.disabled = false;
+			generateBtn.classList.remove('loading');
+			generateBtn.innerHTML = '⚡ Generate';
+		}
+
+		function updateStats(timeTaken) {
+			if (!currentLOD) return;
+
+			let html = `<strong>Time:</strong> ${timeTaken.toFixed(0)}ms<br><br>`;
+			currentLOD.levels.forEach((level, i) => {
+				if (level.object.geometry) {
+					const geo = level.object.geometry;
+					const tris = geo.index ? geo.index.count / 3 : geo.getAttribute('position').count / 3;
+					const verts = geo.getAttribute('position').count;
+					html += `<strong>LOD${i}:</strong> ${Math.floor(tris).toLocaleString()} tris, ${verts.toLocaleString()} verts<br>`;
+				}
+			});
+			statsInfo.innerHTML = html;
+		}
+
+		async function exportZIP() {
+			if (!currentLOD) return;
+
+			exportBtn.disabled = true;
+			exportBtn.classList.add('loading');
+			exportBtn.innerHTML = '<span class="spinner"></span> Exporting...';
+
+			try {
+				const zip = new JSZip();
+				const exporter = new GLTFExporter();
+				const modelName = currentMesh?.name || 'model';
+
+				const promises = currentLOD.levels.map((level, index) => {
+					return new Promise((resolve) => {
+						const mesh = level.object;
+						if (!mesh || !mesh.geometry) { resolve(null); return; }
+
+						const exportMesh = new THREE.Mesh(mesh.geometry.clone(), mesh.material);
+						exportMesh.name = `${modelName}_LOD${index}`;
+
+						exporter.parse(exportMesh, (gltf) => {
+							resolve({
+								name: `${modelName}_LOD${index}.glb`,
+								data: gltf,
+								level: index,
+								distance: level.distance,
+								triangles: mesh.geometry.index ? mesh.geometry.index.count / 3 : mesh.geometry.getAttribute('position').count / 3
+							});
+						}, (err) => { console.error(err); resolve(null); }, { binary: true });
+					});
+				});
+
+				const results = await Promise.all(promises);
+				results.forEach(r => { if (r) zip.file(r.name, r.data); });
+
+				const manifest = {
+					name: modelName,
+					exportDate: new Date().toISOString(),
+					lodLevels: results.filter(r => r).map(r => ({ file: r.name, level: r.level, distance: r.distance, triangles: Math.floor(r.triangles) }))
+				};
+				zip.file('lod_manifest.json', JSON.stringify(manifest, null, 2));
+
+				const blob = await zip.generateAsync({ type: 'blob' });
+				const url = URL.createObjectURL(blob);
+				const link = document.createElement('a');
+				link.href = url;
+				link.download = `${modelName}_LODs.zip`;
+				link.click();
+				URL.revokeObjectURL(url);
+
+			} catch (error) {
+				console.error('Export failed:', error);
+				alert('Export failed: ' + error.message);
+			}
+
+			exportBtn.disabled = false;
+			exportBtn.classList.remove('loading');
+			exportBtn.innerHTML = '💾 Export ZIP';
+		}
+
+		function updateCurrentLODDisplay() {
+			const valueEl = document.getElementById('currentLodValue');
+			const detailsEl = document.getElementById('currentLodDetails');
+
+			if (!currentLOD) return;
+
+			const lodPos = new THREE.Vector3();
+			currentLOD.getWorldPosition(lodPos);
+			const camPos = new THREE.Vector3();
+			camera.getWorldPosition(camPos);
+			const distance = camPos.distanceTo(lodPos);
+
+			let activeLODIndex = 0;
+			let activeLODTriangles = 0;
+
+			if (previewLevel === 'auto') {
+				for (let i = 0; i < currentLOD.levels.length; i++) {
+					if (currentLOD.levels[i].object.visible) {
+						activeLODIndex = i;
+						const geo = currentLOD.levels[i].object.geometry;
+						if (geo) activeLODTriangles = geo.index ? geo.index.count / 3 : geo.getAttribute('position').count / 3;
+						break;
+					}
+				}
+			} else {
+				activeLODIndex = previewLevel;
+				const geo = currentLOD.levels[previewLevel]?.object?.geometry;
+				if (geo) activeLODTriangles = geo.index ? geo.index.count / 3 : geo.getAttribute('position').count / 3;
+			}
+
+			valueEl.textContent = `LOD ${activeLODIndex}`;
+
+			const threshold = currentLOD.levels[activeLODIndex]?.distance ?? 0;
+			const nextThreshold = currentLOD.levels[activeLODIndex + 1]?.distance ?? '∞';
+
+			detailsEl.innerHTML = `Distance: <strong>${distance.toFixed(1)}</strong> | Triangles: <strong>${Math.floor(activeLODTriangles).toLocaleString()}</strong><br><span style="font-size:10px;color:#484f58;">Range: ${threshold} - ${nextThreshold}</span>`;
+
+			if (lastActiveLOD !== activeLODIndex) {
+				lastActiveLOD = activeLODIndex;
+				document.querySelectorAll('.lod-card').forEach((card, i) => { card.classList.toggle('active', i === activeLODIndex); });
+			}
+		}
+
+		function animate() {
+			controls.update();
+			if (currentLOD && previewLevel === 'auto') currentLOD.update(camera);
+			if (currentLOD) updateCurrentLODDisplay();
+			renderer.render(scene, camera);
+		}
+	</script>
+</body>
+</html>
+

From 3e1763b2e4fdaa74782eda341a22acbf2e497959 Mon Sep 17 00:00:00 2001
From: Frank Yang <frankyang233@gmail.com>
Date: Wed, 26 Nov 2025 13:43:40 -0600
Subject: [PATCH 2/2] fix pr error: DOM text reinterpreted as HTML

---
 tools/lod-generator/index.html | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/tools/lod-generator/index.html b/tools/lod-generator/index.html
index fd9b59bb4e3635..3d0090b6de54af 100644
--- a/tools/lod-generator/index.html
+++ b/tools/lod-generator/index.html
@@ -465,6 +465,15 @@ <h1>🎚️ LOD Generator<span>three.js tool</span></h1>
 
 		init();
 
+		// Escape HTML to prevent XSS
+		function escapeHTML(str) {
+			if (str == null) return '';
+			if (typeof str !== 'string') return String(str);
+			const div = document.createElement('div');
+			div.textContent = str;
+			return div.innerHTML;
+		}
+
 		function init() {
 			renderer = new THREE.WebGLRenderer({ antialias: true });
 			renderer.setPixelRatio(window.devicePixelRatio);
@@ -599,7 +608,7 @@ <h1>🎚️ LOD Generator<span>three.js tool</span></h1>
 			const tris = geo.index ? geo.index.count / 3 : geo.getAttribute('position').count / 3;
 			const verts = geo.getAttribute('position').count;
 
-			modelInfo.innerHTML = `<strong>Name:</strong> ${name}<br><strong>Triangles:</strong> ${Math.floor(tris).toLocaleString()}<br><strong>Vertices:</strong> ${verts.toLocaleString()}`;
+			modelInfo.innerHTML = `<strong>Name:</strong> ${escapeHTML(name)}<br><strong>Triangles:</strong> ${Math.floor(tris).toLocaleString()}<br><strong>Vertices:</strong> ${verts.toLocaleString()}`;
 
 			generateBtn.disabled = false;
 			exportBtn.disabled = true;