@gnsx/three 0.185.15 → 0.186.0

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

@@ -20,9 +20,10 @@ import {
 } from '@gnsx/three';
 
 import { MeshStandardNodeMaterial } from '@gnsx/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 '@gnsx/three/tsl';
+import { attribute, cameraPosition, color, cross, dot, float, floor, Fn, fract, fwidth, hash as ihash, mix, mod, modelWorldMatrixInverse, mx_fractal_noise_float, normalLocal, normalWorldGeometry, positionLocal, positionWorld, select, smoothstep, step, uint, uv, varying, vec2, vec3, vec4 } from '@gnsx/three/tsl';
 
 import { mergeGeometries } from '../../utils/BufferGeometryUtils.js';
+import { bumpNormal } from './CityGeneratorUtils.js';
 
 const _scale = /*@__PURE__*/ new Vector3();
 const _point = /*@__PURE__*/ new Vector3();
@@ -31,8 +32,8 @@ 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;
+const PartId = { WALL: 0, PIER: 1, FRAME: 2, ORNAMENT: 3, GLASS: 4, AC: 5, SHOPGLASS: 6, STORE: 7, AWNING: 8 };
+const { WALL, PIER, FRAME, ORNAMENT, GLASS, AC, SHOPGLASS, STORE, AWNING } = 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.
@@ -65,6 +66,9 @@ function nonIndexed( geometry ) {
 // the unit box is identical for every building's shell boxes — build it once
 const _unitBox = /*@__PURE__*/ nonIndexed( new BoxGeometry( 1, 1, 1 ) );
 
+// a unit quad ( facing +Z ), scaled per placement for the storefront display glazing
+const _unitPlane = /*@__PURE__*/ nonIndexed( new PlaneGeometry( 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`
@@ -223,7 +227,8 @@ function randomStyle( random ) {
 		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
+		archRise: 0.4 + random() * 0.5,
+		baseStyle: random() < 0.22 ? 'arcade' : 'storefront' // most towers get retail storefronts; a few take a grand arcade
 	};
 
 }
@@ -307,6 +312,11 @@ class SkyscraperGenerator {
 		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 shopGlass = []; // ground-floor display glazing ( scaled unit quads )
+		const shopRooms = []; // interior-mapping room per shop, aligned with shopGlass
+		const mullions = []; // slim shopfront dividers
+		const storeBands = []; // storefront bulkhead and signboard fascia
+		const awnings = []; // projecting shop awnings
 		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
@@ -340,12 +350,23 @@ class SkyscraperGenerator {
 
 		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
+		// the street-level retail floor; a few larger towers take a grand arcade instead
+		const groundHeight = p.floorHeight;
+		const useArcade = p.baseStyle === 'arcade' && baseHeight > groundHeight * 1.5;
+
+		// shaft and crown are the same facade over different faces, spans and pier heights;
+		// the masonry base above the storefront is that facade again
 		const tiers = [
 			{ faces, bottom: baseTop, height: shaftHeight, pierHeight: shaftHeight, ac: acUnits },
 			{ faces: crownFaces, bottom: shaftTop, height: crownHeight, pierHeight: crownHeight - crownCornice, ac: null }
 		];
 
+		if ( ! useArcade && baseHeight > groundHeight + 0.1 ) {
+
+			tiers.push( { faces, bottom: groundHeight, height: baseHeight - groundHeight, pierHeight: baseHeight - groundHeight, ac: null } );
+
+		}
+
 		for ( const t of tiers ) {
 
 			for ( const frame of t.faces ) {
@@ -359,10 +380,14 @@ class SkyscraperGenerator {
 
 		}
 
-		// the base: a gothic arcade, capped by a string course
+		// the ground floor: NYC retail storefronts, or a grand gothic arcade. either is
+		// capped by the base string course
+		const storefront = { glass: shopGlass, glassRooms: shopRooms, mullions, storeBands, backWalls, awnings, addPier };
 		for ( const frame of faces ) {
 
-			addArcade( extras, frame, baseHeight, p );
+			if ( useArcade ) addArcade( extras, frame, baseHeight, p );
+			else addStorefront( frame, groundHeight, p, storefront );
+
 			addCornice( trim, frame, baseTop - p.stringCourseHeight, p.stringCourseHeight, 0.5 );
 
 		}
@@ -399,6 +424,10 @@ class SkyscraperGenerator {
 		const groups = [
 			{ geometry: buildWindowGeometry( p ), matrices: windows, partId: FRAME, rigid: true },
 			{ geometry: nonIndexed( buildGlassGeometry( p ) ), matrices: glass, partId: GLASS, rooms: glassRooms, rigid: true },
+			{ geometry: _unitPlane, matrices: shopGlass, partId: SHOPGLASS, rooms: shopRooms }, // scaled per shop, so not rigid
+			{ geometry: _unitBox, matrices: mullions, partId: FRAME },
+			{ geometry: _unitBox, matrices: storeBands, partId: STORE },
+			{ geometry: _unitBox, matrices: awnings, partId: AWNING },
 			{ geometry: _unitBox, matrices: bands, partId: WALL }
 		];
 
@@ -435,6 +464,9 @@ class SkyscraperGenerator {
 		if ( this.mesh === null ) return;
 
 		this.mesh.geometry.dispose();
+		this.mesh.dispose();
+		if ( this.material === null ) this.mesh.material.dispose();
+
 		this.mesh = null;
 
 	}
@@ -630,10 +662,20 @@ function addSpandrelBands( target, frame, vBottom, height, p ) {
 	// into the plane of the perpendicular face at the corners ( overdraw )
 	const bandLength = Math.max( 0.2, frame.length - 0.6 );
 
+	const vTop = vBottom + height;
+
 	for ( let f = 0; f <= floors; f ++ ) {
 
+		// the end bands ( f = 0 / f = floors ) are centred on the tier boundary; clamp
+		// them so they don't extend into the neighbouring tier
+		const center = vBottom + f * fh;
+		const top = Math.min( center + bandHeight / 2, vTop );
+		const bottom = Math.max( center - bandHeight / 2, vBottom );
+		const h = top - bottom;
+		if ( h <= 0 ) continue;
+
 		// 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 ) );
+		target.push( boxMatrix( frame, frame.length / 2, ( top + bottom ) / 2, - 0.3, bandLength, h, 0.6 ) );
 
 	}
 
@@ -709,9 +751,49 @@ function addParapet( target, frame, vTop, p ) {
 
 }
 
+// the arch openings' inner reveal walls, each hole outline swept back to the wall
+// thickness; holes wind clockwise, so an edge's inward normal is ( dy, -dx )
+function buildArchReveals( holes, depth, curveSegments ) {
+
+	const positions = [], normals = [], uvs = [];
+
+	for ( const hole of holes ) {
+
+		const points = hole.getPoints( curveSegments );
+
+		for ( let i = 0; i < points.length - 1; i ++ ) {
+
+			const a = points[ i ], b = points[ i + 1 ];
+			const dx = b.x - a.x, dy = b.y - a.y;
+			const inv = 1 / ( Math.hypot( dx, dy ) || 1 );
+			const nx = dy * inv, ny = - dx * inv;
+
+			// the two triangles of the quad a → b, both facing into the opening
+			positions.push( a.x, a.y, 0, a.x, a.y, - depth, b.x, b.y, - depth );
+			positions.push( a.x, a.y, 0, b.x, b.y, - depth, b.x, b.y, 0 );
+
+			for ( let v = 0; v < 6; v ++ ) {
+
+				normals.push( nx, ny, 0 );
+				uvs.push( 0, 0 );
+
+			}
+
+		}
+
+	}
+
+	const geometry = new BufferGeometry();
+	geometry.setAttribute( 'position', new BufferAttribute( new Float32Array( positions ), 3 ) );
+	geometry.setAttribute( 'normal', new BufferAttribute( new Float32Array( normals ), 3 ) );
+	geometry.setAttribute( 'uv', new BufferAttribute( new Float32Array( uvs ), 2 ) );
+	return geometry;
+
+}
+
 /**
- * The base storey: a wall pierced by tall pointed-arch openings, extruded with
- * thickness so the openings read as deep recesses.
+ * The base storey: a wall pierced by tall pointed-arch openings, built as a flat front
+ * face and the openings' reveals so they read as deep recesses.
  */
 function addArcade( target, frame, height, p ) {
 
@@ -746,8 +828,12 @@ function addArcade( target, frame, height, p ) {
 	}
 
 	const thickness = 1.1;
-	const geometry = new ExtrudeGeometry( shape, { depth: thickness, bevelEnabled: false, curveSegments: 8 } );
-	geometry.translate( 0, 0, - thickness );
+	const curveSegments = 8;
+
+	// flat front face plus the swept reveals; the openings show through to the dark plane behind
+	const front = new ShapeGeometry( shape, curveSegments );
+	const reveals = buildArchReveals( shape.holes, thickness, curveSegments );
+	const geometry = merge( [ front, reveals ] );
 	geometry.applyMatrix4( frame.matrix( 0, 0, 0 ) );
 
 	target.push( geometry );
@@ -760,6 +846,65 @@ function addArcade( target, frame, height, p ) {
 
 }
 
+/**
+ * The street-level retail front: glazed shopfronts on a low bulkhead, under a
+ * signboard fascia, framed by the building's ground-floor piers and split by slim
+ * mullions, with a projecting awning over some shops. Reads as a row of NYC
+ * storefronts. All pieces are pushed into the caller's `parts` accumulators.
+ */
+function addStorefront( frame, height, p, parts ) {
+
+	const bulkhead = 0.5; // the solid kickplate the glazing stands on
+	const fascia = Math.min( 0.9, height * 0.22 ); // the signboard band above the glass
+	const glassBottom = bulkhead;
+	const glassHeight = height - fascia - bulkhead;
+	const len = frame.length;
+
+	// a stone bulkhead and a projecting signboard band run the full face
+	parts.storeBands.push( boxMatrix( frame, len / 2, bulkhead / 2, 0, len, bulkhead, 0.55 ) );
+	parts.storeBands.push( boxMatrix( frame, len / 2, height - fascia / 2, 0.08, len, fascia, 0.72 ) );
+
+	// the shop interior wall behind the glazing
+	addWall( parts.backWalls, frame, 0, height, 0.8, - 0.6 );
+
+	// shopfronts are wider than the window bays above, so group bays into ~4 m shops
+	const shopWidth = Math.max( 4, p.bayWidth * 2 );
+	const { count, margin, width } = frame.bays( shopWidth );
+
+	for ( let i = 0; i < count; i ++ ) {
+
+		const x0 = margin + i * width;
+		const cx = x0 + width / 2;
+
+		// a structural pier at each shopfront edge, full ground-floor height ( the far
+		// end is the shared corner the next face piers, like addPiers )
+		parts.addPier( frame, x0, 0, height );
+
+		// the display glazing for this shop, set back behind the frame, with the
+		// interior-mapping room it looks into ( one shop-wide, ground-floor-tall box )
+		const reveal = 0.18;
+		const gw = width - p.pierWidth - 0.12;
+		const cy = glassBottom + glassHeight / 2;
+		parts.glass.push( boxMatrix( frame, cx, cy, - reveal, gw, glassHeight, 1 ) );
+		parts.glassRooms.push( { center: frame.point( cx, cy, - reveal ), size: new Vector2( gw, glassHeight ) } );
+
+		// two slim mullions dividing the shopfront into three lights
+		parts.mullions.push( boxMatrix( frame, x0 + width / 3, glassBottom + glassHeight / 2, 0, 0.08, glassHeight, 0.16 ) );
+		parts.mullions.push( boxMatrix( frame, x0 + width * 2 / 3, glassBottom + glassHeight / 2, 0, 0.08, glassHeight, 0.16 ) );
+
+		// an awning over roughly half the shops, projecting from below the signboard
+		const r = Math.sin( i * 23.7 + frame.origin.x * 0.21 + frame.origin.z * 0.11 ) * 43758.5453;
+		if ( r - Math.floor( r ) < 0.5 ) {
+
+			const depth = 1.3;
+			parts.awnings.push( boxMatrix( frame, cx, height - fascia - 0.12, depth / 2 + 0.05, width - 0.3, 0.14, depth ) );
+
+		}
+
+	}
+
+}
+
 // --- repeating field -----------------------------------------------------
 
 function addPiers( frame, vBottom, height, p, addPier ) {
@@ -960,23 +1105,6 @@ function buildFinialGeometry( p ) {
 
 // --- 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
@@ -1169,6 +1297,202 @@ const interior = /*@__PURE__*/ Fn( () => {
 
 } );
 
+// the ground-floor shops' interior mapping: the same box raymarch as interior(), but
+// dressed as retail space ( tile floor, troffer-lit ceiling, stocked shelving, a sales
+// counter and a window display ), so storefronts read as shops rather than living rooms.
+// most shops trade with the lights on; the rest sit dark, some behind a roller grille.
+// returns vec4( colour, lit ), like interior().
+const shopInterior = /*@__PURE__*/ Fn( () => {
+
+	// flat for the same reason as interior(): floor() must not split a pane across cells
+	const roomCenter = varying( attribute( 'roomCenter', 'vec3' ) ).setInterpolation( InterpolationSamplingType.FLAT, InterpolationSamplingMode.EITHER );
+	const roomSize = attribute( 'roomSize', 'vec2' );
+
+	// the per-face frame and the view ray in room space ( across, up, depth ), as interior()
+	const n = normalLocal;
+	const up = vec3( 0, 1, 0 );
+	const uAxis = cross( up, n ).normalize();
+
+	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 shop box: retail runs deeper than the flats above
+	const setback = float( 0.1 );
+	const depth = roomSize.y.mul( 2.4 );
+	const boxMax = vec3( roomSize.x.mul( 0.5 ), roomSize.y.mul( 0.5 ), setback.add( depth ) );
+	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 shop
+
+	const onBack = q.z.greaterThan( 0.998 );
+	const onCeil = q.y.greaterThan( 0.998 );
+	const onFloor = q.y.lessThan( 0.002 );
+
+	// per-shop key + hash, the same scheme as interior()
+	const cell = floor( roomCenter.mul( 2.0 ) );
+	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.18, hash( 63.21, 9.17, 51.43 ) ); // most shops trade with the lights on; the rest sit closed
+	const market = step( 0.45, hash( 71.7, 23.9, 8.3 ) ); // shelf-stocked store, else a sparser showroom / boutique
+
+	// retail lighting: mostly cool fluorescent / LED whites, with a warm halogen minority
+	// ( boutiques, cafes ), so a shopping street reads as a mix of trades
+	const coolLight = mix( color( 0xeef2f6 ), color( 0xdfe8ff ), hash( 8.3, 51.2, 17.6 ) );
+	const warmLight = mix( color( 0xffd9a0 ), color( 0xffeacb ), hash( 27.1, 4.9, 61.7 ) );
+	const lightCol = select( hash( 44.7, 19.3, 6.1 ).greaterThan( 0.65 ), warmLight, coolLight );
+
+	// depth falloff: a lit shop carries its lighting deep into the room, a dark one falls away fast
+	const falloffAt = ( z ) => mix( float( 1.0 ), mix( float( 0.25 ), float( 0.6 ), lit ), 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() ) );
+
+	// merchandise: a goods colour per shelf cell, from a compact retail palette
+	const goods = ( k ) => {
+
+		const pick = k.mul( 6 );
+		let c = color( 0x9e3d33 ); // red
+		c = select( pick.greaterThan( 1 ), color( 0xb2802f ), c ); // amber
+		c = select( pick.greaterThan( 2 ), color( 0x3d6b4f ), c ); // green
+		c = select( pick.greaterThan( 3 ), color( 0x35578a ), c ); // blue
+		c = select( pick.greaterThan( 4 ), color( 0xd6d0c4 ), c ); // white
+		c = select( pick.greaterThan( 5 ), color( 0x2b2830 ), c ); // black
+		return c;
+
+	};
+
+	// a stocked shelf unit over ( ax, ay ) in 0..1: a board at the foot of each band, goods
+	// of per-cell colour / height / width standing on it, dark backing where stock thins out
+	const shelfBoard = mix( color( 0x6b5a43 ), color( 0xcfccc4 ), step( 0.5, seed2 ) ); // wood or white metal, per shop
+	const shelves = ( ax, ay, cols, salt ) => {
+
+		const bands = 4;
+		const cellKey = ckey.add( uint( salt ) ).add( uint( floor( ax.mul( cols ) ) ).mul( uint( 197 ) ) ).add( uint( floor( ay.mul( bands ) ) ).mul( uint( 4099 ) ) );
+		const ch = ihash( cellKey );
+		const ch2 = ihash( cellKey.add( uint( 1 ) ) );
+		const gx = fract( ax.mul( cols ) );
+		const gy = fract( ay.mul( bands ) );
+		const item = step( 0.08, gy ).mul( step( gy, mix( float( 0.4 ), float( 0.85 ), fract( ch2.mul( 5 ) ) ) ) )
+			.mul( step( gx.sub( 0.5 ).abs(), mix( float( 0.26 ), float( 0.46 ), fract( ch2.mul( 13 ) ) ) ) )
+			.mul( step( 0.15, ch2 ) ); // the odd cell sits empty
+		const stocked = mix( color( 0x211e1b ), goods( ch ), item ); // dark backing behind the goods
+		return mix( stocked, shelfBoard, step( gy, 0.08 ) );
+
+	};
+
+	// --- the shop shell -----------------------------------------------------
+
+	// light retail paint; boutiques take a muted brand colour on the back wall
+	const wallCol = mix( color( 0xd8d2c6 ), color( 0xbfb9ae ), seed );
+
+	// floor: pale terrazzo tile with dark seams, or a checker for the odd deli / diner
+	const tileSeam = step( 0.93, fract( q.x.mul( 8 ) ) ).max( step( 0.93, fract( q.z.mul( 10 ) ) ) );
+	const terrazzo = mix( color( 0xb5afa2 ), color( 0x958f83 ), seed2 ).mul( tileSeam.mul( 0.35 ).oneMinus() );
+	const checker = mix( color( 0x24262a ), color( 0xcfccc2 ), mod( floor( q.x.mul( 8 ) ).add( floor( q.z.mul( 10 ) ) ), 2 ) );
+	const floorCol = select( hash( 5.7, 33.1, 2.9 ).greaterThan( 0.75 ), checker, terrazzo );
+
+	// ceiling: a suspended white grid whose recessed troffer panels carry the light
+	const tx = fract( q.x.mul( 3 ) ).sub( 0.5 ).abs();
+	const tz = fract( q.z.mul( 4 ) ).sub( 0.5 ).abs();
+	const troffer = step( tx, 0.3 ).mul( step( tz, 0.15 ) );
+	const ceilCol = mix( color( 0xe9e6df ), lightCol.mul( mix( float( 0.5 ), float( 6.0 ), lit ) ), troffer );
+
+	// back wall: a market is shelved wall to wall; a boutique hangs a framed poster
+	// on its brand-painted wall
+	const posterX = mix( float( 0.3 ), float( 0.7 ), seed );
+	let showroom = mix( goods( seed2 ), wallCol, 0.45 );
+	showroom = mix( showroom, color( 0xe8e4da ), rect( q.x, q.y, posterX, 0.62, 0.1, 0.14 ) ); // the mat
+	showroom = mix( showroom, goods( hash( 3.1, 44.2, 7.7 ) ), rect( q.x, q.y, posterX, 0.62, 0.075, 0.1 ).mul( 0.85 ) ); // the artwork
+	const backCol = select( market, shelves( q.x, q.y, roomSize.x.mul( 2.5 ), 31 ), showroom );
+
+	// side walls: markets shelve those too
+	const sideCol = select( market, shelves( q.z, q.y, depth.mul( 2.5 ), 57 ), wallCol );
+
+	const shellCol = select( onBack, backCol, select( onCeil, ceilCol, select( onFloor, floorCol, sideCol ) ) );
+
+	// the same soft corner shading as interior()
+	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 fitting that lies closer ------
+
+	let bestT = t;
+	let bestCol = shellCol.mul( shellAO ).mul( falloffAt( hit.z ) );
+	let bestEmit = float( 1 );
+
+	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;
+
+	// the window display: a low platform just inside the glass, dressed with a few
+	// pedestals, each topped by an item of merchandise
+	const plat = boxHit( vec3( halfU.negate().add( 0.15 ), floorY, setback.add( 0.06 ) ), vec3( halfU.sub( 0.15 ), floorY.add( 0.4 ), setback.add( 0.95 ) ) );
+	const platCol = select( plat.qb.y.greaterThan( 0.93 ), color( 0xd9d4c8 ), color( 0x35302a ) ); // a light top on a dark plinth
+	consider( plat.hit, plat.tN, platCol.mul( falloffAt( plat.p.z ) ) );
+
+	for ( let i = 0; i < 3; i ++ ) {
+
+		const g = hash( 9.1 + i, 17.3, 40.7 );
+		const g2 = hash( 4.7, 29.1 + i, 13.9 );
+		const cx = halfU.mul( ( i - 1 ) * 0.62 );
+		const h = mix( float( 0.5 ), float( 1.2 ), g );
+		const w = mix( float( 0.16 ), float( 0.3 ), g2 );
+		const ped = boxHit( vec3( cx.sub( w ), floorY.add( 0.4 ), setback.add( 0.25 ) ), vec3( cx.add( w ), floorY.add( 0.4 ).add( h ), setback.add( 0.25 ).add( w.mul( 2 ) ) ) );
+		const pedCol = select( ped.qb.y.greaterThan( 0.6 ), goods( g ), color( 0xdad5cb ) ); // the item rides a light pedestal
+		consider( ped.hit.and( g2.greaterThan( 0.15 ) ), ped.tN, pedCol.mul( falloffAt( ped.p.z ) ) );
+
+	}
+
+	// the sales counter, standing mid-shop toward one side
+	const midZ = setback.add( depth.mul( 0.5 ) );
+	const cCx = mix( halfU.negate().add( 0.7 ), halfU.sub( 0.7 ), step( 0.5, seed ) );
+	const counter = boxHit( vec3( cCx.sub( 0.75 ), floorY, midZ ), vec3( cCx.add( 0.75 ), floorY.add( 1.0 ), midZ.add( 0.65 ) ) );
+	const counterCol = mix( color( 0x4a4036 ), color( 0x2c333a ), seed2 ).mul( select( counter.qb.y.greaterThan( 0.92 ), float( 1.3 ), float( 0.85 ) ) );
+	consider( counter.hit, counter.tN, counterCol.mul( falloffAt( counter.p.z ) ) );
+
+	// markets run a central gondola shelf down the aisle, stocked like the walls
+	const gz0 = setback.add( 1.2 ), gz1 = backZ.sub( 1.2 );
+	const gond = boxHit( vec3( - 0.45, floorY, gz0 ), vec3( 0.45, floorY.add( 1.5 ), gz1 ) );
+	const gondCol = shelves( gond.p.z.sub( gz0 ).div( gz1.sub( gz0 ) ), gond.qb.y, 8, 91 );
+	consider( gond.hit.and( market.greaterThan( 0.5 ) ), gond.tN, gondCol.mul( falloffAt( gond.p.z ) ) );
+
+	// some dark shops pull a steel roller grille down just inside the glass
+	const grille = boxHit( vec3( halfU.negate(), floorY, setback ), vec3( halfU, ceilY, setback.add( 0.05 ) ) );
+	const grilleCol = mix( color( 0x4c5158 ), color( 0x191b1e ), step( 0.62, fract( grille.p.y.mul( 7 ) ) ) ); // slats over shadowed gaps
+	const closed = lit.oneMinus().mul( step( 0.45, hash( 15.9, 3.3, 27.5 ) ) );
+	consider( grille.hit.and( closed.greaterThan( 0.5 ) ), grille.tN, grilleCol.mul( 0.8 ), 0 );
+
+	// a trading shop glows with its retail lighting; a closed one sits dim
+	const warmth = mix( vec3( 1.0, 1.0, 1.0 ), lightCol, lit.mul( 0.6 ) );
+	return vec4( bestCol.mul( warmth ).mul( mix( float( 0.45 ), float( 1.5 ), 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
@@ -1192,6 +1516,46 @@ function pickBuildingColor( seed ) {
 
 }
 
+// cheap value noise ( ~[ -1, 1 ] ), a lighter stand-in for gradient mx_noise on the
+// weathering terms; integer-hashed ( not fract(sin) ) to stay stable across drivers
+const valueNoise = /*@__PURE__*/ Fn( ( [ p ] ) => {
+
+	const i = floor( p );
+	const f = fract( p );
+	const u = f.mul( f ).mul( f.mul( - 2 ).add( 3 ) ); // 3f2 - 2f3 smooth interpolation
+	const corner = ( ox, oy, oz ) => {
+
+		const c = i.add( vec3( ox, oy, oz ) );
+		return ihash( uint( c.x.add( 1 << 20 ) ).mul( uint( 73856093 ) ).bitXor( uint( c.y.add( 1 << 20 ) ).mul( uint( 19349663 ) ) ).bitXor( uint( c.z.add( 1 << 20 ) ).mul( uint( 83492791 ) ) ) );
+
+	};
+
+	const x00 = mix( corner( 0, 0, 0 ), corner( 1, 0, 0 ), u.x );
+	const x10 = mix( corner( 0, 1, 0 ), corner( 1, 1, 0 ), u.x );
+	const x01 = mix( corner( 0, 0, 1 ), corner( 1, 0, 1 ), u.x );
+	const x11 = mix( corner( 0, 1, 1 ), corner( 1, 1, 1 ), u.x );
+	return mix( mix( x00, x10, u.y ), mix( x01, x11, u.y ), u.z ).mul( 2 ).sub( 1 );
+
+} ).setLayout( { name: 'valueNoise', type: 'float', inputs: [ { name: 'p', type: 'vec3' } ] } );
+
+// fractal ( fBm ) of valueNoise, octaves summed like mx_fractal_noise_float
+// ( amplitude halving, frequency doubling ); unrolled for a compile-time count
+const valueFractal = ( p, octaves ) => {
+
+	let sum = valueNoise( p );
+	let amp = 0.5, freq = 2;
+	for ( let o = 1; o < octaves; o ++ ) {
+
+		sum = sum.add( valueNoise( p.mul( freq ) ).mul( amp ) );
+		amp *= 0.5;
+		freq *= 2;
+
+	}
+
+	return sum;
+
+};
+
 /**
  * The facade material: a single MeshStandardNodeMaterial that reads the baked
  * per-vertex `partId` and reproduces every zone — procedural terracotta brickwork
@@ -1210,8 +1574,8 @@ function createSkyscraperMaterial( buildingBase = color( 0xc6c0b2 ) ) {
 	// 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 tone = varying( mx_fractal_noise_float( positionWorld.mul( 0.03 ), 2 ) ).mul( 0.18 ); // very low frequency: evaluate per-vertex and interpolate over the facade's fine tessellation
+	const mottle = valueNoise( 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 );
 
@@ -1225,7 +1589,7 @@ function createSkyscraperMaterial( buildingBase = color( 0xc6c0b2 ) ) {
 
 	const brickH = BRICK.height;
 	const brickL = BRICK.length;
-	const mortar = 0.025; // joint width, in metres
+	const mortar = 0.010; // joint width, in metres
 
 	const nrm = normalWorldGeometry.abs();
 	const across = positionLocal.x.mul( normalWorldGeometry.z ).sub( positionLocal.z.mul( normalWorldGeometry.x ) );
@@ -1260,12 +1624,12 @@ function createSkyscraperMaterial( buildingBase = color( 0xc6c0b2 ) ) {
 	// 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 bevel = 0.008;
 	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 ) );
+	const reliefHeight = brickFace.mul( 0.003 );
+	const rough = valueNoise( 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
@@ -1275,6 +1639,9 @@ function createSkyscraperMaterial( buildingBase = color( 0xc6c0b2 ) ) {
 	const isFrame = partId.equal( FRAME );
 	const isOrnament = partId.equal( ORNAMENT );
 	const isAC = partId.equal( AC );
+	const isShopGlass = partId.equal( SHOPGLASS );
+	const isStore = partId.equal( STORE );
+	const isAwning = partId.equal( AWNING );
 
 	// stone zones: brick + weathering on the building's colour, lightened for
 	// piers / ornament and darkened for window frames
@@ -1290,13 +1657,14 @@ function createSkyscraperMaterial( buildingBase = color( 0xc6c0b2 ) ) {
 	// 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 roofGrime = select( roofMask.greaterThan( 0 ), smoothstep( 0.0, 0.55, valueFractal( 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();
+	// shopfronts march their own retail interior ( select compiles to a branch, so only one
+	// raymarch runs per fragment ). toVar so the result is shared by colour and emissive
+	const room = select( isShopGlass, shopInterior(), 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
@@ -1306,8 +1674,12 @@ function createSkyscraperMaterial( buildingBase = color( 0xc6c0b2 ) ) {
 	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
+	const glassMottle = valueFractal( positionWorld.mul( 0.3 ), 2 ).mul( 0.5 ).add( 0.5 ); // shared by the upper dirty glass and the shop glazing, so the fractal runs once
+	const dirtyGlass = mix( color( 0x13161a ), color( 0x232b31 ), glassMottle );
+
+	// dirt scatters the reflection too: rougher where grime pools at the sills, so the
+	// panes don't all mirror the sun in unison
+	const glassRough = float( 0.16 ).add( pooled.mul( 0.45 ) ).add( dustStreak.mul( 0.2 ) );
 
 	// window frames are smooth dressed stone, not brick
 	const frameColor = buildingBase.mul( 0.55 );
@@ -1322,9 +1694,9 @@ function createSkyscraperMaterial( buildingBase = color( 0xc6c0b2 ) ) {
 	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 acDinge = valueNoise( 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 ) );
+		.add( valueNoise( 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
@@ -1335,7 +1707,7 @@ function createSkyscraperMaterial( buildingBase = color( 0xc6c0b2 ) ) {
 	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 acStreak = valueFractal( 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 ) );
 
@@ -1343,12 +1715,40 @@ function createSkyscraperMaterial( buildingBase = color( 0xc6c0b2 ) ) {
 	const acRelief = acGrille.mul( acSlats.mul( 0.012 ).sub( 0.01 ) );
 	const acRough = float( 0.52 ).add( acGrille.mul( 0.08 ) );
 
+	// --- storefronts --------------------------------------------------------
+
+	// display glazing: upper-floor and shop panes both show the raymarched room, the
+	// shops behind cleaner, barely-filmed plate glass. the shared `room` toVar must be
+	// referenced only once per output flow ( referencing it from two select branches
+	// miscompiles the interior ), so select the room-free tint / backing / film here and
+	// composite the room a single time below
+	const shopFilm = float( 0.14 ).add( dustStreak.mul( 0.22 ) ); // shops are far cleaner than the grimy upper panes
+	const glassTint = select( isShopGlass, color( 0xccd4cf ), color( 0xb6c6bf ) ); // shop daylight vs the upper soda-lime green
+	const glassBack = select( isShopGlass, color( 0x161a1e ), dirtyGlass );
+	const glassFilm = select( isShopGlass, shopFilm, grime );
+	const glazingColor = mix( room.xyz.mul( glassTint ), glassBack, glassFilm );
+	const glazingEmit = select( isShopGlass, float( 2 ), float( 2.2 ).mul( grime.mul( 0.6 ).oneMinus() ) ); // lit-room glow weight, kept a soft fill so signals and lamps read brighter
+
+	// bulkhead and signboard: a dark painted storefront frame, keyed off the building's colour
+	const storeColor = mix( buildingBase.mul( 0.3 ), color( 0x24201c ), 0.5 );
+
+	// awning fabric, one canvas colour per shop, picked from a coarse street-cell hash
+	const awnCell = floor( vec2( positionWorld.x, positionWorld.z ).mul( 0.2 ) );
+	const awnPick = ihash( uint( awnCell.x.add( 1 << 16 ) ).mul( uint( 73856093 ) ).bitXor( uint( awnCell.y.add( 1 << 16 ) ).mul( uint( 19349663 ) ) ) ).mul( 5 );
+	let awningColor = color( 0x6a2f2f ); // maroon
+	awningColor = select( awnPick.greaterThan( 1 ), color( 0x244a32 ), awningColor ); // green
+	awningColor = select( awnPick.greaterThan( 2 ), color( 0x22384f ), awningColor ); // navy
+	awningColor = select( awnPick.greaterThan( 3 ), color( 0x5a5e58 ), awningColor ); // grey
+	awningColor = select( awnPick.greaterThan( 4 ), color( 0x201f22 ), awningColor ); // black
+
+	const isGlazing = isGlass.or( isShopGlass ); // upper panes and shopfronts share the room compositing
+
 	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
+	material.colorNode = select( isGlazing, glazingColor, select( isStore, storeColor, select( isAwning, awningColor, select( isFrame, frameColor, select( isOrnament, ornamentColor, select( isAC, acColor, stoneColor ) ) ) ) ) );
+	material.roughnessNode = select( isShopGlass, float( 0.14 ), select( isAwning, float( 0.85 ), select( isStore, float( 0.6 ), select( isGlass, glassRough, select( isOrnament, float( 0.8 ), select( isAC, acRough, rough ) ) ) ) ) ); // glass roughness rides on its grime, so dirty panes scatter the reflection
+	material.metalnessNode = float( 0 ); // all dielectric — stone, glass, fabric and the plastic AC shells
+	material.emissiveNode = select( isGlazing, room.xyz.mul( room.w ).mul( glazingEmit ), color( 0x000000 ) ); // lit rooms / shops glow through the panes
+	material.normalNode = bumpNormal( select( isGlass.or( isFrame ).or( isOrnament ).or( isShopGlass ).or( isStore ).or( isAwning ), float( 0 ), select( isAC, acRelief, reliefHeight ) ) ); // glass / frames / ornament / storefronts stay flat; AC has its own louvers
 
 	return material;