@a2f0/skyline 0.2.19 → 0.2.22

package/lib/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/lib/models/colour-materials.d.ts

@@ -1,5 +1,7 @@
 import type { BuildingModel } from "./building-kit.js";
 import type { Daylight } from "../study-types.js";
+import { type ReflectionColours } from "./colour-reflections.js";
+import { type NightLighting } from "./night-windows.js";
 export declare const materialNames: readonly ["neutral", "glass", "green glass", "blue-green glass", "bronze glass", "lit window", "dim window", "lamp", "limestone", "marble", "white granite", "granite", "dark granite", "slate", "white terracotta", "pink terracotta", "green tile", "brick", "common brick", "orange brick", "brown brick", "buff brick", "glazed brick", "concrete", "precast", "copper", "maroon", "blue enamel", "bronze", "dark metal", "aluminium", "stainless", "opaque spandrel", "crown glass", "crown lights", "screen", "band lights", "sign board", "sign letters", "cap lights"];
 export type MaterialName = (typeof materialNames)[number];
 export type Tones = Readonly<Record<number, MaterialName>>;
@@ -30,9 +32,14 @@ export interface SkylineColour {
     readonly enabled: boolean;
     /** Shows the colours, or restores the greys exactly. */
     set(enabled: boolean): void;
+    /** Updates reflection uniforms without rewriting geometry or recompiling shaders. */
+    setSky(colours: ReflectionColours | null): void;
+    /** Sets ordinary window activity and dims outlines for the time preview, or restores the preset. */
+    setNight(lighting: NightLighting | null): void;
     /**
      * Recolours vertices another writer has since rewritten in grey, such as window
-     * illumination resetting a facade for a celebration.
+     * illumination resetting a facade for a celebration. Re-reads celebration state
+     * so ordinary night windows yield to the message while architectural lights remain.
      */
     refresh(): void;
 }

package/lib/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/lib/models/colour-palette.d.ts

@@ -6,3 +6,35 @@ export declare const daylightColours: {
     readonly horizon: 12898785;
     readonly sun: 16774374;
 };
+export declare const nightColours: {
+    readonly ambient: 10596296;
+    readonly fill: 9281469;
+    readonly window: 16764817;
+    readonly windowWhite: 16772558;
+};
+export declare const timeOfDayColours: readonly [{
+    readonly elevation: -18;
+    readonly sky: 132108;
+    readonly horizon: 527643;
+    readonly sun: 16756855;
+}, {
+    readonly elevation: -8;
+    readonly sky: 1319749;
+    readonly horizon: 5984878;
+    readonly sun: 16756086;
+}, {
+    readonly elevation: -2;
+    readonly sky: 4283273;
+    readonly horizon: 15244153;
+    readonly sun: 16757879;
+}, {
+    readonly elevation: 6;
+    readonly sky: 8560581;
+    readonly horizon: 15778720;
+    readonly sun: 16766120;
+}, {
+    readonly sky: 10402779;
+    readonly horizon: 12898785;
+    readonly sun: 16774374;
+    readonly elevation: 25;
+}];

package/lib/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/lib/models/colour-reflections.d.ts

@@ -1,2 +1,14 @@
 import * as THREE from "../vendor/three-r186.js";
-export declare function glassReflection(material: THREE.MeshToonMaterial, geometry: THREE.BufferGeometry, mask: Float32Array): (enabled: boolean) => void;
+import type { NightLighting } from "./night-windows.js";
+export interface ReflectionColours {
+    sky: number;
+    horizon: number;
+    ground: number;
+}
+export declare const daylightReflections: ReflectionColours;
+export interface GlassReflection {
+    (enabled: boolean): void;
+    setSky(colours: ReflectionColours): void;
+    setNight(lighting: NightLighting | null, coloured: boolean, celebration: boolean): void;
+}
+export declare function glassReflection(material: THREE.MeshToonMaterial, geometry: THREE.BufferGeometry, mask: Float32Array, windows?: Float32Array): GlassReflection;

package/lib/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/lib/models/night-windows.d.ts

