@a2f0/skyline 0.2.2 → 0.2.4

package/docs/package.md

@@ -314,6 +314,10 @@ the selection and `litWindows` counts illuminated office panes. Each instance
 has its own state. Use the model from `createGeographicSkyline()` or
 `createGeographicBuilding()` for these displays.
 
+`models/colour-materials` and `models/colour-palette` are an opt-in colour trial for the
+viewer's colour toggle, published only because every model module is; they are not a stable
+API and may change or disappear in any release.
+
 `@a2f0/skyline/models/building-kit` exposes the same plan runs and mesh builder
 used by this repository, for adding buildings. Coordinate and model assumptions
 are in [the geography notes](skyline-geography.md). Asset paths are also available

package/lib/models/colour-materials.d.ts

@@ -0,0 +1,39 @@
+import type { BuildingModel } from "./building-kit.js";
+import type { Daylight } from "../study-types.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", "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>>;
+export type Batch = readonly [material: MaterialName, tones?: Tones];
+export type BuildingMaterials = Readonly<Record<string, Batch>>;
+export declare const colourMaterials: Readonly<Record<string, BuildingMaterials>>;
+export declare function batchOf(buildingId: string, meshName: string): Batch | undefined;
+export declare const toneOf: (grey: number) => number;
+export declare const exposure = 1.4;
+export interface Swatch {
+    colour: readonly [number, number, number];
+    reference: number;
+}
+export declare function paint(grey: number, { colour: [r, g, b], reference }: Swatch): [number, number, number];
+export declare function swatchesOf(buildingId: string, greys: ReadonlyMap<MaterialName, ReadonlyMap<number, number>>): Map<MaterialName, Swatch | null>;
+export declare const daylightIntensities: {
+    readonly sun: 3.4;
+    readonly ambient: 0.9;
+    readonly fill: 0.5;
+};
+export declare const daylightGround: {
+    readonly blocks: 7237230;
+    readonly roads: 4868682;
+};
+export declare function createDaylight(): Daylight;
+export interface SkylineColour {
+    /** Whether the buildings show their materials' colours. */
+    readonly enabled: boolean;
+    /** Shows the colours, or restores the greys exactly. */
+    set(enabled: boolean): void;
+    /**
+     * Recolours vertices another writer has since rewritten in grey, such as window
+     * illumination resetting a facade for a celebration.
+     */
+    refresh(): void;
+}
+export declare function createSkylineColour(models: readonly BuildingModel[]): SkylineColour;

package/lib/models/colour-materials.js

