@a2f0/skyline 0.2.3 → 0.2.4

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

@@ -1,13 +1,30 @@
 import type { BuildingModel } from "./building-kit.js";
-import type { MaterialName } from "./colour-palette.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 function toOklab(r: number, g: number, b: number): [number, number, number];
-export declare function tint(grey: number, material: MaterialName): [number, 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;

package/lib/models/colour-materials.js

@@ -1,5 +1,22 @@
 import * as THREE from "../vendor/three-r186.js";
-import { colourPalette } from "./colour-palette.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 = {
@@ -28,8 +45,8 @@ export const colourMaterials = {
     "building-crain-communications": {
         "aluminum spandrels": ["aluminium"],
         "ribbon glazing": ["glass", { ...windows(0x8a8a8a, 0x565656), 0x585858: "aluminium" }],
-        "sloped glazing": ["glass"],
-        "glazing grid": ["aluminium"],
+        "sloped glazing": ["crown glass"],
+        "glazing grid": ["crown glass"],
         "diamond outline lights": ["lamp"],
         coping: ["aluminium"],
         "slot floor": ["neutral"],
@@ -58,26 +75,28 @@ export const colourMaterials = {
         "crown mullions": ["stainless"],
         spire: ["stainless"],
     },
-    // Limestone piers and aluminium spandrels; the sign's white letters stay white.
+    // 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: "dark metal", 0x383838: "dark metal", 0x4c4c4c: "neutral", 0xb0b0b0: "neutral", 0xc4c4c4: "neutral" }],
+        "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.
+    // 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", 0x3f3f3f: "glass", 0x404040: "glass", 0x454545: "glass", 0x4a4a4a: "glass", 0x565656: "glass",
+                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": ["granite"],
+        "crown ribs": ["crown lights"],
         spire: ["stainless"],
         "spire inset panels": ["glass"],
         lobby: ["glass"],
@@ -87,15 +106,15 @@ export const colourMaterials = {
         "tube shell": ["white granite", { 0x202020: "neutral", 0x4c4c4c: "neutral" }],
         "window ribbons": ["glass", windows(0x7c7c7c, 0x4e4e4e)],
         "granite piers": ["white granite"],
-        "granite cap": ["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: "aluminium" }],
+        "glass, spandrels and bands": ["glass", { ...windows(0x8a8a8a, 0x5c5c5c), 0x2a2a2a: "neutral", 0x3e3e3e: "screen" }],
         mullions: ["dark metal"],
-        "band columns and emblems": ["aluminium"],
+        "band columns and emblems": ["band lights"],
     },
     // Blue-green glass, and the south face's white concrete frame.
     "building-340-on-the-park": {
@@ -250,91 +269,141 @@ export function batchOf(buildingId, meshName) {
 }
 // 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();
-// OKLab from linear sRGB, and back, after Björn Ottosson's matrices.
-export function toOklab(r, g, b) {
-    const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);
-    const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b);
-    const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b);
-    return [
-        0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s,
-        1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s,
-        0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s,
-    ];
+// 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];
 }
-function fromOklab(lightness, a, b) {
-    const l = (lightness + 0.3963377774 * a + 0.2158037573 * b) ** 3;
-    const m = (lightness - 0.1055613458 * a - 0.0638541728 * b) ** 3;
-    const s = (lightness - 0.0894841775 * a - 1.291485548 * b) ** 3;
-    return [
-        4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
-        -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
-        -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s,
-    ];
-}
-const inGamut = (rgb) => rgb.every((channel) => channel >= -1e-7 && channel <= 1 + 1e-7);
-// A grey in a material's colour: the grey's own lightness, with the material's hue and chroma,
-// less of it where the grey is darker than the material, and less again where sRGB cannot
-// show it. A material with no hue leaves the grey exactly as it was.
-export function tint(grey, material) {
-    const swatch = new THREE.Color(colourPalette[material]);
-    const [swatchLightness, a, b] = toOklab(swatch.r, swatch.g, swatch.b);
-    if (Math.hypot(a, b) < 1e-4)
-        return [grey, grey, grey];
-    const [lightness] = toOklab(grey, grey, grey);
-    const at = (scale) => fromOklab(lightness, a * scale, b * scale);
-    let scale = Math.min(1, lightness / swatchLightness);
-    if (!inGamut(at(scale))) {
-        let low = 0;
-        for (let step = 0; step < 20; step += 1) {
-            const middle = (low + scale) / 2;
-            if (inGamut(at(middle)))
-                low = middle;
-            else
-                scale = middle;
+// 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;
         }
-        scale = low;
+        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);
     }
-    return at(scale).map((channel) => Math.min(1, Math.max(0, channel)));
+    // 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 or batch the trial does not know stays
-// in grey, as does 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.
+// 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)
+            if (!batch || Array.isArray(mesh.material) || !mesh.material.isMeshToonMaterial)
                 return;
             const [base, tones = {}] = batch;
-            if (Array.isArray(mesh.material) || !mesh.material.isMeshToonMaterial)
-                return;
             const material = mesh.material;
-            const colourOf = (grey) => tint(grey, tones[toneOf(grey)] ?? base);
+            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 paint = (grey) => {
+                const paintGrey = (grey) => {
                     let colour = cache.get(grey);
                     if (!colour)
                         cache.set(grey, colour = Float32Array.from(colourOf(grey)));
                     return colour;
                 };
-                painted.push({ attribute, array: attribute.array, paint, greys: null });
+                painted.push({ ...colours, paint: paintGrey, greys: null });
             }
-            else if (!taken.has(material)) {
-                taken.add(material);
+            else {
                 flat.push({ material, grey: material.color.clone(), colour: new THREE.Color(...colourOf(material.color.r)) });
             }
-        });
+        }
     }
     let enabled = false;
     return {

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

@@ -1,35 +1,8 @@
-export declare const colourPalette: {
-    readonly neutral: 8421504;
-    readonly glass: 5398118;
-    readonly "green glass": 4157036;
-    readonly "blue-green glass": 4883088;
-    readonly "bronze glass": 5917502;
-    readonly "lit window": 16044954;
-    readonly "dim window": 12098418;
-    readonly lamp: 16773330;
-    readonly limestone: 14207656;
-    readonly marble: 14999508;
-    readonly "white granite": 14473165;
-    readonly granite: 12366504;
-    readonly "dark granite": 6444111;
-    readonly slate: 5001824;
-    readonly "white terracotta": 15326916;
-    readonly "pink terracotta": 14198936;
-    readonly "green tile": 6196326;
-    readonly brick: 10243128;
-    readonly "common brick": 9202778;
-    readonly "orange brick": 10771002;
-    readonly "brown brick": 8147522;
-    readonly "buff brick": 13216640;
-    readonly "glazed brick": 14999503;
-    readonly concrete: 13617595;
-    readonly precast: 14338210;
-    readonly copper: 7316623;
-    readonly maroon: 7612463;
-    readonly "blue enamel": 4088212;
-    readonly bronze: 7098420;
-    readonly "dark metal": 3158842;
-    readonly aluminium: 12567753;
-    readonly stainless: 11844806;
+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;
 };
-export type MaterialName = keyof typeof colourPalette;

package/lib/models/colour-palette.js

@@ -1,48 +1,62 @@
-// The colour trial's named materials (https://github.com/a2f0/skyline/issues/115): the one file
-// in the repository allowed colours, which tests/grayscale.test.ts exempts by name. Each colour
-// gives a material's hue and how strongly it shows; the lightness every surface keeps is its
-// model's own grey, so colour mode adds hue to the skyline without changing its values. A
-// material darker than its colour here carries proportionally less of it. These are hand-picked
-// from the materials and colours each building's reference audit records, not measured from
-// photographs; a material with no hue stays grey.
-export const colourPalette = {
-    neutral: 0x808080,
-    // Vision glass: the default cool tint, the teal of 340 on the Park and the Heritage, Swissôtel's
-    // reflective blue-green, and the bronze tint of Illinois Center and its neighbours.
-    glass: 0x525e66,
-    "green glass": 0x3f6e6c,
-    "blue-green glass": 0x4a8290,
-    "bronze glass": 0x5a4b3e,
-    // Lit offices, and the dimmer ones further in.
-    "lit window": 0xf4d39a,
-    "dim window": 0xb89b72,
-    lamp: 0xfff0d2,
-    // Stone.
-    limestone: 0xd8caa8,
-    marble: 0xe4dfd4,
-    "white granite": 0xdcd7cd,
-    granite: 0xbcb2a8,
-    "dark granite": 0x62544f,
-    slate: 0x4c5260,
-    // Clay.
-    "white terracotta": 0xe9dec4,
-    "pink terracotta": 0xd8a898,
-    "green tile": 0x5e8c66,
-    brick: 0x9c4c38,
-    "common brick": 0x8c6c5a,
-    "orange brick": 0xa45a3a,
-    "brown brick": 0x7c5242,
-    "buff brick": 0xc9ab80,
-    "glazed brick": 0xe4dfcf,
-    // Concrete.
-    concrete: 0xcfc9bb,
-    precast: 0xdac8a2,
-    // Metal and paint.
-    copper: 0x6fa48f,
-    maroon: 0x74282f,
-    "blue enamel": 0x3e6194,
-    bronze: 0x6c5034,
-    "dark metal": 0x30333a,
-    aluminium: 0xbfc4c9,
-    stainless: 0xb4bcc6,
+// 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.3",
+  "version": "0.2.4",
   "description": "Interactive Chicago skyline viewer and reusable Three.js building models",
   "license": "UNLICENSED",
   "repository": {

package/site/models/colour-materials.js

@@ -1,5 +1,22 @@
 import * as THREE from "../vendor/three-r186.js";
-import { colourPalette } from "./colour-palette.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 = {
@@ -28,8 +45,8 @@ export const colourMaterials = {
     "building-crain-communications": {
         "aluminum spandrels": ["aluminium"],
         "ribbon glazing": ["glass", { ...windows(0x8a8a8a, 0x565656), 0x585858: "aluminium" }],
-        "sloped glazing": ["glass"],
-        "glazing grid": ["aluminium"],
+        "sloped glazing": ["crown glass"],
+        "glazing grid": ["crown glass"],
         "diamond outline lights": ["lamp"],
         coping: ["aluminium"],
         "slot floor": ["neutral"],
@@ -58,26 +75,28 @@ export const colourMaterials = {
         "crown mullions": ["stainless"],
         spire: ["stainless"],
     },
-    // Limestone piers and aluminium spandrels; the sign's white letters stay white.
+    // 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: "dark metal", 0x383838: "dark metal", 0x4c4c4c: "neutral", 0xb0b0b0: "neutral", 0xc4c4c4: "neutral" }],
+        "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.
+    // 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", 0x3f3f3f: "glass", 0x404040: "glass", 0x454545: "glass", 0x4a4a4a: "glass", 0x565656: "glass",
+                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": ["granite"],
+        "crown ribs": ["crown lights"],
         spire: ["stainless"],
         "spire inset panels": ["glass"],
         lobby: ["glass"],
@@ -87,15 +106,15 @@ export const colourMaterials = {
         "tube shell": ["white granite", { 0x202020: "neutral", 0x4c4c4c: "neutral" }],
         "window ribbons": ["glass", windows(0x7c7c7c, 0x4e4e4e)],
         "granite piers": ["white granite"],
-        "granite cap": ["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: "aluminium" }],
+        "glass, spandrels and bands": ["glass", { ...windows(0x8a8a8a, 0x5c5c5c), 0x2a2a2a: "neutral", 0x3e3e3e: "screen" }],
         mullions: ["dark metal"],
-        "band columns and emblems": ["aluminium"],
+        "band columns and emblems": ["band lights"],
     },
     // Blue-green glass, and the south face's white concrete frame.
     "building-340-on-the-park": {
@@ -250,91 +269,141 @@ export function batchOf(buildingId, meshName) {
 }
 // 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();
-// OKLab from linear sRGB, and back, after Björn Ottosson's matrices.
-export function toOklab(r, g, b) {
-    const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);
-    const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b);
-    const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b);
-    return [
-        0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s,
-        1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s,
-        0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s,
-    ];
+// 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];
 }
-function fromOklab(lightness, a, b) {
-    const l = (lightness + 0.3963377774 * a + 0.2158037573 * b) ** 3;
-    const m = (lightness - 0.1055613458 * a - 0.0638541728 * b) ** 3;
-    const s = (lightness - 0.0894841775 * a - 1.291485548 * b) ** 3;
-    return [
-        4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
-        -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
-        -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s,
-    ];
-}
-const inGamut = (rgb) => rgb.every((channel) => channel >= -1e-7 && channel <= 1 + 1e-7);
-// A grey in a material's colour: the grey's own lightness, with the material's hue and chroma,
-// less of it where the grey is darker than the material, and less again where sRGB cannot
-// show it. A material with no hue leaves the grey exactly as it was.
-export function tint(grey, material) {
-    const swatch = new THREE.Color(colourPalette[material]);
-    const [swatchLightness, a, b] = toOklab(swatch.r, swatch.g, swatch.b);
-    if (Math.hypot(a, b) < 1e-4)
-        return [grey, grey, grey];
-    const [lightness] = toOklab(grey, grey, grey);
-    const at = (scale) => fromOklab(lightness, a * scale, b * scale);
-    let scale = Math.min(1, lightness / swatchLightness);
-    if (!inGamut(at(scale))) {
-        let low = 0;
-        for (let step = 0; step < 20; step += 1) {
-            const middle = (low + scale) / 2;
-            if (inGamut(at(middle)))
-                low = middle;
-            else
-                scale = middle;
+// 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;
         }
-        scale = low;
+        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);
     }
-    return at(scale).map((channel) => Math.min(1, Math.max(0, channel)));
+    // 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 or batch the trial does not know stays
-// in grey, as does 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.
+// 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)
+            if (!batch || Array.isArray(mesh.material) || !mesh.material.isMeshToonMaterial)
                 return;
             const [base, tones = {}] = batch;
-            if (Array.isArray(mesh.material) || !mesh.material.isMeshToonMaterial)
-                return;
             const material = mesh.material;
-            const colourOf = (grey) => tint(grey, tones[toneOf(grey)] ?? base);
+            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 paint = (grey) => {
+                const paintGrey = (grey) => {
                     let colour = cache.get(grey);
                     if (!colour)
                         cache.set(grey, colour = Float32Array.from(colourOf(grey)));
                     return colour;
                 };
-                painted.push({ attribute, array: attribute.array, paint, greys: null });
+                painted.push({ ...colours, paint: paintGrey, greys: null });
             }
-            else if (!taken.has(material)) {
-                taken.add(material);
+            else {
                 flat.push({ material, grey: material.color.clone(), colour: new THREE.Color(...colourOf(material.color.r)) });
             }
-        });
+        }
     }
     let enabled = false;
     return {

package/site/models/colour-palette.js

@@ -1,48 +1,62 @@
-// The colour trial's named materials (https://github.com/a2f0/skyline/issues/115): the one file
-// in the repository allowed colours, which tests/grayscale.test.ts exempts by name. Each colour
-// gives a material's hue and how strongly it shows; the lightness every surface keeps is its
-// model's own grey, so colour mode adds hue to the skyline without changing its values. A
-// material darker than its colour here carries proportionally less of it. These are hand-picked
-// from the materials and colours each building's reference audit records, not measured from
-// photographs; a material with no hue stays grey.
-export const colourPalette = {
-    neutral: 0x808080,
-    // Vision glass: the default cool tint, the teal of 340 on the Park and the Heritage, Swissôtel's
-    // reflective blue-green, and the bronze tint of Illinois Center and its neighbours.
-    glass: 0x525e66,
-    "green glass": 0x3f6e6c,
-    "blue-green glass": 0x4a8290,
-    "bronze glass": 0x5a4b3e,
-    // Lit offices, and the dimmer ones further in.
-    "lit window": 0xf4d39a,
-    "dim window": 0xb89b72,
-    lamp: 0xfff0d2,
-    // Stone.
-    limestone: 0xd8caa8,
-    marble: 0xe4dfd4,
-    "white granite": 0xdcd7cd,
-    granite: 0xbcb2a8,
-    "dark granite": 0x62544f,
-    slate: 0x4c5260,
-    // Clay.
-    "white terracotta": 0xe9dec4,
-    "pink terracotta": 0xd8a898,
-    "green tile": 0x5e8c66,
-    brick: 0x9c4c38,
-    "common brick": 0x8c6c5a,
-    "orange brick": 0xa45a3a,
-    "brown brick": 0x7c5242,
-    "buff brick": 0xc9ab80,
-    "glazed brick": 0xe4dfcf,
-    // Concrete.
-    concrete: 0xcfc9bb,
-    precast: 0xdac8a2,
-    // Metal and paint.
-    copper: 0x6fa48f,
-    maroon: 0x74282f,
-    "blue enamel": 0x3e6194,
-    bronze: 0x6c5034,
-    "dark metal": 0x30333a,
-    aluminium: 0xbfc4c9,
-    stainless: 0xb4bcc6,
+// 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,7 +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="Show each building's materials in colour, a trial">colour</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,7 +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 { createSkylineColour } from "./models/colour-materials.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
@@ -17,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.
@@ -107,13 +109,16 @@ export function startSkyline3d({ root, frame, assets, signal, onShowOriginal, on
             viewer.requestRender();
         }, listening);
     }
-    // The colour trial's toggle, pressed while the buildings show their materials' colours over
-    // the greys, which it restores exactly when pressed again.
+    // 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));
-        viewer.requestRender();
     }, 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

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 };
 }