@a2f0/skyline 0.2.19 → 0.2.22

package/site/models/blue-cross-geographic.js

@@ -38,7 +38,8 @@ const messageTopFloors = zones.map(([, , count], zone) => h.floors.slice(0, zone
     + Math.floor((count + 5) / 2) - 1).reverse().slice(0, 3);
 export const blueCrossFloors = [...zones.flatMap(([from, to, count]) => Array.from({ length: count }, (_, i) => from + (to - from) * i / count)), h.occupied];
 const spandrelBelow = 0.3, spandrelAbove = 0.9;
-const southInfillFront = 0.52, emblemClearance = 0.1;
+const infillFront = 0.52, emblemClearance = 0.1;
+const transom = { height: 0.18, back: 0.17, front: 0.22, cornerClearance: 0.25 };
 const color = (hex) => new THREE.Color(hex);
 const glassTones = [0x414141, 0x464646, 0x3c3c3c, 0x4a4a4a].map(color);
 const litGlass = color(0x8a8a8a), dimGlass = color(0x5c5c5c);
@@ -76,14 +77,29 @@ const rows = [];
     push(h.roof, h.top, "screen", -1);
 }
 const rowsBetween = (lo, hi) => rows.filter((row) => row.lo >= lo - 1e-6 && row.hi <= hi + 1e-6);