@@ -0,0 +1,454 @@
+import * as THREE from "../vendor/three-r186.js";
+import { daylightColours, measuredColours } from "./colour-palette.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
+// turned off. The models are unchanged; this reads a built model's meshes by its building ID
+// and each mesh's batch, the part of its name after the last " · ", or that without a trailing
+// number, so "glazing 3" reads as "glazing". A surface is its batch's material unless its grey
+// names another.
+export const materialNames = [
+    "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",
+    // Parts the photographs show on their own, named as the night first showed them: crown glass
+    // and crown lights, an emblem screen and the lights in its bands, a sign's board and letters,
+    // and a lit cap.
+    "crown glass", "crown lights", "screen", "band lights", "sign board", "sign letters", "cap lights",
+];
+// A batch's lit and dim office windows.
+const windows = (lit, dim) => ({ [lit]: "lit window", [dim]: "dim window" });
+export const colourMaterials = {
+    "building-heritage-at-millennium-park": {
+        "tower and lower wing": ["green glass"],
+        "mapped ground footprint": ["concrete"],
+        "limestone frame": ["limestone"],
+        "bronze mullions and slab edges": ["bronze"],
+        "roof terraces": ["neutral"],
+        "mechanical penthouses": ["concrete"],
+        glazing: ["green glass", { 0x7a7a7a: "lit window" }],
+        // The four preserved Wabash facades.
+        "Wabash facade": ["buff brick"],
+    },
+    "building-kemper": {
+        "marble shell": ["marble"],
+        "mullions and bands": ["marble"],
+        "crown glazing": ["glass"],
+        "crown fins": ["aluminium"],
+        "roof cap": ["marble"],
+        "lit glazing": ["lit window"],
+        "dim glazing": ["dim window"],
+        glazing: ["glass"],
+    },
+    // Silver-reflective glass in white aluminium.
+    "building-crain-communications": {
+        "aluminum spandrels": ["aluminium"],
+        "ribbon glazing": ["glass", { ...windows(0x8a8a8a, 0x565656), 0x585858: "aluminium" }],
+        "sloped glazing": ["crown glass"],
+        "glazing grid": ["crown glass"],
+        "diamond outline lights": ["lamp"],
+        coping: ["aluminium"],
+        "slot floor": ["neutral"],
+        "mechanical louvers": ["aluminium", { 0x232323: "glass", 0x303030: "dark metal" }],
+        "louver blades": ["aluminium", { 0x232323: "glass" }],
+        "crown shadow strips": ["neutral", { 0x232323: "glass", 0x585858: "aluminium" }],
+    },
+    // Bronze-tinted glass and bronze spandrels, on a granite plaza.
+    "building-330-north-wabash": {
+        shell: ["bronze", { 0x3a3a3a: "neutral", 0x464646: "dark granite" }],
+        "glass, spandrels and louvers": ["bronze glass", { ...windows(0x7a7a7a, 0x4a4a4a), 0x262626: "bronze", 0x353535: "bronze" }],
+        "bronze mullions and columns": ["bronze"],
+    },
+    "building-michigan-plaza-south-tower": {
+        "mapped tower shell": ["glass"],
+        "mullions and bands": ["aluminium"],
+        "lit glazing": ["lit window"],
+        "dim glazing": ["dim window"],
+        glazing: ["glass"],
+    },
+    "building-trump-tower-only": {
+        "tower shell": ["glass"],
+        "glass and spandrels": ["glass", windows(0x7c7c7c, 0x505050)],
+        "stainless mullions": ["stainless"],
+        crown: ["glass", { 0x3c3c3c: "stainless" }],
+        "crown mullions": ["stainless"],
+        spire: ["stainless"],
+    },
+    // Limestone piers and aluminium spandrels, under the sign's board and letters.
+    "building-one-prudential-plaza": {
+        shell: ["limestone", { 0x242424: "dark metal", 0x4c4c4c: "neutral", 0x8e8e8e: "aluminium" }],
+        "windows and spandrels": ["glass", { ...windows(0x7c7c7c, 0x4e4e4e), 0x8a8a8a: "lit window", 0x242424: "dark metal", 0x8e8e8e: "aluminium" }],
+        "limestone piers": ["limestone"],
+        "limestone courses": ["limestone"],
+        "penthouse and sign": ["limestone", { 0x2e2e2e: "sign board", 0x383838: "dark metal", 0x4c4c4c: "neutral", 0xb0b0b0: "sign letters", 0xc4c4c4: "sign letters" }],
+        "screen louvers": ["aluminium"],
+        "antenna mast": ["stainless"],
+    },
+    // Stone faces and gables, and the dark glass strips between them; the crown's risers and
+    // sloped glass, and the white bands and ribs on its ridges.
+    "building-two-prudential-plaza": {
+        "limestone, glass and crown": ["granite", {
+                0x353535: "glass", 0x3a3a3a: "glass", 0x404040: "glass", 0x454545: "glass", 0x4a4a4a: "glass",
+                0x3f3f3f: "crown glass", 0x565656: "crown glass", 0xcdcdcd: "crown lights",
+                ...windows(0x8e8e8e, 0x5e5e5e),
+            }],
+        piers: ["granite"],
+        copings: ["granite"],
+        "strip mullions": ["aluminium"],
+        "crown ribs": ["crown lights"],
+        spire: ["stainless"],
+        "spire inset panels": ["glass"],
+        lobby: ["glass"],
+    },
+    // Mount Airy white granite.
+    layer3: {
+        "tube shell": ["white granite", { 0x202020: "neutral", 0x4c4c4c: "neutral" }],
+        "window ribbons": ["glass", windows(0x7c7c7c, 0x4e4e4e)],
+        "granite piers": ["white granite"],
+        "granite cap": ["cap lights"],
+        "rooftop enclosure": ["neutral", { 0x9c9c9c: "aluminium" }],
+        "antenna mast": ["stainless"],
+    },
+    "building-blue-cross-blue-shield": {
+        shell: ["glass", { 0x3a3a3a: "neutral" }],
+        "glass, spandrels and bands": ["glass", { ...windows(0x8a8a8a, 0x5c5c5c), 0x2a2a2a: "neutral", 0x3e3e3e: "screen" }],
+        mullions: ["dark metal"],
+        "band columns and emblems": ["band lights"],
+    },
+    // Blue-green glass, and the south face's white concrete frame.
+    "building-340-on-the-park": {
+        shell: ["neutral"],
+        "curtain wall": ["green glass", { ...windows(0x7a7a7a, 0x4a4a4a), 0x242424: "neutral", 0x2a2a2a: "concrete", 0xb4b4b4: "concrete" }],
+        "concrete frame": ["concrete"],
+        "railings and guards": ["aluminium"],
+    },
+    // A concrete frame over bronze ribbon windows.
+    "building-the-buckingham": {
+        shell: ["neutral"],
+        "frame and glass": ["bronze glass", { ...windows(0x6e6e6e, 0x464646), 0x4c4c4c: "concrete" }],
+        piers: ["concrete"],
+        "corner balconies": ["concrete"],
+    },
+    // A grey precast slab.
+    "building-michigan-plaza-front-tall": {
+        shell: ["neutral"],
+        "walls and windows": ["glass", { ...windows(0x727272, 0x484848), 0x666666: "concrete" }],
+    },
+    // Buff limestone over a granite base.
+    "building-willoughby-tower": {
+        shell: ["neutral"],
+        "stone and windows": ["glass", { ...windows(0x6e6e6e, 0x444444), 0x4a4a4a: "dark granite", 0x585858: "limestone" }],
+        pinnacles: ["limestone"],
+    },
+    // Tan brick and terracotta.
+    "building-six-north-michigan": {
+        shell: ["neutral"],
+        "brick and windows": ["glass", { ...windows(0x8a8a8a, 0x5e5e5e), 0x6e6e6e: "buff brick", 0x9c9c9c: "white terracotta" }],
+        cornices: ["white terracotta"],
+    },
+    // A cream terracotta front, and common brick on its south wall.
+    "building-six-north-far-east": {
+        shell: ["neutral"],
+        "terracotta and windows": ["glass", {
+                ...windows(0x6e6e6e, 0x3a3a3a),
+                0x363636: "white terracotta", 0x404040: "common brick", 0x444444: "white terracotta", 0x505050: "white terracotta", 0x585858: "white terracotta",
+            }],
+        parapet: ["white terracotta"],
+    },
+    // Brown masonry.
+    "building-michigan-plaza-front-middle": {
+        shell: ["neutral"],
+        "masonry and windows": ["glass", { ...windows(0x9a9a9a, 0x525252), 0x7a7a7a: "brown brick", 0x888888: "limestone" }],
+    },
+    // Buff limestone under a slate roof.
+    "building-university-club": {
+        shell: ["limestone", { 0x2e2e2e: "neutral", 0x343434: "slate", 0x4a4a4a: "neutral" }],
+        "stone and windows": ["glass", { ...windows(0x8c8c8c, 0x444444), 0xa4a4a4: "limestone", 0xb4b4b4: "limestone" }],
+        "merlons and pinnacles": ["limestone"],
+    },
+    // Pink terracotta over granite, under a green tile roof.
+    "building-monroe": {
+        shell: ["pink terracotta", { 0x2e2e2e: "neutral", 0x303030: "green tile", 0x484848: "neutral" }],
+        "terracotta and windows": ["glass", { ...windows(0x929292, 0x484848), 0x9a9a9a: "granite", 0xb2b2b2: "pink terracotta", 0xc2c2c2: "pink terracotta" }],
+        "attic windows": ["glass"],
+    },
+    "building-maclean-center": {
+        shell: ["neutral"],
+        "stone and windows": ["glass", { ...windows(0x6e6e6e, 0x3c3c3c), 0x242424: "neutral", 0x7e7e7e: "limestone", 0x8e8e8e: "limestone" }],
+        cornice: ["limestone"],
+    },
+    "building-lakeview": {
+        shell: ["neutral"],
+        "stone and windows": ["glass", { ...windows(0x6e6e6e, 0x3c3c3c), 0x767676: "limestone", 0x888888: "limestone" }],
+    },
+    // Terracotta over granite columns, round a light court of white brick.
+    "building-peoples-gas": {
+        shell: ["neutral", { 0x646464: "common brick", 0x9c9c9c: "glazed brick" }],
+        "terracotta and windows": ["glass", {
+                ...windows(0x6e6e6e, 0x3c3c3c),
+                0x242424: "neutral", 0x5a5a5a: "dark granite", 0x7c7c7c: "white terracotta", 0x8e8e8e: "white terracotta", 0x9c9c9c: "glazed brick",
+            }],
+        cornice: ["white terracotta"],
+    },
+    // Natural aluminium mullions and blue porcelain-enamelled spandrels.
+    "building-200-south-michigan": {
+        shell: ["neutral"],
+        "curtain wall": ["glass", {
+                ...windows(0x7a7a7a, 0x4a4a4a),
+                0x2d2d2d: "blue enamel", 0x525252: "aluminium", 0x585858: "aluminium", 0x5e5e5e: "aluminium", 0x6a6a6a: "aluminium",
+            }],
+        "rooftop block": ["neutral"],
+        penthouse: ["neutral"],
+    },
+    // White terracotta under a green copper roof.
+    "building-railway-exchange": {
+        shell: ["neutral", { 0x9c9c9c: "copper" }],
+        "terracotta and windows": ["glass", { ...windows(0x6e6e6e, 0x3c3c3c), 0x626262: "common brick", 0x808080: "white terracotta", 0x909090: "white terracotta" }],
+        cornice: ["white terracotta"],
+    },
+    // Sullivan's cream terracotta front, and common brick above its neighbours.
+    "building-michigan-west-right": {
+        shell: ["neutral"],
+        "terracotta and windows": ["glass", { ...windows(0x6e6e6e, 0x3a3a3a), 0x404040: "common brick", 0x484848: "white terracotta", 0x5e5e5e: "white terracotta" }],
+        cartouches: ["white terracotta"],
+    },
+    // Red brick fronts with stone bands.
+    "building-michigan-west-front": {
+        shell: ["neutral"],
+        "brick and windows": ["glass", { ...windows(0x6e6e6e, 0x3a3a3a), 0x464646: "brick", 0x525252: "limestone" }],
+    },
+    "building-30-south-michigan": {
+        shell: ["neutral"],
+        "brick and windows": ["glass", { ...windows(0x6e6e6e, 0x3a3a3a), 0x464646: "brick", 0x525252: "limestone" }],
+    },
+    // Limestone, and red and grey brick.
+    "building-chicago-athletic-association": {
+        shell: ["neutral"],
+        "stone, brick and windows": ["glass", { ...windows(0x6e6e6e, 0x3a3a3a), 0x5a5a5a: "brick", 0x6d6d6d: "limestone", 0x7a7a7a: "limestone" }],
+        cornice: ["limestone"],
+    },
+    // Mies's black curtain wall and bronze-tinted glass.
+    "building-office-west-of-aon": {
+        shell: ["neutral"],
+        "curtain wall": ["bronze glass", { ...windows(0x7a7a7a, 0x4a4a4a), 0x2b2b2b: "dark metal", 0x303030: "dark metal", 0x333333: "dark metal" }],
+    },
+    // White concrete.
+    "building-river-plaza": {
+        shell: ["concrete"],
+        "concrete and windows": ["glass", { ...windows(0x8a8a8a, 0x505050), 0x9a9a9a: "concrete" }],
+        "rooftop box": ["concrete"],
+    },
+    // Dark orange brick and bronze glass.
+    "building-hyatt-regency-west-tower": {
+        shell: ["neutral"],
+        "brick and windows": ["bronze glass", { ...windows(0x6d6d6d, 0x4a4a4a), 0x2c2c2c: "dark metal", 0x3b3b3b: "orange brick" }],
+    },
+    // Cream precast, and the drums' maroon fins.
+    "building-buckingham-east": {
+        shell: ["precast", { 0x686868: "neutral" }],
+        "precast and windows": ["glass", { ...windows(0x8a8a8a, 0x505050), 0x848484: "precast" }],
+        drums: ["precast", { 0x5a5a5a: "maroon", 0x686868: "neutral" }],
+    },
+    // Dark brown aluminium and bronze glass.
+    "building-three-illinois-center": {
+        shell: ["neutral"],
+        "curtain wall": ["bronze glass", { ...windows(0x707070, 0x464646), 0x282828: "bronze", 0x323232: "bronze" }],
+    },
+    // Reflective blue-green glass in its frame.
+    "building-swissotel": {
+        shell: ["neutral"],
+        "curtain wall": ["blue-green glass", windows(0x878787, 0x515151)],
+    },
+};
+// A batch's materials from its mesh's name, if the trial knows the building and the batch.
+export function batchOf(buildingId, meshName) {
+    const materials = colourMaterials[buildingId];
+    const batch = meshName.split(" · ").at(-1);
+    return materials?.[batch] ?? materials?.[batch.replace(/ \d+$/, "")];
+}
+// A grey's tone: the hex the model wrote it as, from its linear channel.
+export const toneOf = (grey) => new THREE.Color(grey, grey, grey).getHex();
+// The measured colours scale to the scene by this factor in linear light, so the skyline view's
+// faces show about the photograph's brightness under the day's lights. At 1.4 the skyline view's
+// 1600 x 900 render, its pixels chosen by each photograph sample's rule, reaches 0.97 (Two
+// Prudential's stone), 0.96 (Blue Cross's glass), 0.86 (Aon's granite), 0.80 (One Prudential's
+// limestone) and 0.66 (Crain's aluminium) of the photograph's brightness in linear light. Aon's
+// granite and Crain's aluminium pass white at their own greys here, so a higher factor would
+// brighten only the darker materials. The Railway Exchange is left out: the view shows its shaded
+// Michigan front, not the sunlit Jackson front its colour is measured on; that front renders 0.82
+// of the photograph's shaded Michigan front.
+export const exposure = 1.4;
+// A grey in its measured colour: the swatch's colour scaled by the grey's brightness against the
+// swatch's grey, both in linear light, so a darker surface of one material stays darker. A colour
+// pushed past white keeps its hue at its brightest, so a bright material's lightest greys can
+// meet there, as Aon's granite and Crain's aluminium do.
+export function paint(grey, { colour: [r, g, b], reference }) {
+    const scale = exposure * (reference > 0 ? grey / reference : 1);
+    const fit = scale / Math.max(1, r * scale, g * scale, b * scale);
+    return [r * fit, g * fit, b * fit];
+}
+// Every measured material's swatch for a building, from how many vertices of each linear grey
+// its surfaces hold: a material naming another takes that one's colour and grey, and a null one
+// stays grey.
+export function swatchesOf(buildingId, greys) {
+    const measured = measuredColours[buildingId];
+    const swatches = new Map();
+    if (!measured)
+        return swatches;
+    // The most common grey of a material, by vertices; the lighter of a tie.
+    const common = (material) => [...greys.get(material) ?? []].reduce((best, entry) => !best || entry[1] > best[1] || (entry[1] === best[1] && entry[0] > best[0]) ? entry : best, null)?.[0];
+    for (const material of greys.keys()) {
+        const entry = measured[material];
+        const source = typeof entry === "string" ? entry : material;
+        const value = typeof entry === "string" ? measured[entry] : entry;
+        const reference = common(source);
+        if (typeof value !== "number" || reference === undefined) {
+            swatches.set(material, null);
+            continue;
+        }
+        const { r, g, b } = new THREE.Color(value);
+        swatches.set(material, { colour: [r, g, b], reference });
+    }
+    return swatches;
+}
+// The sun's, the shade's and the fill light's intensities on the sunny day: the sun and the shade
+// brighter than the night's 2.4 and 0.7, the fill a little dimmer than its 0.55. And the ground's
+// greys in the sun: the platform's blocks, and the roads' darker asphalt.
+export const daylightIntensities = { sun: 3.4, ambient: 0.9, fill: 0.5 };
+export const daylightGround = { blocks: 0x6e6e6e, roads: 0x4a4a4a };
+// The sunny day the colour toggle shows the buildings in: a sky fading from the photograph's blue
+// at the top of the view to its haze at the horizon, blended in linear light, the warm sun, the
+// sky's blue for the light in the shade, and its haze for the fill.
+export function createDaylight() {
+    const rows = 256, data = new Uint8Array(rows * 4);
+    const top = new THREE.Color(daylightColours.sky), bottom = new THREE.Color(daylightColours.horizon);
+    for (let row = 0; row < rows; row += 1) {
+        const hex = bottom.clone().lerp(top, row / (rows - 1)).getHex();
+        data.set([(hex >> 16) & 255, (hex >> 8) & 255, hex & 255, 255], row * 4);
+    }
+    // A data texture's first row is the bottom of the view.
+    const sky = new THREE.DataTexture(data, 1, rows);
+    sky.colorSpace = "srgb";
+    sky.needsUpdate = true;
+    return {
+        sky,
+        sun: [daylightColours.sun, daylightIntensities.sun],
+        ambient: [daylightColours.sky, daylightIntensities.ambient],
+        fill: [daylightColours.horizon, daylightIntensities.fill],
+        ground: daylightGround.blocks,
+    };
+}
+// The colour layer for a skyline's models. A building the trial has no colours for stays in
+// grey, as does a batch it does not know, a mesh without a single toon material, a
+// vertex-coloured batch whose colours are not plain floats, and a material or colour buffer
+// another batch already took, since the builder lets batches share them.
+export function createSkylineColour(models) {
+    const painted = [], flat = [], taken = new Set();
+    for (const model of models) {
+        const buildingId = String(model.building.userData["buildingId"]);
+        if (!measuredColours[buildingId])
+            continue;
+        // The building's batches, and how many vertices of each grey each material holds.
+        const surfaces = [];
+        const greys = new Map();
+        const count = (material, grey, vertices) => {
+            const held = greys.get(material) ?? new Map();
+            held.set(grey, (held.get(grey) ?? 0) + vertices);
+            greys.set(material, held);
+        };
+        model.building.traverse((object) => {
+            const mesh = object;
+            if (!mesh.isMesh)
+                return;
+            const batch = batchOf(buildingId, mesh.name);
+            if (!batch || Array.isArray(mesh.material) || !mesh.material.isMeshToonMaterial)
+                return;
+            const [base, tones = {}] = batch;
+            const material = mesh.material;
+            const materialOf = (grey) => tones[toneOf(grey)] ?? base;
+            const attribute = mesh.geometry.getAttribute("color");
+            if (material.vertexColors) {
+                if (!(attribute?.array instanceof Float32Array) || taken.has(attribute))
+                    return;
+                taken.add(attribute);
+                const vertices = new Map();
+                for (let vertex = 0; vertex < attribute.count; vertex += 1)
+                    vertices.set(attribute.array[vertex * 3], (vertices.get(attribute.array[vertex * 3]) ?? 0) + 1);
+                vertices.forEach((n, grey) => count(materialOf(grey), grey, n));
+                surfaces.push({ material, colours: { attribute, array: attribute.array }, materialOf });
+            }
+            else if (!taken.has(material)) {
+                taken.add(material);
+                count(materialOf(material.color.r), material.color.r, mesh.geometry.getAttribute("position").count);
+                surfaces.push({ material, colours: null, materialOf });
+            }
+        });
+        const swatches = swatchesOf(buildingId, greys);
+        for (const { material, colours, materialOf } of surfaces) {
+            const colourOf = (grey) => {
+                const swatch = swatches.get(materialOf(grey));
+                return swatch ? paint(grey, swatch) : [grey, grey, grey];
+            };
+            if (colours) {
+                const cache = new Map();
+                const paintGrey = (grey) => {
+                    let colour = cache.get(grey);
+                    if (!colour)
+                        cache.set(grey, colour = Float32Array.from(colourOf(grey)));
+                    return colour;
+                };
+                painted.push({ ...colours, paint: paintGrey, greys: null });
+            }
+            else {
+                flat.push({ material, grey: material.color.clone(), colour: new THREE.Color(...colourOf(material.color.r)) });
+            }
+        }
+    }
+    let enabled = false;
+    return {
+        get enabled() { return enabled; },
+        set(next) {
+            if (next === enabled)
+                return;
+            enabled = next;
+            for (const batch of painted) {
+                const { array } = batch;
+                if (next) {
+                    const greys = batch.greys = new Float32Array(array.length / 3);
+                    for (let vertex = 0; vertex < greys.length; vertex += 1) {
+                        const grey = array[vertex * 3];
+                        greys[vertex] = grey;
+                        array.set(batch.paint(grey), vertex * 3);
+                    }
+                }
+                else {
+                    batch.greys.forEach((grey, vertex) => array.fill(grey, vertex * 3, vertex * 3 + 3));
+                    batch.greys = null;
+                }
+                batch.attribute.needsUpdate = true;
+            }
+            for (const { material, grey, colour } of flat)
+                material.color.copy(next ? colour : grey);
+        },
+        refresh() {
+            if (!enabled)
+                return;
+            for (const batch of painted) {
+                const { array } = batch, greys = batch.greys;
+                let changed = false;
+                for (let vertex = 0; vertex < greys.length; vertex += 1) {
+                    const colour = batch.paint(greys[vertex]), at = vertex * 3;
+                    if (array[at] === colour[0] && array[at + 1] === colour[1] && array[at + 2] === colour[2])
+                        continue;
+                    const grey = array[at];
+                    greys[vertex] = grey;
+                    array.set(batch.paint(grey), at);
+                    changed = true;
+                }
+                if (changed)
+                    batch.attribute.needsUpdate = true;
+            }
+        },
+    };
+}

