@a2f0/skyline 0.2.10 → 0.2.12

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.d.ts

@@ -1,6 +1,6 @@
 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 declare const materialNames: readonly ["neutral", "glass", "green glass", "blue-green glass", "bronze glass", "lit window", "dim window", "lamp", "limestone", "marble", "white granite", "granite", "dark granite", "slate", "white terracotta", "pink terracotta", "green tile", "brick", "common brick", "orange brick", "brown brick", "buff brick", "glazed brick", "concrete", "precast", "copper", "maroon", "blue enamel", "bronze", "dark metal", "aluminium", "stainless", "opaque spandrel", "crown glass", "crown lights", "screen", "band lights", "sign board", "sign letters", "cap lights"];
 export type MaterialName = (typeof materialNames)[number];
 export type Tones = Readonly<Record<number, MaterialName>>;
 export type Batch = readonly [material: MaterialName, tones?: Tones];

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
@@ -11,7 +12,7 @@ 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",
+    "concrete", "precast", "copper", "maroon", "blue enamel", "bronze", "dark metal", "aluminium", "stainless", "opaque spandrel",
     // 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.
@@ -34,6 +35,7 @@ export const colourMaterials = {
     "building-kemper": {
         "marble shell": ["marble"],
         "mullions and bands": ["marble"],
+        "opaque spandrels": ["opaque spandrel"],
         "crown glazing": ["glass"],
         "crown fins": ["aluminium"],
         "roof cap": ["marble"],
@@ -61,7 +63,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"],
@@ -353,6 +355,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 +388,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 +456,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,
@@ -77,6 +89,7 @@ export const measuredColours = {
         marble: 0xc3c0b6,
         ...glass(0x535455),
         aluminium: null,
+        "opaque spandrel": null,
     },
     // docs/north-wabash-reference.md, 2026-10-09 — Daytime colours from Chicago.jpg.
     "building-330-north-wabash": {

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/models/kemper-geographic.js

@@ -4,7 +4,8 @@ import { createBuilder, inside, line, polygonOf } from "./building-kit.js";
 // outlines; the 159 m top is OSM's height tag (522 ft in the 1962 record).
 // The marble shell, window bays, raised mullions, dark crown band with light
 // fins, and projecting cap reuse the fitted model's vocabulary at meter scale.
-// Window-row, bay, and crown spacings are estimates; see
+// Window-column and pane proportions follow a 2012 photograph; bay counts,
+// window-row and crown spacings remain estimates. See
 // docs/kemper-geographic-reference.md. Units are meters; +x is east, +z south.
 export const kemperGeographicLevels = Object.freeze({
     podium: 7.8, // OSM way 685494067: two floors at the tower's average floor height
@@ -25,6 +26,7 @@ export function createKemperGeographicBuilding(record, projectPlan, offset) {
     // with scattered lit units, pale mullions and fins.
     const marble = kit.batch("Kemper · marble shell", kit.material(0x929292));
     const mullions = kit.batch("Kemper · mullions and bands", kit.material(0x9b9b9b));
+    const spandrels = kit.batch("Kemper · opaque spandrels", kit.material(0x626262));
     const crownGlass = kit.batch("Kemper · crown glazing", kit.material(0x1c1c1c));
     const crownFins = kit.batch("Kemper · crown fins", kit.material(0xa3a3a3));
     const cap = kit.batch("Kemper · roof cap", kit.material(0xa8a8a8));
@@ -58,21 +60,25 @@ export function createKemperGeographicBuilding(record, projectPlan, offset) {
             return;
         kit.box(batch, run.at((from + to) / 2), run.normal(0), (to - from) / 2, back, front, y0, y1);
     };
-    // Tower facade: one pane per bay per row between full-height mullions, with
-    // a spandrel at each floor line. Mullions stand proudest of the tower detail.
+    // FID-KEM-002: the 2012 north-face photograph gives openings about 48% of
+    // each bay and glass about 52% of each floor pitch. Opaque panels continue
+    // the narrow columns between windows; the marble piers stay uninterrupted.
     tower.forEach((run, side) => {
         const bays = Math.max(1, Math.round(run.length / 3.1));
         const width = run.length / bays;
+        const inset = width * 0.26;
+        for (let bay = 0; bay < bays; bay += 1) {
+            strip(spandrels, run, bay * width + inset, (bay + 1) * width - inset, h.podium, crownBase, 0.01, 0.04);
+        }
         for (let floor = 3; floor <= 39; floor += 1) {
             const bottom = floorHeight(floor), top = floorHeight(floor + 1);
             for (let bay = 0; bay < bays; bay += 1) {
-                strip(paneTone(floor, bay, side), run, bay * width + 0.16, (bay + 1) * width - 0.16, bottom + 0.26, top - 0.24, 0.02, 0.07);
+                strip(paneTone(floor, bay, side), run, bay * width + inset + 0.01, (bay + 1) * width - inset - 0.01, bottom + pitch * 0.24, top - pitch * 0.24, 0.02, 0.07);
             }
-            strip(mullions, run, 0.015, run.length - 0.015, top - 0.15, top + 0.05, 0.03, 0.12);
         }
         for (let i = 0; i <= bays; i += 1) {
             const s = Math.max(0.18, Math.min(run.length - 0.18, i * width));
-            strip(mullions, run, s - 0.06, s + 0.06, h.podium + 0.02, crownBase - 0.05, 0.05, 0.16);
+            strip(mullions, run, s - inset, s + inset, h.podium + 0.02, crownBase - 0.05, 0.05, 0.16);
         }
         strip(mullions, run, 0.015, run.length - 0.015, h.podium - 0.05, h.podium + 0.35, 0.06, 0.18);
     });

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.10",
+  "version": "0.2.12",
   "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
@@ -11,7 +12,7 @@ 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",
+    "concrete", "precast", "copper", "maroon", "blue enamel", "bronze", "dark metal", "aluminium", "stainless", "opaque spandrel",
     // 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.
@@ -34,6 +35,7 @@ export const colourMaterials = {
     "building-kemper": {
         "marble shell": ["marble"],
         "mullions and bands": ["marble"],
+        "opaque spandrels": ["opaque spandrel"],
         "crown glazing": ["glass"],
         "crown fins": ["aluminium"],
         "roof cap": ["marble"],
@@ -61,7 +63,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"],
@@ -353,6 +355,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 +388,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 +456,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,
@@ -77,6 +89,7 @@ export const measuredColours = {
         marble: 0xc3c0b6,
         ...glass(0x535455),
         aluminium: null,
+        "opaque spandrel": null,
     },
     // docs/north-wabash-reference.md, 2026-10-09 — Daytime colours from Chicago.jpg.
     "building-330-north-wabash": {

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/models/kemper-geographic.js

@@ -4,7 +4,8 @@ import { createBuilder, inside, line, polygonOf } from "./building-kit.js";
 // outlines; the 159 m top is OSM's height tag (522 ft in the 1962 record).
 // The marble shell, window bays, raised mullions, dark crown band with light
 // fins, and projecting cap reuse the fitted model's vocabulary at meter scale.
-// Window-row, bay, and crown spacings are estimates; see
+// Window-column and pane proportions follow a 2012 photograph; bay counts,
+// window-row and crown spacings remain estimates. See
 // docs/kemper-geographic-reference.md. Units are meters; +x is east, +z south.
 export const kemperGeographicLevels = Object.freeze({
     podium: 7.8, // OSM way 685494067: two floors at the tower's average floor height
@@ -25,6 +26,7 @@ export function createKemperGeographicBuilding(record, projectPlan, offset) {
     // with scattered lit units, pale mullions and fins.
     const marble = kit.batch("Kemper · marble shell", kit.material(0x929292));
     const mullions = kit.batch("Kemper · mullions and bands", kit.material(0x9b9b9b));
+    const spandrels = kit.batch("Kemper · opaque spandrels", kit.material(0x626262));
     const crownGlass = kit.batch("Kemper · crown glazing", kit.material(0x1c1c1c));
     const crownFins = kit.batch("Kemper · crown fins", kit.material(0xa3a3a3));
     const cap = kit.batch("Kemper · roof cap", kit.material(0xa8a8a8));
@@ -58,21 +60,25 @@ export function createKemperGeographicBuilding(record, projectPlan, offset) {
             return;
         kit.box(batch, run.at((from + to) / 2), run.normal(0), (to - from) / 2, back, front, y0, y1);
     };
-    // Tower facade: one pane per bay per row between full-height mullions, with
-    // a spandrel at each floor line. Mullions stand proudest of the tower detail.
+    // FID-KEM-002: the 2012 north-face photograph gives openings about 48% of
+    // each bay and glass about 52% of each floor pitch. Opaque panels continue
+    // the narrow columns between windows; the marble piers stay uninterrupted.
     tower.forEach((run, side) => {
         const bays = Math.max(1, Math.round(run.length / 3.1));
         const width = run.length / bays;
+        const inset = width * 0.26;
+        for (let bay = 0; bay < bays; bay += 1) {
+            strip(spandrels, run, bay * width + inset, (bay + 1) * width - inset, h.podium, crownBase, 0.01, 0.04);
+        }
         for (let floor = 3; floor <= 39; floor += 1) {
             const bottom = floorHeight(floor), top = floorHeight(floor + 1);
             for (let bay = 0; bay < bays; bay += 1) {
-                strip(paneTone(floor, bay, side), run, bay * width + 0.16, (bay + 1) * width - 0.16, bottom + 0.26, top - 0.24, 0.02, 0.07);
+                strip(paneTone(floor, bay, side), run, bay * width + inset + 0.01, (bay + 1) * width - inset - 0.01, bottom + pitch * 0.24, top - pitch * 0.24, 0.02, 0.07);
             }
-            strip(mullions, run, 0.015, run.length - 0.015, top - 0.15, top + 0.05, 0.03, 0.12);
         }
         for (let i = 0; i <= bays; i += 1) {
             const s = Math.max(0.18, Math.min(run.length - 0.18, i * width));
-            strip(mullions, run, s - 0.06, s + 0.06, h.podium + 0.02, crownBase - 0.05, 0.05, 0.16);
+            strip(mullions, run, s - inset, s + inset, h.podium + 0.02, crownBase - 0.05, 0.05, 0.16);
         }
         strip(mullions, run, 0.015, run.length - 0.015, h.podium - 0.05, h.podium + 0.35, 0.06, 0.18);
     });

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