PORT MERIDIAN — a living procedural city

The user wants a highly detailed, large 3D city game world in a single HTML file. This will be rendered in an iframe in a browser, so I need a fully self-contained HTML file. I should use Three.js from a CDN (allowed since I include the full HTML with script tags). Let me plan an ambitious but performant 3D city: **Core requirements:** - Single HTML file with Three.js from CDN - Large city — procedural generation - Highly detailed — buildings with windows (emissive at night), roads, street lights, cars, trees, parks - Game world — should be explorable, so I need controls (first-person walk/drive or free fly camera), maybe a day/night cycle, minimap, HUD - Performance — use InstancedMesh heavily, merged geometries, LOD techniques **Architecture plan:** 1. **Procedural city generation:** - Grid-based city with blocks and roads - Different districts: downtown (skyscrapers), commercial, residential (smaller houses), industrial, park zones - Use a seeded random for reproducibility - City size: maybe 20x20 blocks, each block ~60 units, roads 16 units wide → total ~1500+ units across 2. **Rendering optimizations:** - InstancedMesh for: buildings (box instances with varied scales), windows (or use a shader/emissive texture on buildings), street lamps, trees, cars - For windows: the classic approach is a canvas-generated texture with window grid, with emissive map for night. Generate a few building texture variants via canvas, assign randomly. - Actually for InstancedMesh with different textures, we'd need multiple InstancedMeshes (one per texture variant). That's fine — maybe 4-6 building texture variants. - Even better: custom shader with onBeforeCompile to add window emissive patterns procedurally per-instance. That's fancy but complex. Let me do canvas textures — reliable and detailed looking. 3. **Details:** - Roads with lane markings (canvas texture or geometry strips) - Sidewalks (slightly raised boxes) - Street lamps with actual point lights? No — too many. Use emissive spheres + a few real lights near player, or fake with emissive. Street lamp glow via sprite/emissive. - Trees: instanced (trunk cylinder + foliage cone/spheres) — two instanced meshes - Cars: moving! InstancedMesh with per-instance transforms updated each frame along road lanes. Cars headlight glow at night. - Traffic lights maybe. Pedestrians maybe (simple capsule instanced). Could be too much; let's do cars + maybe simple pedestrians walking on sidewalks. - Parks with grass color, trees, benches, fountains - Water? Maybe a river cutting through with a bridge. Could add complexity. A river with animated water shader and bridges would be a great "signature" feature. Let's add a river along one axis with a couple of bridges. 4. **Game elements:** - First-person or third-person character controller: WASD to move, mouse to look (PointerLock), sprint, jump maybe. Or a drivable car mode. Let's do: player walks (pointer lock FPS controls), press F near a car... too complex. Alternative: two modes — walk (FPS) and fly (drone view). Or on-foot + press "E" to enter a car that follows roads? Simpler robust design: FPS walk/run with collision against buildings (grid-based collision since we know block layout), plus optional "drone mode" toggle (press V) for flying. And day/night cycle (press T to toggle or automatic slow cycle). Minimap in corner showing city layout + player position. HUD with time, coordinates, FPS. Actually let me make it more "game": collectibles! Scatter glowing orbs/coins around the city; collect them for score. That gives a goal. Add a compass/minimap, score counter. That makes it a "game world." 5. **Day/night cycle:** - Sun/moon directional light rotating, sky color lerping, building windows emissive at night, street lamps on at night, car headlights, stars at night. - Automatic cycle over ~2-3 minutes, plus key to speed toggle. 6. **Sky:** gradient sky via large sphere with shader or hemisphere light + fog. Add stars (Points) visible at night. Sun sphere. Maybe clouds (instanced billboards or flat boxes drifting). 7. **Collision:** Since city is grid-based, collision can be computed from block data: player can't enter building footprints. Store building AABBs in a spatial hash. For simplicity, check player position against nearby building boxes (from grid lookup). River collision too (don't fall in? or allow swimming? just block at river edges or allow walking on bridges). Let me keep the player on ground: height 1.7 eye level, block at river unless on bridge. Simpler: make river walkable? No — block it. Or allow "falling in" resets... Keep it simple: collision includes river banks unless within bridge strip. Actually even simpler: bridges are at specific roads crossing the river, and those road strips are walkable. Collision check: if position over river and not on a bridge road, push back. 8. **Minimap:** 2D canvas in corner, drawn once with roads/parks/water, with player marker rotating. Redraw marker each frame. Let me now design the city generation concretely: **Grid layout:** - `GRID = 14` blocks per side (so 14x14 = 196 blocks) — large enough. Let's compute size: block size 62, road width 14 → cell = 76. City extent = 14*76 = 1064 units. Hmm "large" — maybe 16x16 blocks → 1216 units. Let's do 16x16. With fog and detail this is a decent city. Could go 20x20 = 1520. Performance concern is mostly instance counts, which are fine with instancing. Draw calls: buildings ~ maybe 1200 instances across a few InstancedMeshes — fine. Let's do 18x18 blocks (~1370 units square). Actually, let me make it slightly rectangular or add a river. - River: runs horizontally through the middle rows (between block rows), replacing one row of blocks with water, width ~ cell*1.2. Bridges at certain columns where main avenues cross. **Districts:** Based on distance from center (downtown): - Center radius < 3 blocks: skyscrapers (tall 60–180 units, dense) - Mid ring: commercial mid-rise (20–60) - Outer: residential (small houses 6–15 with yards, more trees) - Some blocks randomly: park (trees, grass, paths, fountain), or plaza - A couple industrial blocks near edge: wide flat warehouses **Buildings:** - Each block subdivided into lots: for skyscrapers 1–4 buildings per block; for residential, grid of small houses (like 3x3 houses per block with lawns). - Building geometry: BoxGeometry instances. Height varied. Roof details: instanced roof boxes (AC units, water towers) on top of tall buildings, antenna on tallest. - Texture: canvas-generated window textures, several variants (different tint, window pattern, lit ratio). Use MeshStandardMaterial or Lambert with map + emissiveMap; at night increase emissiveIntensity. With InstancedMesh per texture variant. UV mapping on box stretches texture — windows will stretch with building size. To avoid weird stretching, generate texture with many windows (e.g., 8x24 grid) and accept scaling; looks okay. Better approach: set texture.repeat per instance — not possible with instancing easily. Alternative: use a custom shader via onBeforeCompile that computes window pattern in world space — windows sized consistently regardless of building dimensions. That's the pro approach and gives crisp windows. Let me do the shader approach for buildings: one InstancedMesh (or a few for variety), MeshStandardMaterial with onBeforeCompile injecting: - In vertex shader, pass local position and normal, instance scale... Instance matrix available. Compute world position; but window grid should align per-building in world space — buildings are axis-aligned so world-space windows work: window rows at fixed vertical spacing (e.g., every 3.5 units), columns every 3 units in world X or Z depending on face. Fragment: determine face by normal; compute grid coords; window on/off pattern per instance via instance id hash; lit windows at night via uniform. - Colors per instance via instanceColor (body color tint). - Roof/floor bands: near top of building (local Y max) → different color. This is doable. I've done similar before. Key shader chunk edits: - Add varying vWorldPos, vNormalW, vBuildingInfo (e.g., local y normalized for roof detection, random seed from instance). - In fragment, before output, modify diffuseColor and emissive. Computing "local top": in vertex shader, position.y in local box geometry (BoxGeometry centered) — half-height = scale... The instance matrix includes scale. Local position before instanceMatrix. We can pass `vLocalY = position.y;` and also compute building height from instanceMatrix scale: `length((instanceMatrix * vec4(0,1,0,0)).xyz)` roughly = scaleY (no rotation, so instanceMatrix[1].y). Pass vH = instanceMatrix[1][1] * ... hmm, instanceMatrix column 1 = (0, scaleY, 0) since no rotation. So scaleY = instanceMatrix[1].y. Then roof where position.y > 0.5*scaleY - small. Actually BoxGeometry(1,1,1) has position.y in [-0.5,0.5]. After instanceMatrix, world Y = translate + scaleY*posY. So building top at translateY + 0.5*scaleY... The instance matrix translates geometry so that base sits at ground: we set position via matrix compose(position=(x, h/2, z), scale=(w,h,d)). So top world Y = h. vRoofFactor = smoothstep at worldY near h. Window pattern in world space: use world position x or z depending on normal direction. For walls facing ±Z (normal.z ≠ 0), window columns along X; spacing 3.0; window width 1.6. Rows along world Y spacing 3.2, window height 1.7. Ground floor (worldY < 4): storefront — bigger windows / different color. That'd be lovely: ground floor with wider glass. Lit windows at night: hash(cell + instanceSeed) < litRatio → emissive warm color at night. Emissive intensity driven by uniform uNight (0..1). Per-instance color tint via instanceColor — need `#include ` support: enable vertexColors? For InstancedMesh, instanceColor works automatically with `material.vertexColors = false`? Three.js: if instancedMesh.instanceColor is set, USE_INSTANCING_COLOR is defined and color_vertex handles it when material has vertexColors... Actually instanceColor works when you set `mesh.instanceColor` — the WebGLProgram detects it and `#include ` multiplies vColor. It requires material to support color — MeshStandardMaterial does; the define USE_INSTANCING_COLOR gets set automatically when instanceColor exists. Yes, three sets `USE_INSTANCING_COLOR` if geometry/instanceColor present. It works even with vertexColors=false (the chunk is `#if defined(USE_COLOR_ALPHA) || defined(USE_COLOR) || defined(USE_INSTANCING_COLOR)`). Good. But wait — the diffuse color computed from instanceColor multiplies map... We're not using a map, so base diffuse = instanceColor * our shading. In shader we can also access vColor? The color_fragment chunk does `diffuseColor *= vColor` when defines present. We can rely on that. Then windows drawn on top: we override diffuseColor.rgb where window pattern exists. And emissive addition: totalEmissiveRadiance += windowEmissive. I need to be careful writing the onBeforeCompile patch correctly for the Three.js version I use. Let me pin a version: three@0.160.0 or similar from unpkg/jsdelivr. Use non-module build? Modern three no longer ships non-module builds after r160 (deprecated since r150, removed in r160?). The UMD build "three.min.js" was removed around r160. Safer: use ES modules with importmap from CDN: ```html ``` Or use jsdelivr. Also could import PointerLockControls from examples/jsm. But I can implement my own controls easily (avoid dependency on addons; also addons import needs importmap entry). I'll implement custom controls — simple: click to lock pointer, mousemove yaw/pitch, WASD. Actually to be safe across environments, importmap + module from unpkg is fine in modern browsers. Alternative: use https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js. I'll use jsdelivr. Let me also handle WebGL renderer settings: shadows! Shadows from one directional light over a huge city is expensive but doable with a shadow camera following the player (cascade-ish: just a big ortho shadow camera centered on player). Shadow map 2048 or 4096. Buildings castShadow with InstancedMesh works. Let's enable with moderate settings: PCFSoftShadowMap, shadow camera ~250 units around player, 2048 map. Trees, lamps cast too maybe. Cars cast. Ground receives. Performance considerations: 18x18 blocks, buildings maybe 1500–2500 instances total — one draw call per instanced mesh group. Windows in shader — no extra cost. Lamps: ~1000 (2 per block edge?) Let's do lamps along roads: each road segment gets a few lamps. Use InstancedMesh: pole (cylinder), arm+head (merged?), and emissive head (separate instanced mesh with emissive material), plus a light glow sprite at night (instanced? sprites can't instance easily; use Points with texture for glow, or additive quads via InstancedMesh with plane facing camera... simpler: emissive material with bloom-ish fake). Without postprocessing bloom, glow can be faked with a billboard texture using additive blending — InstancedMesh planes always facing camera needs per-frame billboard math for all instances — expensive for 1000+. Alternative: use THREE.Points with large size and a radial gradient texture, sizes attenuated. Points with sizeAttenuation at night for lamp glows — cheap and looks decent. Yes: Points material with canvas radial gradient, transparent, additive, depthWrite false. Toggle opacity with night. Same for car headlights/taillights? Cars move — update point positions in a buffer each frame for a few hundred cars: fine. Traffic: cars as InstancedMesh (box-ish car shape — merge a body box + cabin box + wheels? For instancing, geometry can be a merged BufferGeometry of several boxes — all get same transform. Build a simple low-poly car via merged boxes: body, cabin, 4 wheels (or skip wheels, dark underbody). With per-instance color. Cars follow lanes: each road has 2 directions; cars travel along road center offset by lane, at intersections choose straight/left/right randomly? Full pathfinding: simpler — cars move along a straight line on a road lane, and when they reach the end of the city bounds, wrap around (teleport to start). At intersections, just pass through (no traffic logic). To look plausible: define road lines (horizontal and vertical roads at each grid line), each car assigned axis, direction, lane offset; speed ~ 10-20; wrap at ends. Cars stop at red lights? Too complex; skip, but maybe slow near player? Skip. Cars avoid river: roads that cross river are bridges — fine, cars can cross bridges. Roads along river don't exist (river replaces a block row). So lane lines: for each i in 0..GRID, vertical road at x = start + i*cell; horizontal roads similar except river row replaced... Wait — river replaces one block row, meaning there's no horizontal road at that position? Actually river should run where a road could be, but we replace a row of blocks with water; the roads adjacent remain. Bridges need roads crossing the river: vertical roads cross the river where the river row is. So vertical roads exist across entire length including over the river (bridge), except we only build bridge deck there. Cars on vertical roads cross bridges — fine. Horizontal road at the river line doesn't exist. Good. Also traffic lights at intersections could be simple instanced poles with light boxes — skip or add simple ones at major intersections. Maybe add a few for detail. Optional. Pedestrians: instanced simple people (capsule body + sphere head merged). Walk along sidewalks: random positions on sidewalk paths, move along block perimeters. Simple: each pedestrian assigned a rectangle path around a block's sidewalk, walking around. Update per frame — 300 pedestrians fine. At night reduce? Keep. Trees: parks + street trees. Instanced trunk (cylinder) + instanced foliage (icosahedron blob, 2 sizes, color variance via instanceColor). Collision for trees? Skip (soft). Park content: grass plane (green), path (light strip), fountain (cylinder + water disc animated?), benches (small boxes). Maybe just fountain in some parks. Benches instanced. Ground: big plane with asphalt?? No — ground base is a dark asphalt color; blocks have sidewalk pavement (raised 0.2 box covering block area), roads are the ground with road markings: generate road texture? Roads as geometry: for each road line, a long plane slightly above ground with canvas texture containing dashed center line + lane lines + crosswalks at intersections? Simpler: create one repeating road texture (asphalt with dashed yellow center line), tiling along length; intersections plain asphalt squares. Crosswalks: skip or add via separate quads. Let me do: base ground = asphalt everywhere (big plane, dark). Blocks = sidewalk raised boxes (concrete color) with lot interiors. Then road markings: instanced white dashes along road centerlines (thin boxes 0.02 high), instanced lane edge lines maybe just center dashes. Crosswalk stripes at intersections: instanced white small boxes... many. Alternatively one canvas texture for whole ground: 1370x1370 world → a 4096x4096 texture covering city = ~3 units/pixel — decent for lines? A road is 14 wide → 40px in texture. Dashed lines okay-ish but blurry up close. Hybrid: ground asphalt plane + geometry dashes (crisp). Crosswalks: at each intersection, 4 crosswalks each = ~6 stripes = lots of instances but instanced thin boxes — 300 intersections * 24 stripes = 7200 instances, fine as one InstancedMesh. Actually maybe simplify: crosswalks only at avenue intersections (main roads). Let me include all; instancing handles it. Actually keep count moderate: stripes per crosswalk 5, crosswalks per intersection 4 → 20 per intersection; intersections ~ (GRID+1)^2 = 361 → 7200 instances of thin boxes — okay. Hmm, I need to be careful about total code size and complexity — this is a big single file, but that's the ask ("highly detailed, large"). I'll aim for a well-organized ~1000-1500 line file. **River & bridges:** river horizontal strip across city at some row (e.g., between block row 8 and 9... let's place river occupying the space of one block row + its adjacent roads? Simplest: river occupies the full width of one "cell row" (i.e., replace row of blocks AND the roads within? Roads run between blocks; if I remove a block row, there's still roads at its edges shared with neighbors). Let me define: cell index j from 0..GRID-1 for blocks; block at (i,j) occupies [x0+i*cell + roadW/2, x0+(i+1)*cell - roadW/2] roughly. Roads at x0 + i*cell for i=0..GRID (grid lines) width roadW. River: pick row jr; remove blocks (i, jr) for all i, and remove horizontal grid road at y = line between jr-1 and jr? Let me just say river occupies the block row jr's block strip AND extends to cover the horizontal road at grid line jr (top edge) making water width = blockW + roadW? Hmm. Cleaner: define city origin at (0,0) corner. Roads (grid lines) at positions g_i = i*cell for i=0..GRID (so GRID+1 lines each axis) — wait that gives GRID+1 roads surrounding GRID blocks. Block (i,j) spans [g_i + rw/2, g_{i+1} - rw/2] × [g_j + rw/2, g_{j+1} - rw/2]. River: choose row jr = floor(GRID/2). Water strip covers y ∈ [g_jr - rw/2 - margin? ...]. Let's make water cover exactly the horizontal road at g_jr plus block row jr? That would block the road line g_jr entirely (no horizontal road there) and blocks in row jr removed. Water width = rw + blockH where blockH = cell - rw. So water spans y ∈ [g_jr - rw/2, g_{j+1?}...]. Hmm: block row jr occupies y ∈ [g_jr + rw/2, g_jr + cell - rw/2]. Road at g_jr: y ∈ [g_jr - rw/2, g_jr + rw/2]. Combined: y ∈ [g_jr - rw/2, g_jr + cell - rw/2], width = cell. Nice: river width = cell (76 units). That's wide — dramatic, good for bridges. GRID=18 → city 18*76 = 1368 plus outer edge roads. Fine. Vertical roads at grid lines g_i cross the river → bridges at every vertical road? Maybe bridges only at every 3rd road (avenues) and where vertical road meets water otherwise... if no bridge, the vertical road is interrupted by the river — cars on it would drive into water. So cars on vertical roads: only assign cars to vertical roads with bridges, OR have all vertical roads bridged. Let's make all vertical grid roads have bridges (simple, city like Portland), but make 2 of them fancy wide bridges. Cars cross fine. Also player can cross. River banks: slight quay walls (boxes along edges). Water: plane with animated normal-ish shader — simple custom ShaderMaterial: animated waves via sin, reflect sky color, fresnel-ish. Keep it simple but pretty: semi-transparent blue with moving specular highlights. Or use MeshStandardMaterial with envMap? No envmap. Custom shader for water: color mix by night, moving sine ripples affecting brightness. Good enough. Riverbank collision: player blocked from water except on bridges (bridge deck y raised? Let's keep bridge decks flat at road level, with railings. So walking across feels same). Collision: if player's (x,z) in water strip AND not within any bridge road strip (|x - g_i| < rw/2 for bridge roads — all vertical roads are bridges) → push back. Actually if all vertical roads are bridges, then water is never reachable off-road? No: water strip spans between roads too (block-width segments). Player walking along a horizontal road adjacent to river could step off into water. Block it: treat water as wall at its edges except at bridge x-ranges. Simpler: compute allowed: if z in water band: require |x - nearest g_i| < rw/2 - 0.5. Push out otherwise. OK. **Bridges:** deck (box across water, at road level y≈0.1), railings (thin boxes along both sides, instanced segments), support pillars (cylinders going into water). Maybe arch details. Keep: deck + railings + pillars. **Street lamps:** along roads: for each grid line road, lamps spaced ~ every 38 units alternating sides. Count: vertical roads 19 * (1368/38 ≈ 36) = ~684, same horizontal minus river ≈ ~680 → ~1350 lamps * 3 instanced parts (pole, arm, head) — 3 instanced meshes ~1350 each, fine. Glow points at night. Lamps near river skipped on water sections. Also point lights: too many; instead emissive heads + Points glow + a general "night ambient" boost. Ground pool of light: fake with instanced circle decal on ground under each lamp with additive faint texture at night? That's a nice touch: transparent plane instanced with radial gradient, opacity tied to night uniform — use MeshBasicMaterial with onBeforeCompile to add night uniform? For instanced planes with uniform opacity, can't easily vary per frame unless we set material.opacity globally each frame — that works! material.opacity = night * 0.35. Additive blending, depthWrite false. Yes. **Collectibles (game):** ~40 glowing rotating icosahedrons placed on sidewalks/parks, collected on proximity → score++, sound? No audio maybe tiny WebAudio beep — nice touch, small code. Add mini popup "+1". Keep. Also a timer/counter "orbs X/40". When all collected — message "City fully explored!". **HUD:** - Top-left: title, time of day clock, FPS. - Bottom-left: controls help (collapsible). - Top-right: minimap canvas 180px. - Center: crosshair dot when pointer locked. - Score display. - Time speed / pause key. **Modes:** walk (default). Press V toggles drone/fly mode (fast, no collision, higher). Also SHIFT sprint, SPACE jump (simple gravity). Jump adds fun; collision only horizontal, ground fixed y (bridges flat) — simple. Also maybe press C to toggle... let's not overdo. Keys: WASD move, Mouse look, Shift sprint, Space jump, V fly toggle (in fly: Space up, Ctrl down?), N toggles night instantly, T speeds time, M big map? Let me finalize: - Click to start (pointer lock) - WASD / arrows move; Shift = run; Space = jump / (fly: rise); Ctrl or C = descend in fly; V = toggle fly; N = toggle day/night fast-forward; H = hide help; Esc release. **Day/night:** cycle length ~ 240s real time; can press N to jump to opposite? Or hold T to fast-forward time. I'll implement timeOfDay in [0,24), speed default 24h/180s. Press T toggles 20x speed. Sun angle from time. Sky color gradient: shader sky dome (big sphere, ShaderMaterial with top/bottom colors + sun disc + stars at night). Implementing stars in sky shader via hash — nice. Or separate Points on dome. Shader stars: use fract(sin(dot)) sparkle — can look noisy; use a Points starfield rotated slowly, opacity by night — simpler and pretty. Do Points stars (2000) on sphere radius large, rendered with fog off? Fog affects points... set material fog:false. Fog: THREE.Fog matching horizon color, updated per time of day. Fog gives depth to big city. far ~ 900? City diag ~1900; fog 60→1000. Sky dome must be beyond fog or excluded — skydome material fog:false. Sun/moon: directional light with color/intensity by time; also visible sun sphere (billboard glow) maybe skip visible sun disc except in sky shader gradient. Let's include simple sun in sky shader: disc from sun direction uniform — doable: uniform sunDir; brightness = pow(max(dot(dir, sunDir),0), 800) etc. And moon smaller. Good. **Shadows:** DirectionalLight shadow, camera box ~ ±160 around player, updated position each frame (light.position = player + sunDir*400; target player). Need to update light.target and shadow camera. Works. Shadow acne: bias -0.0005, normalBias 0.5. At night: sun below horizon → intensity 0; moonlight dim bluish directional (reuse same light, swap color/intensity and direction opposite). Fine: when sun elevation < 0 use moon direction. **Building windows lit at night:** uniform uNight in building shader; also lit ratio varies per instance. Interior lights random on/off per window with slight time flicker? Static per window is fine; maybe slow stochastic: lit = hash(cellId + floor(uTime*0.05) offset per window)? Keep static per window but with per-instance seed; that's fine. Window shader detail plan (fragment): ``` varying vec3 vWPos; varying vec3 vNrm; varying float vSeed; varying float vTop; // vTop = world Y of building top uniform float uNight; uniform float uTime; ``` Compute: - if abs(vNrm.y) > 0.5 → roof: roof color darker gray tinted by instance color slightly; maybe roof edge band. Also skip windows. - else wall: facade base color = vColor (instance). Choose coordinate u = (abs(nrm.x)>0.5 ? vWPos.z : vWPos.x); v = vWPos.y. - Window grid: spacing su = 3.0, sv = 3.4; window size wu=1.7, wv=1.9. cellId = floor(u/su), floor((v)/sv). - Ground floor: v < 4.5 → storefront: bigger glass (wider), color darker, some emissive at night for storefronts (shops lit). - fract coords fu = fract(u/su), fv = fract(v/sv). Window if fu in [0.12,0.12+wu/su] etc. Let me define window coverage properly: fuCentered = abs(fu-0.5), fvC = abs(fv-0.5); window if fuC < 0.36 && fvC < 0.34 (roughly 72% x 68% of cell) → window rect. Margins give pillar look. - Window frame: darker tint around edge: if within window rect, glass color = mix(dark blue-gray, skyish) with slight vertical gradient; frame: if near boundary (0.30..0.36 band) → dark frame color. - Lit: hash(cellId, vSeed) → r; lit if r < litRatio(vSeed-based, e.g. 0.25..0.55). Warm colors varying: colorTemp = hash2 → mix(orange, pale yellow). Emissive += litColor * uNight * intensity. Also faint emissive day (sky reflection)? no. - Horizontal floor separators: every sv line slight darker band → architectural. - Roof: color = vColor * 0.55 gray-ish... but instanceColor is facade tint; roof use vec3(0.25) + slight. Also parapet: near vTop darker band. Also buildings base at ground: bottom 0.5 darker plinth. Vertex shader additions: need world position — standard has `worldPosition` only in some chunks... In Lambert/Standard fragment, there's no worldPos varying by default. Add in vertex: after `#include ` and `#include ` — better to compute after instanceMatrix applied: `#include ` defines worldPosition only when needed (shadows/env). I'll add my own: ``` vec3 wp = (modelMatrix * instanceMatrix * vec4(transformed,1.0)).xyz; // model is identity but fine ``` Careful: with instancing, three's `project_vertex` handles instanceMatrix inside `begin_vertex`?? Actually in three, `#include ` gives `transformed = position`; instancing applied in `project_vertex`? No — instancing matrix applied in `#include `? Let me recall: chunk `project_vertex.glsl.js`: ``` vec4 mvPosition = vec4( transformed, 1.0 ); #ifdef USE_INSTANCING mvPosition = instanceMatrix * mvPosition; #endif mvPosition = modelViewMatrix * mvPosition; gl_Position = projectionMatrix * mvPosition; ``` And `defaultnormal_vertex` handles instanceMatrix for normals. `worldpos_vertex`: ``` #if defined( USE_ENVMAP ) || defined( DISTANCE ) || defined ( USE_SHADOWMAP ) || defined ( USE_TRANSMISSION ) || NUM_SPOT_LIGHT_COORDS > 0 vec4 worldPosition = vec4( transformed, 1.0 ); #ifdef USE_INSTANCING worldPosition = instanceMatrix * worldPosition; #endif worldPosition = modelMatrix * worldPosition; #endif ``` So worldPosition might not exist. I'll inject my own varying after `#include `: ``` vLocalPos = position; // before? position available vec4 wp4 = vec4(transformed,1.0); #ifdef USE_INSTANCING wp4 = instanceMatrix * wp4; #endif vWPos = (modelMatrix * wp4).xyz; vSeed = ... derive from instanceMatrix translation: e.g., fract(instanceMatrix[3][0]*0.342 + instanceMatrix[3][2]*0.126) hmm we can compute seed in vertex from instance position: float s = fract(sin(dot(instanceMatrix[3].xz, vec2(12.9898,78.233)))*43758.5453); vTop = instanceMatrix[3].y + 0.5*instanceMatrix[1][1]; // top world Y (no rotation) ``` Wait — but buildings placed with center at y = h/2 via matrix: position=(x, h/2, z), scale=(w,h,d). So instanceMatrix[3].y = h/2, [1][1]=h → top = h/2 + h/2 = h. vNrm: transform normal by instanceMatrix (rotation-free: normals scale? For axis-aligned scaling without rotation, transforming normal by instanceMatrix then normalize works fine since axes orthogonal). Use `vNrm = normalize(mat3(instanceMatrix) * normal);` then by modelMatrix (identity, skip). Actually defaultnormal_vertex computes transformedNormal; simpler to compute mine. Since I use non-uniform scale, normalize needed — fine for axis-aligned normals. Roof detection: vWPos.y close to vTop (within 0.3) AND abs(vNrm.y) > 0.5. Sides of building: all four walls get windows based on world x/z — consistent alignment across buildings (like modulor grid) — actually looks cool, city on a grid module. For residential houses, windows via same shader with smaller spacing? Different instanced mesh with different uniforms (window scale) — I'll create two building materials: towers (commercial) and houses (residential with different pattern, maybe pitched roofs?). Pitched roofs: houses could have a roof prism — separate instanced geometry (a triangular prism) colored. Let's add: house = base box (shader windows, 2 floors) + pitched roof instanced mesh (color dark red/gray variants via instanceColor) + chimney maybe skip. That adds nice variety. Industrial: wide flat boxes with few windows (shader with sparse) + big door ground floor. Use tower material with different uniforms? Create separate material instance with uniforms {windowScale bigger, litRatio lower}. Easy — materials are cloned with different uniforms. OK. Let me also consider **ground floor storefronts** only on commercial streets — apply to all tower buildings, fine. **Roof clutter:** for buildings taller than 40: instanced boxes (AC units 1–3 per roof), water tower (cylinder + legs? just cylinder) on some, antenna (thin cylinder) on tallest. All instanced meshes with counts few hundred. Good detail payoff. **Billboards?** Big screens on some buildings with animated canvas texture (ads) — one or two animated billboards with CanvasTexture updated every few frames showing scrolling text/colors. Nice signature. Place 2-3 billboards on tall buildings facing center. Implement: PlaneGeometry with CanvasTexture, update in interval. Emissive at night. Let's include one Times-Square-ish plaza? Maybe simpler: 3 billboards at random tall buildings. With slight glow. Doable, moderate code. **Sound:** ambient? WebAudio city ambience (noise-based hum + occasional horn beeps). Small: create noise buffer loop + gain by night. Beep on collect. Also engine? skip. I'll add simple: collect "ding" (oscillator), and toggleable ambient wind/traffic hum (filtered noise). Muted until user interacts (AudioContext resume on pointer lock). Add M to mute. Keep code compact (~40 lines). **Minimap:** offscreen canvas 256px: draw blocks (dark), roads (lines), parks (green), water (blue), bridges. Each frame draw to visible canvas + player arrow + orbs (yellow dots) + rotation fixed north-up with player marker; or rotate with player. North-up simpler & readable. Add viewport rectangle? skip. Also add "collected" orbs removed. **Collision detail:** buildings: per block, list of building AABBs (x0,z0,x1,z1). Blocks stored in 2D array; player checks current block & neighbors. Block lookup from world pos: i = floor(x/cell) clamp; but building only inside block interior. Also lamp/trees skip. Fountain: circle collision in parks. River as described. City bounds: clamp to [ -m, size+m ]. Also cars vs player: cars could hit player? Ignore — or gentle push? Ignore for simplicity; note cars pass through (it's a chill explorer). Hmm "game world" — maybe fine. Actually, let's make cars slightly interactive: if player touches a car... nothing. Keep. **Data structures:** ```js const GRID = 18, CELL = 76, ROAD = 14, BLOCK = CELL - ROAD; // 62 const SIZE = GRID * CELL; // 1368 // roads at i*CELL for i in 0..GRID → coordinates 0..1368 ``` Center city at origin: offset = -SIZE/2. World x of grid line i: i*CELL - SIZE/2. River row jr = 9 (blocks row index) with water band z ∈ [line(jr) - ROAD/2, line(jr) + CELL - ROAD/2] where line(i) = i*CELL - SIZE/2. Hmm check: block row jr occupies z ∈ [line(jr)+R/2, line(jr+1)-R/2] = [line(jr)+R/2, line(jr)+CELL - R/2]. Road at line(jr): [line(jr)-R/2, line(jr)+R/2]. Union: [line(jr)-R/2, line(jr)+CELL-R/2] → width = CELL (76). And horizontal grid road at line(jr) is gone (submerged), but roads at line(jr+1) still exist (south bank road) and line(jr) north of it... wait line(jr) road is the north road of block row jr; removing it means block row (jr-1) has no road on its south side? Its south road is line(jr) — that road is now water. Hmm, that leaves row jr-1 blocks adjacent to water directly (quay). And row jr blocks removed → water spans from line(jr)-R/2 to line(jr+1)-R/2, then road line(jr+1) is the south bank street. Good — two bank streets: line(jr)-R/2 is quay edge; the north bank road = line(jr)?? No wait. Let me re-set: I want water to occupy the block row AND one road line. If I remove the road at line(jr) (north road of the block row) then north bank is the road at line(jr-?)... Grid lines: ..., line(jr-1) [road between row jr-2? no...]. Let me index: block row j spans between grid lines j and j+1. Roads exist at grid lines 0..GRID. Block row jr spans grid lines jr..jr+1. If water = block row jr + grid line jr: water z from line(jr)-R/2 to line(jr+1)-R/2. North bank street = grid line jr-? The nearest remaining horizontal road north of water is grid line jr-1+... hmm grid line jr is removed, so nearest north is line(jr)-? grid line jr - CELL = line(jr-1) which is road between block rows jr-2 and jr-1?? No: line(jr-1) separates block rows jr-2 and jr-1. So block row jr-1 is bounded by lines jr-1 and jr; line jr gone → block row jr-1's south edge = water directly. So blocks in row jr-1 sit on the waterfront (nice — waterfront buildings!). And south: water ends at line(jr+1)-R/2, which is the north edge of road line(jr+1)?? Road line(jr+1) spans z ∈ [line(jr+1)-R/2, line(jr+1)+R/2] — water's south edge touches road at line(jr+1) — so south bank street exists = grid line jr+1, and block row jr+1 south of it intact. Slight asymmetry (north side blocks touch water, south has street) — acceptable, or remove grid line jr+1 too and make water = just the block row width + half roads both sides: water z ∈ [line(jr) + R/2 - ? ...]. Simplest symmetric: water covers block row jr only extended into both adjacent roads by R/2 each: z ∈ [line(jr)+R/2-R/2? ...]. Block row jr z-range: [line(jr)+R/2, line(jr+1)-R/2]. Extend by R/2 both sides: [line(jr), line(jr+1)] — that's removing BOTH adjacent roads. Then both banks: north = line(jr)-? block row jr-1's south road line(jr) removed... ugh same issue. Alternative clean approach: keep both bank roads; water = block strip only widened slightly (say water covers [line(jr)+R/2 - 4, line(jr+1)-R/2 + 4]) with quay walls at the water edge inside road area?? Roads at line(jr) and line(jr+1) remain as bank streets. Water width = CELL - R + 8 = 62+8=70. Banks: quay wall boxes along water edges (the +4 strip eats into the road? roads 14 wide: 4 into road leaves 10 — fine, like a widened promenade... actually the quay eats sidewalk? roads have no sidewalk; blocks do. Let me instead widen water INTO the blocks: water = block strip [line(jr)+R/2 - 3, line(jr+1)-R/2 + 3], 3 units into each block row → but block row jr doesn't exist (it's water), so it eats into rows jr-1 and jr+1's block area — those blocks just have their south/north 3 units as quay. Simpler: water = exactly block strip [line(jr)+R/2, line(jr+1)-R/2], width 62. Quay walls at edges (0.6 high boxes along both banks full length), bank roads on both sides. Bridges: vertical roads at grid lines cross water over 62 width. I think exact-block-strip water (62 wide) is clean. Both banks have streets (grid lines jr and jr+1... wait no: block row jr is BETWEEN grid lines jr and jr+1 — those are its bounding roads; if the block is water, the roads remain, giving two bank streets, and water spans between them minus road widths. So: riverRow jr=8 (blocks (i,8) all water). Water rect: x ∈ [line(0)-R/2?, full width incl. beyond? extend past city edges a bit for aesthetics: x from -60 to SIZE+60 relative], z ∈ [line(8)+R/2, line(9)-R/2] where line(j) = j*CELL - SIZE/2. All vertical roads (grid lines i=0..GRID) bridge across. 19 bridges? That's a lot; maybe make bridges at i where i%3==0 or so, and other vertical roads just... they'd dead-end at water. Cars assigned only to bridged vertical roads for through traffic; non-bridged vertical roads: have cars too? They'd cross water without bridge — bad. Options: all 19 have bridges (a canal-city like Amsterdam with many bridges — actually charming!) or restrict. Bridges at every vertical road = 19 bridges, each 62 long, with railings and pillars: fine and looks cool. Let's do all — coherent traffic. Hmm, but visual interest: make bridges vary: every 3rd (i%3==1?) is a "grand" bridge with towers/arches; others simple. Cars: all vertical roads usable. Good. Water y level: -1.2 below road (road at 0). Riverbed dark plane under water not needed (water opaque-ish). Water material: custom shader with moving ripples, slight transparency, night darkening, plus moving "sparkle" at day. Quay walls: dark stone boxes from z edges, height from -2 to +0.5 → actually the block strip sides: walls along water at both banks: thin box length = city width, at water edge, top y=0.5 (above road 0 by 0.5)? Roads are at y=0 ground; quay wall rises 0.6 above ground at the water edge — a barrier. Plus railing? Simple wall with lamp posts along the waterfront. Nice: waterfront promenade with lamps + trees + benches. Add those along both banks — pretty! Collision: water blocked: if z in waterZ range and not on bridge (x within road strip ±R/2-1) → push back (treat as wall: push to nearest allowed z or reflect movement axis). Implement in collide(): after tentative move, if in forbidden region, cancel z-movement and/or x-movement depending. Simplify: revert to previous position axis-wise. Bridge deck height: same as road (0) — fine, simple. Bridge railings along deck edges: collision optional; skip railing collision? If player walks on bridge near edge, railing should block — add: on bridge (z in water z-range), clamp x to [roadCenter-R/2+0.7, roadCenter+R/2-0.7]. OK easy. **Parks:** probability: blocks with dist from center in mid ring & random ~8% → park. Park: grass box (raised 0.25, green), perimeter sidewalk? The block already has sidewalk pad. So park = grass area inset inside sidewalk, diagonal paths (two crossing light strips), fountain at center (some parks), trees scattered (8-14), benches (2-6), lamps (2-4). Also a pond in one? skip. **Plaza block:** near center 1 block = plaza with big fountain + benches + patterned ground? Could be cool: "Central Plaza". Make the block at center-ish a plaza with large fountain, statue? Keep moderate: paved block with fountain center, trees corners, many benches, billboards facing? Let's make center block a park with grand fountain — landmark. Signature moment! **Grand fountain:** cylinder basin (radius 8), inner column, water jet? Animated water: cone of particles? Simple: animated shader disc + vertical translucent cylinder "spray" + points spray? Keep: basin + center pillar + water disc (same water shader) + maybe a Points spray with animated positions (300 particles rising and falling) — juicy detail, moderate code. I'll include simple particle spray using Points with per-frame update (cheap). **Cars details:** body colors random (instanceColor), headlights emissive front (separate instanced small boxes? or bake into material...). Simpler: two Points systems: white points at car front positions (updated with cars) + red at back — at night, additive glow. At day, faint. Points positions updated each frame from car transforms — 300 cars * 2 = 600 points update — fine. Headlight actual illumination skip. Car geometry: build merged: body box (1.9w x 0.55h x 4.4l), cabin box (1.7 x 0.5 x 2.2 offset up/back slightly), 4 wheels? wheels as small dark boxes (0.6 x 0.6 x 0.35)... To keep one InstancedMesh with instanceColor: colors apply to whole car (wheels tinted same — acceptable? wheels dark because... they'd be body color. Use vertex colors in merged geometry to darken wheels/cabin! Merge with vertex colors: cabin darker (windows black-ish), wheels dark, body white → multiplied by instanceColor gives colored body + dark windows/wheels. Merging geometries with vertex colors manually: I can construct BufferGeometries, set color attribute, merge via BufferGeometryUtils... importing addons — importmap needs "three/addons/" entry. I can add importmap entry for addons: `"three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/"` and import BufferGeometryUtils. That's fine. Or write my own merge (concatenate position/normal/color/index). I'll just import addons utils — one import, reliable. But note: addons must match version. Use jsdelivr with pinned 0.160.0 for both. I'll include importmap: ```json {"imports": { "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js", "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/" }} ``` Use `import { mergeGeometries } from 'three/addons/utils/BufferGeometryUtils.js';` **Pedestrians:** merged: body capsule-ish (cylinder+sphere? use capsule geometry r0.25 h0.6), head sphere 0.18, legs? keep body+head. Colors varied (instanceColor on body; head skin tone? single mesh so head shares color — heads skin-ish if color light... mix: use vertex colors: body white (instance tint), head skin fixed (0.9,0.75,0.6) * color? That'd tint head too. Alternative: two instanced meshes (bodies tinted, heads skin) — 2 draw calls, fine. Legs animate? bobbing: offset y by sin small while walking + face direction. Update matrices per frame for ~250 → ok. Ped paths: around block perimeter on sidewalk: parametric t along rectangle perimeter, position = rectangle point, facing tangent. Random speed. Night: fewer? keep. **Trees:** trunk: cylinder(0.18,0.25,2.2) brown; foliage: 2 stacked spheres or icosahedron scaled — use dodecahedron flat-shaded for stylized look with slight per-instance color variation (greens). Two instanced meshes. Trees along: park interiors, residential street edges (on sidewalk near road every ~15 units with probability), waterfront. Counts maybe 1200. Also fall colors variety? green shades. **Benches:** merged small geometry (seat + back + legs) instanced, dark wood color — place in parks & waterfront. ~200. **Lamp glow ground decals:** instanced circle planes. **Hydrants?** small red instanced cylinders at some corners — cheap detail, add if space. Maybe skip to limit scope... include hydrants — tiny code (one InstancedMesh cylinder+sphere cap merged). Eh — I'll include if line budget allows; probably fine. **Traffic lights at intersections:** every intersection? 19x19=361 * 4 poles — heavy-ish but instanced. Let's place at avenue crossings only (i%3==0 && j%3==0)? Avenue roads: main roads every 3rd grid line wider? All roads same width for simplicity; "avenues" just have trees/lamps denser and traffic lights. Hmm — differentiate: make every 3rd road an "avenue": has median with trees? That's lovely: median strip 2 wide with trees down the center! Then lanes 5.5 each side. Markings adjust. Let me implement: roads width 14; if avenue: median box (2 wide, 0.15 high, grass color or paved) with trees every 12 units along it, lamps at ends? Traffic lights at avenue intersections (i%3==0, j%3==0): pole + horizontal arm + 3-light box; lights as emissive small spheres (3 instanced meshes? one instanced with vertex colors, emissive toggled by time cycle? Traffic light cycling: all intersections share cycle — red/green by time → 2 instanced meshes for red-on and green-on sets... complexity. Simplify: traffic lights static decoration with all red-ish? Fake cycle: single instanced mesh lights where emissive color cycles globally by time — like all showing same phase — via material onBeforeCompile uniform uPhase choose which of 3 small boxes lit... it's per-face positions in merged geometry — hard. Simplify to: traffic light poles with a small box head having 3 dots texture? Use canvas texture with 3 lights, swap texture (offset) every few seconds globally — one material, uniform texture offset — ALL lights sync but that's okay (city-wide phase). Implement: one texture with 3 light states? Use single material with emissiveMap = canvas 3-cell; shift uv via texture.offset cycling 0,1/3,2/3. But geometry uv per light head — each instance needs uv covering one cell... With texture.offset all instances sample same shifted cell — works! Canvas: 3 stacked cells (red, yellow, green states each showing one lit). texture.repeat set to (1, 1/3) then offset.y cycles. Need heads geometry with uv 0..1 mapping the cell. Merged pole+arm+head: uv on head box only matters. Manageable but adds complexity. Time budget: this is optional garnish. Decide: include simple version — pole + arm + head box with emissive canvas texture cycling. ~100 lines? ~40. Worth it for "game world" feel — cars don't obey though (they'd crash crossing... whatever, ambient). Maybe skip traffic lights to keep file manageable, and instead ensure lamps/trees/medians which are cheaper visually-rich. Hmm "highly detailed" — traffic lights are iconic. Let me include a compact version: instanced merged pole+arm+head; head material separate instanced mesh with the canvas texture (two instanced meshes: metal parts, head with texture). Cycle texture offset by time (3s each phase). Include. Wait — but avenue medians with trees: cars drive at lane offsets ±(road/4); median 2 wide at center — lanes at ±3.5 from center: road half 7, median half 1, lane centers at (1+7)/2 = 4? Lane width (7-1)=6 → lane center at 1+3=4. For normal roads lane center at 3.5. Two lane-offset values per road type. Fine. Also dashes on roads: center line yellow dashes on normal roads; avenue has median instead (no dashes) plus white side lines. Implement instanced dashes: skip where avenue (median covers). Also crosswalks at intersections: white stripes... let me include crosswalks on all intersections' 4 sides: each crosswalk = 5 stripes (0.6 x 3.2 boxes) → per intersection 20 → 361*20 = 7220 instances — one InstancedMesh thin boxes at y=0.02, fine. Hmm but intersections of avenues with medians — median would run into intersection; end medians before intersections (stop at block edges) so intersection area clear. Crosswalk stripes across roads at intersection edges. OK. Stop lines? skip. **Numbers check (instances):** - Tower/commercial buildings: ~ 18x18 blocks; center 5x5=25 blocks tall (avg 3 buildings) = 75; mid ring ~ 120 blocks * 4 = 480; houses ~ 60 blocks * 6 = 360 (box + roof = 720 instanced across 2 meshes); industrial ~ 10 blocks * 2. Total building instances < 1500. - Windows: shader — free. - Lamps ~ 1300 * parts. - Trees ~ 1500 *2 meshes. - Cars 220. - Pedestrians 260 *2. - Benches 220, hydrants 150, dashes ~ (19 roads x 1368/12 dashes=114) *2 axes * minus avenues ≈ 3000, crosswalks 7000, roofclutter 800, decals 1300. Total instanced meshes ~ 25 draw calls. Triangles: buildings boxes trivial; trees icosahedron detail 1 (~80 tris) *1500=120k; fine. **Ground plane:** one big plane 1600x1600 asphalt? Actually ground under blocks should be... blocks covered by sidewalk pads so ground barely visible except roads. Ground = asphalt dark. Sidewalk pads: instanced boxes per block (18x18 minus water row ≈ 323 pads) with concrete color — could have subtle expansion joint texture via shader? Use canvas texture with grid lines, repeat per block via uv — instanced so same texture everywhere — fine, joints every ~2m via repeat 31? texture 512px with grid lines at edges; set repeat so each pad maps ~ 62/2=31 tiles: geometry box UVs are 0..1 per face; set texture.repeat=(31,31)?? Repeat on texture shared across meshes — pads only use this texture; fine: repeat 31,31 gives 2m joints. But box side faces would also tile — ok. Curbs: pads raised 0.22 → sides visible as curb (concrete color from same texture — acceptable). **Ground under blocks vs pads:** pads cover blocks; ground plane visible at roads. Also outside city: surround with... environment beyond city: dark grass? Let city sit on large ground; beyond city edge roads, add ring of low-detail "suburb" or just grass + trees + fog hides distance. Add outer grass ring with scattered trees + maybe distant hills? Fog will hide. Simple: ground plane huge (4000) with asphalt only within city bounds? Two planes: asphalt plane city-sized (slightly larger), grass plane huge beneath/around at y-0.01. Beyond city edge: grass + tree instancing scattered (200 trees) + a few far silhouette buildings? Keep: grass + outer trees + fog. Good. Skyline: to feel "large", add distant low-detail building silhouettes outside city? With fog at 1000 far they'd be barely visible... Set fog far 1400 and add outer ring of tall dark "background towers" instanced (no windows shader — simple dark boxes, cheap, 200) at radius 900-1300 for skyline depth at sunset. Nice depth cue. Include simple ones. **Minimap generation** from same data (blocks types, water, roads, parks). **HUD design:** nice glassy dark panels, custom font via Google fonts? Iframe may block external fonts? It's fine to load from CDN; use a distinctive font like "Rajdhani" or "Chakra Petch" for HUD (game feel). Add fallback monospace. Loading overlay with progress + "Enter City" button (pointer lock needs user gesture). Start screen with title "NEON HARBOR" or "GRAND CITY". City name generator fun: "PORT MERIDIAN". Title screen: dark with animated? Keep simple gradient + instructions. **Performance target:** instancing keeps it smooth. Shadow: 2048 map covering 300x300 around player. Buildings cast/receive shadows via instancing shader? Custom depth material for shadows uses standard depth — building instanced mesh castShadow=true works (three handles instancing in depth material). Trees cast shadow: yes. Cars cast: yes (moving shadow!). Lamps cast: maybe skip to reduce shadow draw. Ground receive. Water no shadow. **Time-of-day palette:** keyframes: night(0h), dawn(6), day(12), dusk(18) — interpolate sky colors, fog, sun intensity/color, ambient/hemi, night factor (0 day, 1 night, ramps 17.5-19.5 etc). Implement small gradient sampler with color stops. **Code organization in file:** 1. HTML/CSS (HUD, start overlay, minimap canvas, help, vignette). 2. Module script: - imports - seeded RNG - config constants - renderer/scene/camera/lights/sky/stars/fog - helpers: canvas textures (lamp glow radial, star? points texture, billboard ads, traffic light) - city generation (data: blocks[], roads, bridges, water) - building shader material factory - instanced meshes creation (buildings towers, houses, roofs, industrial, roofclutter, lamps, trees, benches, hydrants, dashes, crosswalks, medians, decals, traffic lights, background towers) - water + fountain - billboards (canvas animated) - cars + traffic update - pedestrians - orbs collectibles - player controller + collision - day/night update - minimap - audio - main loop - resize, events Let me carefully write building shader. Material factory (MeshStandardMaterial-based? Standard has more uniforms & lights; Lambert cheaper & sufficient with directional+hemi. Use MeshLambertMaterial? onBeforeCompile works same. Lambert supports emissive. Let's use Lambert for buildings (perf), Standard for maybe water custom anyway. Cars/peds: Lambert with vertex colors. Building material: ```js function makeBuildingMat(opts){ // windowW, windowH, spacing, litRatio, roofColor, floorH... const m = new THREE.MeshLambertMaterial({ color: 0xffffff }); // instanceColor multiplies m.onBeforeCompile = (s)=>{ s.uniforms.uNight = uNight; // shared uniform object s.uniforms.uTime = uTime; s.vertexShader = s.vertexShader .replace('#include ', '#include \n varying vec3 vWPos; varying vec3 vNrm2; varying float vSeed; varying float vTop; varying vec2 vBSize;') .replace('#include ', `#include vec4 wpb = vec4(transformed,1.0); #ifdef USE_INSTANCING wpb = instanceMatrix * wpb; vBSize = vec2(instanceMatrix[0].x, instanceMatrix[2].z); vTop = instanceMatrix[3].y + 0.5*instanceMatrix[1].y; vSeed = fract(sin(dot(instanceMatrix[3].xz, vec2(127.1,311.7)))*43758.5453); #else vBSize = vec2(1.0); vTop = 1.0; vSeed = 0.0; #endif vWPos = (modelMatrix * wpb).xyz; vNrm2 = normal; // scaled later? need instance rotation... buildings axis-aligned; normal (0,±1,0),(±1,0,0),(0,0,±1) local; scale same on that axis only → sign preserved. Use local normal directly! Since faces axis aligned, decide face by abs components of local normal — no transform needed. `); ``` Local normal suffices (axis-aligned boxes, no rotation). face = abs(n.x)>0.5 ? X : (abs(n.y)>0.5 ? Y : Z). Fragment: ``` s.fragmentShader = s.fragmentShader .replace('#include ', `#include varying vec3 vWPos; varying vec3 vNrm2; varying float vSeed; varying float vTop; varying vec2 vBSize; uniform float uNight; uniform float uTime; float hash(vec2 p){ return fract(sin(dot(p, vec2(127.1,311.7)))*43758.5453); }`) .replace('#include ', ` // before output; insert our shading vec3 n = abs(vNrm2); vec3 base = vColor; // wait: vColor only exists if defines; with instanceColor, USE_INSTANCING_COLOR set and color_pars sets varying vColor. In fragment, after '#include ' diffuseColor.rgb *= vColor. So at dithering stage, diffuseColor already includes it? outgoingLight already computed! dithering_fragment is at the very END, after output_fragment. Hmm. ``` Where to inject window coloring: best after `#include `? That's early — modifies diffuseColor before lighting. Emissive for lit windows: totalEmissiveRadiance is available; emissive chunk `#include ` is where totalEmissiveRadiance gets map. I can inject window calc right after color_fragment: modify diffuseColor.rgb for glass/frame/roof AND set a varying-computed window emissive into a global var, then add to totalEmissiveRadiance by patching emissivemap_fragment (append `totalEmissiveRadiance += winEmissive;`). Order: color_fragment comes before emissivemap_fragment? Standard/Lambert fragment order: map_fragment, color_fragment, alphamap, ... then later lights: ... emissivemap_fragment happens before lights_fragment? Sequence in meshlambert: ... `#include ` then `#include `? Actually lambert frag: after roughness stuff? Lambert: `#include ` ... later `#include `? Yes all materials have emissivemap_fragment (even without emissiveMap it's a no-op chunk that references totalEmissiveRadiance which was initialized from emissive uniform earlier). So plan: - Declare `vec3 winEm = vec3(0);` + window computation code injecting after `#include `, modifying diffuseColor.rgb and winEm. - Replace `#include ` with `#include \n totalEmissiveRadiance += winEm;` diffuseColor at that point = material.color(white) * vColor (instance tint) — after color_fragment chunk multiplied vColor (instanceColor). But is vColor available in fragment? color_pars_fragment declares varying vColor if USE_COLOR or USE_INSTANCING_COLOR? Chunk color_pars_fragment: `#if defined( USE_COLOR_ALPHA ) varying vec4 vColor; #elif defined( USE_COLOR ) varying vec3 vColor;` — hmm does it include instancing color? Let me recall three r160 color_pars_fragment: ``` #if defined( USE_COLOR_ALPHA ) varying vec4 vColor; #elif defined( USE_COLOR ) varying vec3 vColor; #endif ``` Hmm, so fragment vColor only when USE_COLOR?? And USE_INSTANCING_COLOR defines... let me check color_vertex: ``` #if defined( USE_COLOR_ALPHA ) vColor = vec4( 1.0 ); #elif defined( USE_COLOR ) || defined( USE_INSTANCING_COLOR ) vColor = vec3( 1.0 ); #endif ... #ifdef USE_INSTANCING_COLOR vColor.xyz *= instanceColor.xyz; #endif ``` And color_pars_vertex: ``` #if defined( USE_COLOR_ALPHA ) varying vec4 vColor; #elif defined( USE_COLOR ) || defined( USE_INSTANCING_COLOR ) varying vec3 vColor; #endif ``` color_pars_fragment r160 (I believe) matches with `#elif defined( USE_COLOR ) || defined( USE_INSTANCING_COLOR )` — hmm, I recall a fix where fragment needed it too. In r160 color_pars_fragment: Actually let me look at recent three source (r160) src/renderers/shaders/ShaderChunk/color_pars_fragment.glsl.js: ``` #if defined( USE_COLOR_ALPHA ) varying vec4 vColor; #elif defined( USE_COLOR ) varying vec3 vColor; #endif ``` I genuinely am not 100% sure whether USE_INSTANCING_COLOR is included there. Risk! To be safe, I'll pass my own varying for instance color? Can't access instanceColor in vertex? instanceColor attribute exists when defined. I can declare `attribute vec3 instanceColor;` guarded... If USE_INSTANCING_COLOR is set by renderer (it is, when mesh.instanceColor set), then in vertex `instanceColor` attribute is automatically declared? The attribute declaration comes from... three injects `#ifdef USE_INSTANCING_COLOR attribute vec3 instanceColor; #endif` in common? It's in the program header (WebGLProgram generates). The declaration is added in WebGLProgram vertex prefix when parameter.instancingColor: `#ifdef USE_INSTANCING_COLOR\n attribute vec3 instanceColor;\n #endif`? Hmm — actually in WebGLProgram.js the vertex prefix includes: ``` parameters.instancingColor ? '#define USE_INSTANCING_COLOR' : '', ``` and attribute declaration... The attribute must be declared somewhere — in prefixVertex there is: ``` '#ifdef USE_INSTANCING', ' attribute mat4 instanceMatrix;', '#endif', '#ifdef USE_INSTANCING_COLOR', ' attribute vec3 instanceColor;', '#endif', ``` Yes! WebGLProgram prefixVertex declares these attributes. So in my onBeforeCompile vertex shader, `instanceColor` is declared when instanceColor exists. So safest: my own varying `vTint`: vertex: `#ifdef USE_INSTANCING_COLOR vTint = instanceColor; #else vTint = vec3(1.0); #endif` But careful: onBeforeCompile string replacement — shader compiled once per material+geometry situation; the define is per-program — since mesh always has instanceColor, always defined. But if not defined (no instanceColor), compile error. I'll guard with #ifdef. So don't rely on vColor at all: use my own vTint. And don't set material.vertexColors. diffuseColor starts as material.color (white) — I'll ignore diffuseColor entirely and set my own computed albedo: after color_fragment, override: `diffuseColor.rgb = myAlbedo;` Good — deterministic. Hmm wait — but I might not even need instanceColor three-side if I use my own attribute? No, instanceColor mechanism is fine (it's an InstancedBufferAttribute automatically bound). Using it just for the declaration & attribute plumbing. OK. Alternatively even simpler: encode tint via seed in shader: derive per-instance palette from vSeed — e.g., facade colors from a curated set: pick from 6 colors by hash(vSeed). That removes instanceColor dependence entirely! Buildings' facade colors chosen by hash — but then I can't control exactly which building gets which color... fine aesthetically (random from curated palette). And lit ratio from hash too. This avoids the attribute plumbing risk entirely. DO: colors from vSeed hash. For other instanced meshes (cars, trees, houses roofs) I still want instanceColor... Cars/trees: does instanceColor->vColor in fragment work in r160? Standard materials with `vertexColors=false` but instanceColor set — the chunks handle it as shown; color_pars_fragment in r160... I need certainty. Let me check actual r160 color_pars_fragment source from memory of the repo... I recall in r155+: color_pars_fragment.glsl.js: ``` #if defined( USE_COLOR_ALPHA ) varying vec4 vColor; #elif defined( USE_COLOR ) || defined( USE_INSTANCING_COLOR ) || defined( USE_BATCHING_COLOR ) varying vec3 vColor; #endif ``` Batching color was added r16x... r160? BatchedMesh added r159, batching color maybe r161+. Hmm. I know for a fact instanceColor with MeshStandardMaterial/Lambert works out of the box in examples like instancing_dynamic (r147+) without setting vertexColors — e.g., official webgl_instancing_modified? The official example `instancing / raycast`? Example `webgl_instancing_dynamic` uses setColorAt then instanceColor.needsUpdate and works with MeshPhong/Normal... yes setColorAt is standard API working without vertexColors flag. So fragment varying works in r160. Good — trust it for standard materials. For my custom building shader I'll use vTint own varying with instanceColor declared? Actually since instanceColor works via chunks anyway, vColor exists for my patched material too (same chunks). But to minimize fragility I'll use my own varying copied from instanceColor with #ifdef guard. Fine. Hmm, actually simplest: buildings don't use instanceColor at all — derive palette from vSeed hash in shader. Decided. **Let me now write the window shader logic concretely:** ```glsl // after color_fragment vec3 n = normalize(vNrm2); vec3 ALB; vec3 WINEM = vec3(0.0); float topBand = vTop; // world y of roof if (n.y > 0.5) { // roof float g = hash(vec2(vSeed, 1.0)); ALB = mix(vec3(0.16,0.17,0.18), vec3(0.23,0.2,0.19), g); // gray roofs // slight tint from facade: mix small // roof border (parapet) skip } else if (n.y < -0.5) { ALB = vec3(0.35); // underside (bridges? not for buildings) — buildings sit on ground, never seen; keep } else { // wall float u = (abs(n.x) > 0.5) ? vWPos.z : vWPos.x; float v = vWPos.y; // facade color from curated palette via vSeed vec3 PAL[6]; // GLSL ES 1: array constructors: vec3 PAL[6] = vec3[6](...); requires GLSL ES3/WebGL2. three r160 uses WebGL2 by default → GLSL ES 3.0. But shaders written with 'varying' translated? three converts varying to in/out automatically? three's shaders are written in GLSL1 style but compiled as GLSL3 in WebGL2 — three does auto-conversion? No: three keeps GLSL1 (ES 1.0) unless material.glslVersion set... In WebGL2, three still compiles GLSL1 shaders (WebGL2 accepts #version 100 shaders). Array constructors need ES 3.0. Avoid arrays: use if-chains or mix chain via hash → pick via steps. ``` Simplify palette: define base facade = mix of two curated tones by hash, plus slight hue variation: ```glsl float h1 = hash(vec2(vSeed, 2.0)); float h2 = hash(vec2(vSeed, 3.0)); // palette: light concrete, warm brick, glass-blue, beige, gray, slate vec3 cA = vec3(0.62,0.60,0.57); vec3 cB = vec3(0.55,0.42,0.35); // brick vec3 cC = vec3(0.35,0.45,0.52); // bluish glass tower vec3 cD = vec3(0.72,0.66,0.55); // beige vec3 cE = vec3(0.45,0.45,0.47); // gray float k = h1*5.0; vec3 base = k<1.0? cA : k<2.0? cB : k<3.0? cC : k<4.0? cD : cE; base *= 0.9 + 0.2*h2; ``` Glass tower look: for cC make windows larger & more reflective — meh, unify. Windows: ```glsl float uW = ${opts.wu}; // window width float uH = ${opts.wv}; float su = ${opts.su}; // spacing u float sv = ${opts.sv}; float cu = floor(u/su), cv = floor(v/sv); vec2 f = vec2(fract(u/su), fract(v/sv)); // window mask float wx = step(abs(f.x-0.5), 0.5*uW/su*... ``` Let me define window half-extents relative: hw = uW/su/2 (fraction of cell), hh = uH/sv/2. inWin = (abs(f.x-0.5) < hw) && (abs(f.y-0.5) < hh). Storefront: if v < s0 (e.g. 4.2): bigger glass: hw2 = 0.42, hh2 = 0.4 with sv0=4.2? Simpler: ground floor uses its own row: treat cells with cv==0 (v in [0, sv)) → storefront window nearly full cell: hw 0.42, hh 0.44, and lit always a bit at night (shops). Lit determination: ```glsl float r = hash(vec2(cu*3.7 + cv*7.1 + vSeed*97.0, cv*5.3 + vSeed*13.0)); // per window float litRatio = 0.22 + 0.4*hash(vec2(vSeed, 4.0)); float lit = step(r, litRatio); // warm variety float tw = hash(vec2(cu+vSeed, cv)); vec3 warm = mix(vec3(1.0,0.72,0.42), vec3(0.85,0.9,1.0), step(0.8,tw)); // mostly warm, some cool WINEM = warm * lit * uNight * (cv==0? 1.4 : 1.0) * 1.1; ``` Also subtle: lit windows even without uNight at dusk partially — uNight handles ramp. Glass appearance (unlit day): dark bluish with vertical gradient & fake reflection: skyColor uniform: ```glsl uniform vec3 uSky; // current sky horizon color vec3 glass = mix(vec3(0.10,0.12,0.15), uSky*0.9 + vec3(0.06), 0.35 + 0.3*f.y? ); ``` Make glass = mix(dark, sky, reflectionFactor varying with f.y and per-window r): gives day reflections. Frame: if in frame band (between window edge and cell edge): darker version of base. Pilaster/floor bands: at f.y near 0 (floor line) slight dark band: base *= 0.9 if f.y<0.08. Plinth: v < 0.5 → dark. Also corners: vertical edge highlight: if f.x near 0 → base*0.85. Emissive added to totalEmissiveRadiance. Roof: ALB as above; plus mechanical shadow? skip. Top parapet: for walls, v within [vTop-0.8, vTop] → no windows, base*0.8 band (cornice). That's the core look. Also add subtle AO at bottom: multiply ALB by (0.75 + 0.25*smoothstep(0,6,v)) — fake ground darkening; and top lighter? cheap AO adds depth. Add also horizontal stripe every ~12m (structural band) slightly darker. Nice. Houses material variant: opts: su=3.4, sv=3.0, wu=1.2, wv=1.3, storefront none (v<0.4 plinth), palette warmer/brick-ier. Houses have pitched roofs so top face rarely visible; wall top band vTop-0.4. Industrial variant: su=5, sv=6, wu=1, wv=1.2, litRatio low (0.12), palette gray; ground floor big door: cv==0 → door (dark) not glass. So makeBuildingMat(opts) parametrized — one shader, 3 materials. **Houses generation:** residential block: grid of lots: block 62 → 3x3 lots of ~20.7 each. House: box w 8-11, d 8-11, h 5.5-8 (2 floors), centered in lot with yard; roof prism: geometry custom: triangular prism (BufferGeometry) — width+0.6 overhang, depth+0.6, height 2.5-3.5. Orientation alternate ridge along x or z — instanced with rotation (my shader uses local normal & world pos for window u coordinate — rotation would misalign windows between houses — windows come from world coords; with rotated instances, the u coordinate picks the other world axis per face — still fine: each face still uses correct axis for window columns; alignment across houses irrelevant since houses small. BUT vNrm2 = local normal — with rotation, local normal ≠ world face dir... window u axis selection uses local normal abs components — wrong axis after 90° rotation? If house rotated 90° around Y, local +x face points world ±z. u coordinate chosen: abs(n.x)>0.5 → u = vWPos.z. Local x face → world z facing: u should be vWPos.x (window columns should run along world x for a wall facing z). With rotation it picks vWPos.z → windows columns along the wall normal direction?! That makes windows vary as you move perpendicular — broken pattern on that face (columns would run into the wall depth direction). Windows would appear as function of z (depth axis) — same for all points along x → vertical stripes repeated... it'd look like columns aligned... wrong. Solution: for houses use NO rotation in instance matrix; instead build two roof orientations via two instanced meshes (prism rotated 90° at geometry level) and keep house boxes axis-aligned with varied w/d — enough variety. Ridge orientation: choose geometry variant per house. Good — houses axis-aligned always; roofs two instanced meshes (ridge along X, ridge along Z). Windows fine. Residential blocks: 3x3 houses (9) maybe 8 + one tree lot... Keep 3x3 all houses, plus street trees around. **Skyscraper blocks (downtown):** 1-2 towers per block: tower footprint 18-26, height: distance-based: center blocks 90-170; also a few "landmark" towers: pick 3 tallest with antenna+blinking beacon light (red blinking point at top — nice at night! beacon: Points red blinking). Setback tiers: 2-3 stacked boxes shrinking (wedding-cake) for classic skyscraper look! Implement: for tall towers, add 2-3 stacked instances (each its own instance in same mesh) — windows align in world space across tiers automatically (same module grid) — beautiful. Tiers: h total split; each tier box centered accordingly. **Commercial mid:** 2-4 buildings 20-60 h, footprints 14-24, some with roof clutter. **Industrial:** 1-2 wide boxes h 8-14, footprint 30-50 x 20-40; plus some tanks (cylinders instanced) and stacks? tanks: cylinders white instanced (few). Add small admin office box. Roof vents. **Parks:** as described. **Downtown core:** let central plaza block (2 blocks?) be plaza/park with grand fountain; also surround tallest. District assignment by block coords (bi bj relative center c = GRID/2): - r = max(|i-c|,|j-c|) (chebyshev) - if block is riverRow → water (skip) - central plaza: block (c, c-1)? choose specific: (c-1, c-1)? Let me set park at (c, c) maybe with fountain — and river row also near center? riverRow 8 with GRID 18 → c=9; river at row 8 adjacent to center — nice: downtown riverfront! Plaza on north bank center. Let me: riverRow = 8. Plaza block: (8, 7) (just north of river, center-ish: i=8? center i 8.5). ok plaza at (8,7). - r<=3: downtown towers (tall). - r<=6: commercial. - r<=8: mixed: residential mostly, some commercial, occasional park (rand 10%), industrial near edge. - else outer: residential + parks 12% + industrial on some edge blocks (r>=8.5 corner-ish random 15%). Buildings count estimate ok. **Orb collectibles placement:** on sidewalks near blocks randomly + parks: 40 positions, must be walkable (not in building). Since sidewalks surround blocks, place at block edges inset 1 from pad edge. Choose random blocks, random edge point. Ensure y ~0.3+ hover. Rotating glowing octahedron + point glow. On collect: shrink animation? simple remove + ding + counter. Add small chance orbs on bridges/waterfront for exploration incentive. Keep simple: block edges + parks + bridges (couple). **Player spawn:** center plaza near fountain facing city. Eye height 1.7. Speed walk 6, run 12. Gravity for jump: vy, ground y0. Fly mode: velocity toward camera dir, faster 40, Space up, shift... fly: WASD + Space up + C down, speed 30, shift 90 (sprint). **Collision impl:** - world → block indices: i = floor((x + SIZE/2)/CELL) clamp 0..GRID-1, same z; block interior region check: is inside block pad (x within [line(i)+R/2, line(i+1)-R/2]) — building AABBs list per block: block = blocks[bi][bj] {type, buildings:[{x0,z0,x1,z1}], trees maybe, fountain}. - Movement: newX = x+dx; test AABBs of current & adjacent blocks with player radius 0.45 (circle vs AABB). Resolve per-axis (try x move, if collides revert x; try z move similarly) — simple and robust. - Water & bridge as described (z band, x road strips). - City bounds clamp ±(SIZE/2 + ROAD*2). - Pads edges: step up onto pads (0.22 height) — player y ground = pad height if on block pad else 0? Player walks over roads (y0) and pads (0.22) — just set groundY = 0.22 when on pad, 0 on road, 0.22 in park? Park grass at 0.25 → set 0.25. Bridge 0. Simple lerp? Just set eyeY = groundY+1.7; smooth lerp for niceness. Compute onPad: inside block interior region → 0.22; park similar 0.25 whatever use 0.22 all pads. Actually parks: grass inset — also 0.22 area whole pad. fine. Fountain collision: circle radius 8.5 at plaza center — push out. **Cars update:** each car: {axis: 0(x)|1(z), dir ±1, laneOffset (±lane), road: grid line index, x/z pos along, speed 8-16, colorIdx}. Vertical roads with bridges cross water — fine. Horizontal roads cross river? horizontal grid lines 0..GRID; line jR? the river sits BETWEEN lines 8 and 9 (block row 8 removed: block row 8 spans lines 8..9). So horizontal roads at line 8 and 9 still exist (bank roads) — cars fine. Water band z ∈ [line(8)+R/2, line(9)-R/2]. Car update: pos += dir*speed*dt; wrap at ±(SIZE/2+40). Orientation: matrix from axis & dir. Slow down if car ahead? skip; random speeds with slight per-car. Also cars stop... skip. Night: headlight points opacity. **Pedestrians:** for each ped: {block (bi,bj), t, speed, dirSign} path rectangle = pad inset ring: rectangle at pad edge inset 0.9 (walk on sidewalk outer ring). Perimeter length param. Update pos + facing; bob y. Ped count ~ 260; assign only near-downtown blocks + random. **Traffic lights:** at intersections where both i%3==0 && j%3==0 (avenues): but our "avenues" — do I keep avenue medians? Medians on grid lines i%3==0: vertical & horizontal. Median strips: along road line, from block edge to block edge (not across intersections, not across water for horizontal ones... horizontal medians cross river? horizontal roads at lines 8,9 are bank roads; median along bank road — nice (waterfront boulevard with trees!). Vertical medians must break at river (bridge) — median segments only along block rows j ≠ river. Implementation: for each grid line (axis), for each block span along it, if avenue: add median segment. Trees on medians every ~12. Also median prevents... cars lanes offset ±4 instead of 3.5 on avenues. Dashes: normal roads get center dashes; avenues: median + white lane edge lines? Add edge lines as long thin boxes along road both sides? instanced: for every road span, two white side lines (0.15 wide, 0.02 high) at ±(R/2-0.6). ~19 roads * 19 spans *2 *2 axes ≈ 1400 — fine. Hmm sidewalk pads already have curb; side line optional... include, looks crisp. Actually white edge lines might z-fight with ground plane (both flat). Use thin boxes 0.02 above ground → fine, same for dashes & crosswalks (box height 0.04). Traffic lights then at avenue intersections: i%3==0 && j%3==0 including both axes avenues. Count: 7x7=49 intersections * 4 corners = 196 poles. Ok. Light head with cycling texture. Cars don't stop — acceptable (ambience). OR make cars stopping? Traffic sim: cars stop when light red for their axis... actually implement simple: global phase: NS green 8s, yellow 2s, EW green 8s, yellow 2s. Cars approaching intersection with red for their axis stop at intersection edge. Compute distance to next intersection; if red and dist < 6 & > 0 → speed → 0 decel; else accelerate to cruise. This is doable in the update: for car at position p along axis, next intersection line index = ceil/floor(p...). Compute next grid line in direction of travel; distToIt; if phase red for axis and dist in (2, 10) → brake (v=0). Also avoid car overlap: check car ahead in same road+lane — maintain list per road sorted? Simple: for each car, find nearest ahead same road & lane & dir within 5 → brake. O(n²) 220² = 48k/frame — fine (or grid bucket). n² fine at 220. That adds believable traffic! Include — it's the "alive city" factor. Traffic light visuals: pole at corner + arm over road + head hanging with 3 lights texture cycling with the SAME phase — sync! Light phase visible matches cars stopping — great emergent detail. Texture: canvas 64x192 with 3 circles stacked (red top, yellow, green) — lit vs unlit states drawn... need 3 separate states (only one lit). Use texture with 3 rows: row0 red lit, row1 yellow lit, row2 green lit; head box UV maps to one row via repeat (1,1/3), offset cycles. Head geometry: box with materials array? Emissive only on -Z face (facing road)... simpler: small plane (0.5x1.4) attached facing incoming traffic + dark box behind. Instanced plane with material {map: emissiveMap? just use MeshBasicMaterial with map: trafficTex, toneMapped false} — always shows lit light (day too, fine). Plane instanced; offset shared. Add arm+pole instanced metal. Facing direction varies (4 directions) — instanced plane rotation via instance matrix ok (basic material, no shader patch). For both road axes at intersection: place lights facing each approach. 4 poles per intersection: each pole serves one approach direction (arm extends over that road). Simplify visuals: pole with arm along the road it controls, head facing traffic. This is getting big but valuable. Let me manage code size: aim ~1300-1600 lines total. Acceptable. **Billboards:** pick 3 tall downtown buildings; place billboard plane on facade near top facing +axis toward plaza: canvas texture 512x256 animated: draw "PORT MERIDIAN", scrolling marquee "★ EXPLORER ★", gradient bg, time. Update every 150ms. MeshBasicMaterial (toneMapped false) + night glow slight. Mount frame box behind. Add subtle emissive so visible at night: basic material is unlit — always bright — perfect. **Stars:** Points 1800 random directions radius 1900 (inside sky dome radius 2000), size 2-3, opacity by night. Moon: circle mesh billboard far away? Sky shader could include moon disc too: sun disc + moon disc opposite. Do in sky shader: both discs via pow on dot. **Sky shader:** dome sphere r=2000, BackSide, fog false, toneMapped false? Keep tone mapping ACES off for sky to keep colors pure: material.toneMapped=false. ```glsl uniform vec3 uTop, uHorizon; uniform vec3 uSunDir; uniform float uSunI; // sun intensity for disc varying vec3 vDir; h = normalize(vDir).y col = mix(uHorizon, uTop, pow(clamp(h,0,1), 0.6)); below horizon: darken uHorizon*0.6 for h<0 (ground haze) sun disc: d = max(dot(dir, uSunDir),0); col += (pow(d, 1500.)*1.2 + pow(d,8.)*0.12*sunsetFactor) * sunColor moon: m = max(dot(dir, -uSunDir), 0); col += vec3(0.9,0.95,1.0)*pow(m, 1800.)*moonI; ``` Also clouds: skip or cheap: few big soft blobs via noise? Skip clouds — stars + gradient enough (city focus). **Fog & background:** scene.fog color = horizon color each frame; renderer clear color = horizon. Fog near/far vary with time? night denser? keep fixed 50/1500. Hmm city span 1400; from center you can see edges — good with fog far 1500. Camera far 4000. **Lighting rigs:** - hemi: sky/ground colors updated by time, intensity day. - sun dir light: shadow 2048, camera ortho ±170, near 10 far 900. Update position: playerPos + sunDir*300. Night: use moon dir (opposite-ish), low intensity blue. transitions smooth via elevation. - Also faint ambient min so night not pitch black + building emissive windows carry the scene. Add player "flashlight"? no. **Shadow updates with instanced meshes:** fine. **Water shader:** plane geometry (subdivided 64x16 for vertex waves? or do normal perturb in fragment). Fragment waves: moving normal via layered sin → compute spec from sun dir: simple: ```glsl col = mix(deepColor, horizonColor, fresnel-ish factor) spec = pow(max(dot(reflectDir...)) ...) ripple lines: brightness band via sin(x*0.4 + t) * sin(z*0.3 - t*0.8) ``` Keep semi-basic: base deep blue-green (dark at night), sky reflection color uniform, sun specular streak, animated two-scale sine sparkle. Alpha 0.9. Plane large covering river strip + slight extension. **Fountain water:** reuse simpler: disc mesh basic blue-ish with shader? Use same water material on disc (uv world coords — shader uses world pos: need vWPos varying — write small ShaderMaterial for water with position→world). Fountain spray: Points ~200 with cyclic y animation & reset; color white, additive, small size. Also ripple ring? skip. **Grand plaza:** paved pattern: canvas texture radial pattern? Keep: light stone pad + fountain + 4 statue-ish columns? + benches + trees corners + lamps + flag poles? Moderate: fountain + benches ring + trees + lamp decal. Add 4 "banner poles" with colored flags (instanced plane) — cute. Skip flags maybe. Add planters (instanced boxes with green tops?)... limit. Fountain + benches + trees + orbs. **Counts & perf final:** fine. **Minimap draw:** scale city SIZE→canvas 200. Draw: bg dark, water blue band, roads gray lines (width by scale), parks green squares, plaza distinct, player white arrow rotated by yaw, orbs gold dots, cars? tiny dots maybe overkill — skip (or moving dots = alive! cheap: draw car dots each frame from array — 220 dots fine). Include car dots (yellowish) — feels alive. And N indicator. **HUD extras:** - Time HH:MM from timeOfDay; icon changes (☀/☾ via text). Use unicode symbols (no emoji policy? It says no emojis in UI... avoid; use text "DAY"/"NIGHT" or CSS-drawn icons. Use plain text labels. Fine.) - FPS meter. - Orbs counter "ORBS 12/40". - District name display when crossing zones? Fun: show current district (DOWNTOWN / MIDTOWN / RESIDENTIAL / WATERFRONT / INDUSTRIAL / PARK / BRIDGE) bottom center fading. Compute from position each 0.5s. Nice game feel. Include. - Compass strip top center? minimap arrow covers it. Skip. - Vignette overlay CSS radial gradient + subtle scanline? Keep clean: vignette only. **Start overlay:** title "PORT MERIDIAN — a living city", subtitle, controls list, "CLICK TO ENTER". Font: import Google font "Chakra Petch" + "IBM Plex Mono"? via — allowed (CDN). If fonts fail offline, fallback monospace — fine. **Pause/help:** Esc unlocks pointer → overlay returns ("PAUSED — click to resume"). H toggles help panel. **Audio:** WebAudio: - ambience: looped buffer of brown noise lowpassed (wind/traffic hum) gain 0.05, plus subtle hum osc 55Hz? Keep noise + slow LFO. Night: quieter hum, crickets? (high chirps random osc blips) — cute but code; skip crickets. - collect ding: osc triangle 880→1320 arpeggio quick. - footsteps? skip. - car horn: rare random (every ~20s, short square beep 400Hz with lowpass, panned random) — adds life! Small code. Include with StereoPanner. - M toggles audio. **Orbs:** also make one special golden "key" at the tallest tower rooftop reachable in fly mode → unlocks "drone photo mode"? Over-scope. Keep orbs only. **Fly mode boundaries:** clamp altitude 3..600, xy clamp similar to walk + margin. Alright — also **resize handler**, **visibility pause**. Edge: pointer lock in iframe — needs allow attribute? Pointer lock generally works in same-origin iframes; sandboxed iframes may block... The user said it will render in iframe; assume allowed. Provide fallback: if pointer lock fails, use drag-look? Implement fallback: mouse drag to look when not locked. Good resilience: on mousedown+move rotate. I'll add basic drag fallback. Also mobile? Too much; add note "desktop recommended". Skip touch controls (maybe simple: joystick? skip). Let me now also think about the **seeded RNG**: mulberry32 with fixed seed for reproducible city; expose "R" to regenerate with new seed? Regeneration requires rebuilding all instanced meshes — implement dispose & rebuild function... That's nice (replay value) but adds complexity around cleanup. Do it: cityBuild(seed) constructs group; R key disposes group & rebuilds with random seed. Must also rebuild collision data, minimap, orbs, cars, peds. If organized as one function returning {group, data...}, doable. Risk of leaks minor. I'll structure carefully: `let city = null; function buildCity(seed){...returns {group, blocks, cars, peds, orbs, waterMat...}}` and dispose: traverse group dispose geometries/materials (shared materials reused — don't dispose shared; track created-per-build resources). To keep simpler: on rebuild, remove group, dispose all geometries in group and textures created per build. Shared base materials kept global. Manageable — but honestly, is regenerate essential? It's a nice game touch "R: rebuild city". I'll include if code stays manageable. Hmm — I'll decide: include, but carefully. Actually risk: subtle bugs (stale references). The core ask is a detailed large city — regeneration is bonus. I'll implement build once with fixed seed 1337 but write code so R = rebuild works: keep ALL city state in one object `CITY` and reset globals referencing it. Cars/peds arrays inside. Orbs inside. Minimap redrawn. Water material per build? Make water global (river position fixed by layout anyway — river row constant). Water is part of layout constants — global static. Parks etc vary. Traffic lights count fixed. OK. Actually, to reduce risk I'll make rebuild simply: newCity = buildCity(newSeed); scene.remove(CITY.group); disposeCity(CITY); CITY = newCity. Straightforward if all dynamic lists (cars/peds/orbs) live under CITY and update loop accesses via CITY. Do that. **Layout constants recap:** - GRID=18, CELL=76, ROAD=14, BLOCK=62, SIZE=1368, half=684. - line(i) = i*CELL - half, i∈[0,GRID] → -684..684. - riverRow=8 → water z ∈ [line(8)+7, line(9)-7] = [8*76-684+7, 9*76-684-7] = [608-684+7, 684-684-7]?? compute: line(8)=608-684=-76; line(9)=684-684=0. So water z ∈ [-69, -7]. Width 62. Center z=-38. Bank roads at z=-76 (line 8) and z=0 (line 9). Downtown rows: rows 7 (z -152..-76 block) is riverfront north; rows 9+ south. - Plaza block: (8,7)? block (i=8,j=7): x ∈ [line(8)+7, line(9)-7] = [-69, -7], z ∈ [line(7)+7, line(8)-7] = [-145, -83]. Fountain center ~ (-38, -114). Player spawn near plaza facing river? Spawn at plaza south edge (-38, -90?) facing south (toward water). Or spawn on bridge? Plaza good. Chebyshev center c = 8.5; blocks i,j 0..17. District fn(bi,bj): r = max(|bi-8.5|,|bj-8.5|) ranges 0.5..8.5: - r ≤ 2.5 → downtown (skip plaza block) - r ≤ 4.5 → commercial - r ≤ 6.5 → mixed (residential + commercial + parks) - else → residential/parks/industrial Park probability: mixed 12%, outer 10%. Industrial: outer ring r ≥ 7.5 && rand < 0.2. Waterfront rows (j=7 & j=9 adjacent to water): make them mixed/commercial regardless (nice density at waterfront) — override: j==7 → commercial-high (heights +30%), j==9 → commercial. Tall towers: r<=2.5: heights 80-190; landmark 3 tallest ~ 210+antenna. Commercial: 24-70. Waterfront commercial boost. **Buildings per block:** - downtown: 1-2 towers: choose: 60%: one big tower (fp 26-40) centered w/ tiers; else 2 towers side by side (fp 16-24 each) both tiered chance. - Actually downtown blocks 62x62: one tower fp up to 40 fits with plaza gaps. Add small podium (base box wider h 8) under tall towers — wedding cake: podium fp+10, h 10; mid fp+4, h up to 60% ; top fp, rest. That's 3 instances for a grand tower — gorgeous. Randomize tier count 2-4. - commercial: 2-4 buildings arranged: simple approach: split block into 2x2 quadrants (each ~28), building fp 14-24 centered per quadrant with jitter, height 24-70 (some 80 landmark-ish), skip one quadrant sometimes → pocket plaza (paved + trees + benches). - residential: 3x3 houses + backyards + trees along inner street? Place houses fp 9-12 in 20.7 lots, plus per-lot tree + fence? fences skip. Add driveway? skip. Front lawn = pad texture shows concrete... pad covers whole block; for residential make pad = grass texture instead! Pads: two texture variants (concrete, grass). Residential/park blocks use grass pad. Sidewalk ring around: hmm — real layout: block = sidewalk ring (2.5 wide) + interior. So pad construction: sidewalk ring box (full block, concrete, h 0.22) + interior inset box (grass, h 0.26) for residential/park; commercial interior = concrete or light plaza texture; downtown tower: concrete + planter boxes? Keep: interior inset 3: residential grass; park grass; others concrete-dark. Two instanced meshes: ring pads (all blocks, texture concrete) — but ring with different interior... simplest: full pad concrete (h 0.22), then interior grass box (h 0.26) on grass blocks. Roads remain y0. Curb = pad side. Good. Grass texture: canvas green noise + darker blades — generate noise pixels. Concrete: light gray + grid joints. Asphalt: dark + noise + subtle. All canvas textures 256-512. - industrial: 1-2 warehouses fp 40-54 x 24-38 h 9-15 + office small + tanks (2-4 cylinders r 3-6 h 8) + pipe? skip pipes. Perimeter chain fence? skip. **Roof clutter:** for buildings h>45: 1-3 boxes (AC 2x1.5x2) + 40% water tower (cyl r1.6 h3 + small legs skip); h>120: antenna cyl r0.15 h 8-14 + red beacon point (blinking). Instanced: acBoxes (concrete dark), waterTowers (wood color), antennas (dark), beacons via Points (few, blink shader by time uniform — PointsMaterial can't blink individually... use small emissive spheres instanced with material.emissiveIntensity oscillating globally — all blink sync — fine!). Instanced sphere r0.4 emissive red — mesh.material.emissiveIntensity = 1+sin — global sync blink. **Trees along streets:** residential/mixed blocks: trees on pad ring near road edge spacing ~14 with 60% probability; avenues medians; parks; waterfront rows both banks along bank roads outer edge (quay). Trunk+foliage counts: streets maybe 800 + parks 300 + waterfront 100 + medians 300 + outer 250 ≈ 1750*2 meshes ok. **Benches:** parks 4-8, plaza ring 10, waterfront some. ~180. **Lamps:** along each road line both sides spacing 34, skip near intersections (|pos - line| < 10 skip to avoid clutter) and skip water span for horizontal at river? Horizontal roads: lamps fine both banks (they're at z=-76 & 0 lines, not in water). Vertical roads crossing water: lamps skip z in water band; bridge has its own railing lamps? Bridge lamps: place along railing every 20 — but that's ON the bridge where vertical road lamps would be anyway — allow vertical road lamps over water (they stand on bridge deck). OK just don't skip. But lamp decal pool would float on water? Decal y at 0.02 over bridge deck — fine (deck at 0.05?). Hmm bridge deck slightly above water at y=0 (same as road). Deck thickness visual: give deck box y center -0.35 (top at 0) so it looks like slab over water; pillars down to -3. Lamp base at 0 fine. Lamp glow points: night only. **Decal pools:** circle geometry radius 5.5, additive, texture radial, instanced at lamp pos y=0.05... over bridge: also 0.05 fine. Let me also consider **z-fighting** between decals & ground: polygonOffset or y 0.06 + depthWrite false renderOrder 1. ok. **Order of code & writing:** Now — a critical decision on three.js version & shader chunk names: r160 chunk names I used exist (`project_vertex`, `common`, `color_fragment`, `emissivemap_fragment`, `dithering_fragment`). Lambert in r160 exists as MeshLambertMaterial (fine). `instanceColor` works. Actually, do I even need Lambert lighting for buildings? Custom emissive windows + Lambert diffuse lighting + shadows = good. Buildings receiveShadow = true; castShadow true. One more consideration: shadow acne on windowed walls — normalBias 0.6. Also — building shader: shadow depth material doesn't include my patches — irrelevant (depth only). **Fog on buildings:** Lambert fog applies — good. Now write the whole file. Structure plan with estimates: CSS ~150 lines. HTML overlay ~60. JS ~1200+. Let me write carefully, module script. Key shared uniforms: `uNight` = {value:0}, `uTime`={value:0}, `uSky`={value: new Color}. Let me draft the JS in sections: ```js import * as THREE from 'three'; import { mergeGeometries } from 'three/addons/utils/BufferGeometryUtils.js'; // ---------- utils ---------- function mulberry32(seed){ ... } let rng; const R = ()=>rng(); const rand=(a,b)=>a+R()*(b-a); const randi=(a,b)=>Math.floor(rand(a,b+1)); const pick=arr=>arr[Math.floor(R()*arr.length)]; // canvas texture helpers function makeCanvas(w,h,fn){ const c=document.createElement('canvas'); c.width=w;c.height=h; fn(c.getContext('2d'),w,h); const t=new THREE.CanvasTexture(c); t.wrapS=t.wrapT=THREE.RepeatWrapping; return t; } ``` Textures: - asphaltTex: 256: fill #262a2e + noise speckle + faint cracks; repeat later set repeat via material? For ground plane one big plane — texture repeat SIZE/8? set repeat on texture (shared ok since only ground uses it). - concreteTex: 256 #9aa0a3 + joints lines + noise. - grassTex: 256 #4c7a3d base + noise darker/lighter + few blade strokes. - radialTex for glow: 128 gradient white→transparent. - dotTex for points (soft round). - trafficTex: 64x192 3 rows. - billboard canvases: created per billboard with own update fn. Water: ShaderMaterial: ```glsl uniforms: uTime, uNight, uSky (vec3), uSunDir vertex: pass world pos, small vertex ripple y? plane rotated -PI/2. compute in fragment only. frag: vec2 p = vWPos.xz*0.35; float w1 = sin(p.x*1.7 + uTime*1.1) + sin(p.y*2.3 - uTime*0.9) + sin((p.x+p.y)*1.3 + uTime*0.6); vec3 nrm = normalize(vec3( ... derivative approx via cos ... )) // approximate normal analytically ``` Simpler: fake normal wobble: `vec3 n = normalize(vec3(dw/dx, 3.0, dw/dz))` with dw from cos terms. Then spec = pow(max(dot(reflect(-uSunDir, n), viewDir),0), 90). Need viewDir: cameraPosition builtin in frag (three provides cameraPosition uniform in ShaderMaterial? Yes, `cameraPosition` is auto-declared in vertex AND fragment for ShaderMaterial). vViewDir = normalize(cameraPosition - vWPos). Color: base = mix(deep, uSky*0.75, fresnel) where fresnel = pow(1 - max(dot(n, viewDir),0), 2). Night: deep darkens, uSky dark — automatically dark. Add city light reflections at night? faint: add windowGlow color * wobble mask — skip. spec * sunI. Also slow scroll highlights: sparkle = smoothstep(0.75,1.0, sin(p.x*3.1+uTime*2.) * sin(p.y*2.7-uTime*1.7)); col += sparkle*0.08. transparent: false (opaque simpler), nice deep color. **Sky dome shader** as planned. **Cars geometry** via mergeGeometries of boxes with vertex colors: create box geoms, translate, assign color attr (fill array), merge. Set material vertexColors:true. instanceColor for body tint. MeshLambertMaterial. Wheels: 4 boxes color 0.08. Cabin: color 0.15 with slight blue? cabin = windows dark 0.1 gray-blue. Body white 1,1,1 (tint). Bumpers? skip. Front-back slight bevel no. Car sizes: body 2.0 x 0.6 x 4.6 at y 0.55; cabin 1.8x0.55x2.4 at y 1.05 z offset -0.2; wheels 0.7x0.7x0.4? cylinders rotated? boxes fine r? wheels box 0.65x0.65x0.3 at y 0.33, x ±0.95, z ±1.5, color dark. Headlights: 2 small emissive boxes front? Instead Points at front: car front offset (±0.6, 0.65, +2.3) in direction of travel. Compute world from car pos+dir. Points buffer 2 per car white; taillights red 2 per car. Update every frame. Points size 3, sizeAttenuation... At distance small size — use sizeAttenuation true size ~1.2? PointsMaterial size in world units when attenuated. Use additive, transparent, opacity night. Also headlight beam on road ahead? skip. Actually simpler & prettier: make lights only at night visible (opacity 0 day). ok. **Ped geometry:** body capsule: CylinderGeometry(0.22,0.26,0.85,6) + head sphere 0.16 → merge with colors? bodies instanced colored via instanceColor (shirt colors), heads separate instanced sphere skin tones (3 tone variants... single material color skin, no instanceColor → all same skin — fine diversity via body color). Legs: give body two-tone? skip. Height ~1.75. Bob: y + |sin(t*10)|*0.03. Peds also night reduce opacity? keep. **Orbs:** mesh per orb (40 meshes small — fine, or instanced with rotation per instance via matrix update each frame: 40 matrices update cheap). Use InstancedMesh 40, golden emissive material, rotate all (matrix compose per frame), + Points glow at positions. Collect: set scale 0 & mark. Nice: also float bob. **Beacons:** instanced emissive red spheres blink sync. **Bridge railings:** instanced: per bridge: 2 sides * segments (62/4 ≈ 15 segs) small boxes (4 x 0.9 x 0.15) at deck edge + posts? Simple continuous: top rail box + thin balustrade? Use: rail box (0.12x0.08) + panel (4x0.7x0.06 semi? dark metal). Keep: panel boxes + top rail. 19 bridges * 2 sides * 16 segs * 2 parts = 1200 instances ok. Plus pillars: 2-3 cylinders per bridge r1.2 from -4 to 0. Grand bridges (i%3==1): add taller arch boxes? towers: 2 stone towers (box 3x8x3) at ends with lamp? Grand: every 3rd (i=1,4,7,...): towers + flags? towers only. ok. **Quay walls:** two long boxes along water edges (full city width +40) h 1.6 (top 0.6 above ground? top at 0.35), depth 0.8. Plus railing along quay? small: thin rail box y 0.9. Waterfront promenade: pad strip along banks between road and water? bank roads at lines 8,9 with R=14: water edge is at ±7 from road center → road outer edge = water edge directly. So promenade = make bank roads narrower? Simpler: quay wall top at 0.3 with railing; lamps along it; benches facing water; trees along outer side. Good enough. **Minimap:** 200x200 canvas; scale = 200/(SIZE+80). Prebuild background offscreen canvas once per city build; per-frame: copy bg, draw cars (dim), peds skip, orbs gold (uncollected), player arrow. **District label logic:** compute from player pos: on bridge (z in water & in road strip) → "RIVER CROSSING"; z in water band → "THE MERIDIAN RIVER"; else block: by type: PARK → park; plaza → "MERIDIAN PLAZA"; industrial → "INDUSTRIAL DOCKS"; downtown radius → "DOWNTOWN"; commercial → "MIDTOWN"; else "RESIDENTIAL". Show fade in/out. **Compass on minimap:** N arrow text. **FPS:** rolling avg. **Pointer lock flow:** overlay click → requestPointerLock on canvas + hide overlay + resume audio. pointerlockchange: if lost → show overlay (paused). Keys captured on window with e.code. **Look:** yaw/pitch; sensitivity 0.0023; pitch clamp ±1.5. **Update loop:** dt clamp 0.05. time accumulators: dayTime += dt*daySpeed (daySpeed default 24h/240s = 0.1 h/s? 24/240=0.1 h per s). press T toggles fast (0.5 h/s → 48s/day). Start at 10:00? Golden hour start? Start 8:30 day. Hmm maybe start at dusk for drama? Start 17.5 (golden). Actually first impression: golden-hour with long shadows + lit windows ramping — gorgeous. Start 17.2. Sun elevation: sunAngle = (dayTime-6)/12*PI (6→0, 12→PI/2 top... at 18 → PI). elev = sin(sunAngle). Direction: azimuthal fixed plane: sunDir = (cos(az)*cosE, sinE, sin(az)*cosE) — let sun travel east→west: az from? simple: sunDir = normalize(vec3(cos(ang), sin(ang)*0.9+0.08, 0.35)) with ang = PI*(dayTime-6)/12; for dayTime in (6,18): above horizon. Moon: opposite direction when sun below. Night factor: smoothstep(2°, -6°, elev) → 1 at night. uNight for shaders. Windows ramp via uNight slightly delayed (dusk lights on early: uNightWin = smoothstep(6°, -2°, elev)). Sky palette stops by sun elevation e (degrees): - e>25: day: top #3f6fb5? pick nicer: top #4a7bc4, horizon #cfe4f2? Aim slightly stylized: day top #4e8ed9, hz #b8d4e6. - e 0..25: golden: top #6e86c9 → hz #ffd9a0. - e -8..0: sunset: top #2c3a6b hz #ff9a5c. - e<-8: night: top #0b1026, hz #16203c + city glow hz slightly purple #1d2440. Interp: piecewise smoothstep between stops. Implement function skyColors(e) returns {top, hz, sunCol, sunI, hemiI, fogCol}. Sun light color: warm at low e (#ffb46b), white high (#fff4e0). Intensity: smoothstep(-3,10,e)*1.1... plus moon: at night directional from moonDir intensity 0.18 color #a9c4ff. Implement: if elev>−2 use sun else moon — crossfade: sunI = ss; moonI = (1-uDayFactor)*0.22. Direction: choose whichever dominant; simply set light dir = sunDir if elev>-3 else moonDir (= -sunDir + slight offset). Crossfade intensities to avoid pop. Hemi: sky color = mix(nightHemi, dayHemi), intensity 0.25+0.75*dayF. Ambient extra 0.06 constant so shadows not pure black. Night: keep small 0.18 hemi (city has lights). Fog color = hz color; fog near 60 far 1500; night far shorter 900? lerp by nightF — cozy. ok. **Star opacity:** nightF. **Lamp glow points & decal opacity:** nightF. **Car headlights:** opacity = max(0.05, nightF). **Traffic light phase:** t=elapsed; cycle 24s: NSgreen 0-9, NSyellow 9-12, EWgreen 12-21, EWyellow 21-24. For car axis: axisVertical (z-axis travel... wait vertical roads run along z (north-south): cars on vertical roads move along z: NS. Phase for NS: green when phase<9? etc. Cars brake when their axis yellow/red and approaching intersection within 10. Also don't brake if inside intersection (crossed line) — check dist to line > 1.5. Compute car next line: for car along z at position pz moving dir +1: next line j where line(j) > pz+1.5 minimal → j = ceil((pz+1.5+half)/CELL)... fine. Also cars speed control: v approaches target (cruise or 0) with accel 8. Cars near player? no special. **Ped update:** param along rectangle perimeter; corners handling via param mod perimeter; pos = perimeter(t). facing = tangent. matrix compose. **Orb bob/rotate & collection check** every frame (dist < 1.6 & |dy|<2.5). **Building placement function** — write helpers: ```js function addBox(list, x, z, w, d, h){ list.push({x, z, w, d, h}); } // center x,z; footprint w,d ``` Instance matrix: compose pos (x, h/2+padH, z)?? Buildings sit on pad top: base y = 0.22 (pad). Set y center = 0.22 + h/2. For towers with podium tiers: each tier base accumulates. Also collision AABB uses footprint. Actually pads: 0.22 high. Park interior grass 0.26. Buildings on pad 0.22. House roofs: prism geometry: custom BufferGeometry via ExtrudeGeometry? Simpler: create with vertices manually or use CylinderGeometry with 3 radial segments? Prism: THREE.CylinderGeometry(radiusTop=?, ...) no. Use a simple approach: BufferGeometry with 8 triangles: ridge along X: vertices: bottom rectangle corners (±w/2, 0, ±d/2), ridge line (±w/2, h, 0). Faces: two slopes (quads→tris), two gable triangles (ends), no bottom. Write manually — 20 lines. Or ExtrudeGeometry from triangle shape along X: shape = triangle (in YZ?) Extrude along Z... ExtrudeGeometry: Shape in XY extruded along Z: triangle shape points (-d/2,0),(d/2,0),(0,h) extruded depth w → ridge along Z! Then rotate 90° for X variant. Use that — two geoms: one rotated. UV irrelevant (plain color). Flat shading needed: compute normals flat — Extrude gives flat side normals ok. Roof color variants via instanceColor (MeshLambert, vertexColors not needed; instanceColor path standard). Colors: brick red, dark gray, brown, slate blue. Chimneys skip. **AC/water tower/antenna positions:** on roof tops: choose random offset within fp*0.3. **Billboard:** pick 3 downtown towers; plane size 16x9 mounted on facade facing outward (rotate per side), position: on wall at height h*0.55, offset outward 0.3. Canvas 512x288: animated: gradient bg (recompute hue by time), title text, scrolling ticker via time offset, border. Update via setInterval 100ms while visible — fine. Also giant screen at plaza? Add one facing plaza on a midtown building — "city info: time & weather". Same system. OK — also **"hint" toasts**: bottom-center queue messages ("Press V for drone mode" first time near… show once tips at start: sequential tips 5s each: "WASD move · SHIFT run", "SPACE jump", "V drone mode", "Collect the golden orbs", "T fast time, M sound, H help"). Implement simple rotating tip line under crosshair? Show in help panel instead + one-time toasts. Keep: initial toast sequence. Now **write the code**. I'll be systematic. Also careful with GLSL string replacements — unique anchor points. For Lambert fragment in r160, chunk order (meshlambert_frag): ``` #include ... void main() { #include vec4 diffuseColor = vec4( diffuse, opacity ); ReflectedLight reflectedLight = ... vec3 totalEmissiveRadiance = emissive; #include #include #include #include #include #include #include // accumulation #include ... ``` So my plan: replace `#include ` with `#include ` + window code (computes ALB, WINEM, sets diffuseColor.rgb = ALB), and replace `#include ` with itself + `totalEmissiveRadiance += WINEM;`. Need WINEM declared in main scope before emissivemap? Declared at color_fragment injection — same function scope — fine since both inside main. Declare as `vec3 winEm=vec3(0.0);` at color point, use at emissive point. GLSL scoping: sequential in same block — OK. Vertex: `#include ` exists in lambert vertex. Inject after it. Need `transformed` available (yes). Note: `#include ` sets transformed=position. Watch out: shadow material? castShadow with onBeforeCompile only affects color pass; fine. Also USE_INSTANCING define present because InstancedMesh. Guard anyway. **Building fragment window code** (write carefully): ```glsl // --- city facade --- vec3 alb; float upFace = step(0.5, abs(vN2.y)); // hashes float hA = hash12(vec2(vSeed, 1.0)); float hB = hash12(vec2(vSeed, 2.0)); float hC = hash12(vec2(vSeed, 3.0)); if (vN2.y > 0.5) { // roof alb = mix(vec3(0.14,0.15,0.16), vec3(0.24,0.21,0.19), hA); } else { // wall palette vec3 c0 = vec3(0.60,0.58,0.55); // concrete vec3 c1 = vec3(0.52,0.36,0.28); // brick vec3 c2 = vec3(0.42,0.50,0.56); // glass blue vec3 c3 = vec3(0.70,0.64,0.52); // sand vec3 c4 = vec3(0.46,0.46,0.48); // gray vec3 c5 = vec3(0.30,0.34,0.38); // dark slate float k = hA * 6.0; vec3 base = k<1.0?c0 : k<2.0?c1 : k<3.0?c2 : k<4.0?c3 : k<5.0?c4 : c5; base *= 0.85 + 0.3*hB; float u = (abs(vN2.x) > 0.5) ? vWPos.z : vWPos.x; float v = vWPos.y; float cu = floor(u / SU), cv = floor(v / SV); vec2 f = vec2(fract(u/SU), fract(v/SV)); float hw = (cv < 0.5) ? SGW : WU/SU*0.5; // ground floor big float hh = (cv < 0.5) ? SGH : WV/SV*0.5; float inWinX = step(abs(f.x-0.5), hw); float inWinY = step(abs(f.y-0.5), hh); float inWin = inWinX * inWinY * step(0.5, cv + GROUNDON); // ground floor windows? ground floor always windowed for towers; for houses GROUNDON=0 → cv>=1 only? Actually houses: first floor windows wanted! For houses ground floor = normal windows (door?). Simplify: houses: no special ground; towers: ground=storefront. ``` Handle via material option STOREFRONT (0/1 as float SF): if SF>0.5 && cv<1 → storefront big glass. Houses SF=0 → normal windows at cv>=0 but skip v<0.6 (plinth). Industrial SF special: door. Continue: ```glsl // cornice / parapet band at top float parap = smoothstep(vTop - 1.4, vTop - 1.0, v); // plinth float plinth = 1.0 - smoothstep(0.3, 0.55, v); // window only if not parapet float winZone = (1.0 - parap) * (1.0 - plinth); // lit? float rwin = hash12(vec2(cu*7.31 + cv*3.71 + vSeed*101.7, cu*2.13 - cv*9.77 + vSeed*57.3)); float litRatio = 0.18 + 0.35*hC; float lit = step(rwin, litRatio); vec3 warm = mix(vec3(1.0,0.75,0.45), vec3(0.85,0.92,1.1), step(0.85, hash12(vec2(vSeed*7.7, cv*13.1+cu*3.3)))); float shopBoost = (SF>0.5 && cv<1.0) ? 1.6 : 1.0; winEm = warm * (lit * uNight) * shopBoost * WIN_I * winZone * inWin; // glass color day: reflect sky vec3 glass = mix(vec3(0.07,0.09,0.12), uSkyCol*0.85, clamp(0.25 + 0.5*f.y + 0.2*hB, 0.0, 1.0)); // frame band: between window and cell edge float frX = step(abs(f.x-0.5), hw + 0.06); float frY = step(abs(f.y-0.5), hh + 0.07); float frame = frX*frY - inWin; // floor band shading float band = 1.0 - 0.15*step(f.y, 0.10); // vertical micro stripes band *= 1.0 - 0.08*step(f.x, 0.07); alb = base * band; alb = mix(alb, base*0.45, frame); // frames darker vec3 winCol = mix(glass, glass*1.4 + warm*0.05, lit*uNight*0.5); alb = mix(alb, winCol, inWin*winZone); // occasional vertical mullion inside window float mull = step(0.48, f.x) * step(f.x, 0.52) * inWin * winZone; alb = mix(alb, base*0.5, mull*0.7); // plinth color alb = mix(alb, vec3(0.16,0.16,0.17), plinth*0.85); // parapet cap alb = mix(alb, base*0.75, parap); // fake AO bottom alb *= 0.72 + 0.28 * smoothstep(0.0, 7.0, v); ``` Wait `winEm` must be declared before this block: I'll declare `vec3 winEm = vec3(0.0);` at top of injection. Assign inside. Then emissive chunk add. Note GLSL: assignments inside if/else branches — fine. For glass-tower palette c2: windows should dominate: for c2 make hw/hh bigger? optional; skip (uniform look ok). Storefront: big glass with mostly lit at night (shops): lit for cv<1: use lit=1 when rwin<0.85 → shop windows mostly lit. Handle: shopLit = step(rwin, 0.75) for cv<1. Also add awnings? skip. Uniform injection: material def uniforms (SU etc.) — since these are constants per material, inject as string literals via template (not uniforms) — simpler & compiler optimizes. uNight, uSkyCol, uTime as uniforms shared. So makeBuildingMat({su, sv, wu, wv, storefront, winI, palette?}) — palette option maybe weight: houses: warmer set: override? Add opts.paletteBias: for houses exclude glass blue & slate: k = hA*6 but map: houses: k<1 c0, k<2 c1(brick heavy), k<3 c3, else c4. Implement via selecting array? Write branch: `if(HOUSE>0.5){ k = hA<0.45?1.0 : hA<0.8?0.0 : hA<0.9?3.0 : 4.0; }` then same chain. Industrial: force c4/c5 gray. ok add float MODE (0 tower,1 house,2 industrial). Towers mode: MODE 0: k = hA*6 uniform chain. Also for towers make some glass-heavy: fine. Let me now define hash: ```glsl float hash12(vec2 p){ vec3 p3 = fract(vec3(p.xyx) * 0.1031); p3 += dot(p3, p3.yzx + 33.33); return fract((p3.x + p3.y) * p3.z); } ``` Good quality tiny hash. **Bridge/tunnel?** skip. **Grand fountain geometry:** - basin: cylinder r 9 h 1 (stone), rim torus? cylinder r 9.5 h 1.2 outer ring; inner water disc r 8 y 0.9 (water material disc — reuse water ShaderMaterial? needs world pos varying — our water ShaderMaterial does that; disc geometry ok). - center: column cylinder r 1.2 h 3 + upper bowl (cylinder r 3 h 0.5 at y 3). - spray points: 260 particles from y 4 up: cycle: each particle: t param; y = 4 + v0*t - 4.9t² etc. Simple loop update positions Float32Array each frame: cost tiny. - Points material white size 0.35 additive transparent. - Ring of benches (8) radius 13 facing center; lamps 4; planters: 6 boxes with bushes (foliage instanced reuse) around r 16. Collision circle r 10. **Plaza paving:** interior texture concrete-light + maybe radial pattern via second canvas texture "plazaTex" with concentric rings. Use plazaTex on pad interior box (62x62, h .3?) with rings drawn. Nice. **Bridges grand towers:** box 3x9x3 at both ends sides + emissive lamp globes on top? small spheres warm — instanced with lamps glow? Add small emissive spheres — reuse beacon system? beacons red blink; make separate warm static spheres (emissive) — tiny instanced mesh. ok. **Amount of code is large; start writing now.** Also remember `

Here's a complete living-city world — **Port Meridian** — an 18×18-block procedural harbor city (~1.4 km across) with districts, a river with 19 bridges, working traffic lights that cars actually obey, pedestrians, boats, birds, a full day/night cycle, and a collectible-orb game loop. Everything is generated from one seed at runtime. ```html PORT MERIDIAN — a living procedural city

PROCEDURAL WORLD · SEED —

PORT MERIDIAN

Generating a living harbor city…

W A S D — walk / runMOUSE — look SPACE — jump · V — droneSHIFT — sprint T / N — time controlM / H / R — sound · help · new city

Collect the 42 golden orbs scattered across streets, parks, bridges and rooftops.

17:24GOLDEN HOUR

0/ 42 ORBS

-- FPS

WASD·SHIFT walk · run
SPACE·V jump · drone mode
T·N fast time · day/night
M·H·R sound · help · rebuild city

``` **What's inside** - **Procedural city, ~1.9 km²** — an 18×18 block grid with distinct districts: a downtown of tiered "wedding-cake" skyscrapers, midtown commercial blocks with pocket plazas, residential 3×3 house-lots with pitched roofs, industrial blocks with tanks and warehouses, parks with fountains and benches, and a grand central plaza with an animated particle-jet fountain. - **The Meridian River** cuts the city in two — 19 bridges (6 grand ones with stone towers), quay promenades with railings and benches, animated reflective water shader, and 6 boats drifting along it. - **Windows are done in a custom injected shader** — every facade gets real per-window mullions, storefront ground floors, doors on houses, sparse industrial glazing, and windows that light up individually at dusk (seeded per building so rebuilds stay deterministic). No textures are stretched; the module grid is world-aligned across the whole city. - **Living traffic** — 230 cars in proper lanes that actually stop for the synchronized traffic lights (the signal heads redraw their lit lamps in real time), keep following distance, and get headlights/taillights at night. Plus 230 pedestrians circling sidewalks, birds by day, and animated billboards showing the in-game clock. - **Full day/night cycle** — palette-lerped sky with sun/moon discs, stars, fog distance shifts, street lamp glow decals, blinking tower beacons, and a shadow camera that follows you. - **Game layer** — first-person walk/run/jump with grid-based collision (buildings, fountains, bridge railings, the river), a drone fly mode, 42 collectible golden orbs (including one on the tallest rooftop), live minimap, district-name popups, ambient city audio with random car horns, and `R` regenerates a brand-new city from a fresh seed. Click **ENTER THE CITY** (pointer lock engages; if your environment blocks it, drag-to-look kicks in automatically) and try starting at golden hour — the first view from the plaza across the river toward the skyline is the moment I built the whole layout around.