package/lib/models/colour-palette.d.ts

@@ -0,0 +1,8 @@
+import type { MaterialName } from "./colour-materials.js";
+export type Measurement = number | MaterialName | null;
+export declare const measuredColours: Readonly<Record<string, Readonly<Partial<Record<MaterialName, Measurement>>>>>;
+export declare const daylightColours: {
+    readonly sky: 10402779;
+    readonly horizon: 12898785;
+    readonly sun: 16774374;
+};

package/lib/models/colour-palette.js

@@ -0,0 +1,62 @@
+// By day no office lights show: lit and dim windows are the glass, in its measured colour.
+const glass = (colour) => ({ glass: colour, "lit window": colour, "dim window": colour });
+export const measuredColours = {
+    // docs/railway-exchange-reference.md, 2026-10-09 — Daytime colours from Chicago.jpg.
+    "building-railway-exchange": {
+        "white terracotta": 0xc8c1b3,
+        ...glass(0x3d4243),
+        copper: null,
+        "common brick": null,
+        neutral: null,
+    },
+    // docs/crain-reference.md, 2026-10-09 — Daytime colours from Chicago.jpg.
+    "building-crain-communications": {
+        aluminium: 0xfbfcfa,
+        ...glass(0x1e2425),
+        "crown glass": 0x79828c,
+        lamp: "aluminium",
+        "dark metal": null,
+        neutral: null,
+    },
+    // docs/one-prudential-reference.md, 2026-10-09 — Daytime colours from Chicago.jpg.
+    "building-one-prudential-plaza": {
+        limestone: 0xc2bcb4,
+        aluminium: "limestone",
+        ...glass(0x625e59),
+        "sign board": 0xc4c0b9,
+        "sign letters": 0x6684a0,
+        "dark metal": null,
+        stainless: null,
+        neutral: null,
+    },
+    // docs/two-prudential-reference.md, 2026-10-09 — Daytime colours from Chicago.jpg.
+    "building-two-prudential-plaza": {
+        granite: 0xb1b3b0,
+        ...glass(0x424c55),
+        "crown glass": 0x5e7686,
+        "crown lights": 0xb6bbbb,
+        stainless: null,
+        aluminium: null,
+    },
+    // docs/aon-reference.md, 2026-10-09 — Daytime colours from Chicago.jpg.
+    layer3: {
+        "white granite": 0xdfdfdd,
+        ...glass(0x424240),
+        "cap lights": "white granite",
+        aluminium: null,
+        stainless: null,
+        neutral: null,
+    },
+    // docs/blue-cross-reference.md, 2026-10-09 — Daytime colours from Chicago.jpg and a close-up.
+    "building-blue-cross-blue-shield": {
+        ...glass(0x7d8992),
+        screen: 0x334a60,
+        "band lights": 0xb0bdcd,
+        "dark metal": null,
+        neutral: null,
+    },
+};
+// The sunny day the colour toggle shows: the sky's blue at the top of the view and its haze just
+// 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 };

