super-three 0.184.0 → 0.185.0

package/examples/jsm/generators/city/SkyscraperGenerator.js

@@ -0,0 +1,1357 @@
+import {
+	BoxGeometry,
+	BufferAttribute,
+	BufferGeometry,
+	ExtrudeGeometry,
+	InterpolationSamplingMode,
+	InterpolationSamplingType,
+	LatheGeometry,
+	Matrix3,
+	Matrix4,
+	Mesh,
+	MeshStandardMaterial,
+	Path,
+	PlaneGeometry,
+	ShapeGeometry,
+	Shape,
+	Sphere,
+	Vector2,
+	Vector3
+} from 'three';
+
+import { MeshStandardNodeMaterial } from 'three/webgpu';
+import { attribute, cameraPosition, color, cross, dot, float, floor, Fn, fract, fwidth, hash as ihash, mix, mod, modelWorldMatrixInverse, mx_fractal_noise_float, mx_noise_float, normalLocal, normalView, normalWorldGeometry, positionLocal, positionView, positionWorld, select, smoothstep, step, uint, uv, varying, vec2, vec3, vec4 } from 'three/tsl';
+
+import { mergeGeometries } from '../../utils/BufferGeometryUtils.js';
+
+const _scale = /*@__PURE__*/ new Vector3();
+const _point = /*@__PURE__*/ new Vector3();
+const _normalMatrix = /*@__PURE__*/ new Matrix3();
+const _identity = /*@__PURE__*/ new Matrix4();
+
+// material-zone codes baked per vertex into the merged geometry, so one material can
+// branch on partId and shade every zone
+const PartId = { WALL: 0, PIER: 1, FRAME: 2, ORNAMENT: 3, GLASS: 4, AC: 5 };
+const { WALL, PIER, FRAME, ORNAMENT, GLASS, AC } = PartId;
+
+// fraction of a floor's height taken by the glazed opening; the remainder is
+// the spandrel band. shared by the window module and the spandrels so they tile.
+const WINDOW_HEIGHT_RATIO = 0.62;
+
+// width of the flat window-frame band around the glazing; shared by the frame module
+// and the glass pane so the pane always tucks inside the frame
+const WINDOW_BORDER = 0.1;
+
+// the masonry course module ( brick height × length ). the generator snaps floor and
+// bay dimensions to it, and the material's coursing reads the same values, so the
+// procedural brickwork lines up with the geometry
+const BRICK = { height: 0.3, length: 0.6 };
+
+// merging requires all-indexed or all-non-indexed inputs; extrusions are
+// non-indexed while boxes/planes are indexed, so normalize before merging
+
+function merge( geometries ) {
+
+	return mergeGeometries( geometries.map( ( g ) => g.index ? g.toNonIndexed() : g ) );
+
+}
+
+function nonIndexed( geometry ) {
+
+	return geometry.index ? geometry.toNonIndexed() : geometry;
+
+}
+
+// the unit box is identical for every building's shell boxes — build it once
+const _unitBox = /*@__PURE__*/ nonIndexed( new BoxGeometry( 1, 1, 1 ) );
+
+/**
+ * Bakes a list of instance groups into one non-indexed BufferGeometry. Each group is a
+ * base geometry ( position + normal + uv ), an array of Matrix4 placements and a `partId`
+ * written to a per-vertex attribute. Transforming straight into preallocated typed arrays
+ * avoids mergeGeometries' per-instance allocations; the result is one geometry, ready for
+ * a single draw call and the compute rasterizer.
+ */
+function bakeGroups( groups ) {
+
+	let total = 0;
+	for ( const group of groups ) total += group.geometry.attributes.position.count * group.matrices.length;
+
+	const position = new Float32Array( total * 3 );
+	const normal = new Float32Array( total * 3 );
+	const uv = new Float32Array( total * 2 );
+	const partId = new Float32Array( total );
+	// per-window interior-mapping room ( centre + size ) the glass pane looks into; only
+	// the glass group writes it, every other vertex stays zero. baked per vertex so the
+	// material reads each building's own room sizes without a global uniform.
+	const roomCenter = new Float32Array( total * 3 );
+	const roomSize = new Float32Array( total * 2 );
+
+	let w = 0;
+
+	// the bounding sphere falls out of the AABB gathered while transforming, sparing a
+	// second full pass over the positions ( computeBoundingSphere )
+	let minX = Infinity, minY = Infinity, minZ = Infinity;
+	let maxX = - Infinity, maxY = - Infinity, maxZ = - Infinity;
+
+	for ( const group of groups ) {
+
+		const geometry = group.geometry;
+		const P = geometry.attributes.position.array;
+		const N = geometry.attributes.normal.array;
+		const U = geometry.attributes.uv.array;
+		const count = geometry.attributes.position.count;
+		const id = group.partId;
+		const rooms = group.rooms; // per-instance { center, size }, glass only
+		const rigid = group.rigid === true; // pure rotation ( + translation ): the normal matrix is the rotation itself
+
+		for ( let i = 0; i < group.matrices.length; i ++ ) {
+
+			const room = rooms ? rooms[ i ] : null;
+
+			const matrix = group.matrices[ i ];
+			const e = matrix.elements;
+			const e0 = e[ 0 ], e1 = e[ 1 ], e2 = e[ 2 ], e4 = e[ 4 ], e5 = e[ 5 ], e6 = e[ 6 ], e8 = e[ 8 ], e9 = e[ 9 ], e10 = e[ 10 ], e12 = e[ 12 ], e13 = e[ 13 ], e14 = e[ 14 ];
+
+			// for a rigid frame the inverse-transpose equals the rotation, so its columns
+			// are read straight from the matrix and the per-instance 3×3 inverse is skipped
+			let n0, n1, n2, n3, n4, n5, n6, n7, n8;
+
+			if ( rigid ) {
+
+				n0 = e0; n1 = e1; n2 = e2; n3 = e4; n4 = e5; n5 = e6; n6 = e8; n7 = e9; n8 = e10;
+
+			} else {
+
+				const ne = _normalMatrix.getNormalMatrix( matrix ).elements;
+				n0 = ne[ 0 ]; n1 = ne[ 1 ]; n2 = ne[ 2 ]; n3 = ne[ 3 ]; n4 = ne[ 4 ]; n5 = ne[ 5 ]; n6 = ne[ 6 ]; n7 = ne[ 7 ]; n8 = ne[ 8 ];
+
+			}
+
+			for ( let v = 0; v < count; v ++ ) {
+
+				const v3 = v * 3, w3 = w * 3;
+				const x = P[ v3 ], y = P[ v3 + 1 ], z = P[ v3 + 2 ];
+				const wx = e0 * x + e4 * y + e8 * z + e12;
+				const wy = e1 * x + e5 * y + e9 * z + e13;
+				const wz = e2 * x + e6 * y + e10 * z + e14;
+				position[ w3 ] = wx; position[ w3 + 1 ] = wy; position[ w3 + 2 ] = wz;
+				if ( wx < minX ) minX = wx; if ( wx > maxX ) maxX = wx;
+				if ( wy < minY ) minY = wy; if ( wy > maxY ) maxY = wy;
+				if ( wz < minZ ) minZ = wz; if ( wz > maxZ ) maxZ = wz;
+
+				const nx = N[ v3 ], ny = N[ v3 + 1 ], nz = N[ v3 + 2 ];
+				const tx = n0 * nx + n3 * ny + n6 * nz, ty = n1 * nx + n4 * ny + n7 * nz, tz = n2 * nx + n5 * ny + n8 * nz;
+				const inv = 1 / ( Math.sqrt( tx * tx + ty * ty + tz * tz ) || 1 );
+				normal[ w3 ] = tx * inv; normal[ w3 + 1 ] = ty * inv; normal[ w3 + 2 ] = tz * inv;
+
+				uv[ w * 2 ] = U[ v * 2 ]; uv[ w * 2 + 1 ] = U[ v * 2 + 1 ];
+				partId[ w ] = id;
+
+				if ( room !== null ) {
+
+					roomCenter[ w3 ] = room.center.x; roomCenter[ w3 + 1 ] = room.center.y; roomCenter[ w3 + 2 ] = room.center.z;
+					roomSize[ w * 2 ] = room.size.x; roomSize[ w * 2 + 1 ] = room.size.y;
+
+				}
+
+				w ++;
+
+			}
+
+		}
+
+	}
+
+	const geometry = new BufferGeometry();
+	geometry.setAttribute( 'position', new BufferAttribute( position, 3 ) );
+	geometry.setAttribute( 'normal', new BufferAttribute( normal, 3 ) );
+	geometry.setAttribute( 'uv', new BufferAttribute( uv, 2 ) );
+	geometry.setAttribute( 'partId', new BufferAttribute( partId, 1 ) );
+	geometry.setAttribute( 'roomCenter', new BufferAttribute( roomCenter, 3 ) );
+	geometry.setAttribute( 'roomSize', new BufferAttribute( roomSize, 2 ) );
+
+	geometry.boundingSphere = new Sphere(
+		new Vector3( ( minX + maxX ) / 2, ( minY + maxY ) / 2, ( minZ + maxZ ) / 2 ),
+		Math.hypot( maxX - minX, maxY - minY, maxZ - minZ ) / 2
+	);
+
+	return geometry;
+
+}
+
+// deterministic PRNG (mulberry32) so a given seed always yields the same tower
+
+function createRandom( seed ) {
+
+	let s = ( seed >>> 0 ) || 1;
+
+	return function () {
+
+		s = ( s + 0x6D2B79F5 ) | 0;
+		let t = Math.imul( s ^ ( s >>> 15 ), 1 | s );
+		t = ( t + Math.imul( t ^ ( t >>> 7 ), 61 | t ) ) ^ t;
+		return ( ( t ^ ( t >>> 14 ) ) >>> 0 ) / 4294967296;
+
+	};
+
+}
+
+// a stable per-floor hash ( from the floor index and the face origin ) used to pick the
+// interior-mapping room module per floor without allocating a closure each floor
+function floorHash( f, frame, k ) {
+
+	const s = Math.sin( f * 12.9898 + frame.origin.x * 0.07 + frame.origin.z * 0.131 + k ) * 43758.5453;
+	return s - Math.floor( s );
+
+}
+
+// the seed-driven "style" of a tower: footprint proportions, tier split and the
+// shaping of piers and base arches. these sit between the fixed defaults and the
+// caller's parameters, so any parameter passed in still overrides its seeded value.
+
+function randomStyle( random ) {
+
+	const base = 0.10 + random() * 0.07;
+	const crown = 0.08 + random() * 0.08;
+
+	return {
+		footprint: { width: 26 + random() * 18, depth: 20 + random() * 14 },
+		tierFractions: { base, crown },
+		pierWidth: 0.4 + random() * 0.4,
+		pierDepth: 0.3 + random() * 0.3,
+		windowReveal: 0.12 + random() * 0.1,
+		stringCourseHeight: 0.5 + random() * 0.5,
+		archBayWidthRatio: Math.round( 1.5 + random() * 1.5 ),
+		archRise: 0.4 + random() * 0.5
+	};
+
+}
+
+/**
+ * Generates intricate, tripartite "Beaux-Arts / Neo-Gothic" terracotta
+ * skyscrapers from a small set of parameters.
+ *
+ * The mass is read as a footprint polygon (a rectangle with one chamfered
+ * corner) split into vertical faces, each split into three tiers — a tall
+ * arcaded base, a repeating shaft and an ornate crown — then into floors and
+ * bays. A handful of authored pieces (a pier, a window, a cornice profile, a
+ * gothic arch) are instanced across the whole tower, then baked — together with
+ * the bespoke base arcade — into a single non-indexed BufferGeometry tagged with
+ * a per-vertex `partId` ({@link PartId}) so one material can shade every zone.
+ *
+ * The generator is material agnostic — it only produces geometry. Pass a single
+ * material (e.g. a TSL node material that branches on `partId`) to dress it.
+ *
+ * ```js
+ * const generator = new SkyscraperGenerator( { seed: 35, totalHeight: 140 }, material );
+ * scene.add( generator.build() ); // a single Mesh
+ * ```
+ */
+class SkyscraperGenerator {
+
+	constructor( parameters = {}, material = null ) {
+
+		this.parameters = parameters; // caller overrides; defaults + seed fill the rest at build time
+		this.material = material; // a single material; the look is driven by the baked `partId` attribute
+
+		this.mesh = null;
+
+	}
+
+	setParameters( parameters ) {
+
+		Object.assign( this.parameters, parameters );
+
+		return this;
+
+	}
+
+	build() {
+
+		const random = createRandom( this.parameters.seed ?? SkyscraperGenerator.defaults.seed );
+
+		// precedence: fixed defaults < seed-driven style < caller parameters
+
+		const p = Object.assign( {}, SkyscraperGenerator.defaults, randomStyle( random ), this.parameters );
+
+		// snap the masonry-driving dimensions to the brick module so the procedural
+		// brickwork ( courses up local Y, columns along each face ) lines up with the
+		// geometry: a whole number of courses per floor and bricks per bay
+		const vModule = BRICK.height * 2; // a course pair, so floor / window halves still land on a joint
+		p.floorHeight = Math.max( vModule * 3, Math.round( p.floorHeight / vModule ) * vModule );
+		p.windowHeight = Math.round( p.floorHeight * WINDOW_HEIGHT_RATIO / vModule ) * vModule;
+		p.bayWidth = Math.max( BRICK.length * 3, Math.round( p.bayWidth / BRICK.length ) * BRICK.length );
+		p.pierWidth = Math.max( BRICK.length, Math.round( p.pierWidth / BRICK.length ) * BRICK.length );
+
+		// vertical layout: base / shaft / crown as whole floor counts, so every floor
+		// line sits on a course ( the requested total height is rounded to suit )
+		const floors = Math.max( 3, Math.round( p.totalHeight / p.floorHeight ) );
+		const baseFloors = Math.max( 1, Math.round( floors * p.tierFractions.base ) );
+		const crownFloors = Math.max( 1, Math.round( floors * p.tierFractions.crown ) );
+		const shaftFloors = Math.max( 1, floors - baseFloors - crownFloors );
+
+		const baseHeight = baseFloors * p.floorHeight;
+		const crownHeight = crownFloors * p.floorHeight;
+		const shaftHeight = shaftFloors * p.floorHeight;
+		p.totalHeight = baseHeight + shaftHeight + crownHeight;
+
+		const baseTop = baseHeight;
+		const shaftTop = baseHeight + shaftHeight;
+
+		// one accumulator per kind of part, mostly instance matrices. kept separate so the
+		// bake below can order them by draw order ( which controls overdraw ), not build order.
+
+		const windows = [];
+		const glass = [];
+		const glassRooms = []; // per-glass interior-mapping room ( centre + size ), aligned with `glass`
+		const backWalls = []; // the thin wall closing the volume behind the glass
+		const bands = []; // spandrel bands, one at each floor line
+		const piers = new Map(); // pier height -> matrices, so each tier's continuous piers share one geometry
+		const trim = []; // cornices and parapets ( axis-aligned unit boxes )
+		const acUnits = []; // window air-conditioner boxes on a random subset of shaft windows
+		const finials = []; // pinnacles along the crown
+		const extras = []; // bespoke geometry: the base arcade and the setback / roof slabs
+
+		const addPier = ( frame, u, vBottom, height ) => {
+
+			const key = Math.round( height * 1000 ); // bucket equal pier heights ( a number key, no string )
+			if ( piers.has( key ) === false ) piers.set( key, [] );
+			piers.get( key ).push( frame.matrix( u, vBottom, 0 ) );
+
+		};
+
+		// footprints: full mass, and the inset crown after the setback
+
+		const footprint = buildFootprint( p.footprint.width, p.footprint.depth, p.chamferWidth, p.chamferCornerX, p.chamferCornerZ );
+		const faces = buildFaces( footprint );
+
+		const inset = p.setbackDepth * p.bayWidth;
+		const crownFootprint = buildFootprint(
+			Math.max( p.bayWidth * 2, p.footprint.width - inset * 2 ),
+			Math.max( p.bayWidth * 2, p.footprint.depth - inset * 2 ),
+			Math.max( 0, p.chamferWidth - inset ),
+			p.chamferCornerX,
+			p.chamferCornerZ
+		);
+		const crownFaces = buildFaces( crownFootprint );
+
+		// --- generate the parts -----------------------------------------------
+
+		const crownCornice = p.stringCourseHeight * 1.6; // the crown's heavy cap; its piers stop below it
+
+		// shaft and crown are the same facade over different faces, spans and pier heights
+		const tiers = [
+			{ faces, bottom: baseTop, height: shaftHeight, pierHeight: shaftHeight, ac: acUnits },
+			{ faces: crownFaces, bottom: shaftTop, height: crownHeight, pierHeight: crownHeight - crownCornice, ac: null }
+		];
+
+		for ( const t of tiers ) {
+
+			for ( const frame of t.faces ) {
+
+				addWindows( frame, windows, glass, glassRooms, t.ac, t.bottom, t.height, p );
+				addWall( backWalls, frame, t.bottom, t.bottom + t.height, 0.8, - 0.6 );
+				addSpandrelBands( bands, frame, t.bottom, t.height, p );
+				addPiers( frame, t.bottom, t.pierHeight, p, addPier );
+
+			}
+
+		}
+
+		// the base: a gothic arcade, capped by a string course
+		for ( const frame of faces ) {
+
+			addArcade( extras, frame, baseHeight, p );
+			addCornice( trim, frame, baseTop - p.stringCourseHeight, p.stringCourseHeight, 0.5 );
+
+		}
+
+		// periodic string courses banding the shaft
+		if ( p.stringCourseEvery > 0 ) {
+
+			for ( let f = p.stringCourseEvery; f < shaftFloors; f += p.stringCourseEvery ) {
+
+				for ( const frame of faces ) addCornice( trim, frame, baseTop + f * p.floorHeight - p.stringCourseHeight * 0.5, p.stringCourseHeight, 0.3 );
+
+			}
+
+		}
+
+		// the crown's heavy cornice, its parapet and the finials along the top
+		for ( const frame of crownFaces ) {
+
+			addCornice( trim, frame, p.totalHeight - crownCornice, crownCornice, 0.9 );
+			addParapet( trim, frame, p.totalHeight, p );
+			addFinials( frame, finials, shaftTop, crownHeight, p );
+
+		}
+
+		// thin slabs capping the setback ledge and the roof
+		extras.push( slab( footprint, shaftTop, 0.6 ) );
+		extras.push( slab( crownFootprint, p.totalHeight, 0.6 ) );
+
+		// --- bake every part into one geometry ---------------------------------
+
+		// one mesh = one draw the renderer can't sort, so bake order is draw order: the
+		// facade front-to-back, the backing wall last so its hidden fragments never shade.
+
+		const groups = [
+			{ geometry: buildWindowGeometry( p ), matrices: windows, partId: FRAME, rigid: true },
+			{ geometry: nonIndexed( buildGlassGeometry( p ) ), matrices: glass, partId: GLASS, rooms: glassRooms, rigid: true },
+			{ geometry: _unitBox, matrices: bands, partId: WALL }
+		];
+
+		for ( const [ key, matrices ] of piers ) groups.push( { geometry: buildPierGeometry( p, key / 1000 ), matrices, partId: PIER, rigid: true } );
+
+		groups.push( { geometry: _unitBox, matrices: trim, partId: WALL } ); // cornices, parapets
+		groups.push( { geometry: _unitBox, matrices: acUnits, partId: AC } );
+		groups.push( { geometry: nonIndexed( buildFinialGeometry( p ) ), matrices: finials, partId: ORNAMENT, rigid: true } );
+
+		for ( const geometry of extras ) groups.push( { geometry: nonIndexed( geometry ), matrices: [ _identity ], partId: WALL, rigid: true } ); // base arcade + slabs, in building-local space
+
+		groups.push( { geometry: _unitBox, matrices: backWalls, partId: WALL } ); // last — hidden behind the facade
+
+		const geometry = bakeGroups( groups );
+
+		const mesh = new Mesh( geometry, this.material || new MeshStandardMaterial( { color: 0xddccaa, roughness: 0.9 } ) );
+		mesh.name = 'Skyscraper';
+
+		this.dispose();
+		this.mesh = mesh;
+
+		return mesh;
+
+	}
+
+	rebuild() {
+
+		return this.build();
+
+	}
+
+	dispose() {
+
+		if ( this.mesh === null ) return;
+
+		this.mesh.geometry.dispose();
+		this.mesh = null;
+
+	}
+
+}
+
+// fixed baseline. the remaining parameters (footprint, tierFractions, pierWidth,
+// pierDepth, windowReveal, stringCourseHeight, archBayWidthRatio, archRise) are
+// derived from the seed by randomStyle() unless the caller provides them.
+SkyscraperGenerator.defaults = {
+	seed: 35,
+	totalHeight: 140,
+	floorHeight: 4,
+	bayWidth: 2.6,
+	stringCourseEvery: 6,
+	chamferWidth: 4,
+	chamferCornerX: 1,
+	chamferCornerZ: 1,
+	setbackDepth: 1.5,
+	acChance: 0.12
+};
+
+// --- footprint & faces ---------------------------------------------------
+
+/**
+ * A rectangle (centred at the origin in the XZ plane) with one corner cut at
+ * 45 degrees, returned as an ordered list of `Vector2( x, z )`. `cornerX` /
+ * `cornerZ` ( each ±1 ) pick which corner is cut, so the chamfer can be aimed
+ * outward to a block corner.
+ */
+function buildFootprint( width, depth, chamfer, cornerX = 1, cornerZ = 1 ) {
+
+	const hw = width / 2;
+	const hd = depth / 2;
+	const c = Math.min( chamfer, hw, hd );
+
+	// the four corners, counter-clockwise
+	const corners = [
+		new Vector2( hw, hd ),
+		new Vector2( - hw, hd ),
+		new Vector2( - hw, - hd ),
+		new Vector2( hw, - hd )
+	];
+
+	const points = [];
+
+	for ( let i = 0; i < corners.length; i ++ ) {
+
+		const corner = corners[ i ];
+
+		// cut the requested corner: replace it with two points pulled back along
+		// each adjacent edge, leaving a 45° face that points out to that corner
+		if ( c > 0 && Math.sign( corner.x ) === cornerX && Math.sign( corner.y ) === cornerZ ) {
+
+			const prev = corners[ ( i + 3 ) % 4 ];
+			const next = corners[ ( i + 1 ) % 4 ];
+			points.push( corner.clone().lerp( prev, c / corner.distanceTo( prev ) ) );
+			points.push( corner.clone().lerp( next, c / corner.distanceTo( next ) ) );
+
+		} else {
+
+			points.push( corner.clone() );
+
+		}
+
+	}
+
+	return points;
+
+}
+
+/**
+ * Builds a face frame per footprint edge. Each frame is an orthonormal basis
+ * ( u along the edge, v up, n outward ) plus an origin and length, so all
+ * facade layout can happen in flat ( u, v ) space and bake to world with one
+ * matrix — the same authored piece then instances onto every face, including
+ * the diagonal chamfer.
+ */
+function buildFaces( points ) {
+
+	const faces = [];
+	const up = new Vector3( 0, 1, 0 );
+
+	for ( let i = 0; i < points.length; i ++ ) {
+
+		const a = points[ i ];
+		const b = points[ ( i + 1 ) % points.length ];
+
+		// outward normal: perpendicular to the edge, pointing away from the
+		// origin (the footprint is centred there)
+
+		const n = new Vector3( b.y - a.y, 0, - ( b.x - a.x ) ).normalize();
+		const mid = new Vector3( ( a.x + b.x ) / 2, 0, ( a.y + b.y ) / 2 );
+		if ( n.dot( mid ) < 0 ) n.negate();
+
+		// right-handed basis: u = v × n, so makeBasis( u, v, n ) is a pure rotation
+
+		const u = new Vector3().crossVectors( up, n ).normalize();
+
+		const pa = new Vector3( a.x, 0, a.y );
+		const pb = new Vector3( b.x, 0, b.y );
+		const length = pa.distanceTo( pb );
+
+		// the edge end that u points away from becomes the origin
+
+		const origin = pb.clone().sub( pa ).dot( u ) > 0 ? pa : pb;
+
+		faces.push( new FaceFrame( origin, u, up.clone(), n, length ) );
+
+	}
+
+	return faces;
+
+}
+
+/** A face's local ( u along edge, v up, n outward ) frame in world space. */
+class FaceFrame {
+
+	constructor( origin, u, v, n, length ) {
+
+		this.origin = origin;
+		this.u = u;
+		this.v = v;
+		this.n = n;
+		this.length = length;
+
+	}
+
+	point( u, v, w, target = new Vector3() ) {
+
+		return target
+			.copy( this.origin )
+			.addScaledVector( this.u, u )
+			.addScaledVector( this.v, v )
+			.addScaledVector( this.n, w );
+
+	}
+
+	/** Places a piece authored in the canonical local frame ( x across, y up, z outward ). */
+	matrix( u, v, w ) {
+
+		return new Matrix4()
+			.makeBasis( this.u, this.v, this.n )
+			.setPosition( this.point( u, v, w, _point ) );
+
+	}
+
+	/** How many bays of `bayWidth` fit, with the remainder split into end margins. */
+	bays( bayWidth ) {
+
+		const count = Math.max( 1, Math.floor( this.length / bayWidth ) );
+		const margin = ( this.length - count * bayWidth ) / 2;
+
+		return { count, margin, width: bayWidth };
+
+	}
+
+}
+
+// --- shell pieces --------------------------------------------------------
+
+// a Matrix4 mapping the shared unit box ( 1×1×1, centred ) onto a face-aligned
+// box of the given size, centred at the given face-local point. these matrices
+// are what the shell InstancedMesh is built from.
+function boxMatrix( frame, u, v, w, sizeU, sizeV, sizeN ) {
+
+	return new Matrix4()
+		.makeBasis( frame.u, frame.v, frame.n )
+		.scale( _scale.set( sizeU, sizeV, sizeN ) )
+		.setPosition( frame.point( u, v, w, _point ) );
+
+}
+
+function addWall( target, frame, vBottom, vTop, thickness = 0.8, front = 0 ) {
+
+	const h = vTop - vBottom;
+	target.push( boxMatrix( frame, frame.length / 2, vBottom + h / 2, front - thickness / 2, frame.length + thickness * 2, h, thickness ) );
+
+}
+
+/**
+ * Horizontal terracotta bands at every floor line. Together with the projecting
+ * piers they form the facade grid; the gaps between them are the window
+ * openings, with glass set behind.
+ */
+function addSpandrelBands( target, frame, vBottom, height, p ) {
+
+	const floors = Math.max( 1, Math.round( height / p.floorHeight ) );
+	const fh = height / floors;
+	const bandHeight = p.floorHeight - p.windowHeight; // whole courses: floor minus the glazed opening
+
+	// pull the ends in by the band depth so a band doesn't poke its end-cap
+	// into the plane of the perpendicular face at the corners ( overdraw )
+	const bandLength = Math.max( 0.2, frame.length - 0.6 );
+
+	for ( let f = 0; f <= floors; f ++ ) {
+
+		// front flush at w = 0, meeting the backing wall behind
+		target.push( boxMatrix( frame, frame.length / 2, vBottom + f * fh, - 0.3, bandLength, bandHeight, 0.6 ) );
+
+	}
+
+}
+
+/**
+ * A thin horizontal cap over a footprint's bounding box at height `y`. Its
+ * sides are pulled in behind the facade plane ( into the backing-wall shell )
+ * so they never sit coplanar with the walls, spandrels or piers and z-fight.
+ */
+function slab( footprint, y, thickness ) {
+
+	// a thin cap following the footprint OUTLINE ( so the chamfered corner is cut, not
+	// left overhanging as a rectangular box ), inset a little so its edge tucks just
+	// behind the facade and the wall top reads as a lip around it
+
+	const inset = 0.8;
+	let cx = 0, cz = 0;
+	for ( const p of footprint ) {
+
+		cx += p.x; cz += p.y;
+
+	}
+
+	cx /= footprint.length; cz /= footprint.length;
+
+	// consistent ( CCW ) winding so the extrude caps face up / down correctly
+	let area = 0;
+	for ( let i = 0; i < footprint.length; i ++ ) {
+
+		const a = footprint[ i ], b = footprint[ ( i + 1 ) % footprint.length ];
+		area += a.x * b.y - b.x * a.y;
+
+	}
+
+	const pts = area < 0 ? footprint.slice().reverse() : footprint;
+
+	const shape = new Shape();
+	pts.forEach( ( p, i ) => {
+
+		const dx = cx - p.x, dz = cz - p.y;
+		const d = Math.hypot( dx, dz ) || 1;
+		const x = p.x + dx / d * inset;
+		const z = p.y + dz / d * inset;
+		if ( i === 0 ) shape.moveTo( x, z ); else shape.lineTo( x, z );
+
+	} );
+
+	// extrude the XZ outline downward by the thickness, the top dropped just below height y:
+	// the inset cap would otherwise sit coplanar with the surrounding wall top faces and
+	// z-fight, and the parapet / spandrel bands around the edge hide the shallow recess
+	const drop = 0.2;
+	const geometry = new ExtrudeGeometry( shape, { depth: thickness, bevelEnabled: false } );
+	geometry.rotateX( Math.PI / 2 );
+	geometry.translate( 0, y - drop, 0 );
+	return geometry;
+
+}
+
+/** A two-step projecting cornice / string-course band wrapping a face. */
+function addCornice( target, frame, vBottom, height, depth ) {
+
+	target.push( boxMatrix( frame, frame.length / 2, vBottom + height * 0.275, depth / 2, frame.length, height * 0.55, depth ) );
+	target.push( boxMatrix( frame, frame.length / 2, vBottom + height * 0.775, depth * 0.85, frame.length, height * 0.45, depth * 1.7 ) );
+
+}
+
+/** A low parapet wall capping the crown. */
+function addParapet( target, frame, vTop, p ) {
+
+	const height = 1.4;
+	target.push( boxMatrix( frame, frame.length / 2, vTop + height / 2, p.pierDepth * 0.4, frame.length, height, p.pierDepth * 0.8 ) );
+
+}
+
+/**
+ * The base storey: a wall pierced by tall pointed-arch openings, extruded with
+ * thickness so the openings read as deep recesses.
+ */
+function addArcade( target, frame, height, p ) {
+
+	const archWidth = p.bayWidth * p.archBayWidthRatio;
+	const { count, margin } = frame.bays( archWidth );
+
+	const sill = height * 0.04;
+	const spring = height * 0.55;
+	const apex = Math.min( height * 0.96, spring + ( archWidth / 2 ) * ( 0.8 + p.archRise ) );
+
+	const shape = new Shape();
+	shape.moveTo( 0, 0 );
+	shape.lineTo( frame.length, 0 );
+	shape.lineTo( frame.length, height );
+	shape.lineTo( 0, height );
+	shape.lineTo( 0, 0 );
+
+	for ( let i = 0; i < count; i ++ ) {
+
+		const cx = margin + ( i + 0.5 ) * archWidth;
+		const hw = archWidth * 0.34;
+
+		const hole = new Path();
+		hole.moveTo( cx - hw, sill );
+		hole.lineTo( cx - hw, spring );
+		hole.quadraticCurveTo( cx - hw, apex, cx, apex );
+		hole.quadraticCurveTo( cx + hw, apex, cx + hw, spring );
+		hole.lineTo( cx + hw, sill );
+		hole.lineTo( cx - hw, sill );
+		shape.holes.push( hole );
+
+	}
+
+	const thickness = 1.1;
+	const geometry = new ExtrudeGeometry( shape, { depth: thickness, bevelEnabled: false, curveSegments: 8 } );
+	geometry.translate( 0, 0, - thickness );
+	geometry.applyMatrix4( frame.matrix( 0, 0, 0 ) );
+
+	target.push( geometry );
+
+	// a dark plane set behind the openings so the recesses read
+
+	const back = new PlaneGeometry( frame.length, height );
+	back.applyMatrix4( frame.matrix( frame.length / 2, height / 2, - thickness - 0.4 ) );
+	target.push( back );
+
+}
+
+// --- repeating field -----------------------------------------------------
+
+function addPiers( frame, vBottom, height, p, addPier ) {
+
+	const { count, margin, width } = frame.bays( p.bayWidth );
+
+	// a pier on every bay edge except the far end: that corner is shared with
+	// the next face, which places its own pier there, so emitting both would
+	// stack two piers at each corner
+
+	for ( let i = 0; i < count; i ++ ) {
+
+		addPier( frame, margin + i * width, vBottom, height );
+
+	}
+
+}
+
+function addWindows( frame, windows, glass, glassRooms, acUnits, vBottom, height, p ) {
+
+	const { count, margin, width } = frame.bays( p.bayWidth );
+	const floors = Math.max( 1, Math.round( height / p.floorHeight ) );
+	const fh = height / floors;
+
+	// a window AC unit sitting on the sill, protruding from the facade. about half the window
+	// width, capped at a real unit's size ( ~0.66 m ) and kept wider than tall, sticking out
+	// about half its width
+	const acW = Math.min( ( p.bayWidth - p.pierWidth ) * 0.55, 0.66 );
+	const acH = acW * 0.6;
+	const acD = acW * 0.5;
+	const acV = - p.windowHeight / 2 + acH / 2 + WINDOW_BORDER; // bottom rests on the sill ( the top of the window's bottom frame rail )
+
+	// a real ~0.66 m unit looks lost in a wide opening, so only fit ACs where it still spans a
+	// fair share of the window — in practice, the narrower ( older-style ) windows
+	const acFits = acW >= ( width - p.pierWidth ) * 0.34;
+
+	for ( let f = 0; f < floors; f ++ ) {
+
+		const cy = vBottom + ( f + 0.5 ) * fh;
+
+		// the interior-mapping room module: one floor tall, a run of two or three bays
+		// wide, chosen per floor so neighbouring windows share an interior. the choice
+		// is deterministic ( seeded by the floor and the face ) so it is stable, and the
+		// run is recorded per window so the material can ray-march the right box.
+		const roomBays = floorHash( f, frame, 0 ) > 0.5 ? 3 : 2;
+		const roomPhase = Math.floor( floorHash( f, frame, 1 ) * roomBays );
+
+		for ( let b = 0; b < count; b ++ ) {
+
+			const cx = margin + ( b + 0.5 ) * width;
+
+			windows.push( frame.matrix( cx, cy, 0 ) );
+			glass.push( frame.matrix( cx, cy, - p.windowReveal ) );
+
+			// the run of bays this window's room spans, clamped at the face ends, recorded
+			// as the room's centre on the facade and its width × height in metres
+			const room = Math.floor( ( b + roomPhase ) / roomBays );
+			const bStart = Math.max( 0, room * roomBays - roomPhase );
+			const bEnd = Math.min( count, ( room + 1 ) * roomBays - roomPhase );
+			const span = bEnd - bStart;
+			glassRooms.push( { center: frame.point( margin + ( bStart + span / 2 ) * width, cy, - p.windowReveal ), size: new Vector2( span * width, fh - 1 ) } ); // centred on the glass plane, so the interior is anchored to the pane it is drawn on
+
+			if ( acUnits && acFits ) {
+
+				// deterministic per-window hash ( varies per face via the frame origin )
+				const r = Math.sin( f * 41.3 + b * 12.7 + frame.origin.x * 0.13 + frame.origin.z * 0.31 ) * 43758.5453;
+				// the back tucks into the window reveal ( just in front of the glass ) so the unit sits
+				// in the opening instead of floating on the facade
+				const acW0 = acD / 2 - p.windowReveal + 0.04;
+				if ( r - Math.floor( r ) < p.acChance ) acUnits.push( boxMatrix( frame, cx, cy + acV, acW0, acW, acH, acD ) );
+
+			}
+
+		}
+
+	}
+
+}
+
+function addFinials( frame, finials, vBottom, height, p ) {
+
+	const { count, margin, width } = frame.bays( p.bayWidth );
+	const top = vBottom + height;
+
+	// skip the far-end bay edge: it is the shared corner the next face also
+	// caps, so emitting both would stack two finials at each corner
+
+	for ( let i = 0; i < count; i ++ ) {
+
+		finials.push( new Matrix4().setPosition( frame.point( margin + i * width, top, p.pierDepth * 0.5, _point ) ) );
+
+	}
+
+}
+
+// --- authored modules ----------------------------------------------------
+
+function buildPierGeometry( p, height ) {
+
+	// a wide pier with a slimmer pilaster raised on its face, giving the
+	// continuous vertical rib a stepped, terracotta profile
+
+	const back = new BoxGeometry( p.pierWidth, height, p.pierDepth * 0.6 );
+	back.translate( 0, height / 2, p.pierDepth * 0.3 );
+
+	// the pilaster stops just short of the pier top so that where a pier is left
+	// exposed ( at a setback ) the cap reads as one clean block rather than the
+	// back box and the pilaster stacked into a T
+	const pilasterHeight = Math.max( 1, height - 0.6 );
+	const front = new BoxGeometry( p.pierWidth * 0.55, pilasterHeight, p.pierDepth * 0.45 );
+	front.translate( 0, pilasterHeight / 2, p.pierDepth * 0.6 + p.pierDepth * 0.225 );
+
+	return merge( [ back, front ] );
+
+}
+
+function buildWindowGeometry( p ) {
+
+	// the flat frame face ( a rectangle with the glazing hole ), the four reveal walls
+	// of the opening and the glazing bars, merged into one instanced module. a full
+	// extrusion would also emit a hidden back cap and outer side walls; windows are by
+	// far the heaviest part of a building, so those are skipped.
+
+	const w = p.bayWidth - p.pierWidth;
+	const h = p.windowHeight;
+	const border = WINDOW_BORDER;
+	const depth = p.windowReveal; // reveal walls run all the way back to the glass ( placed at -windowReveal ), so no gap opens between them and the pane
+	const iw = w / 2 - border;
+	const ih = h / 2 - border;
+
+	const shape = new Shape();
+	shape.moveTo( - w / 2, - h / 2 );
+	shape.lineTo( w / 2, - h / 2 );
+	shape.lineTo( w / 2, h / 2 );
+	shape.lineTo( - w / 2, h / 2 );
+	shape.lineTo( - w / 2, - h / 2 );
+
+	const hole = new Path();
+	hole.moveTo( - iw, - ih );
+	hole.lineTo( - iw, ih );
+	hole.lineTo( iw, ih );
+	hole.lineTo( iw, - ih );
+	hole.lineTo( - iw, - ih );
+	shape.holes.push( hole );
+
+	const front = new ShapeGeometry( shape ); // visible frame face, flush with the facade
+
+	// the four reveal walls of the opening, set back to the glazing
+	const wall = ( x, y, rx, ry, sw, sh ) => {
+
+		const pl = new PlaneGeometry( sw, sh );
+		pl.rotateX( rx );
+		pl.rotateY( ry );
+		pl.translate( x, y, - depth / 2 );
+		return pl;
+
+	};
+
+	const left = wall( - iw, 0, 0, Math.PI / 2, depth, ih * 2 );
+	const right = wall( iw, 0, 0, - Math.PI / 2, depth, ih * 2 );
+	const sill = wall( 0, - ih, - Math.PI / 2, 0, iw * 2, depth );
+	const head = wall( 0, ih, Math.PI / 2, 0, iw * 2, depth );
+
+	// a single horizontal glazing bar ( transom ), flat, just in front of the glass —
+	// a thin box would triple the window's triangle count for sub-pixel thickness
+	const transom = new PlaneGeometry( iw * 2, 0.05 );
+	transom.translate( 0, h * 0.04, - depth + 0.02 ); // meeting rail, just above centre
+
+	return merge( [ front, left, right, sill, head, transom ] );
+
+}
+
+function buildGlassGeometry( p ) {
+
+	const w = p.bayWidth - p.pierWidth - WINDOW_BORDER * 2;
+	const h = p.windowHeight - WINDOW_BORDER * 2;
+
+	return new PlaneGeometry( w, h );
+
+}
+
+function buildFinialGeometry( p ) {
+
+	// a tapering pinnacle revolved around its axis
+
+	const s = p.pierWidth;
+	const profile = [
+		new Vector2( 0.0, 0 ),
+		new Vector2( s * 0.9, 0 ),
+		new Vector2( s * 0.9, s * 0.4 ),
+		new Vector2( s * 0.55, s * 1.0 ),
+		new Vector2( 0.0, s * 3.2 )
+	];
+
+	return new LatheGeometry( profile, 8 ); // round enough to read as a smooth pinnacle, still light
+
+}
+
+// --- material ------------------------------------------------------------
+
+// derivative-based bump for a procedural, world-space height field. the built-in bumpMap
+// offsets the UV to read its height, so it returns a zero gradient for a height keyed off
+// world position; this feeds the hardware screen-space derivatives of the height into
+// Mikkelsen's surface-gradient method so the relief actually perturbs the normal.
+function bumpNormal( height ) {
+
+	const dpdx = positionView.dFdx();
+	const dpdy = positionView.dFdy();
+	const r1 = dpdy.cross( normalView );
+	const r2 = normalView.cross( dpdx );
+	const det = dpdx.dot( r1 );
+	const grad = det.sign().mul( height.dFdx().mul( r1 ).add( height.dFdy().mul( r2 ) ) );
+
+	return det.abs().mul( normalView ).sub( grad ).normalize();
+
+}
+
+// interior mapping: fakes a furnished room behind each glass pane in the fragment
+// shader — no geometry, no texture. every pane carries the room it looks into ( centre +
+// size, baked per window by addWindows ), so neighbouring panes share one interior. the
+// view ray is cast into that box and the walls, floor, ceiling and a few furniture pieces
+// it meets are shaded procedurally, keyed off a per-room hash. returns vec4( colour, lit ).
+const interior = /*@__PURE__*/ Fn( () => {
+
+	// flat so floor() below can't split one pane across two cell ids ( centre is per-room )
+	const roomCenter = varying( attribute( 'roomCenter', 'vec3' ) ).setInterpolation( InterpolationSamplingType.FLAT, InterpolationSamplingMode.EITHER );
+	const roomSize = attribute( 'roomSize', 'vec2' );
+
+	// a per-face frame from the geometry normal ( holds on every facade, including the
+	// 45° chamfer ): u runs across the face, v is up, n points outward
+	const n = normalLocal;
+	const up = vec3( 0, 1, 0 );
+	const uAxis = cross( up, n ).normalize();
+
+	// this pixel and the view ray, in the room's ( across, up, depth ) frame; depth
+	// runs into the wall, so the ray's depth component is positive
+	const d = positionLocal.sub( roomCenter );
+	const camLocal = modelWorldMatrixInverse.mul( vec4( cameraPosition, 1 ) ).xyz;
+	const rayLocal = positionLocal.sub( camLocal ).normalize();
+	const origin = vec3( dot( d, uAxis ), d.y, 0 );
+	const dir = vec3( dot( rayLocal, uAxis ), rayLocal.y, dot( rayLocal, n ).negate() );
+
+	// the room box: the pane-wide × ceiling-height front rectangle ( centred on the pane ),
+	// set back behind the glass and run a little deeper than it is tall. shade the far
+	// side the ray exits ( slab method: nearest of the three far-plane crossings;
+	// dividing by a near-zero direction gives ±inf, which min() harmlessly drops ).
+	const setback = float( 0.1 ); // the room starts just behind the glass, so it sits flush in the frame opening
+	const boxMax = vec3( roomSize.x.mul( 0.5 ), roomSize.y.mul( 0.5 ), setback.add( roomSize.y.mul( 1.55 ) ) );
+	const boxMin = vec3( boxMax.x.negate(), boxMax.y.negate(), setback );
+	const tFar = boxMin.sub( origin ).div( dir ).max( boxMax.sub( origin ).div( dir ) );
+	const t = tFar.x.min( tFar.y ).min( tFar.z );
+	const hit = origin.add( dir.mul( t ) );
+	const q = hit.sub( boxMin ).div( boxMax.sub( boxMin ) ); // 0..1 inside the room
+
+	const onBack = q.z.greaterThan( 0.998 );
+	const onCeil = q.y.greaterThan( 0.998 );
+	const onFloor = q.y.lessThan( 0.002 );
+
+	// per-room key for a portable integer hash — fract( sin() ) isn't bit-exact across drivers
+	const cell = floor( roomCenter.mul( 2.0 ) ); // + offset before the u32 cast keeps it non-negative
+	const ckey = uint( cell.x.add( 1 << 21 ) ).mul( uint( 73856093 ) )
+		.bitXor( uint( cell.y.add( 1 << 21 ) ).mul( uint( 19349663 ) ) )
+		.bitXor( uint( cell.z.add( 1 << 21 ) ).mul( uint( 83492791 ) ) ).toVar();
+	const hash = ( kx, ky, kz ) => ihash( ckey.add( uint( Math.round( ( kx + ky * 7 + kz * 13 ) * 100 ) ) ) );
+	const seed = hash( 12.9898, 78.233, 37.719 );
+	const seed2 = hash( 39.346, 11.135, 83.155 );
+	const lit = step( 0.8, hash( 63.21, 9.17, 51.43 ) ); // ~20% of rooms have the lights on; the rest sit dark
+
+	// each room's bulb colour. most run warm, drifting from a dim amber ( ~2400K ) up to a
+	// warm white ( ~3200K ); a minority run cool, from a fluorescent / LED daylight to a TV's
+	// bluer glow — so a lit facade reads as a spread of bulb temperatures, not one flat tint
+	const warmLight = mix( color( 0xffb845 ), color( 0xffe49c ), hash( 27.1, 4.9, 61.7 ) );
+	const coolLight = mix( color( 0xdfe8ff ), color( 0x9fb6ff ), hash( 8.3, 51.2, 17.6 ) );
+	const lightCol = select( hash( 44.7, 19.3, 6.1 ).greaterThan( 0.88 ), coolLight, warmLight ); // ~12% of lit rooms run cool
+
+	// depth falloff ( darker toward the back ), and a panel mask on a face given its
+	// two 0..1 coordinates — used for the flat fittings below
+	const depth = roomSize.y.mul( 1.55 );
+	const falloffAt = ( z ) => mix( float( 1.0 ), float( 0.42 ), z.sub( setback ).div( depth ).clamp( 0, 1 ) );
+	const rect = ( ax, ay, cx, cy, hw, hh ) => smoothstep( hw + 0.006, hw - 0.006, ax.sub( cx ).abs() ).mul( smoothstep( hh + 0.006, hh - 0.006, ay.sub( cy ).abs() ) );
+
+	// --- the room shell: walls, floor, ceiling, back wall, with flat fittings ----
+
+	// muted plaster, picked per room, with a darker skirting board along the wall foot
+	let wall = mix( color( 0x9a8b73 ), color( 0x6f7a82 ), seed );
+	wall = mix( wall, color( 0xb9ad97 ), seed2.mul( 0.6 ) );
+	const wallCol = mix( wall, wall.mul( 0.5 ), smoothstep( 0.05, 0.04, q.y ) );
+
+	// floorboards with a thin seam every few, and a centred rug
+	const seam = step( 0.94, fract( q.x.mul( 6 ) ) );
+	const boards = mix( color( 0x4a3320 ), color( 0x6a4c30 ), seed ).mul( seam.mul( 0.3 ).oneMinus() );
+	const rug = mix( color( 0x7a3b32 ), color( 0x3a5760 ), seed2 );
+	const floorCol = mix( boards, rug, rect( q.x, q.z, 0.5, 0.62, 0.3, 0.26 ).mul( 0.9 ) );
+
+	// ceiling, lighter than the walls, with a round overhead light in the middle; in a
+	// lit room the fixture reads bright and glows ( the material's emissive = colour × lit )
+	const lamp = smoothstep( 0.16, 0.13, vec2( q.x.sub( 0.5 ), q.z.sub( 0.5 ) ).length() );
+	const ceilCol = mix( mix( wall, color( 0xffffff ), 0.5 ), lightCol.mul( mix( float( 1.0 ), float( 4.5 ), lit ) ), lamp );
+
+	// back wall: a panelled door to one side, and a framed picture kept on the
+	// opposite half of the wall so it never lands on the door
+	const doorX = mix( float( 0.22 ), float( 0.78 ), seed );
+	const door = mix( color( 0x5a4631 ), color( 0x39383c ), step( 0.5, seed2 ) );
+	const picX = select( doorX.lessThan( 0.5 ), mix( float( 0.68 ), float( 0.82 ), seed2 ), mix( float( 0.18 ), float( 0.32 ), seed2 ) );
+	const picCol = mix( color( 0x2c3a4a ), color( 0x7a5a3a ), hash( 5.1, 9.2, 3.3 ) );
+	let backCol = mix( wallCol, door, rect( q.x, q.y, doorX, 0.33, 0.085, 0.35 ) );
+	backCol = mix( backCol, color( 0x141210 ), rect( q.x, q.y, picX, 0.56, 0.075, 0.085 ) ); // dark frame
+	backCol = mix( backCol, picCol, rect( q.x, q.y, picX, 0.56, 0.055, 0.065 ) ); // the picture
+
+	const shellCol = select( onBack, backCol, select( onCeil, ceilCol, select( onFloor, floorCol, wallCol ) ) );
+
+	// fake ambient occlusion: darken the hit toward the room's edges ( where two surfaces
+	// meet ), so the box reads with soft corner shading instead of flat-lit walls. the two
+	// in-plane axes depend on which face the ray exits through ( q is 0..1 inside the room ).
+	const aoBand = 0.15;
+	const aoEdge = ( a ) => smoothstep( 0, aoBand, a ).mul( smoothstep( 0, aoBand, a.oneMinus() ) );
+	const edgeAO = select( onBack, aoEdge( q.x ).mul( aoEdge( q.y ) ), select( onFloor.or( onCeil ), aoEdge( q.x ).mul( aoEdge( q.z ) ), aoEdge( q.y ).mul( aoEdge( q.z ) ) ) );
+	const shellAO = mix( float( 0.72 ), float( 1.0 ), edgeAO );
+
+	// --- nearest surface: the shell, then any furniture block that lies closer ----
+	// each block is a solid axis-aligned box in room space; boxHit returns its near
+	// face. consider() keeps whichever surface the ray meets first.
+	let bestT = t;
+	let bestCol = shellCol.mul( shellAO ).mul( falloffAt( hit.z ) );
+	let bestEmit = float( 1 ); // per-hit emissive weight: shell and fittings emit fully, curtains far less
+
+	const boxHit = ( bMin, bMax ) => {
+
+		const ta = bMin.sub( origin ).div( dir );
+		const tb = bMax.sub( origin ).div( dir );
+		const lo = ta.min( tb ), hi = ta.max( tb );
+		const tN = lo.x.max( lo.y ).max( lo.z );
+		const p = origin.add( dir.mul( tN ) );
+		return { tN, p, hit: hi.x.min( hi.y ).min( hi.z ).greaterThan( tN ).and( tN.greaterThan( 0 ) ), qb: p.sub( bMin ).div( bMax.sub( bMin ) ) };
+
+	};
+
+	const consider = ( h, tN, c, emit = 1 ) => {
+
+		const near = h.and( tN.lessThan( bestT ) ); bestCol = select( near, c, bestCol ); bestEmit = select( near, float( emit ), bestEmit ); bestT = select( near, tN, bestT );
+
+	};
+
+	const halfU = boxMax.x, floorY = boxMin.y, ceilY = boxMax.y, backZ = boxMax.z;
+	const midZ = setback.add( depth.mul( 0.5 ) ); // room centre, in depth
+
+	// a low table near the middle of the room ( its top catches the light )
+	const tCx = mix( float( - 0.6 ), float( 0.6 ), seed );
+	const tCz = midZ.add( mix( float( - 0.4 ), float( 0.5 ), seed2 ) );
+	const tbl = boxHit( vec3( tCx.sub( 0.6 ), floorY, tCz.sub( 0.35 ) ), vec3( tCx.add( 0.6 ), floorY.add( 0.42 ), tCz.add( 0.35 ) ) );
+	const tblCol = mix( color( 0x4a3526 ), color( 0x6b4a30 ), seed2 ).mul( select( tbl.qb.y.greaterThan( 0.94 ), float( 1.25 ), float( 0.8 ) ) );
+	consider( tbl.hit, tbl.tN, tblCol.mul( falloffAt( tbl.p.z ) ) );
+
+	// a wide low sofa against the back wall, facing the window
+	const sofaCx = mix( halfU.mul( - 0.3 ), halfU.mul( 0.3 ), seed2 );
+	const sofa = boxHit( vec3( sofaCx.sub( 1.1 ), floorY, backZ.sub( 0.95 ) ), vec3( sofaCx.add( 1.1 ), floorY.add( mix( float( 0.8 ), float( 0.9 ), seed ) ), backZ.sub( 0.1 ) ) );
+	const sofaCol = mix( color( 0x5a4a3a ), color( 0x42566a ), seed ).mul( select( sofa.qb.y.greaterThan( 0.9 ), float( 1.12 ), float( 0.85 ) ) );
+	consider( sofa.hit, sofa.tN, sofaCol.mul( falloffAt( sofa.p.z ) ) );
+
+	// tall wardrobes in the back corners — each side stands in some rooms
+	const wardrobe = ( cx, gate, h ) => {
+
+		const w = boxHit( vec3( cx.sub( 0.5 ), floorY, backZ.sub( 0.7 ) ), vec3( cx.add( 0.5 ), floorY.add( h ), backZ.sub( 0.1 ) ) );
+		const c = mix( color( 0x3a2c22 ), color( 0x55473a ), seed ).mul( select( w.qb.y.greaterThan( 0.94 ), float( 1.2 ), float( 0.82 ) ) );
+		consider( w.hit.and( gate ), w.tN, c.mul( falloffAt( w.p.z ) ) );
+
+	};
+
+	wardrobe( halfU.mul( - 0.82 ), hash( 7.3, 2.1, 9.9 ).greaterThan( 0.4 ), mix( float( 1.7 ), float( 2.3 ), seed ) );
+	wardrobe( halfU.mul( 0.82 ), hash( 3.7, 8.4, 1.5 ).greaterThan( 0.4 ), mix( float( 1.7 ), float( 2.3 ), seed2 ) );
+
+	// curtains hung just inside the glass: drapes drawn part-way in from each side,
+	// so some windows read open and others half-covered
+
+	// curtain fabric colour, picked per room from a muted domestic palette — creams and
+	// taupes through warm grey, dusty blue, sage and faded terracotta — with a small
+	// in-family drift so drawn drapes vary window to window instead of all reading beige
+	const swatch = ( a, b ) => mix( color( a ), color( b ), seed2 );
+	const pick = hash( 22.4, 6.7, 91.2 ).mul( 6 ); // 0..6, one bucket per family
+	let fabric = swatch( 0xcabfa6, 0xd8cdb8 ); // cream
+	fabric = select( pick.greaterThan( 1 ), swatch( 0x8a7a64, 0x9b8c72 ), fabric ); // beige / taupe
+	fabric = select( pick.greaterThan( 2 ), swatch( 0x706a64, 0x837d76 ), fabric ); // warm grey
+	fabric = select( pick.greaterThan( 3 ), swatch( 0x5f7079, 0x6f818b ), fabric ); // dusty blue
+	fabric = select( pick.greaterThan( 4 ), swatch( 0x6c7558, 0x79835f ), fabric ); // sage green
+	fabric = select( pick.greaterThan( 5 ), swatch( 0x8c5a44, 0x9a6a52 ), fabric ); // faded terracotta
+	const drape = ( bMin, bMax, gate ) => {
+
+		const h = boxHit( bMin, bMax );
+		const pleat = fabric.mul( mix( float( 0.78 ), float( 1.12 ), fract( h.p.x.mul( 2.5 ) ) ) ); // soft vertical pleats
+		consider( h.hit.and( gate ), h.tN, pleat.mul( falloffAt( h.p.z ) ), 0.2 ); // a drape only transmits a little of the room's glow, never out-glowing the interior
+
+	};
+
+	const cz0 = setback, cz1 = setback.add( 0.12 );
+	// drape widths, biased narrow ( squared ) and each capped at half the room width, so
+	// the two sides only meet — fully curtaining the window — in the rare room where both
+	// are nearly closed; most rooms read partly open
+	const sL = smoothstep( 0.3, 1.0, seed ), sR = smoothstep( 0.3, 1.0, seed2 );
+	const lw = halfU.mul( sL.mul( sL ) ); // left drape width ( 0 below seed 0.3 )
+	const rw = halfU.mul( sR.mul( sR ) ); // right drape width
+	drape( vec3( halfU.negate(), floorY, cz0 ), vec3( halfU.negate().add( lw ), ceilY, cz1 ), lw.greaterThan( 0.05 ) );
+	drape( vec3( halfU.sub( rw ), floorY, cz0 ), vec3( halfU, ceilY, cz1 ), rw.greaterThan( 0.05 ) );
+
+	// lit rooms read brighter and take on their bulb's colour ( the lights are on )
+	const warmth = mix( vec3( 1.0, 1.0, 1.0 ), lightCol, lit.mul( 0.85 ) );
+	return vec4( bestCol.mul( warmth ).mul( mix( float( 1.0 ), float( 1.3 ), lit ) ), lit.mul( bestEmit ) );
+
+} );
+
+/**
+ * The NYC masonry palette every tower is dressed from ( hex colours ): limestone-dominant
+ * with terracotta accents. Shared by the single-tower example and {@link CityGenerator}'s
+ * building material so both stay in sync.
+ */
+const buildingPalette = [
+	0xa8553c, 0x9c4a34, // terracotta & red brick ( occasional accent )
+	0x8a6a52, 0x7d6450, // warm brick / brownstone ( muted )
+	0xc4a370, 0xb89a6f, 0xc2b183, // buff / tan
+	0xc6c0b2, 0xc6c0b2, 0xbdb7a8, 0xd1ccbe, 0xb4afa1, // limestone / pale dressed stone — the common default
+	0x9a988f, 0x8b8983, 0xa5a39a, // grey granite / concrete
+	0xdbd6cb, // pale glazed ( accent )
+	0x7c868d // steel / glass ( cool accent )
+];
+
+/** Picks one {@link buildingPalette} colour ( a hex number ) for a tower from its seed. */
+function pickBuildingColor( seed ) {
+
+	const h = Math.abs( Math.sin( seed * 12.9898 ) * 43758.5453 );
+	return buildingPalette[ Math.floor( ( h - Math.floor( h ) ) * buildingPalette.length ) ];
+
+}
+
+/**
+ * The facade material: a single MeshStandardNodeMaterial that reads the baked
+ * per-vertex `partId` and reproduces every zone — procedural terracotta brickwork
+ * on the walls and piers, smooth dressed stone on the window frames and ornament,
+ * dark glazing, and grey AC units — all dressed with world-space
+ * weathering. One material covers the whole building ( and a whole city ), which is
+ * what makes it compute-rasterizer friendly. `buildingBase` is the tower's flat
+ * masonry colour as a TSL node: pass a `uniform( Color )` for a single tower, or a
+ * per-fragment palette pick for a city, so the same material dresses both.
+ */
+function createSkyscraperMaterial( buildingBase = color( 0xc6c0b2 ) ) {
+
+	const soot = color( 0x4a4236 );
+
+	// broad weathering, all driven from world position so it reads consistently
+	// across instanced and merged meshes: a slow tonal drift, a fine clay mottle,
+	// and sooty vertical streaks that pool low down
+
+	const tone = mx_fractal_noise_float( positionWorld.mul( 0.03 ), 2 ).mul( 0.18 );
+	const mottle = mx_noise_float( positionWorld.mul( 0.7 ) ).mul( 0.06 );
+	const streak = mx_fractal_noise_float( vec3( positionWorld.x.mul( 1.5 ), positionWorld.y.mul( 0.04 ), positionWorld.z.mul( 1.5 ) ), 2 );
+	const dirt = smoothstep( - 0.1, 0.45, streak ).mul( smoothstep( 210, 0, positionWorld.y ) ).mul( 0.6 );
+
+	// procedural terracotta brickwork in running bond, keyed off the BUILDING-LOCAL position
+	// so the coursing anchors to each tower ( courses from its base, columns at its faces )
+	// and lines up with the brick-snapped floor / bay dimensions. courses run up local Y;
+	// the across-face axis is world XZ projected onto the face tangent, so brick width stays
+	// constant on every face including the 45° chamfer. the geometry ( pre-bump ) normal is
+	// used for the bond axis — otherwise colorNode pulls normal computation into its partId
+	// branch and glass loses its env reflection.
+
+	const brickH = BRICK.height;
+	const brickL = BRICK.length;
+	const mortar = 0.025; // joint width, in metres
+
+	const nrm = normalWorldGeometry.abs();
+	const across = positionLocal.x.mul( normalWorldGeometry.z ).sub( positionLocal.z.mul( normalWorldGeometry.x ) );
+	const rowCoord = positionLocal.y.div( brickH );
+	const courseRow = floor( rowCoord );
+	const colCoord = across.div( brickL ).add( mod( courseRow, 2 ).mul( 0.5 ) ); // half-brick stagger per row
+
+	// anti-aliased mortar ( the "pristine grid" trick ): the drawn joint never falls below
+	// the pixel footprint and its opacity fades to keep energy constant, so lines stay crisp
+	// up close and dissolve far away instead of shimmering. the horizontal derivative comes
+	// from continuous world X / Z ( weighted by the normal ), not fwidth( across ) which
+	// would spike where the normal flips at pier edges.
+	const mU = mortar / ( 2 * brickL );
+	const mV = mortar / ( 2 * brickH );
+	const ddU = nrm.z.mul( fwidth( positionWorld.x ) ).add( nrm.x.mul( fwidth( positionWorld.z ) ) ).div( brickL ).clamp( 1e-6, 0.5 );
+	const ddV = fwidth( rowCoord ).clamp( 1e-6, 0.5 );
+	const distU = float( 0.5 ).sub( fract( colCoord ).sub( 0.5 ).abs() );
+	const distV = float( 0.5 ).sub( fract( rowCoord ).sub( 0.5 ).abs() );
+	const drawU = ddU.max( mU );
+	const drawV = ddV.max( mV );
+	const lineU = smoothstep( drawU.add( ddU ), drawU.sub( ddU ), distU ).mul( float( mU ).div( drawU ).min( 1 ) );
+	const lineV = smoothstep( drawV.add( ddV ), drawV.sub( ddV ), distV ).mul( float( mV ).div( drawV ).min( 1 ) );
+	const wallFacing = smoothstep( 0.7, 0.45, nrm.y ); // brick only on vertical walls — not roofs, ledges, cornice tops
+	const joint = lineU.max( lineV ).mul( wallFacing );
+
+	const brickKey = uint( courseRow.add( 1 << 16 ) ).mul( uint( 73856093 ) ).bitXor( uint( floor( colCoord ).add( 1 << 16 ) ).mul( uint( 19349663 ) ) ).toVar();
+	const brickRnd = ihash( brickKey );
+	const brickRnd2 = ihash( brickKey.add( uint( 1 ) ) ); // independent per-brick hash for hue
+
+	// soft brick relief for the bump: each brick is a gently domed mound falling to the
+	// recessed mortar over a bevel ( distU / distV are the distance to the nearest column /
+	// course line, 0 at the joint, 0.5 at the centre ), so bricks read rounded rather than
+	// scratched. the bevel is widened to at least a screen pixel ( from the world-position
+	// derivative, our stand-in for a mip LOD ) so the edge never goes sub-pixel and shimmers.
+	const bevel = 0.02;
+	const texel = fwidth( positionWorld ).length(); // on-screen size of a surface pixel — our hand-rolled LOD
+	const lodBevel = texel.mul( 1.5 ).max( bevel );
+	const brickFace = smoothstep( 0, lodBevel, distU.mul( brickL ) ).mul( smoothstep( 0, lodBevel, distV.mul( brickH ) ) ).mul( wallFacing );
+	const reliefHeight = brickFace.mul( 0.008 );
+	const rough = mx_noise_float( positionWorld.mul( 0.5 ) ).mul( 0.08 ).add( 0.82 ).add( joint.mul( 0.12 ) );
+
+	// the merged geometry carries a per-vertex partId; this material reads it and
+	// branches to reproduce each zone — no per-part materials, compute-raster friendly
+
+	const partId = varying( attribute( 'partId', 'float' ) ).setInterpolation( InterpolationSamplingType.FLAT, InterpolationSamplingMode.EITHER ); // flat: a per-face id must not interpolate, or equal() below misses on the rounding
+	const isGlass = partId.equal( GLASS );
+	const isFrame = partId.equal( FRAME );
+	const isOrnament = partId.equal( ORNAMENT );
+	const isAC = partId.equal( AC );
+
+	// stone zones: brick + weathering on the building's colour, lightened for
+	// piers / ornament and darkened for window frames
+	const lighten = select( partId.equal( PIER ), float( 0.12 ), select( isOrnament, float( 0.2 ), float( 0 ) ) );
+	const perBrick = float( 1 ).add( tone ).add( mottle ).add( brickRnd.sub( 0.5 ).mul( 0.14 ) );
+	// per-brick warm/cool shift ( red up / blue down, or vice-versa ) so individual
+	// bricks read as slightly different fired tones, relative to the building's colour
+	const warmCool = brickRnd2.sub( 0.5 ).mul( 0.14 );
+	const brickShift = vec3( float( 1 ).add( warmCool ), float( 1 ), float( 1 ).sub( warmCool ) );
+	const tint = mix( buildingBase, color( 0xffffff ), lighten ).mul( perBrick ).mul( brickShift );
+	const masonry = mix( tint, tint.mul( 0.6 ), joint ); // recessed joints read darker
+	// roofs / ledges show every blotch ( flat & light ), so horizontal surfaces get a gentler,
+	// larger-scale grime instead of the wall's streaky soot — confined to those surfaces by a
+	// branch ( roofMask > 0 ), so the fractal never runs on the vertical facade
+	const roofMask = wallFacing.oneMinus();
+	const roofGrime = select( roofMask.greaterThan( 0 ), smoothstep( 0.0, 0.55, mx_fractal_noise_float( positionWorld.mul( 0.025 ), 3 ) ).mul( 0.22 ), float( 0 ) );
+	const stoneColor = mix( masonry, soot, mix( dirt, roofGrime, roofMask ) );
+
+	// glass: the interior-mapped room is the base colour; the smooth, low-roughness
+	// surface still lets a faint sky reflection ride over it, and lit rooms glow ( emissive ).
+	// toVar so the raymarch runs once, shared by the colour and emissive outputs
+	const room = interior().toVar();
+
+	// grimy glazing: the room shows through, but muted by a dusty film and dirt pooled
+	// along the bottom of each pane, plus a baseline haze, so the panes read as old
+	// glass rather than open holes. the streaks run down the facade ( world Y barely
+	// scaled ); the pooled dirt uses the pane's own UV ( y = 0 at the sill ).
+	const filmNoise = mx_fractal_noise_float( vec3( positionWorld.x.mul( 1.3 ), positionWorld.y.mul( 0.06 ), positionWorld.z.mul( 1.3 ) ), 2 );
+	const dustStreak = smoothstep( - 0.15, 0.5, filmNoise ).mul( 0.45 );
+	const pooled = smoothstep( 0.32, 0.0, uv().y ).mul( 0.4 );
+	const grime = float( 0.64 ).add( dustStreak ).add( pooled ).clamp( 0, 0.95 ); // baseline haze so the panes read as dirty glass, not open holes
+	const dirtyGlass = mix( color( 0x13161a ), color( 0x232b31 ), mx_noise_float( positionWorld.mul( 0.3 ) ).mul( 0.5 ).add( 0.5 ) );
+	const glassColor = mix( room.xyz.mul( color( 0xb6c6bf ) ), dirtyGlass, grime ); // faint green-grey ( soda-lime ) room tint, dirtied toward grimy glass
+
+	// window frames are smooth dressed stone, not brick
+	const frameColor = buildingBase.mul( 0.55 );
+
+	// finials / ornament: smooth dressed stone ( lightened ), not brick
+	const ornamentColor = mix( buildingBase, color( 0xffffff ), 0.22 ).mul( float( 1 ).add( tone ) );
+	// window AC units: a louvered white-plastic box, grimier toward the base where it drips.
+	// keyed off the box's own UVs ( acUv.y runs 0 → 1 up each vented side )
+	const acUv = uv();
+	const acVent = smoothstep( 0.65, 0.4, normalWorldGeometry.y.abs() ); // 1 on the vertical vented sides, 0 on the flat top
+	const acDetail = smoothstep( 0.08, 0.015, texel ); // louvers fade out before a slat nears a pixel
+	const acLouver = acVent.mul( acDetail );
+
+	// plastic shell: off-white, some units dingier / yellowed than others
+	const acDinge = mx_noise_float( positionWorld.mul( 0.4 ) ).mul( 0.5 ).add( 0.5 ); // ~per-unit
+	const acPaint = mix( color( 0xf2f1ec ), color( 0xcfccc2 ), acDinge ) // bright white → light dingy grey, both lighter than the wall
+		.add( mx_noise_float( positionWorld.mul( 5 ) ).mul( 0.04 ) );
+
+	// a darker recessed grille panel inset into the lighter cabinet, with horizontal louvers
+	// inside it ( the front vents ) — the white plastic reads as a thin border frame
+	const acGrille = smoothstep( 0.06, 0.14, acUv.x ).mul( smoothstep( 0.94, 0.86, acUv.x ) )
+		.mul( smoothstep( 0.12, 0.2, acUv.y ) ).mul( smoothstep( 0.96, 0.88, acUv.y ) ).mul( acLouver );
+	const acSlats = fract( acUv.y.mul( 6 ) ); // bold louvers — reads at the unit's small on-screen size
+	const acFin = mix( float( 0.82 ), float( 1.04 ), acSlats );
+	const acBody = acPaint.mul( mix( float( 1 ), acFin.mul( 0.42 ), acGrille ) ); // cabinet stays light; recessed grille goes dark grey
+
+	// grey-brown condensate grime streaking the lower edge ( plastic doesn't rust ); dirtier units streak more
+	const acStreak = mx_fractal_noise_float( vec3( positionWorld.x.mul( 6 ), positionWorld.y.mul( 0.5 ), positionWorld.z.mul( 6 ) ), 3 ).mul( 0.5 ).add( 0.5 );
+	const acGrime = smoothstep( 0.4, 0.0, acUv.y ).mul( acStreak ).mul( acDinge.add( 0.3 ) );
+	const acColor = mix( acBody, color( 0x6f685a ), acGrime.mul( 0.5 ) );
+
+	// recessed grille ( louver fins ) relief and a slightly rougher base
+	const acRelief = acGrille.mul( acSlats.mul( 0.012 ).sub( 0.01 ) );
+	const acRough = float( 0.52 ).add( acGrille.mul( 0.08 ) );
+
+	const material = new MeshStandardNodeMaterial();
+	material.colorNode = select( isGlass, glassColor, select( isFrame, frameColor, select( isOrnament, ornamentColor, select( isAC, acColor, stoneColor ) ) ) );
+	material.roughnessNode = select( isGlass, float( 0.18 ), select( isOrnament, float( 0.8 ), select( isAC, acRough, rough ) ) ); // glass kept smooth for a sky reflection, but soft enough not to alias over the interior
+	material.metalnessNode = float( 0 ); // all dielectric — stone, glass and the plastic AC shells
+	material.emissiveNode = select( isGlass, room.xyz.mul( room.w ).mul( 4 ).mul( grime.mul( 0.6 ).oneMinus() ), color( 0x000000 ) ); // room.w = emissive weight ( 0 unlit, < 1 behind curtains ), muted further by grime
+	material.normalNode = bumpNormal( select( isGlass.or( isFrame ).or( isOrnament ), float( 0 ), select( isAC, acRelief, reliefHeight ) ) ); // glass / frames / ornament stay flat; AC has its own louvers
+
+	return material;
+
+}
+
+export { SkyscraperGenerator, createSkyscraperMaterial, buildingPalette, pickBuildingColor };