@@ -0,0 +1,13 @@
+import type * as THREE from "../vendor/three-r186.js";
+import type { MaterialName } from "./colour-materials.js";
+export interface NightLighting {
+    /** Sunset/dawn transition, from daylight (0) to full darkness (1). */
+    darkness: number;
+    /** Illustrative occupancy, not a record of actual tenants or working hours. */
+    activity: number;
+    /** Unlit drawing outlines must dim with the surrounding architecture. */
+    outlineStrength: number;
+}
+export declare const smooth: (low: number, high: number, value: number) => number;
+export declare function windowActivity(hour: number): number;
+export declare function nightWindowMask(geometry: THREE.BufferGeometry, buildingId: string, materialOf: (vertex: number) => MaterialName): Float32Array;

package/lib/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/lib/study-types.d.ts

@@ -49,6 +49,8 @@ export interface StudyLabel {
 }
 export interface Daylight {
     sky: THREE.Texture;
+    /** Unit vector toward the sun in world east/up/south coordinates. */
+    direction?: Vec3;
     sun: readonly [colour: number, intensity: number];
     ambient: readonly [colour: number, intensity: number];
     fill: readonly [colour: number, intensity: number];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a2f0/skyline",
-  "version": "0.2.19",
+  "version": "0.2.22",
   "description": "Interactive Chicago skyline viewer and reusable Three.js building models",
   "license": "UNLICENSED",
   "repository": {

package/site/building-detail.js

@@ -2,7 +2,8 @@ import * as THREE from "./vendor/three-r186.js";
 import { createBuildingStudy } from "./study-viewer.js";
 import { skylineAzimuth } from "./skyline-comparison.js";
 import { geographicBuildings } from "./models/skyline-geography-data.js";
-import { createGeographicBuilding, footprintMetrics } from "./models/skyline-geography.js";
+import { createGeographicBuilding, footprintMetrics, geographicOrigin } from "./models/skyline-geography.js";
+import { createTimeLighting } from "./time-of-day.js";
 import { createDaylight, createSkylineColour } from "./models/colour-materials.js";
 // One mapped building of the 3D skyline, alone on its own platform, as the building study
 // shows Crain: building-detail.html?building=<id>, and the panel the 3D skyline floats over
@@ -82,14 +83,30 @@ function showBuilding(record, root, frame, signal, initiallyColoured, onColourCh
     });
     const colour = createSkylineColour([model]), button = root.querySelector("#colour");
     let daylight;
-    signal.addEventListener("abort", () => daylight?.sky.dispose(), { once: true });
+    let selectedTime = null;
+    let timeLight;
+    signal.addEventListener("abort", () => { daylight?.sky.dispose(); timeLight?.dispose(); }, { once: true });
     function setColour(enabled) {
         colour.set(enabled);
-        if (enabled)
-            daylight ??= createDaylight();
-        viewer.setDaylight(enabled ? daylight : null);
+        if (selectedTime) {
+            // Each renderer owns its sky texture and disposal listeners. Sharing the parent's
+            // texture would retain closed detail renderers until the whole skyline is destroyed.
+            timeLight ??= createTimeLighting(geographicOrigin[1], geographicOrigin[0], false);
+            const lighting = timeLight.update(selectedTime, enabled);
+            colour.setSky(lighting.reflections);
+            colour.setNight(lighting.night);
+            viewer.setDaylight(lighting);
+        }
+        else {
+            if (enabled)
+                daylight ??= createDaylight();
+            colour.setSky(null);
+            colour.setNight(null);
+            viewer.setDaylight(enabled ? daylight : null);
+        }
         button.setAttribute("aria-pressed", String(enabled));
-        button.title = enabled ? "Restore the building's greyscale view" : "Show the building in sunny-day colour";
+        button.title = selectedTime ? (enabled ? "Show this time in greyscale" : "Show this time in colour")
+            : enabled ? "Restore the building's greyscale view" : "Show the building in sunny-day colour";
     }
     button.addEventListener("click", () => {
         setColour(!colour.enabled);
@@ -97,7 +114,13 @@ function showBuilding(record, root, frame, signal, initiallyColoured, onColourCh
     }, { signal });
     if (initiallyColoured)
         setColour(true);
-    return { setColour };
+    return {
+        setColour,
+        setTime(date, coloured) {
+            selectedTime = date;
+            setColour(coloured);
+        },
+    };
 }
 // Sources open beside the page, so a detail floated over the skyline stays where it is.
 function link(document, href, text) {