package/lib/study-types.d.ts

@@ -47,3 +47,11 @@ export interface StudyLabel {
     text: string;
     placement?: string;
 }
+export interface Daylight {
+    sky: THREE.Texture;
+    sun: readonly [colour: number, intensity: number];
+    ambient: readonly [colour: number, intensity: number];
+    fill: readonly [colour: number, intensity: number];
+    /** The platform's grey in sunlight. */
+    ground: number;
+}

package/package.json

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

package/site/models/colour-materials.js

@@ -0,0 +1,454 @@
+import * as THREE from "../vendor/three-r186.js";
+import { daylightColours, measuredColours } from "./colour-palette.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
+// turned off. The models are unchanged; this reads a built model's meshes by its building ID
+// and each mesh's batch, the part of its name after the last " · ", or that without a trailing
+// number, so "glazing 3" reads as "glazing". A surface is its batch's material unless its grey
+// names another.
+export const materialNames = [
+    "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",
+    // Parts the photographs show on their own, named as the night first showed them: crown glass
+    // and crown lights, an emblem screen and the lights in its bands, a sign's board and letters,
+    // and a lit cap.
+    "crown glass", "crown lights", "screen", "band lights", "sign board", "sign letters", "cap lights",
+];
+// A batch's lit and dim office windows.
+const windows = (lit, dim) => ({ [lit]: "lit window", [dim]: "dim window" });
+export const colourMaterials = {
+    "building-heritage-at-millennium-park": {
+        "tower and lower wing": ["green glass"],
+        "mapped ground footprint": ["concrete"],
+        "limestone frame": ["limestone"],
+        "bronze mullions and slab edges": ["bronze"],
+        "roof terraces": ["neutral"],
+        "mechanical penthouses": ["concrete"],
+        glazing: ["green glass", { 0x7a7a7a: "lit window" }],
+        // The four preserved Wabash facades.
+        "Wabash facade": ["buff brick"],
+    },
+    "building-kemper": {
+        "marble shell": ["marble"],
+        "mullions and bands": ["marble"],
+        "crown glazing": ["glass"],
+        "crown fins": ["aluminium"],
+        "roof cap": ["marble"],
+        "lit glazing": ["lit window"],
+        "dim glazing": ["dim window"],
+        glazing: ["glass"],
+    },
+    // Silver-reflective glass in white aluminium.
+    "building-crain-communications": {
+        "aluminum spandrels": ["aluminium"],
+        "ribbon glazing": ["glass", { ...windows(0x8a8a8a, 0x565656), 0x585858: "aluminium" }],
+        "sloped glazing": ["crown glass"],
+        "glazing grid": ["crown glass"],
+        "diamond outline lights": ["lamp"],
+        coping: ["aluminium"],
+        "slot floor": ["neutral"],
+        "mechanical louvers": ["aluminium", { 0x232323: "glass", 0x303030: "dark metal" }],
+        "louver blades": ["aluminium", { 0x232323: "glass" }],
+        "crown shadow strips": ["neutral", { 0x232323: "glass", 0x585858: "aluminium" }],
+    },
+    // Bronze-tinted glass and bronze spandrels, on a granite plaza.
+    "building-330-north-wabash": {
+        shell: ["bronze", { 0x3a3a3a: "neutral", 0x464646: "dark granite" }],
+        "glass, spandrels and louvers": ["bronze glass", { ...windows(0x7a7a7a, 0x4a4a4a), 0x262626: "bronze", 0x353535: "bronze" }],
+        "bronze mullions and columns": ["bronze"],
+    },
+    "building-michigan-plaza-south-tower": {
+        "mapped tower shell": ["glass"],
+        "mullions and bands": ["aluminium"],
+        "lit glazing": ["lit window"],
+        "dim glazing": ["dim window"],
+        glazing: ["glass"],
+    },
+    "building-trump-tower-only": {
+        "tower shell": ["glass"],
+        "glass and spandrels": ["glass", windows(0x7c7c7c, 0x505050)],
+        "stainless mullions": ["stainless"],
+        crown: ["glass", { 0x3c3c3c: "stainless" }],
+        "crown mullions": ["stainless"],
+        spire: ["stainless"],
+    },
+    // Limestone piers and aluminium spandrels, under the sign's board and letters.
+    "building-one-prudential-plaza": {
+        shell: ["limestone", { 0x242424: "dark metal", 0x4c4c4c: "neutral", 0x8e8e8e: "aluminium" }],
+        "windows and spandrels": ["glass", { ...windows(0x7c7c7c, 0x4e4e4e), 0x8a8a8a: "lit window", 0x242424: "dark metal", 0x8e8e8e: "aluminium" }],
+        "limestone piers": ["limestone"],
+        "limestone courses": ["limestone"],
+        "penthouse and sign": ["limestone", { 0x2e2e2e: "sign board", 0x383838: "dark metal", 0x4c4c4c: "neutral", 0xb0b0b0: "sign letters", 0xc4c4c4: "sign letters" }],
+        "screen louvers": ["aluminium"],
+        "antenna mast": ["stainless"],
+    },
+    // Stone faces and gables, and the dark glass strips between them; the crown's risers and
+    // sloped glass, and the white bands and ribs on its ridges.
+    "building-two-prudential-plaza": {
+        "limestone, glass and crown": ["granite", {
+                0x353535: "glass", 0x3a3a3a: "glass", 0x404040: "glass", 0x454545: "glass", 0x4a4a4a: "glass",
+                0x3f3f3f: "crown glass", 0x565656: "crown glass", 0xcdcdcd: "crown lights",
+                ...windows(0x8e8e8e, 0x5e5e5e),
+            }],
+        piers: ["granite"],
+        copings: ["granite"],
+        "strip mullions": ["aluminium"],
+        "crown ribs": ["crown lights"],
+        spire: ["stainless"],
+        "spire inset panels": ["glass"],
+        lobby: ["glass"],
+    },
+    // Mount Airy white granite.
+    layer3: {
+        "tube shell": ["white granite", { 0x202020: "neutral", 0x4c4c4c: "neutral" }],
+        "window ribbons": ["glass", windows(0x7c7c7c, 0x4e4e4e)],
+        "granite piers": ["white granite"],
+        "granite cap": ["cap lights"],
+        "rooftop enclosure": ["neutral", { 0x9c9c9c: "aluminium" }],
+        "antenna mast": ["stainless"],
+    },
+    "building-blue-cross-blue-shield": {
+        shell: ["glass", { 0x3a3a3a: "neutral" }],
+        "glass, spandrels and bands": ["glass", { ...windows(0x8a8a8a, 0x5c5c5c), 0x2a2a2a: "neutral", 0x3e3e3e: "screen" }],
+        mullions: ["dark metal"],
+        "band columns and emblems": ["band lights"],
+    },
+    // Blue-green glass, and the south face's white concrete frame.
+    "building-340-on-the-park": {
+        shell: ["neutral"],
+        "curtain wall": ["green glass", { ...windows(0x7a7a7a, 0x4a4a4a), 0x242424: "neutral", 0x2a2a2a: "concrete", 0xb4b4b4: "concrete" }],
+        "concrete frame": ["concrete"],
+        "railings and guards": ["aluminium"],
+    },
+    // A concrete frame over bronze ribbon windows.
+    "building-the-buckingham": {
+        shell: ["neutral"],
+        "frame and glass": ["bronze glass", { ...windows(0x6e6e6e, 0x464646), 0x4c4c4c: "concrete" }],
+        piers: ["concrete"],
+        "corner balconies": ["concrete"],
+    },
+    // A grey precast slab.
+    "building-michigan-plaza-front-tall": {
+        shell: ["neutral"],
+        "walls and windows": ["glass", { ...windows(0x727272, 0x484848), 0x666666: "concrete" }],
+    },
+    // Buff limestone over a granite base.
+    "building-willoughby-tower": {
+        shell: ["neutral"],
+        "stone and windows": ["glass", { ...windows(0x6e6e6e, 0x444444), 0x4a4a4a: "dark granite", 0x585858: "limestone" }],
+        pinnacles: ["limestone"],
+    },
+    // Tan brick and terracotta.
+    "building-six-north-michigan": {
+        shell: ["neutral"],
+        "brick and windows": ["glass", { ...windows(0x8a8a8a, 0x5e5e5e), 0x6e6e6e: "buff brick", 0x9c9c9c: "white terracotta" }],
+        cornices: ["white terracotta"],
+    },
+    // A cream terracotta front, and common brick on its south wall.
+    "building-six-north-far-east": {
+        shell: ["neutral"],
+        "terracotta and windows": ["glass", {
+                ...windows(0x6e6e6e, 0x3a3a3a),
+                0x363636: "white terracotta", 0x404040: "common brick", 0x444444: "white terracotta", 0x505050: "white terracotta", 0x585858: "white terracotta",
+            }],
+        parapet: ["white terracotta"],
+    },
+    // Brown masonry.
+    "building-michigan-plaza-front-middle": {
+        shell: ["neutral"],
+        "masonry and windows": ["glass", { ...windows(0x9a9a9a, 0x525252), 0x7a7a7a: "brown brick", 0x888888: "limestone" }],
+    },
+    // Buff limestone under a slate roof.
+    "building-university-club": {
+        shell: ["limestone", { 0x2e2e2e: "neutral", 0x343434: "slate", 0x4a4a4a: "neutral" }],
+        "stone and windows": ["glass", { ...windows(0x8c8c8c, 0x444444), 0xa4a4a4: "limestone", 0xb4b4b4: "limestone" }],
+        "merlons and pinnacles": ["limestone"],
+    },
+    // Pink terracotta over granite, under a green tile roof.
+    "building-monroe": {
+        shell: ["pink terracotta", { 0x2e2e2e: "neutral", 0x303030: "green tile", 0x484848: "neutral" }],
+        "terracotta and windows": ["glass", { ...windows(0x929292, 0x484848), 0x9a9a9a: "granite", 0xb2b2b2: "pink terracotta", 0xc2c2c2: "pink terracotta" }],
+        "attic windows": ["glass"],
+    },
+    "building-maclean-center": {
+        shell: ["neutral"],
+        "stone and windows": ["glass", { ...windows(0x6e6e6e, 0x3c3c3c), 0x242424: "neutral", 0x7e7e7e: "limestone", 0x8e8e8e: "limestone" }],
+        cornice: ["limestone"],
+    },
+    "building-lakeview": {
+        shell: ["neutral"],
+        "stone and windows": ["glass", { ...windows(0x6e6e6e, 0x3c3c3c), 0x767676: "limestone", 0x888888: "limestone" }],
+    },
+    // Terracotta over granite columns, round a light court of white brick.
+    "building-peoples-gas": {
+        shell: ["neutral", { 0x646464: "common brick", 0x9c9c9c: "glazed brick" }],
+        "terracotta and windows": ["glass", {
+                ...windows(0x6e6e6e, 0x3c3c3c),
+                0x242424: "neutral", 0x5a5a5a: "dark granite", 0x7c7c7c: "white terracotta", 0x8e8e8e: "white terracotta", 0x9c9c9c: "glazed brick",
+            }],
+        cornice: ["white terracotta"],
+    },
+    // Natural aluminium mullions and blue porcelain-enamelled spandrels.
+    "building-200-south-michigan": {
+        shell: ["neutral"],
+        "curtain wall": ["glass", {
+                ...windows(0x7a7a7a, 0x4a4a4a),
+                0x2d2d2d: "blue enamel", 0x525252: "aluminium", 0x585858: "aluminium", 0x5e5e5e: "aluminium", 0x6a6a6a: "aluminium",
+            }],
+        "rooftop block": ["neutral"],
+        penthouse: ["neutral"],
+    },
+    // White terracotta under a green copper roof.
+    "building-railway-exchange": {
+        shell: ["neutral", { 0x9c9c9c: "copper" }],
+        "terracotta and windows": ["glass", { ...windows(0x6e6e6e, 0x3c3c3c), 0x626262: "common brick", 0x808080: "white terracotta", 0x909090: "white terracotta" }],
+        cornice: ["white terracotta"],
+    },
+    // Sullivan's cream terracotta front, and common brick above its neighbours.
+    "building-michigan-west-right": {
+        shell: ["neutral"],
+        "terracotta and windows": ["glass", { ...windows(0x6e6e6e, 0x3a3a3a), 0x404040: "common brick", 0x484848: "white terracotta", 0x5e5e5e: "white terracotta" }],
+        cartouches: ["white terracotta"],
+    },
+    // Red brick fronts with stone bands.
+    "building-michigan-west-front": {
+        shell: ["neutral"],
+        "brick and windows": ["glass", { ...windows(0x6e6e6e, 0x3a3a3a), 0x464646: "brick", 0x525252: "limestone" }],
+    },
+    "building-30-south-michigan": {
+        shell: ["neutral"],
+        "brick and windows": ["glass", { ...windows(0x6e6e6e, 0x3a3a3a), 0x464646: "brick", 0x525252: "limestone" }],
+    },
+    // Limestone, and red and grey brick.
+    "building-chicago-athletic-association": {
+        shell: ["neutral"],
+        "stone, brick and windows": ["glass", { ...windows(0x6e6e6e, 0x3a3a3a), 0x5a5a5a: "brick", 0x6d6d6d: "limestone", 0x7a7a7a: "limestone" }],
+        cornice: ["limestone"],
+    },
+    // Mies's black curtain wall and bronze-tinted glass.
+    "building-office-west-of-aon": {
+        shell: ["neutral"],
+        "curtain wall": ["bronze glass", { ...windows(0x7a7a7a, 0x4a4a4a), 0x2b2b2b: "dark metal", 0x303030: "dark metal", 0x333333: "dark metal" }],
+    },
+    // White concrete.
+    "building-river-plaza": {
+        shell: ["concrete"],
+        "concrete and windows": ["glass", { ...windows(0x8a8a8a, 0x505050), 0x9a9a9a: "concrete" }],
+        "rooftop box": ["concrete"],
+    },
+    // Dark orange brick and bronze glass.
+    "building-hyatt-regency-west-tower": {
+        shell: ["neutral"],
+        "brick and windows": ["bronze glass", { ...windows(0x6d6d6d, 0x4a4a4a), 0x2c2c2c: "dark metal", 0x3b3b3b: "orange brick" }],
+    },
+    // Cream precast, and the drums' maroon fins.
+    "building-buckingham-east": {
+        shell: ["precast", { 0x686868: "neutral" }],
+        "precast and windows": ["glass", { ...windows(0x8a8a8a, 0x505050), 0x848484: "precast" }],
+        drums: ["precast", { 0x5a5a5a: "maroon", 0x686868: "neutral" }],
+    },
+    // Dark brown aluminium and bronze glass.
+    "building-three-illinois-center": {
+        shell: ["neutral"],
+        "curtain wall": ["bronze glass", { ...windows(0x707070, 0x464646), 0x282828: "bronze", 0x323232: "bronze" }],
+    },
+    // Reflective blue-green glass in its frame.
+    "building-swissotel": {
+        shell: ["neutral"],
+        "curtain wall": ["blue-green glass", windows(0x878787, 0x515151)],
+    },
+};
+// A batch's materials from its mesh's name, if the trial knows the building and the batch.
+export function batchOf(buildingId, meshName) {
+    const materials = colourMaterials[buildingId];
+    const batch = meshName.split(" · ").at(-1);
+    return materials?.[batch] ?? materials?.[batch.replace(/ \d+$/, "")];
+}
+// A grey's tone: the hex the model wrote it as, from its linear channel.
+export const toneOf = (grey) => new THREE.Color(grey, grey, grey).getHex();
+// The measured colours scale to the scene by this factor in linear light, so the skyline view's
+// faces show about the photograph's brightness under the day's lights. At 1.4 the skyline view's
+// 1600 x 900 render, its pixels chosen by each photograph sample's rule, reaches 0.97 (Two
+// Prudential's stone), 0.96 (Blue Cross's glass), 0.86 (Aon's granite), 0.80 (One Prudential's
+// limestone) and 0.66 (Crain's aluminium) of the photograph's brightness in linear light. Aon's
+// granite and Crain's aluminium pass white at their own greys here, so a higher factor would
+// brighten only the darker materials. The Railway Exchange is left out: the view shows its shaded
+// Michigan front, not the sunlit Jackson front its colour is measured on; that front renders 0.82
+// of the photograph's shaded Michigan front.
+export const exposure = 1.4;
+// A grey in its measured colour: the swatch's colour scaled by the grey's brightness against the
+// swatch's grey, both in linear light, so a darker surface of one material stays darker. A colour
+// pushed past white keeps its hue at its brightest, so a bright material's lightest greys can
+// meet there, as Aon's granite and Crain's aluminium do.
+export function paint(grey, { colour: [r, g, b], reference }) {
+    const scale = exposure * (reference > 0 ? grey / reference : 1);
+    const fit = scale / Math.max(1, r * scale, g * scale, b * scale);
+    return [r * fit, g * fit, b * fit];
+}
+// Every measured material's swatch for a building, from how many vertices of each linear grey
+// its surfaces hold: a material naming another takes that one's colour and grey, and a null one
+// stays grey.
+export function swatchesOf(buildingId, greys) {
+    const measured = measuredColours[buildingId];
+    const swatches = new Map();
+    if (!measured)
+        return swatches;
+    // The most common grey of a material, by vertices; the lighter of a tie.
+    const common = (material) => [...greys.get(material) ?? []].reduce((best, entry) => !best || entry[1] > best[1] || (entry[1] === best[1] && entry[0] > best[0]) ? entry : best, null)?.[0];
+    for (const material of greys.keys()) {
+        const entry = measured[material];
+        const source = typeof entry === "string" ? entry : material;
+        const value = typeof entry === "string" ? measured[entry] : entry;
+        const reference = common(source);
+        if (typeof value !== "number" || reference === undefined) {
+            swatches.set(material, null);
+            continue;
+        }
+        const { r, g, b } = new THREE.Color(value);
+        swatches.set(material, { colour: [r, g, b], reference });
+    }
+    return swatches;
+}
+// The sun's, the shade's and the fill light's intensities on the sunny day: the sun and the shade
+// brighter than the night's 2.4 and 0.7, the fill a little dimmer than its 0.55. And the ground's
+// greys in the sun: the platform's blocks, and the roads' darker asphalt.
+export const daylightIntensities = { sun: 3.4, ambient: 0.9, fill: 0.5 };
+export const daylightGround = { blocks: 0x6e6e6e, roads: 0x4a4a4a };
+// The sunny day the colour toggle shows the buildings in: a sky fading from the photograph's blue
+// at the top of the view to its haze at the horizon, blended in linear light, the warm sun, the
+// sky's blue for the light in the shade, and its haze for the fill.
+export function createDaylight() {
+    const rows = 256, data = new Uint8Array(rows * 4);
+    const top = new THREE.Color(daylightColours.sky), bottom = new THREE.Color(daylightColours.horizon);
+    for (let row = 0; row < rows; row += 1) {
+        const hex = bottom.clone().lerp(top, row / (rows - 1)).getHex();
+        data.set([(hex >> 16) & 255, (hex >> 8) & 255, hex & 255, 255], row * 4);
+    }
+    // A data texture's first row is the bottom of the view.
+    const sky = new THREE.DataTexture(data, 1, rows);
+    sky.colorSpace = "srgb";
+    sky.needsUpdate = true;
+    return {
+        sky,
+        sun: [daylightColours.sun, daylightIntensities.sun],
+        ambient: [daylightColours.sky, daylightIntensities.ambient],
+        fill: [daylightColours.horizon, daylightIntensities.fill],
+        ground: daylightGround.blocks,
+    };
+}
+// The colour layer for a skyline's models. A building the trial has no colours for stays in
+// grey, as does a batch it does not know, a mesh without a single toon material, a
+// vertex-coloured batch whose colours are not plain floats, and a material or colour buffer
+// another batch already took, since the builder lets batches share them.
+export function createSkylineColour(models) {
+    const painted = [], flat = [], taken = new Set();
+    for (const model of models) {
+        const buildingId = String(model.building.userData["buildingId"]);
+        if (!measuredColours[buildingId])
+            continue;
+        // The building's batches, and how many vertices of each grey each material holds.
+        const surfaces = [];
+        const greys = new Map();
+        const count = (material, grey, vertices) => {
+            const held = greys.get(material) ?? new Map();
+            held.set(grey, (held.get(grey) ?? 0) + vertices);
+            greys.set(material, held);
+        };
+        model.building.traverse((object) => {
+            const mesh = object;
+            if (!mesh.isMesh)
+                return;
+            const batch = batchOf(buildingId, mesh.name);
+            if (!batch || Array.isArray(mesh.material) || !mesh.material.isMeshToonMaterial)
+                return;
+            const [base, tones = {}] = batch;
+            const material = mesh.material;
+            const materialOf = (grey) => tones[toneOf(grey)] ?? base;
+            const attribute = mesh.geometry.getAttribute("color");
+            if (material.vertexColors) {
+                if (!(attribute?.array instanceof Float32Array) || taken.has(attribute))
+                    return;
+                taken.add(attribute);
+                const vertices = new Map();
+                for (let vertex = 0; vertex < attribute.count; vertex += 1)
+                    vertices.set(attribute.array[vertex * 3], (vertices.get(attribute.array[vertex * 3]) ?? 0) + 1);
+                vertices.forEach((n, grey) => count(materialOf(grey), grey, n));
+                surfaces.push({ material, colours: { attribute, array: attribute.array }, materialOf });
+            }
+            else if (!taken.has(material)) {
+                taken.add(material);
+                count(materialOf(material.color.r), material.color.r, mesh.geometry.getAttribute("position").count);
+                surfaces.push({ material, colours: null, materialOf });
+            }
+        });
+        const swatches = swatchesOf(buildingId, greys);
+        for (const { material, colours, materialOf } of surfaces) {
+            const colourOf = (grey) => {
+                const swatch = swatches.get(materialOf(grey));
+                return swatch ? paint(grey, swatch) : [grey, grey, grey];
+            };
+            if (colours) {
+                const cache = new Map();
+                const paintGrey = (grey) => {
+                    let colour = cache.get(grey);
+                    if (!colour)
+                        cache.set(grey, colour = Float32Array.from(colourOf(grey)));
+                    return colour;
+                };
+                painted.push({ ...colours, paint: paintGrey, greys: null });
+            }
+            else {
+                flat.push({ material, grey: material.color.clone(), colour: new THREE.Color(...colourOf(material.color.r)) });
+            }
+        }
+    }
+    let enabled = false;
+    return {
+        get enabled() { return enabled; },
+        set(next) {
+            if (next === enabled)
+                return;
+            enabled = next;
+            for (const batch of painted) {
+                const { array } = batch;
+                if (next) {
+                    const greys = batch.greys = new Float32Array(array.length / 3);
+                    for (let vertex = 0; vertex < greys.length; vertex += 1) {
+                        const grey = array[vertex * 3];
+                        greys[vertex] = grey;
+                        array.set(batch.paint(grey), vertex * 3);
+                    }
+                }
+                else {
+                    batch.greys.forEach((grey, vertex) => array.fill(grey, vertex * 3, vertex * 3 + 3));
+                    batch.greys = null;
+                }
+                batch.attribute.needsUpdate = true;
+            }
+            for (const { material, grey, colour } of flat)
+                material.color.copy(next ? colour : grey);
+        },
+        refresh() {
+            if (!enabled)
+                return;
+            for (const batch of painted) {
+                const { array } = batch, greys = batch.greys;
+                let changed = false;
+                for (let vertex = 0; vertex < greys.length; vertex += 1) {
+                    const colour = batch.paint(greys[vertex]), at = vertex * 3;
+                    if (array[at] === colour[0] && array[at + 1] === colour[1] && array[at + 2] === colour[2])
+                        continue;
+                    const grey = array[at];
+                    greys[vertex] = grey;
+                    array.set(batch.paint(grey), at);
+                    changed = true;
+                }
+                if (changed)
+                    batch.attribute.needsUpdate = true;
+            }
+        },
+    };
+}

