@a2f0/skyline 0.2.9 → 0.2.11

package/docs/package.md

@@ -5,6 +5,11 @@ modules. Package builds emit ordinary ESM JavaScript and TypeScript declarations
 consumers of the published package do not compile repository sources or run installation
 scripts. Browser code and Node/Bun build helpers have separate entrypoints.
 
+To start an embed in sunny-day colour, pass `colour: true` to `mountSkyline` alongside
+`assetsUrl`. Its toolbar can return to greyscale, and building details inherit and share its mode.
+Omitting `colour` keeps the existing greyscale default. The setting belongs to that instance;
+it does not use storage or affect another embed. The standalone viewer accepts `?colour=1`.
+
 ## Install from npm
 
 ```sh

package/lib/models/colour-materials.js

@@ -1,5 +1,6 @@
 import * as THREE from "../vendor/three-r186.js";
 import { daylightColours, measuredColours } from "./colour-palette.js";
+import { glassReflection } from "./colour-reflections.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
@@ -61,7 +62,7 @@ export const colourMaterials = {
         "bronze mullions and columns": ["bronze"],
     },
     "building-michigan-plaza-south-tower": {
-        "mapped tower shell": ["glass"],
+        "mapped tower shell": ["aluminium"],
         "mullions and bands": ["aluminium"],
         "lit glazing": ["lit window"],
         "dim glazing": ["dim window"],
@@ -281,11 +282,11 @@ export const toneOf = (grey) => new THREE.Color(grey, grey, grey).getHex();
 // 0.25 to 1.56 on their measured materials and 0.14 on Kemper's whole face, where the scene's sun
 // lights their faces differently from the photograph's. On the Michigan Avenue wall (FID-COL-005),
 // whose shaded fronts are estimated as if sunlit, the fronts render 0.81 to 1.21 of the
-// photograph's shaded fronts and the south faces 0.77 to 0.86 of its sunlit ones. The next nine
-// (FID-COL-006) render 0.79 to 0.98 on sunlit faces, 1.27 on 180 North Michigan's stone, 0.5 on
-// Swissôtel's half-shadowed sliver, and 0.41 to 0.51 of their calibrated sunlit colours on the
-// close-ups' shaded Michigan fronts. docs/viewer.md
-// and the audits give each.
+// photograph's shaded fronts and the south faces 0.77 to 0.86 of its sunlit ones. The next eleven
+// (FID-COL-006) render 0.79 to 0.98 on sunlit faces, 1.27 and 1.21 on 180 North Michigan's stone
+// and River Plaza's top, 0.5 on Swissôtel's half-shadowed sliver, and 0.41 to 0.51 of their
+// calibrated sunlit colours on the close-ups' shaded Michigan fronts. docs/viewer.md and the
+// audits give each.
 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
@@ -353,6 +354,8 @@ export function createDaylight() {
 // another batch already took, since the builder lets batches share them.
 export function createSkylineColour(models) {
     const painted = [], flat = [], taken = new Set();
+    const reflections = [];
+    const glassMaterials = new Set(["glass", "green glass", "blue-green glass", "bronze glass", "crown glass", "lit window", "dim window"]);
     for (const model of models) {
         const buildingId = String(model.building.userData["buildingId"]);
         if (!measuredColours[buildingId])
@@ -384,16 +387,30 @@ export function createSkylineColour(models) {
                 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 });
+                surfaces.push({ geometry: mesh.geometry, 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 });
+                surfaces.push({ geometry: mesh.geometry, material, colours: null, materialOf });
             }
         });
         const swatches = swatchesOf(buildingId, greys);
-        for (const { material, colours, materialOf } of surfaces) {
+        for (const { geometry, material, colours, materialOf } of surfaces) {
+            const mask = new Float32Array(geometry.getAttribute("position").count);
+            const reflecting = new Map();
+            for (let vertex = 0; vertex < mask.length; vertex += 1) {
+                const grey = colours ? colours.array[vertex * 3] : material.color.r;
+                let reflects = reflecting.get(grey);
+                if (reflects === undefined) {
+                    const name = materialOf(grey);
+                    reflects = glassMaterials.has(name) && swatches.get(name) ? 1 : 0;
+                    reflecting.set(grey, reflects);
+                }
+                mask[vertex] = reflects;
+            }
+            if (mask.some((value) => value > 0))
+                reflections.push(glassReflection(material, geometry, mask));
             const colourOf = (grey) => {
                 const swatch = swatches.get(materialOf(grey));
                 return swatch ? paint(grey, swatch) : [grey, grey, grey];
@@ -438,6 +455,8 @@ export function createSkylineColour(models) {
             }
             for (const { material, grey, colour } of flat)
                 material.color.copy(next ? colour : grey);
+            for (const reflect of reflections)
+                reflect(next);
         },
         refresh() {
             if (!enabled)

package/lib/models/colour-palette.js

@@ -1,6 +1,18 @@
 // By day no office lights show: lit and dim windows are the glass, in its measured colour.
 const glass = (colour, material = "glass") => ({ [material]: colour, "lit window": colour, "dim window": colour });
 export const measuredColours = {
+    // FID-COL-007: provisional, direct 2014 daytime close-ups, WITHOUT the panorama's light
+    // calibration. These measure appearance (sky reflections included), not intrinsic albedo.
+    // docs/three-illinois-center-reference.md and docs/michigan-plaza-south-geographic-reference.md.
+    "building-three-illinois-center": {
+        bronze: 0x55585f,
+        ...glass(0x707d8e, "bronze glass"),
+        neutral: null,
+    },
+    "building-michigan-plaza-south-tower": {
+        aluminium: 0x1d2736,
+        ...glass(0x6385a2),
+    },
     // docs/railway-exchange-reference.md, 2026-10-09 — Daytime colours from Chicago.jpg.
     "building-railway-exchange": {
         "white terracotta": 0xc8c1b3,
@@ -166,7 +178,7 @@ export const measuredColours = {
         ...glass(0x3b3f42),
         neutral: null,
     },
-    // FID-COL-006, four towers the panorama shows, measured on their sunlit south faces.
+    // FID-COL-006, six towers the panorama shows, measured on their sunlit south faces.
     // docs/buckingham-reference.md, 2026-10-10 — Daytime colours from Chicago.jpg.
     "building-the-buckingham": {
         concrete: 0xc0beb6,
@@ -195,6 +207,21 @@ export const measuredColours = {
         "dim window": null,
         neutral: null,
     },
+    // docs/river-plaza-two-illinois-center-reference.md, 2026-10-10 — Daytime colours from Chicago.jpg.
+    // Two Illinois Center's black curtain wall, its lighter and darker pixels apart, and River Plaza's
+    // white concrete, the top floors that show above it. Two Illinois Center's identification is
+    // provisional: its photographed top stands further above its model than the group's others.
+    "building-office-west-of-aon": {
+        "dark metal": 0x444c57,
+        ...glass(0x2e3641, "bronze glass"),
+        neutral: null,
+    },
+    "building-river-plaza": {
+        concrete: 0xe5dfd3,
+        glass: null,
+        "lit window": null,
+        "dim window": null,
+    },
     // Michigan Avenue fronts Grant Park's trees hide in the panorama: measured in a close-up under an
     // overcast sky and calibrated to the panorama through Willoughby Tower's limestone beside them,
     // its ratio in linear light between the two photographs (scripts/sample-colours.ts, the day
@@ -238,7 +265,8 @@ export const measuredColours = {
         neutral: null,
     },
     // The Hyatt Regency's west tower, a few pixels wide in the panorama, in an overcast close-up
-    // calibrated through Aon's granite behind it.
+    // calibrated through Aon's granite behind it. Provisional: haze over Aon, and the panorama's
+    // brighter strip, say the brick may be up to twice as bright as this.
     // docs/hyatt-west-tower-reference.md, 2026-10-10 — Daytime colours from a close-up calibrated to Chicago.jpg.
     "building-hyatt-regency-west-tower": {
         "orange brick": 0x65554b,

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

@@ -0,0 +1,2 @@
+import * as THREE from "../vendor/three-r186.js";
+export declare function glassReflection(material: THREE.MeshToonMaterial, geometry: THREE.BufferGeometry, mask: Float32Array): (enabled: boolean) => void;

package/lib/models/colour-reflections.js

@@ -0,0 +1,53 @@
+import * as THREE from "../vendor/three-r186.js";
+import { daylightColours } from "./colour-palette.js";
+// A small sky reflection over the measured glass colour. This is an illustration of an open
+// sky, not a reflection of nearby buildings or a replacement for the toon renderer. The mask
+// separates glass from masonry and mullions even when the builder batches them in one mesh.
+// Install only in colour mode, and restore the original shader on exit. Keep the mask attached
+// once used so Three.js releases its GPU buffer when it disposes the geometry.
+export function glassReflection(material, geometry, mask) {
+    const attribute = new THREE.Float32BufferAttribute(mask, 1);
+    const originalCompile = material.onBeforeCompile, originalKey = material.customProgramCacheKey;
+    const key = originalKey.call(material);
+    const uniforms = {
+        skylineSky: { value: new THREE.Color(daylightColours.sky) },
+        skylineHorizon: { value: new THREE.Color(daylightColours.horizon) },
+        skylineGround: { value: new THREE.Color(0x444444) },
+    };
+    const compile = (shader, renderer) => {
+        originalCompile.call(material, shader, renderer);
+        Object.assign(shader.uniforms, uniforms);
+        shader.vertexShader = shader.vertexShader.replace("#include <common>", `#include <common>
+attribute float skylineGlass;
+varying float vSkylineGlass;`).replace("#include <begin_vertex>", `#include <begin_vertex>
+vSkylineGlass = skylineGlass;`);
+        shader.fragmentShader = shader.fragmentShader.replace("#include <common>", `#include <common>
+varying float vSkylineGlass;
+uniform vec3 skylineSky;
+uniform vec3 skylineHorizon;
+uniform vec3 skylineGround;`).replace("#include <opaque_fragment>", `
+if (vSkylineGlass > 0.0) {
+  vec3 eye = vec3(0.0);
+  eye.z = 1.0;
+  if (!isOrthographic) eye = normalize(vViewPosition);
+  vec3 reflected = inverseTransformDirection(reflect(-eye, normal), viewMatrix);
+  vec3 sky = mix(skylineHorizon, skylineSky, smoothstep(0.0, 0.7, reflected.y));
+  vec3 environment = mix(skylineGround, sky, smoothstep(-0.12, 0.12, reflected.y));
+  float grazing = pow(1.0 - clamp(dot(normal, eye), 0.0, 1.0), 5.0);
+  outgoingLight = mix(outgoingLight, environment, vSkylineGlass * (0.06 + 0.54 * grazing));
+}
+#include <opaque_fragment>`);
+    };
+    return (enabled) => {
+        if (enabled) {
+            geometry.setAttribute("skylineGlass", attribute);
+            material.onBeforeCompile = compile;
+            material.customProgramCacheKey = () => `${key}:skyline-glass-v1`;
+        }
+        else {
+            material.onBeforeCompile = originalCompile;
+            material.customProgramCacheKey = originalKey;
+        }
+        material.needsUpdate = true;
+    };
+}