+// The end wings carry their curtain wall through the lower and upper bands.
+// Only the middle level is an open setback. Subdivide the old band backing into
+// normal glazing/spandrel courses on the wings and exposed short block returns.
+// FID-BCBS-005: 2012 oblique photographs, docs/blue-cross-reference.md.
+const glazedBandRows = (cuts) => cuts.flatMap((row) => {
+    if (row.kind !== "band")
+        return [row];
+    const band = h.bands.find(([, hi]) => hi === row.hi);
+    const count = band === h.bands[1] ? 3 : 2;
+    return Array.from({ length: count }, (_, i) => {
+        const lo = row.lo + (row.hi - row.lo) * i / count;
+        const hi = row.lo + (row.hi - row.lo) * (i + 1) / count;
+        return [{ lo, hi: lo + 0.8, kind: "spandrel", floor: -1 }, { lo: lo + 0.8, hi, kind: "glass", floor: -1 }];
+    }).flat();
+});
 export function createBlueCrossGeographicBuilding(record, projectPlan, offset) {
     const kit = createBuilder(record.name, record.id);
     const shell = kit.batch("Blue Cross · shell", kit.material(0xffffff, { vertexColors: true }));
     const wall = kit.batch("Blue Cross · glass, spandrels and bands", kit.material(0xffffff, { vertexColors: true }));
     const mullions = kit.batch("Blue Cross · mullions", kit.material(0x2c2c2c));
     const bars = kit.batch("Blue Cross · band columns and emblems", kit.material(0xb4b4b4));
-    const infill = kit.batch("Blue Cross · south band infill", kit.material(0xffffff, { vertexColors: true }));
-    const transoms = kit.batch("Blue Cross · south transoms", kit.material(0xb4b4b4));
+    const infill = kit.batch("Blue Cross · band infill", kit.material(0xffffff, { vertexColors: true }));
+    const transoms = kit.batch("Blue Cross · transoms", kit.material(0xb4b4b4));
     const aluminium = color(0xb4b4b4);
     const windows = [];
     let windowColumns = 0;
@@ -134,10 +150,13 @@ export function createBlueCrossGeographicBuilding(record, projectPlan, offset) {
     // every row, and mullions one module apart on the office floors. Each unbroken stretch of
     // kept runs along a chain is one box, held 2 cm clear of its ends.
     const skin = (corners, lo, hi, seed, keep, lift = 0) => {
-        const plan = planOf(corners), cuts = rowsBetween(lo, hi);
-        const heights = [cuts[0].lo + lift, ...cuts.map((row) => row.hi)];
+        const plan = planOf(corners);
         const top = Math.min(hi, h.roof) - 0.05;
         chainsOf(plan).forEach((chain, index) => {
+            const shortFace = Math.abs(plan[chain.runs[0]].normal(0)[0]) > 0.9;
+            const sideGlazing = seed !== 0 || shortFace;
+            const cuts = sideGlazing ? glazedBandRows(rowsBetween(lo, hi)) : rowsBetween(lo, hi);
+            const heights = [cuts[0].lo + lift, ...cuts.map((row) => row.hi)];
             const count = Math.max(1, Math.round(chain.length / h.module));
             const stations = Array.from({ length: count + 1 }, (_, i) => chain.length * i / count);
             const messageFace = seed === 0 && plan[chain.runs[0]].normal(0)[1] > 0.9 && chain.length > 50;
@@ -164,6 +183,21 @@ export function createBlueCrossGeographicBuilding(record, projectPlan, offset) {
                         return screen;
                     return spandrel;
                 }, spandrel);
+                if (sideGlazing) {
+                    // Close each rail as a thin box following the mapped chain. Keep rails
+                    // off the skin's top/bottom planes and ahead of its vertical mullions.
+                    // Leave corner clearance for rails on adjoining/reentrant faces.
+                    const railStart = s0 + transom.cornerClearance, railEnd = s1 - transom.cornerClearance;
+                    const railK0 = chain.starts.findLastIndex((s) => s <= railStart);
+                    const railK1 = chain.starts.findLastIndex((s) => s < railEnd);
+                    for (const row of cuts.filter(({ kind }) => kind === "glass")) {
+                        for (const [bottom, top] of [[row.lo - transom.height, row.lo], [row.hi, row.hi + transom.height]]) {
+                            if (railEnd <= railStart || bottom <= heights[0] || top >= hi)
+                                continue;
+                            chainSkin(kit, transoms, plan, chain, railK0, railK1, railStart, railEnd, [], [bottom, top], transom.back, transom.front, () => aluminium, aluminium);
+                        }
+                    }
+                }
                 // Mullions on each office run, whole on one run and held clear of its ends. Their
                 // backs stand a centimetre off the wall: on the block's side walls the middle band's
                 // mullions start just inside the end bays, whose closing walls lie in that plane and
@@ -207,7 +241,7 @@ export function createBlueCrossGeographicBuilding(record, projectPlan, offset) {
     const emblem = (centre, t, n, y, shape) => {
         // The corrected screen panels stand ahead of the old backing plane.
         const point = ([u, v], depth) => [centre[0] + t[0] * u + n[0] * depth, y + v, centre[1] + t[1] * u + n[1] * depth];
-        const backDepth = southInfillFront + emblemClearance, frontDepth = backDepth + 0.23;
+        const backDepth = infillFront + emblemClearance, frontDepth = backDepth + 0.23;
         const out = [n[0], 0, n[1]], back = [-n[0], 0, -n[1]];
         shape.forEach((p, i) => {
             const q = shape[(i + 1) % shape.length];
@@ -224,8 +258,8 @@ export function createBlueCrossGeographicBuilding(record, projectPlan, offset) {
     const cross = [[0.7, 2.1], [0.7, 0.7], [2.1, 0.7], [2.1, -0.7], [0.7, -0.7], [0.7, -2.1],
         [-0.7, -2.1], [-0.7, -0.7], [-2.1, -0.7], [-2.1, 0.7], [-0.7, 0.7], [-0.7, 2.1]];
     const shield = [[-1.8, 2.1], [1.8, 2.1], [1.8, 0.3], [1.6, -0.7], [1.0, -1.5], [0, -2.1], [-1.0, -1.5], [-1.6, -0.7], [-1.8, 0.3]];
-    // The block's columns, exposed in each band and in the screen on its long faces: eight
-    // across each, one to a structural bay. The emblems stand in the screen's first two
+    // The block's columns, exposed in each band and in the screen on its long faces:
+    // eight south, six north. The emblems stand in the screen's first two south
     // bays at the south face's west end, the cross west of the shield.
     const faces = chainsOf(planOf(block)).filter(({ length }) => length > 50);
     faces.forEach((chain) => {
@@ -233,16 +267,16 @@ export function createBlueCrossGeographicBuilding(record, projectPlan, offset) {
         const a = run.at(0), b = last.at(last.length), n = run.normal(0), length = Math.hypot(b[0] - a[0], b[1] - a[1]);
         const t = [(b[0] - a[0]) / length, (b[1] - a[1]) / length];
         const at = (s) => [a[0] + t[0] * s, a[1] + t[1] * s];
-        const pitch = length / 8;
-        for (let i = 0; i < 8; i += 1) {
+        const slotCount = n[1] > 0.9 ? 8 : 6, pitch = length / slotCount;
+        for (let i = 0; i < slotCount; i += 1) {
             for (const [lo, hi] of [...h.bands, [h.roof + 0.4, h.top - 0.3]])
                 kit.box(bars, at((i + 0.5) * pitch), n, 0.45, 0.07, 0.4, lo + 0.1, hi - 0.1);
         }
-        if (n[1] > 0.9) {
-            // FID-BCBS-002: the 2010 south elevation has eight narrow column slots,
+        if (Math.abs(n[1]) > 0.9) {
+            // FID-BCBS-002/005: the long elevations have narrow column slots,
             // with curtain-wall panels between them, not an uninterrupted dark band.
-            // Restrict this reconstruction to the photographed face: the north atrium
-            // has a different structural rhythm. Keep the mapped chain's small bends.
+            // The northeast photograph resolves six on the north crown. The five
+            // internal north atrium bays alone do not establish facade spacing.
             const panel = (target, s0, s1, levels, columns, back, front, paint, sides) => {
                 const k0 = chain.starts.findLastIndex((s) => s <= s0);
                 const k1 = chain.starts.findLastIndex((s) => s < s1);
@@ -270,21 +304,22 @@ export function createBlueCrossGeographicBuilding(record, projectPlan, offset) {
                 }
                 append(hi - 0.18, crown ? screen : glassTones[1]);
                 append(hi - 0.02, aluminium);
-                for (let bay = 0; bay <= 8; bay += 1) {
+                for (let bay = 0; bay <= slotCount; bay += 1) {
                     const s0 = bay === 0 ? 0.02 : (bay - 0.5) * pitch + 0.95;
-                    const s1 = bay === 8 ? chain.length - 0.02 : (bay + 0.5) * pitch - 0.95;
-                    panel(infill, s0, s1, levels, [s0, s0 + 0.12, s1 - 0.12, s1], 0.2, southInfillFront, (cell, row) => cell === 1 || cell === 3 ? aluminium : paints[row], aluminium);
+                    const s1 = bay === slotCount ? chain.length - 0.02 : (bay + 0.5) * pitch - 0.95;
+                    panel(infill, s0, s1, levels, [s0, s0 + 0.12, s1 - 0.12, s1], 0.2, infillFront, (cell, row) => cell === 1 || cell === 3 ? aluminium : paints[row], aluminium);
                 }
             }
             // Pale rails frame the office ribbons. They sit just ahead of the vertical
             // mullions and never cross the exposed column slots or celebration panes.
             for (const row of rows.filter(({ kind }) => kind === "glass")) {
-                for (const [lo, hi] of [[row.lo - 0.18, row.lo], [row.hi, row.hi + 0.18]]) {
-                    panel(transoms, 0.02, chain.length - 0.02, [lo, hi], [], 0.17, 0.22, () => aluminium, aluminium);
+                for (const [lo, hi] of [[row.lo - transom.height, row.lo], [row.hi, row.hi + transom.height]]) {
+                    panel(transoms, 0.02, chain.length - 0.02, [lo, hi], [], transom.back, transom.front, () => aluminium, aluminium);
                 }
             }
             // The south face runs west to east; the emblems stand in its first two bays.
-            [cross, shield].forEach((shape, i) => emblem(at((i + 1) * pitch), t, n, h.roof + 6.7, shape));
+            if (n[1] > 0.9)
+                [cross, shield].forEach((shape, i) => emblem(at((i + 1) * pitch), t, n, h.roof + 6.7, shape));
         }
     });
     const model = kit.finish({ height: h.top, outlines: [shell, mullions], opacity: 0.16 });

package/site/models/colour-materials.js

@@ -1,6 +1,7 @@
 import * as THREE from "../vendor/three-r186.js";
 import { daylightColours, measuredColours } from "./colour-palette.js";
-import { glassReflection } from "./colour-reflections.js";
+import { glassReflection, daylightReflections } from "./colour-reflections.js";
+import { nightWindowMask } from "./night-windows.js";
 // The colour trial (https://github.com/a2f0/skyline/issues/115): which named material each
 // surface of each building is, and a layer that shows the colours measured for those materials
 // (colour-palette.ts) over the greys the models build in, restoring the greys exactly when it is
@@ -117,8 +118,8 @@ export const colourMaterials = {
         "glass, spandrels and bands": ["glass", { ...windows(0x8a8a8a, 0x5c5c5c), 0x383838: "opaque spandrel", 0x2a2a2a: "neutral", 0x3e3e3e: "screen" }],
         mullions: ["dark metal"],
         "band columns and emblems": ["band lights"],
-        "south band infill": ["glass", { 0x383838: "opaque spandrel", 0x3e3e3e: "screen", 0xb4b4b4: "aluminium" }],
-        "south transoms": ["aluminium"],
+        "band infill": ["glass", { 0x383838: "opaque spandrel", 0x3e3e3e: "screen", 0xb4b4b4: "aluminium" }],
+        transoms: ["aluminium"],
     },
     // Blue-green glass, and the south face's white concrete frame.
     "building-340-on-the-park": {
@@ -358,9 +359,16 @@ export function createDaylight() {
 // another batch already took, since the builder lets batches share them.
 export function createSkylineColour(models) {
     const painted = [], flat = [], taken = new Set();
-    const reflections = [];
+    const facades = [];
+    const outlines = [];
+    let night = null;
     const glassMaterials = new Set(["glass", "green glass", "blue-green glass", "bronze glass", "crown glass", "lit window", "dim window"]);
     for (const model of models) {
+        model.building.traverse((object) => {
+            const line = object;
+            if (line.isLineSegments && line.material instanceof THREE.LineBasicMaterial)
+                outlines.push({ material: line.material, opacity: line.material.opacity });
+        });
         const buildingId = String(model.building.userData["buildingId"]);
         if (!measuredColours[buildingId])
             continue;
@@ -381,7 +389,13 @@ export function createSkylineColour(models) {
                 return;
             const [base, tones = {}] = batch;
             const material = mesh.material;
-            const materialOf = (grey) => tones[toneOf(grey)] ?? base;
+            const names = new Map();
+            const materialOf = (grey) => {
+                let name = names.get(grey);
+                if (!name)
+                    names.set(grey, name = tones[toneOf(grey)] ?? base);
+                return name;
+            };
             const attribute = mesh.geometry.getAttribute("color");
             if (material.vertexColors) {
                 if (!(attribute?.array instanceof Float32Array) || taken.has(attribute))
@@ -413,8 +427,9 @@ export function createSkylineColour(models) {
                 }
                 mask[vertex] = reflects;
             }
-            if (mask.some((value) => value > 0))
-                reflections.push(glassReflection(material, geometry, mask));
+            const windows = nightWindowMask(geometry, buildingId, (vertex) => materialOf(colours ? colours.array[vertex * 3] : material.color.r));
+            if (mask.some((value) => value > 0) || windows.some((value) => value > 0))
+                facades.push({ light: glassReflection(material, geometry, mask, windows), model });
             const colourOf = (grey) => {
                 const swatch = swatches.get(materialOf(grey));
                 return swatch ? paint(grey, swatch) : [grey, grey, grey];
@@ -435,6 +450,12 @@ export function createSkylineColour(models) {
         }
     }
     let enabled = false;
+    function updateNight() {
+        for (const { light, model } of facades)
+            light.setNight(night, enabled, Boolean(model.illumination?.active));
+        for (const { material, opacity } of outlines)
+            material.opacity = opacity * (night?.outlineStrength ?? 1);
+    }
     return {
         get enabled() { return enabled; },
         set(next) {
@@ -459,10 +480,20 @@ export function createSkylineColour(models) {
             }
             for (const { material, grey, colour } of flat)
                 material.color.copy(next ? colour : grey);
-            for (const reflect of reflections)
-                reflect(next);
+            for (const { light } of facades)
+                light(next);
+            updateNight();
+        },
+        setSky(colours) {
+            for (const { light } of facades)
+                light.setSky(colours ?? daylightReflections);
+        },
+        setNight(lighting) {
+            night = lighting;
+            updateNight();
         },
         refresh() {
+            updateNight();
             if (!enabled)
                 return;
             for (const batch of painted) {

package/site/models/colour-palette.js

@@ -290,3 +290,14 @@ export const measuredColours = {
 // above the horizon, each the median of a clear box of the same panorama (scripts/sample-colours.ts,
 // the day study's sky), and the sun's warm white, chosen.
 export const daylightColours = { sky: 0x9ebbdb, horizon: 0xc4d1e1, sun: 0xfff4e6 };
+// Art-directed night illumination: quiet cool facades and a mix of warm office lamps.
+export const nightColours = { ambient: 0xa1afc8, fill: 0x8d9fbd, window: 0xffcf91, windowWhite: 0xffedce };
+// Illustrated clear-sky time previews. Solar elevation chooses the stops; these are
+// artistic colours, separate from the photograph-calibrated daytime palette above.
+export const timeOfDayColours = [
+    { elevation: -18, sky: 0x02040c, horizon: 0x080d1b, sun: 0xffb077 },
+    { elevation: -8, sky: 0x142345, horizon: 0x5b526e, sun: 0xffad76 },
+    { elevation: -2, sky: 0x415b89, horizon: 0xe89b79, sun: 0xffb477 },
+    { elevation: 6, sky: 0x829fc5, horizon: 0xf0c3a0, sun: 0xffd4a8 },
+    { elevation: 25, ...daylightColours },
+];

package/site/models/colour-reflections.js

@@ -1,32 +1,51 @@
 import * as THREE from "../vendor/three-r186.js";
-import { daylightColours } from "./colour-palette.js";
+import { daylightColours, nightColours } from "./colour-palette.js";
+export const daylightReflections = { ...daylightColours, ground: 0x444444 };
 // A small sky reflection over the measured glass colour. This is an illustration of an open
 // sky, not a reflection of nearby buildings or a replacement for the toon renderer. The mask
 // separates glass from masonry and mullions even when the builder batches them in one mesh.
-// Install only in colour mode, and restore the original shader on exit. Keep the mask attached
-// once used so Three.js releases its GPU buffer when it disposes the geometry.
-export function glassReflection(material, geometry, mask) {
+// The same shader adds night-window emission, independently of material colour. Restore the
+// original shader outside colour/time previews. Keep attributes attached once used so Three.js
+// releases their GPU buffers when it disposes the geometry.
+export function glassReflection(material, geometry, mask, windows = new Float32Array(mask.length * 4)) {
     const attribute = new THREE.Float32BufferAttribute(mask, 1);
+    const windowAttribute = new THREE.Float32BufferAttribute(windows, 4);
     const originalCompile = material.onBeforeCompile, originalKey = material.customProgramCacheKey;
     const key = originalKey.call(material);
     const uniforms = {
         skylineSky: { value: new THREE.Color(daylightColours.sky) },
         skylineHorizon: { value: new THREE.Color(daylightColours.horizon) },
         skylineGround: { value: new THREE.Color(0x444444) },
+        skylineReflecting: { value: 0 },
+        skylineDarkness: { value: 0 },
+        skylineActivity: { value: 0 },
+        skylineWindowsSuppressed: { value: 0 },
+        skylineWindowWarm: { value: new THREE.Color(nightColours.window) },
+        skylineWindowWhite: { value: new THREE.Color(nightColours.windowWhite) },
     };
     const compile = (shader, renderer) => {
         originalCompile.call(material, shader, renderer);
         Object.assign(shader.uniforms, uniforms);
         shader.vertexShader = shader.vertexShader.replace("#include <common>", `#include <common>
 attribute float skylineGlass;
-varying float vSkylineGlass;`).replace("#include <begin_vertex>", `#include <begin_vertex>
-vSkylineGlass = skylineGlass;`);
+attribute vec4 skylineWindow;
+varying float vSkylineGlass;
+varying vec4 vSkylineWindow;`).replace("#include <begin_vertex>", `#include <begin_vertex>
+vSkylineGlass = skylineGlass;
+vSkylineWindow = skylineWindow;`);
         shader.fragmentShader = shader.fragmentShader.replace("#include <common>", `#include <common>
 varying float vSkylineGlass;
+varying vec4 vSkylineWindow;
 uniform vec3 skylineSky;
 uniform vec3 skylineHorizon;
-uniform vec3 skylineGround;`).replace("#include <opaque_fragment>", `
-if (vSkylineGlass > 0.0) {
+uniform vec3 skylineGround;
+uniform float skylineReflecting;
+uniform float skylineDarkness;
+uniform float skylineActivity;
+uniform float skylineWindowsSuppressed;
+uniform vec3 skylineWindowWarm;
+uniform vec3 skylineWindowWhite;`).replace("#include <opaque_fragment>", `
+if (vSkylineGlass > 0.0 && skylineReflecting > 0.0) {
   vec3 eye = vec3(0.0);
   eye.z = 1.0;
   if (!isOrthographic) eye = normalize(vViewPosition);
@@ -36,18 +55,58 @@ if (vSkylineGlass > 0.0) {
   float grazing = pow(1.0 - clamp(dot(normal, eye), 0.0, 1.0), 5.0);
   outgoingLight = mix(outgoingLight, environment, vSkylineGlass * (0.06 + 0.54 * grazing));
 }
+if (vSkylineWindow.z > 0.0 && skylineDarkness > 0.0) {
+  float occupied = 1.0 - smoothstep(skylineActivity - 0.05, skylineActivity + 0.05, vSkylineWindow.x);
+  float dusk = smoothstep(0.12 + 0.35 * vSkylineWindow.x, 0.45 + 0.35 * vSkylineWindow.x, skylineDarkness);
+  float light = vSkylineWindow.z > 1.5 ? skylineDarkness : occupied * dusk * (1.0 - skylineWindowsSuppressed);
+  vec3 lamp = mix(skylineWindowWarm, skylineWindowWhite, vSkylineWindow.w);
+  outgoingLight += lamp * vSkylineWindow.y * light;
+}
 #include <opaque_fragment>`);
     };
-    return (enabled) => {
+    let reflecting = false, night = false, installed = false;
+    function install() {
+        const enabled = reflecting || night;
+        if (enabled === installed)
+            return;
+        installed = enabled;
         if (enabled) {
             geometry.setAttribute("skylineGlass", attribute);
+            geometry.setAttribute("skylineWindow", windowAttribute);
             material.onBeforeCompile = compile;
-            material.customProgramCacheKey = () => `${key}:skyline-glass-v1`;
+            material.customProgramCacheKey = () => `${key}:skyline-facade-v2`;
         }
         else {
             material.onBeforeCompile = originalCompile;
             material.customProgramCacheKey = originalKey;
         }
         material.needsUpdate = true;
+    }
+    const set = (enabled) => {
+        reflecting = enabled;
+        uniforms.skylineReflecting.value = enabled ? 1 : 0;
+        install();
     };
+    return Object.assign(set, {
+        setSky(colours) {
+            uniforms.skylineSky.value.setHex(colours.sky);
+            uniforms.skylineHorizon.value.setHex(colours.horizon);
+            uniforms.skylineGround.value.setHex(colours.ground);
+        },
+        setNight(lighting, coloured, celebration) {
+            night = lighting !== null;
+            // A deliberately composed celebration takes precedence over ordinary office rooms.
+            uniforms.skylineDarkness.value = lighting?.darkness ?? 0;
+            uniforms.skylineWindowsSuppressed.value = celebration ? 1 : 0;
+            uniforms.skylineActivity.value = lighting?.activity ?? 0;
+            for (const [uniform, hex] of [[uniforms.skylineWindowWarm, nightColours.window], [uniforms.skylineWindowWhite, nightColours.windowWhite]]) {
+                uniform.value.setHex(hex);
+                if (!coloured) {
+                    const { r, g, b } = uniform.value, grey = r * 0.2126 + g * 0.7152 + b * 0.0722;
+                    uniform.value.setRGB(grey, grey, grey);
+                }
+            }
+            install();
+        },
+    });
 }

package/site/models/night-windows.js

@@ -0,0 +1,76 @@
+export const smooth = (low, high, value) => {
+    const t = Math.max(0, Math.min(1, (value - low) / (high - low)));
+    return t * t * (3 - 2 * t);
+};
+// A continuous daily cycle: busy evenings, a few overnight rooms, then early arrivals.
+// Midnight shares the same curve from either side, including when scrubbing backwards.
+export function windowActivity(hour) {
+    const late = hour < 12 ? hour + 24 : hour;
+    return 0.76 - 0.52 * smooth(21, 26, late) + 0.3 * smooth(29, 32, late) + (hour < 12 ? 0.22 * smooth(8, 12, hour) : 0);
+}
+function hash(value) {
+    let seed = 2166136261;
+    for (const character of value)
+        seed = Math.imul(seed ^ character.charCodeAt(0), 16777619);
+    // Avalanche adjacent room keys: plain FNV leaves trailing bay digits correlated,
+    // making a whole east-facing floor turn on together instead of small room groups.
+    seed = Math.imul(seed ^ (seed >>> 16), 0x85ebca6b);
+    seed = Math.imul(seed ^ (seed >>> 13), 0xc2b2ae35);
+    seed ^= seed >>> 16;
+    return (seed >>> 0) / 4294967296;
+}
+const architectural = new Set(["lamp", "crown lights", "band lights", "sign letters", "cap lights"]);
+// The building kit emits panes as paired triangles, interspersed with standalone
+// triangles for other features. Find shared edges rather than assuming quad alignment.
+// Reuse those exact surfaces;
+// never turn a generic glass shell, spandrel, masonry face or roof into a light source.
+// Adjacent bays share a floor/room seed, so offices come on in small groups. Identity
+// depends on local geometry and building ID, not load order, camera or slider direction.
+export function nightWindowMask(geometry, buildingId, materialOf) {
+    const positions = geometry.getAttribute("position"), normals = geometry.getAttribute("normal");
+    const mask = new Float32Array(positions.count * 4);
+    const samePoint = (a, b) => positions.getX(a) === positions.getX(b) && positions.getY(a) === positions.getY(b) && positions.getZ(a) === positions.getZ(b);
+    for (let first = 0; first < positions.count;) {
+        const name = materialOf(first), crown = architectural.has(name);
+        const window = name === "lit window" || name === "dim window";
+        if (!crown && (!window || Math.abs(normals.getY(first)) > 0.5)) {
+            first += 3;
+            continue;
+        }
+        let count = 3;
+        if (first + 6 <= positions.count && materialOf(first + 3) === name
+            && normals.getX(first) === normals.getX(first + 3) && normals.getY(first) === normals.getY(first + 3) && normals.getZ(first) === normals.getZ(first + 3)) {
+            let shared = 0;
+            for (let a = first; a < first + 3; a += 1) {
+                for (let b = first + 3; b < first + 6; b += 1)
+                    if (samePoint(a, b)) {
+                        shared += 1;
+                        break;
+                    }
+            }
+            if (shared === 2)
+                count = 6;
+        }
+        const end = first + count;
+        let x = 0, y = 0, z = 0;
+        for (let vertex = first; vertex < end; vertex += 1) {
+            x += positions.getX(vertex);
+            y += positions.getY(vertex);
+            z += positions.getZ(vertex);
+        }
+        const floor = Math.round(y / count / 3.4), across = Math.floor(x / count / 7), depth = Math.floor(z / count / 7);
+        const room = hash(`${buildingId}:${floor}:${across}:${depth}`);
+        const brightness = hash(`${buildingId}:${floor}:${across}:${depth}:brightness`);
+        for (let vertex = first; vertex < end; vertex += 1) {
+            if (materialOf(vertex) !== name)
+                continue;
+            const rank = name === "lit window" ? 0.05 + room * 0.8 : 0.3 + room * 0.75;
+            mask[vertex * 4] = rank;
+            mask[vertex * 4 + 1] = crown ? 0.3 : 0.25 + brightness * 0.45;
+            mask[vertex * 4 + 2] = crown ? 2 : 1;
+            mask[vertex * 4 + 3] = brightness;
+        }
+        first = end;
+    }
+    return mask;
+}

package/site/skyline-3d.html

@@ -56,6 +56,12 @@
         <button type="button" id="colour" aria-pressed="false" title="Colour trial: a sunny day, each measured building in its photographed colours; the rest stay grey">colour</button>
         <button type="button" id="turntable" aria-pressed="false" aria-describedby="motion-status">turntable</button>
         <button type="button" id="show-original" title="Compare with the original skyline SVG" hidden>show original</button>
+        <div class="time-controls">
+          <label for="time-of-day"><span id="time-caption">Chicago time</span> <span id="time-date"></span></label>
+          <input id="time-of-day" type="range" min="0" max="1439" step="1" value="0" aria-labelledby="time-caption" />
+          <output id="time-value" for="time-of-day" aria-live="off">original night</output>
+          <button type="button" id="reset-light" disabled title="Restore the original lighting preset">reset light</button>
+        </div>
         <div class="celebration-controls" id="celebration-controls" role="group" aria-label="Celebratory window lighting">
           <span class="celebration-caption">lights</span>
           <button type="button" data-celebration="bulls" aria-label="Bulls lighting" aria-pressed="false">

package/site/skyline-3d.js

@@ -1,6 +1,8 @@
 import { createBuildingStudy, frameBox } from "./study-viewer.js";
 import { createGeographicSkyline } from "./skyline-scene.js";
-import { createGeographicRoads } from "./models/skyline-geography.js";
+import { chicagoDay, chicagoTime } from "./solar-time.js";
+import { createTimeLighting } from "./time-of-day.js";
+import { createGeographicRoads, geographicOrigin } from "./models/skyline-geography.js";
 import { celebrations } from "./models/celebrations.js";
 import { createDaylight, createSkylineColour, daylightGround } from "./models/colour-materials.js";
 import { loadMarkup, loadStylesheet } from "./markup.js";
@@ -109,26 +111,60 @@ export function startSkyline3d({ root, frame, assets, signal, colour: initiallyC
             viewer.requestRender();
         }, listening);
     }
-    // The colour trial's toggle, pressed while the scene shows a sunny day, the measured buildings in
-    // their colours over the greys; pressed again, it restores the night and every grey exactly.
+    // Preserve the original grey/day presets until time is scrubbed. Once previewing,
+    // material colour and time are independent; reset light returns to the chosen preset.
     const colourButton = root.querySelector("#colour");
     const roadway = roads.material;
+    const timeInput = root.querySelector("#time-of-day");
+    const timeOutput = root.querySelector("#time-value");
+    const timeReset = root.querySelector("#reset-light");
+    const day = chicagoDay(new Date());
+    root.querySelector("#time-date").textContent = day.label;
+    timeInput.max = String(day.minutes - 1);
+    const timeLight = createTimeLighting(geographicOrigin[1], geographicOrigin[0], root instanceof ShadowRoot);
+    let selectedTime = null;
     let daylight;
     let detailView;
-    signal.addEventListener("abort", () => daylight?.sky.dispose(), { once: true });
+    signal.addEventListener("abort", () => { daylight?.sky.dispose(); timeLight.dispose(); }, { once: true });
     function setColour(enabled) {
         colour.set(enabled);
-        if (enabled)
-            daylight ??= createDaylight();
-        roadway.color.setHex(colour.enabled ? daylightGround.roads : nightRoads);
-        viewer.setDaylight(colour.enabled ? daylight : null);
-        colourButton.setAttribute("aria-pressed", String(colour.enabled));
-        colourButton.title = enabled ? "Restore the greyscale skyline" : "Show the skyline in sunny-day colour";
-        detailView?.setColour(enabled);
+        if (selectedTime) {
+            const lighting = timeLight.update(selectedTime, enabled);
+            colour.setSky(lighting.reflections);
+            colour.setNight(lighting.night);
+            roadway.color.setHex(lighting.roads);
+            viewer.setDaylight(lighting);
+            timeOutput.value = chicagoTime(selectedTime);
+        }
+        else {
+            if (enabled)
+                daylight ??= createDaylight();
+            colour.setSky(null);
+            colour.setNight(null);
+            roadway.color.setHex(enabled ? daylightGround.roads : nightRoads);
+            viewer.setDaylight(enabled ? daylight : null);
+            timeInput.value = enabled ? "720" : "0";
+            timeOutput.value = enabled ? "sunny day" : "original night";
+        }
+        timeReset.disabled = !selectedTime;
+        timeInput.setAttribute("aria-valuetext", `${timeOutput.value}, ${day.label}, Chicago${selectedTime ? "" : ", move to preview a time"}`);
+        colourButton.setAttribute("aria-pressed", String(enabled));
+        colourButton.title = selectedTime ? (enabled ? "Show this time in greyscale" : "Show this time in colour")
+            : enabled ? "Restore the greyscale skyline" : "Show the skyline in sunny-day colour";
+        detailView?.setTime(selectedTime, enabled);
     }
+    timeInput.addEventListener("input", () => {
+        const firstPreview = selectedTime === null;
+        selectedTime = new Date(day.start + timeInput.valueAsNumber * 60_000);
+        setColour(firstPreview || colour.enabled);
+    }, listening);
+    timeReset.addEventListener("click", () => {
+        timeInput.focus({ preventScroll: true });
+        selectedTime = null;
+        setColour(colour.enabled);
+    }, listening);
     colourButton.addEventListener("click", () => setColour(!colour.enabled), listening);
-    if (initiallyColoured)
-        setColour(true);
+    setColour(initiallyColoured);
     // The star in the middle of the bar opens and closes the toolbar. Each group unfolds from
     // the star: clipped open from its `--fold` inset while it fades in, one beside the star
     // slides out from it to its edge of the bar, and it folds back the same way before it hides. A toggle mid-way reverses the moving
@@ -412,6 +448,7 @@ export function startSkyline3d({ root, frame, assets, signal, colour: initiallyC
             markup.classList.add("framed");
             detailRoot.append(document.importNode(markup, true));
             detailView = showBuildingDetail({ root: detailRoot, id, frame: detailRoot.querySelector(".detail-root"), signal: controller.signal, colour: colour.enabled, onColourChange: setColour });
+            detailView?.setTime(selectedTime, colour.enabled);
         }).catch((error) => {
             if (controller.signal.aborted)
                 return;

package/site/skyline-viewer.js

@@ -201,7 +201,7 @@ export function mount(root, { assets, signal, controls, colour, attribution, nav
             // As the scene's own page says it: its controls stay, disabled, and the drawing one
             // press away.
             scene.querySelector("#loading").textContent = SCENE_FAILURE;
-            scene.querySelectorAll("button").forEach((button) => { button.disabled = true; });
+            scene.querySelectorAll("button, input").forEach((control) => { control.disabled = true; });
             throw error;
         }
     }

package/site/solar-time.js

@@ -0,0 +1,53 @@
+const radians = Math.PI / 180;
+const minute = 60_000;
+const chicago = new Intl.DateTimeFormat("en-US", { timeZone: "America/Chicago", year: "numeric", month: "numeric", day: "numeric", hour: "numeric", minute: "numeric", hourCycle: "h23" });
+const clock = new Intl.DateTimeFormat("en-US", { timeZone: "America/Chicago", hour: "numeric", minute: "2-digit", timeZoneName: "short" });
+function parts(date) {
+    const values = Object.fromEntries(chicago.formatToParts(date).map(({ type, value }) => [type, Number(value)]));
+    return { year: values["year"], month: values["month"], day: values["day"], hour: values["hour"], minute: values["minute"] };
+}
+// Chicago's midnight is unambiguous even on clock-change dates. Resolve each end
+// separately: those days contain 23 or 25 hours, and both repeated hours are reachable.
+function midnight(year, month, day) {
+    const wall = Date.UTC(year, month - 1, day);
+    let instant = wall;
+    for (let attempt = 0; attempt < 3; attempt += 1) {
+        const p = parts(new Date(instant));
+        instant += wall - Date.UTC(p.year, p.month - 1, p.day, p.hour, p.minute);
+    }
+    return instant;
+}
+export function chicagoDay(now) {
+    const { year, month, day } = parts(now);
+    const start = midnight(year, month, day), end = midnight(year, month, day + 1);
+    return {
+        start,
+        minutes: (end - start) / minute,
+        label: new Intl.DateTimeFormat("en-US", { timeZone: "America/Chicago", month: "short", day: "numeric", year: "numeric" }).format(now),
+    };
+}
+export const chicagoTime = (date) => clock.format(date);
+export const chicagoHour = (date) => {
+    const { hour, minute: minutes } = parts(date);
+    return hour + minutes / 60;
+};
+// NOAA's general solar-position equations (geometric elevation, no refraction):
+// https://gml.noaa.gov/grad/solcalc/solareqns.PDF
+// An absolute instant and east-positive longitude avoid browser time-zone/DST offsets.
+export function solarPosition(date, latitude, longitude) {
+    const year = date.getUTCFullYear(), start = Date.UTC(year, 0, 1);
+    const days = (Date.UTC(year + 1, 0, 1) - start) / 86_400_000;
+    const fraction = 2 * Math.PI / days * ((date.getTime() - start) / 86_400_000 - 0.5);
+    const equation = 229.18 * (0.000075 + 0.001868 * Math.cos(fraction) - 0.032077 * Math.sin(fraction)
+        - 0.014615 * Math.cos(2 * fraction) - 0.040849 * Math.sin(2 * fraction));
+    const declination = 0.006918 - 0.399912 * Math.cos(fraction) + 0.070257 * Math.sin(fraction)
+        - 0.006758 * Math.cos(2 * fraction) + 0.000907 * Math.sin(2 * fraction)
+        - 0.002697 * Math.cos(3 * fraction) + 0.00148 * Math.sin(3 * fraction);
+    const utcMinutes = date.getUTCHours() * 60 + date.getUTCMinutes() + date.getUTCSeconds() / 60;
+    const hour = ((utcMinutes + equation + 4 * longitude) / 4 - 180) * radians;
+    const lat = latitude * radians;
+    const east = -Math.cos(declination) * Math.sin(hour);
+    const north = Math.cos(lat) * Math.sin(declination) - Math.sin(lat) * Math.cos(declination) * Math.cos(hour);
+    const up = Math.sin(lat) * Math.sin(declination) + Math.cos(lat) * Math.cos(declination) * Math.cos(hour);
+    return { elevation: Math.asin(Math.max(-1, Math.min(1, up))) / radians, direction: [east, up, -north] };
+}