package/site/models/colour-palette.js

@@ -0,0 +1,62 @@
+// By day no office lights show: lit and dim windows are the glass, in its measured colour.
+const glass = (colour) => ({ glass: colour, "lit window": colour, "dim window": colour });
+export const measuredColours = {
+    // docs/railway-exchange-reference.md, 2026-10-09 — Daytime colours from Chicago.jpg.
+    "building-railway-exchange": {
+        "white terracotta": 0xc8c1b3,
+        ...glass(0x3d4243),
+        copper: null,
+        "common brick": null,
+        neutral: null,
+    },
+    // docs/crain-reference.md, 2026-10-09 — Daytime colours from Chicago.jpg.
+    "building-crain-communications": {
+        aluminium: 0xfbfcfa,
+        ...glass(0x1e2425),
+        "crown glass": 0x79828c,
+        lamp: "aluminium",
+        "dark metal": null,
+        neutral: null,
+    },
+    // docs/one-prudential-reference.md, 2026-10-09 — Daytime colours from Chicago.jpg.
+    "building-one-prudential-plaza": {
+        limestone: 0xc2bcb4,
+        aluminium: "limestone",
+        ...glass(0x625e59),
+        "sign board": 0xc4c0b9,
+        "sign letters": 0x6684a0,
+        "dark metal": null,
+        stainless: null,
+        neutral: null,
+    },
+    // docs/two-prudential-reference.md, 2026-10-09 — Daytime colours from Chicago.jpg.
+    "building-two-prudential-plaza": {
+        granite: 0xb1b3b0,
+        ...glass(0x424c55),
+        "crown glass": 0x5e7686,
+        "crown lights": 0xb6bbbb,
+        stainless: null,
+        aluminium: null,
+    },
+    // docs/aon-reference.md, 2026-10-09 — Daytime colours from Chicago.jpg.
+    layer3: {
+        "white granite": 0xdfdfdd,
+        ...glass(0x424240),
+        "cap lights": "white granite",
+        aluminium: null,
+        stainless: null,
+        neutral: null,
+    },
+    // docs/blue-cross-reference.md, 2026-10-09 — Daytime colours from Chicago.jpg and a close-up.
+    "building-blue-cross-blue-shield": {
+        ...glass(0x7d8992),
+        screen: 0x334a60,
+        "band lights": 0xb0bdcd,
+        "dark metal": null,
+        neutral: null,
+    },
+};
+// The sunny day the colour toggle shows: the sky's blue at the top of the view and its haze just
+// 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 };