package/lib/skyline-package.d.ts

@@ -16,6 +16,8 @@ export interface SkylineOptions {
     readonly title?: string;
     /** Start the 3D scene's control bar open, or folded behind its star. Closed by default. */
     readonly controls?: "open" | "closed";
+    /** Start in the opt-in sunny-day colour view. Greyscale by default. */
+    readonly colour?: boolean;
     /**
      * Show the OpenStreetMap credit with the 3D scene's controls. Shown by default. OpenStreetMap's
      * licence requires that credit wherever its data appears, so hide it only when the host page
@@ -36,4 +38,4 @@ export interface SkylineOptions {
  * size and placement: give it an explicit height. Call `destroy` when the hosting component
  * leaves.
  */
-export declare function mountSkyline(container: HTMLElement, { assetsUrl, title, controls, attribution, three }: SkylineOptions): SkylineInstance;
+export declare function mountSkyline(container: HTMLElement, { assetsUrl, title, controls, colour, attribution, three }: SkylineOptions): SkylineInstance;

package/lib/skyline-package.js

@@ -8,8 +8,10 @@ import { mountViewer } from "./skyline-shell.js";
  * size and placement: give it an explicit height. Call `destroy` when the hosting component
  * leaves.
  */
-export function mountSkyline(container, { assetsUrl, title = "Interactive Chicago skyline", controls = "closed", attribution = true, three }) {
+export function mountSkyline(container, { assetsUrl, title = "Interactive Chicago skyline", controls = "closed", colour = false, attribution = true, three }) {
     if (controls !== "open" && controls !== "closed")
         throw new TypeError('Skyline controls must be "open" or "closed".');
-    return mountViewer(container, { assetsUrl, title, controls, attribution, navigation: false, page: false, three });
+    if (typeof colour !== "boolean")
+        throw new TypeError("Skyline colour must be a boolean.");
+    return mountViewer(container, { assetsUrl, title, controls, colour, attribution, navigation: false, page: false, three });
 }

package/lib/skyline-shell.d.ts

@@ -11,6 +11,8 @@ export interface ViewerContext {
     readonly signal: AbortSignal;
     /** Start the 3D scene's control bar open, rather than folded behind its star. */
     readonly controls: "open" | "closed";
+    /** Start the scene and its building details in sunny-day colour. */
+    readonly colour?: boolean;
     /** Show the OpenStreetMap credit with the scene's controls. */
     readonly attribution: boolean;
     /**

package/package.json

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

package/site/building-detail-page.js

@@ -7,6 +7,7 @@ try {
         id: new URLSearchParams(location.search).get("building"),
         frame: document.querySelector(".detail-root"),
         signal: life.signal,
+        colour: new URLSearchParams(location.search).get("colour") === "1",
     });
 }
 catch (error) {

package/site/building-detail.html

@@ -41,6 +41,7 @@
                 </div>
                 <div class="button-group" role="group" aria-label="Model display">
                   <button type="button" id="wireframe" aria-pressed="false">wireframe</button>
+                  <button type="button" id="colour" aria-pressed="false" title="Show the building in sunny-day colour">colour</button>
                   <button type="button" id="turntable" aria-pressed="false" aria-describedby="motion-status">turntable</button>
                 </div>
               </div>

package/site/building-detail.js

@@ -3,19 +3,21 @@ import { createBuildingStudy } from "./study-viewer.js";
 import { skylineAzimuth } from "./skyline-comparison.js";
 import { geographicBuildings } from "./models/skyline-geography-data.js";
 import { createGeographicBuilding, footprintMetrics } from "./models/skyline-geography.js";
+import { createDaylight, createSkylineColour } from "./models/colour-materials.js";
 // One mapped building of the 3D skyline, alone on its own platform, as the building study
 // shows Crain: building-detail.html?building=<id>, and the panel the 3D skyline floats over
 // the skyline from a building's context menu.
-export function showBuildingDetail({ root, id, frame, signal }) {
+export function showBuildingDetail({ root, id, frame, signal, colour = false, onColourChange }) {
     const record = geographicBuildings.find((entry) => entry.id === id);
     if (record)
-        showBuilding(record, root, frame, signal);
+        return showBuilding(record, root, frame, signal, colour, onColourChange);
     else {
         root.querySelector("#loading").textContent = "No mapped building by that name. Right-click a building on the 3D skyline to see its detail.";
         root.querySelectorAll("button").forEach((button) => { button.disabled = true; });
     }
+    return undefined;
 }
-function showBuilding(record, root, frame, signal) {
+function showBuilding(record, root, frame, signal, initiallyColoured, onColourChange) {
     const footprint = footprintMetrics(record.footprint.coordinates);
     // Centred on its mapped outline: ground coordinates are east and north, the scene's x and -z.
     const model = createGeographicBuilding(record, [-footprint.center[0], footprint.center[1]]);
@@ -62,7 +64,7 @@ function showBuilding(record, root, frame, signal) {
         quarter: { azimuth: skylineAzimuth + 0.22, polar: Math.PI / 2 - 0.15, label: "three-quarter view" },
         side: { azimuth: skylineAzimuth + Math.PI / 2, polar: Math.PI / 2 - 0.12, label: "side view" },
     };
-    createBuildingStudy({
+    const viewer = createBuildingStudy({
         root,
         frame,
         signal,
@@ -78,6 +80,24 @@ function showBuilding(record, root, frame, signal) {
         // button stops.
         turntable: true,
     });
+    const colour = createSkylineColour([model]), button = root.querySelector("#colour");
+    let daylight;
+    signal.addEventListener("abort", () => daylight?.sky.dispose(), { once: true });
+    function setColour(enabled) {
+        colour.set(enabled);
+        if (enabled)
+            daylight ??= createDaylight();
+        viewer.setDaylight(enabled ? daylight : null);
+        button.setAttribute("aria-pressed", String(enabled));
+        button.title = enabled ? "Restore the building's greyscale view" : "Show the building in sunny-day colour";
+    }
+    button.addEventListener("click", () => {
+        setColour(!colour.enabled);
+        onColourChange?.(colour.enabled);
+    }, { signal });
+    if (initiallyColoured)
+        setColour(true);
+    return { setColour };
 }
 // Sources open beside the page, so a detail floated over the skyline stays where it is.
 function link(document, href, text) {

package/site/models/colour-materials.js

@@ -1,5 +1,6 @@
 import * as THREE from "../vendor/three-r186.js";
 import { daylightColours, measuredColours } from "./colour-palette.js";
+import { glassReflection } from "./colour-reflections.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
@@ -61,7 +62,7 @@ export const colourMaterials = {
         "bronze mullions and columns": ["bronze"],
     },
     "building-michigan-plaza-south-tower": {
-        "mapped tower shell": ["glass"],
+        "mapped tower shell": ["aluminium"],
         "mullions and bands": ["aluminium"],
         "lit glazing": ["lit window"],
         "dim glazing": ["dim window"],
@@ -281,11 +282,11 @@ export const toneOf = (grey) => new THREE.Color(grey, grey, grey).getHex();
 // 0.25 to 1.56 on their measured materials and 0.14 on Kemper's whole face, where the scene's sun
 // lights their faces differently from the photograph's. On the Michigan Avenue wall (FID-COL-005),
 // whose shaded fronts are estimated as if sunlit, the fronts render 0.81 to 1.21 of the
-// photograph's shaded fronts and the south faces 0.77 to 0.86 of its sunlit ones. The next nine
-// (FID-COL-006) render 0.79 to 0.98 on sunlit faces, 1.27 on 180 North Michigan's stone, 0.5 on
-// Swissôtel's half-shadowed sliver, and 0.41 to 0.51 of their calibrated sunlit colours on the
-// close-ups' shaded Michigan fronts. docs/viewer.md
-// and the audits give each.
+// photograph's shaded fronts and the south faces 0.77 to 0.86 of its sunlit ones. The next eleven
+// (FID-COL-006) render 0.79 to 0.98 on sunlit faces, 1.27 and 1.21 on 180 North Michigan's stone
+// and River Plaza's top, 0.5 on Swissôtel's half-shadowed sliver, and 0.41 to 0.51 of their
+// calibrated sunlit colours on the close-ups' shaded Michigan fronts. docs/viewer.md and the
+// audits give each.
 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
@@ -353,6 +354,8 @@ export function createDaylight() {
 // another batch already took, since the builder lets batches share them.
 export function createSkylineColour(models) {
     const painted = [], flat = [], taken = new Set();
+    const reflections = [];
+    const glassMaterials = new Set(["glass", "green glass", "blue-green glass", "bronze glass", "crown glass", "lit window", "dim window"]);
     for (const model of models) {
         const buildingId = String(model.building.userData["buildingId"]);
         if (!measuredColours[buildingId])
@@ -384,16 +387,30 @@ export function createSkylineColour(models) {
                 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 });
+                surfaces.push({ geometry: mesh.geometry, 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 });
+                surfaces.push({ geometry: mesh.geometry, material, colours: null, materialOf });
             }
         });
         const swatches = swatchesOf(buildingId, greys);
-        for (const { material, colours, materialOf } of surfaces) {
+        for (const { geometry, material, colours, materialOf } of surfaces) {
+            const mask = new Float32Array(geometry.getAttribute("position").count);
+            const reflecting = new Map();
+            for (let vertex = 0; vertex < mask.length; vertex += 1) {
+                const grey = colours ? colours.array[vertex * 3] : material.color.r;
+                let reflects = reflecting.get(grey);
+                if (reflects === undefined) {
+                    const name = materialOf(grey);
+                    reflects = glassMaterials.has(name) && swatches.get(name) ? 1 : 0;
+                    reflecting.set(grey, reflects);
+                }
+                mask[vertex] = reflects;
+            }
+            if (mask.some((value) => value > 0))
+                reflections.push(glassReflection(material, geometry, mask));
             const colourOf = (grey) => {
                 const swatch = swatches.get(materialOf(grey));
                 return swatch ? paint(grey, swatch) : [grey, grey, grey];
@@ -438,6 +455,8 @@ export function createSkylineColour(models) {
             }
             for (const { material, grey, colour } of flat)
                 material.color.copy(next ? colour : grey);
+            for (const reflect of reflections)
+                reflect(next);
         },
         refresh() {
             if (!enabled)

package/site/models/colour-palette.js

@@ -1,6 +1,18 @@
 // By day no office lights show: lit and dim windows are the glass, in its measured colour.
 const glass = (colour, material = "glass") => ({ [material]: colour, "lit window": colour, "dim window": colour });
 export const measuredColours = {
+    // FID-COL-007: provisional, direct 2014 daytime close-ups, WITHOUT the panorama's light
+    // calibration. These measure appearance (sky reflections included), not intrinsic albedo.
+    // docs/three-illinois-center-reference.md and docs/michigan-plaza-south-geographic-reference.md.
+    "building-three-illinois-center": {
+        bronze: 0x55585f,
+        ...glass(0x707d8e, "bronze glass"),
+        neutral: null,
+    },
+    "building-michigan-plaza-south-tower": {
+        aluminium: 0x1d2736,
+        ...glass(0x6385a2),
+    },
     // docs/railway-exchange-reference.md, 2026-10-09 — Daytime colours from Chicago.jpg.
     "building-railway-exchange": {
         "white terracotta": 0xc8c1b3,
@@ -166,7 +178,7 @@ export const measuredColours = {
         ...glass(0x3b3f42),
         neutral: null,
     },
-    // FID-COL-006, four towers the panorama shows, measured on their sunlit south faces.
+    // FID-COL-006, six towers the panorama shows, measured on their sunlit south faces.
     // docs/buckingham-reference.md, 2026-10-10 — Daytime colours from Chicago.jpg.
     "building-the-buckingham": {
         concrete: 0xc0beb6,
@@ -195,6 +207,21 @@ export const measuredColours = {
         "dim window": null,
         neutral: null,
     },
+    // docs/river-plaza-two-illinois-center-reference.md, 2026-10-10 — Daytime colours from Chicago.jpg.
+    // Two Illinois Center's black curtain wall, its lighter and darker pixels apart, and River Plaza's
+    // white concrete, the top floors that show above it. Two Illinois Center's identification is
+    // provisional: its photographed top stands further above its model than the group's others.
+    "building-office-west-of-aon": {
+        "dark metal": 0x444c57,
+        ...glass(0x2e3641, "bronze glass"),
+        neutral: null,
+    },
+    "building-river-plaza": {
+        concrete: 0xe5dfd3,
+        glass: null,
+        "lit window": null,
+        "dim window": null,
+    },
     // Michigan Avenue fronts Grant Park's trees hide in the panorama: measured in a close-up under an
     // overcast sky and calibrated to the panorama through Willoughby Tower's limestone beside them,
     // its ratio in linear light between the two photographs (scripts/sample-colours.ts, the day
@@ -238,7 +265,8 @@ export const measuredColours = {
         neutral: null,
     },
     // The Hyatt Regency's west tower, a few pixels wide in the panorama, in an overcast close-up
-    // calibrated through Aon's granite behind it.
+    // calibrated through Aon's granite behind it. Provisional: haze over Aon, and the panorama's
+    // brighter strip, say the brick may be up to twice as bright as this.
     // docs/hyatt-west-tower-reference.md, 2026-10-10 — Daytime colours from a close-up calibrated to Chicago.jpg.
     "building-hyatt-regency-west-tower": {
         "orange brick": 0x65554b,

package/site/models/colour-reflections.js

@@ -0,0 +1,53 @@
+import * as THREE from "../vendor/three-r186.js";
+import { daylightColours } from "./colour-palette.js";
+// A small sky reflection over the measured glass colour. This is an illustration of an open
+// sky, not a reflection of nearby buildings or a replacement for the toon renderer. The mask
+// separates glass from masonry and mullions even when the builder batches them in one mesh.
+// Install only in colour mode, and restore the original shader on exit. Keep the mask attached
+// once used so Three.js releases its GPU buffer when it disposes the geometry.
+export function glassReflection(material, geometry, mask) {
+    const attribute = new THREE.Float32BufferAttribute(mask, 1);
+    const originalCompile = material.onBeforeCompile, originalKey = material.customProgramCacheKey;
+    const key = originalKey.call(material);
+    const uniforms = {
+        skylineSky: { value: new THREE.Color(daylightColours.sky) },
+        skylineHorizon: { value: new THREE.Color(daylightColours.horizon) },
+        skylineGround: { value: new THREE.Color(0x444444) },
+    };
+    const compile = (shader, renderer) => {
+        originalCompile.call(material, shader, renderer);
+        Object.assign(shader.uniforms, uniforms);
+        shader.vertexShader = shader.vertexShader.replace("#include <common>", `#include <common>
+attribute float skylineGlass;
+varying float vSkylineGlass;`).replace("#include <begin_vertex>", `#include <begin_vertex>
+vSkylineGlass = skylineGlass;`);
+        shader.fragmentShader = shader.fragmentShader.replace("#include <common>", `#include <common>
+varying float vSkylineGlass;
+uniform vec3 skylineSky;
+uniform vec3 skylineHorizon;
+uniform vec3 skylineGround;`).replace("#include <opaque_fragment>", `
+if (vSkylineGlass > 0.0) {
+  vec3 eye = vec3(0.0);
+  eye.z = 1.0;
+  if (!isOrthographic) eye = normalize(vViewPosition);
+  vec3 reflected = inverseTransformDirection(reflect(-eye, normal), viewMatrix);
+  vec3 sky = mix(skylineHorizon, skylineSky, smoothstep(0.0, 0.7, reflected.y));
+  vec3 environment = mix(skylineGround, sky, smoothstep(-0.12, 0.12, reflected.y));
+  float grazing = pow(1.0 - clamp(dot(normal, eye), 0.0, 1.0), 5.0);
+  outgoingLight = mix(outgoingLight, environment, vSkylineGlass * (0.06 + 0.54 * grazing));
+}
+#include <opaque_fragment>`);
+    };
+    return (enabled) => {
+        if (enabled) {
+            geometry.setAttribute("skylineGlass", attribute);
+            material.onBeforeCompile = compile;
+            material.customProgramCacheKey = () => `${key}:skyline-glass-v1`;
+        }
+        else {
+            material.onBeforeCompile = originalCompile;
+            material.customProgramCacheKey = originalKey;
+        }
+        material.needsUpdate = true;
+    };
+}

package/site/skyline-3d-page.js

@@ -3,7 +3,7 @@ import { startSkyline3d } from "./skyline-3d.js";
 // switch to. Its address's settings were applied before the scene's code arrived.
 const life = new AbortController();
 try {
-    startSkyline3d({ root: document, frame: document.body, assets: new URL("./", location.href), signal: life.signal });
+    startSkyline3d({ root: document, frame: document.body, assets: new URL("./", location.href), signal: life.signal, colour: new URLSearchParams(location.search).get("colour") === "1" });
 }
 catch (error) {
     // A scene that fails part way releases what it started; study-loader.js says why.

package/site/skyline-3d.js

@@ -8,7 +8,7 @@ import { loadMarkup, loadStylesheet } from "./markup.js";
 // drawing's own camera and framed as the viewer frames the drawing, so each tower stands
 // where its drawn one does until the camera moves. It renders into skyline-3d.html's own
 // document, or into the viewer's shadow root, from the same markup.
-export function startSkyline3d({ root, frame, assets, signal, onShowOriginal, onReady, onUnavailable }) {
+export function startSkyline3d({ root, frame, assets, signal, colour: initiallyColoured = false, onShowOriginal, onReady, onUnavailable }) {
     const document = root instanceof Document ? root : root.ownerDocument;
     const listening = { signal };
     const { models, ground, settings, drawingView, comparisonViews, labels } = createGeographicSkyline();
@@ -112,14 +112,23 @@ export function startSkyline3d({ root, frame, assets, signal, onShowOriginal, on
     // 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);
+    const roadway = roads.material;
+    let daylight;
+    let detailView;
+    signal.addEventListener("abort", () => daylight?.sky.dispose(), { once: true });
+    function setColour(enabled) {
+        colour.set(enabled);
+        if (enabled)
+            daylight ??= createDaylight();
         roadway.color.setHex(colour.enabled ? daylightGround.roads : nightRoads);
         viewer.setDaylight(colour.enabled ? daylight : null);
         colourButton.setAttribute("aria-pressed", String(colour.enabled));
-    }, listening);
+        colourButton.title = enabled ? "Restore the greyscale skyline" : "Show the skyline in sunny-day colour";
+        detailView?.setColour(enabled);
+    }
+    colourButton.addEventListener("click", () => setColour(!colour.enabled), listening);
+    if (initiallyColoured)
+        setColour(true);
     // 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
@@ -223,7 +232,7 @@ export function startSkyline3d({ root, frame, assets, signal, onShowOriginal, on
     function openMenu(building, x, y) {
         menuBuilding = building.building.userData["buildingId"];
         menuTitle.textContent = building.building.userData["geography"]?.name ?? building.building.name;
-        detailLink.href = new URL(`building-detail.html?building=${encodeURIComponent(menuBuilding)}`, assets).href;
+        detailLink.href = new URL(`building-detail.html?building=${encodeURIComponent(menuBuilding)}${colour.enabled ? "&colour=1" : ""}`, assets).href;
         lightingMenu.replaceChildren();
         lightingMenu.hidden = !building.illumination;
         if (building.illumination) {
@@ -377,6 +386,7 @@ export function startSkyline3d({ root, frame, assets, signal, onShowOriginal, on
     function clearDetail() {
         detail?.abort();
         detail = null;
+        detailView = undefined;
         detailPanel.querySelector(".detail-host")?.remove();
     }
     function openDetail(id, name) {
@@ -401,7 +411,7 @@ export function startSkyline3d({ root, frame, assets, signal, onShowOriginal, on
             // The panel names the detail and closes it, so the detail leaves out its own links.
             markup.classList.add("framed");
             detailRoot.append(document.importNode(markup, true));
-            showBuildingDetail({ root: detailRoot, id, frame: detailRoot.querySelector(".detail-root"), signal: controller.signal });
+            detailView = showBuildingDetail({ root: detailRoot, id, frame: detailRoot.querySelector(".detail-root"), signal: controller.signal, colour: colour.enabled, onColourChange: setColour });
         }).catch((error) => {
             if (controller.signal.aborted)
                 return;

package/site/skyline-viewer.js

@@ -22,7 +22,7 @@ function element(document, tag, properties = {}, attributes = {}) {
         created.setAttribute(name, value);
     return created;
 }
-export function mount(root, { assets, signal, controls, attribution, navigation, page, three }) {
+export function mount(root, { assets, signal, controls, colour, attribution, navigation, page, three }) {
     const document = root.ownerDocument;
     const host = root.host;
     const listening = { signal };
@@ -180,6 +180,7 @@ export function mount(root, { assets, signal, controls, attribution, navigation,
                     frame: scene,
                     assets,
                     signal: sceneLife.signal,
+                    colour,
                     onShowOriginal: showOriginal,
                     onReady() {
                         sceneUnavailable = false;

package/site/viewer-page.js

@@ -14,6 +14,7 @@ mountViewer(document.querySelector("#viewer"), {
     title: "Chicago skyline",
     controls: controls === "open" || controls === "closed" ? controls : embedded ? "closed" : "open",
     attribution: settings.get("attribution") !== "hidden",
+    colour: settings.get("colour") === "1",
     navigation: !embedded,
     page: true,
 });