package/site/skyline-3d.html

@@ -53,6 +53,7 @@
         <button type="button" id="streets" aria-pressed="true">streets</button>
         <button type="button" id="footprints" aria-pressed="false">footprints</button>
         <button type="button" id="wireframe" aria-pressed="false">wireframe</button>
+        <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="celebration-controls" id="celebration-controls" role="group" aria-label="Celebratory window lighting">

package/site/skyline-3d.js

@@ -2,6 +2,7 @@ import { createBuildingStudy, frameBox } from "./study-viewer.js";
 import { createGeographicSkyline } from "./skyline-scene.js";
 import { createGeographicRoads } 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";
 // The skyline viewer's full-screen 3D mode: every mapped building, seen through the
 // drawing's own camera and framed as the viewer frames the drawing, so each tower stands
@@ -16,10 +17,12 @@ export function startSkyline3d({ root, frame, assets, signal, onShowOriginal, on
     // footprints control.
     ground.group.children.forEach((child) => { child.visible = false; });
     const { platform } = settings;
+    // The roads' grey at night, which the colour trial's day lightens and turning it off restores.
+    const nightRoads = 0x2c2c2c;
     const roads = createGeographicRoads({
         x: [platform.x - platform.width / 2, platform.x + platform.width / 2],
         z: [platform.z - platform.depth / 2, platform.z + platform.depth / 2],
-    }, 0x2c2c2c);
+    }, nightRoads);
     const { azimuth } = drawingView;
     // The study renders its first frame as it starts; the scene says so once its controls,
     // menus and detail are wired too, at the end.
@@ -55,6 +58,8 @@ export function startSkyline3d({ root, frame, assets, signal, onShowOriginal, on
         enablePan: true,
         minimumCameraHeight: 1,
     });
+    // The colour trial's layer (models/colour-materials.ts), which the colour toggle turns on.
+    const colour = createSkylineColour(models);
     // A toolbar badge applies one celebration across the skyline, using each
     // building's own supported wording. Context menus change only their building.
     const illuminated = models.filter((model) => model.illumination);
@@ -63,6 +68,7 @@ export function startSkyline3d({ root, frame, assets, signal, onShowOriginal, on
     const celebrationButtons = [...root.querySelectorAll("[data-celebration]")];
     function setCelebration(targets, next) {
         targets.forEach((model) => model.illumination.set(model.illumination.presets.some(({ id }) => id === next) ? next : null));
+        colour.refresh();
         for (const button of celebrationButtons) {
             const eligible = illuminated.filter((model) => model.illumination.presets.some(({ id }) => id === button.dataset["celebration"]));
             const active = eligible.filter((model) => model.illumination.active === button.dataset["celebration"]).length;
@@ -103,6 +109,17 @@ export function startSkyline3d({ root, frame, assets, signal, onShowOriginal, on
             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.
+    const colourButton = root.querySelector("#colour");
+    const daylight = createDaylight(), roadway = roads.material;
+    signal.addEventListener("abort", () => daylight.sky.dispose(), { once: true });
+    colourButton.addEventListener("click", () => {
+        colour.set(!colour.enabled);
+        roadway.color.setHex(colour.enabled ? daylightGround.roads : nightRoads);
+        viewer.setDaylight(colour.enabled ? daylight : null);
+        colourButton.setAttribute("aria-pressed", String(colour.enabled));
+    }, listening);
     // 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

package/site/study-viewer.js

@@ -105,8 +105,11 @@ export function createBuildingStudy({ models, defaultView = "quarter", views = {
     controls.target.fromArray(target);
     controls.rotateSpeed = 0.65;
     controls.zoomSpeed = 0.7;
-    scene.add(new THREE.AmbientLight(0xffffff, 0.7));
-    const keyLight = new THREE.DirectionalLight(0xffffff, 2.4);
+    // The night's lights, which setDaylight(null) restores.
+    const night = { sun: [0xffffff, 2.4], ambient: [0xffffff, 0.7], fill: [0xffffff, 0.55] };
+    const ambientLight = new THREE.AmbientLight(...night.ambient);
+    scene.add(ambientLight);
+    const keyLight = new THREE.DirectionalLight(...night.sun);
     keyLight.position.fromArray(lightPosition);
     keyLight.target.position.set(0, 80, 0);
     keyLight.castShadow = true;
@@ -114,7 +117,7 @@ export function createBuildingStudy({ models, defaultView = "quarter", views = {
     Object.assign(keyLight.shadow.camera, shadowCamera);
     keyLight.shadow.normalBias = 0.2;
     scene.add(keyLight, keyLight.target);
-    const fillLight = new THREE.DirectionalLight(0xffffff, 0.55);
+    const fillLight = new THREE.DirectionalLight(...night.fill);
     fillLight.position.set(100, 140, -140);
     scene.add(fillLight);
     let modelOwners = new Map(models.map((model) => [model.building, model]));
@@ -123,6 +126,7 @@ export function createBuildingStudy({ models, defaultView = "quarter", views = {
     const base = new THREE.Mesh(new THREE.BoxGeometry(platform.width, 2, platform.depth), new THREE.MeshToonMaterial({ color: platform.color ?? 0x3a3a3a }));
     base.position.set(platform.x || 0, -1.1, platform.z || 0);
     base.receiveShadow = true;
+    const nightGround = base.material.color.getHex();
     scene.add(base);
     const baseEdges = new THREE.LineSegments(new THREE.EdgesGeometry(base.geometry), new THREE.LineBasicMaterial({ color: 0x555555 }));
     baseEdges.position.copy(base.position);
@@ -662,5 +666,15 @@ export function createBuildingStudy({ models, defaultView = "quarter", views = {
         window.__buildingStudy = api;
     Object.defineProperty(canvas, "__buildingStudy", { value: api, configurable: true });
     onReady();
-    return { setLayout, setView, requestRender, buildingAt };
+    // Day or night: the transparent canvas shows the page's night behind it until a sky covers it.
+    function setDaylight(day) {
+        scene.background = day?.sky ?? null;
+        base.material.color.setHex(day?.ground ?? nightGround);
+        for (const [light, [colour, intensity]] of [[keyLight, day?.sun ?? night.sun], [ambientLight, day?.ambient ?? night.ambient], [fillLight, day?.fill ?? night.fill]]) {
+            light.color.setHex(colour);
+            light.intensity = intensity;
+        }
+        requestRender();
+    }
+    return { setLayout, setView, requestRender, buildingAt, setDaylight };
 }