@a2f0/skyline 0.0.0-stage → 0.1.2

package/site/models/peoples-gas-geographic.js

@@ -0,0 +1,250 @@
+import * as THREE from "../vendor/three-r186.js";
+import { createBuilder, polygonOf } from "./building-kit.js";
+import { chainSkin, chainsOf, orient, paintedSlab, planOf, turnsAt } from "./facade-grid.js";
+// The Peoples Gas Building, 122 South Michigan Avenue (D. H. Burnham & Co., 1911): the
+// geographic layout's model, on the mapped outline 145498710 and its parts. The original
+// layout has no model of it; the drawing shows it between the Lake View Building and Adams
+// Street, with the Borg-Warner Building before its Adams front.
+//
+// Twenty storeys rise on the Michigan and Adams fronts between wide corner piers:
+// - two behind granite columns;
+// - fourteen of paired windows, eleven bays to Michigan and nine to Adams;
+// - three behind a colonnade under an entablature;
+// - an attic under a frieze of pendant arches, a projecting cornice and its cresting.
+// A light court opens over the ground storey and widens over the seventeenth floor. The top
+// is the City's 272 ft. The drawn cresting reads 86 m, so heights read on the drawing are
+// scaled to meet it; see docs/peoples-gas-reference.md. Units are meters; +x is east, +z is
+// south.
+const drawn = (height) => height * 82.9 / 86;
+export const peoplesGasLevels = Object.freeze({
+    court: drawn(7.2), // the light court's floor, over the ground storey
+    inner: drawn(66.3), // the court's inner wings' roof, at the seventeenth floor
+    colonnade: drawn(67.47), // the colonnade's foot
+    entablature: drawn(76.8), // the colonnade's entablature
+    frieze: drawn(82.1), // the frieze under the cornice
+    cornice: drawn(84.3), // the projecting cornice
+    roof: drawn(84.8), // the cornice's top and the roof
+    top: 82.9, // the cresting's top, the published height
+});
+const h = peoplesGasLevels;
+// The skins' colours: the window tones, and the terracotta, granite, bands, the frieze's
+// shadow and the court's white brick, which no window shares.
+export const peoplesGasPalette = Object.freeze({ glass: [0x2c2c2c, 0x303030, 0x343434, 0x383838], lit: 0x6e6e6e, dim: 0x3c3c3c, stone: 0x7c7c7c, granite: 0x5a5a5a, band: 0x8e8e8e, shadow: 0x242424, court: 0x9c9c9c });
+const palette = peoplesGasPalette;
+const color = (hex) => new THREE.Color(hex);
+const glassTones = palette.glass.map(color);
+const litGlass = color(palette.lit), dimGlass = color(palette.dim);
+const stone = color(palette.stone), granite = color(palette.granite), band = color(palette.band), shadow = color(palette.shadow), courtBrick = color(palette.court);
+const core = color(0x262626), party = color(0x646464), roofing = color(0x3c3c3c);
+function paneColor(row, bay, wall) {
+    const hash = (Math.imul(row + 61, 0x9e3779b1) ^ Math.imul(bay + 89, 0x85ebca77) ^ Math.imul(wall + 73, 0xc2b2ae3d)) >>> 0;
+    const value = hash % 101;
+    if (value < 4)
+        return litGlass;
+    if (value < 8)
+        return dimGlass;
+    return glassTones[value % glassTones.length];
+}
+const rows = [{ lo: 0.25, hi: drawn(0.6), kind: "granite", floor: 1 }];
+const push = (hi, kind, floor, more = {}) => rows.push({ lo: rows.at(-1).hi, hi: drawn(hi), kind, floor, ...more });
+push(6.2, "shop", 1);
+push(7.2, "granite", 2);
+push(11.6, "shop", 2);
+push(12.4, "granite", 2);
+push(13.3, "belt", 2);
+const sill = (n) => 63.36 - (16 - n) * 3.79;
+for (let n = 3; n <= 16; n += 1) {
+    push(sill(n), "wall", n);
+    push(sill(n) + 2.24, "glass", n, { pier: true });
+}
+push(66.3, "wall", 16);
+push(67.47, "wall", 17);
+push(69.7, "rail", 17, { pier: true });
+push(69.9, "rail", 17);
+push(70.9, "open", 18);
+push(73.2, "open", 18, { pier: true });
+push(74.56, "open", 19);
+push(76.8, "open", 19, { pier: true });
+push(78.3, "band", 19);
+push(78.9, "wall", 20);
+push(81, "attic", 20);
+push(81.3, "attic", 20, { reach: 0.45 });
+push(81.55, "pendant", 20, { reach: 0.45 });
+push(82.1, "pendant", 20, { reach: 0.9 });
+push(84.3, "frieze", 20);
+push(84.8, "parapet", 20);
+export function createPeoplesGasGeographicBuilding(record, projectPlan, offset) {
+    const kit = createBuilder(record.name, record.id);
+    const shell = kit.batch("Peoples Gas Building · shell", kit.material(0xffffff, { vertexColors: true }));
+    const wall = kit.batch("Peoples Gas Building · terracotta and windows", kit.material(0xffffff, { vertexColors: true }));
+    const cornice = kit.batch("Peoples Gas Building · cornice", kit.material(0x8e8e8e));
+    const corners = (coordinates) => orient(polygonOf(projectPlan(coordinates)));
+    const lot = corners(record.footprint.coordinates);
+    // The mapped parts: the twenty-level ring, the north wing within it, the inner wings
+    // rising to the seventeenth floor, the court, and the notch in the north wall that opens
+    // it to the Lake View Building's light court.
+    const part = (way) => corners(record.parts.find((p) => p.way === way).coordinates);
+    const mapped = [1179833660, 1179833658, 1179833661, 1179833659, 1179842408].map(part);
+    // The lot's south-east corner, on Michigan and Adams, with the Adams front running west to
+    // the alley and the Michigan front north to the Lake View Building.
+    const corner = lot.reduce((best, p) => (p[0] + p[1] > best[0] + best[1] ? p : best));
+    const northEast = lot.reduce((best, p) => (p[0] - p[1] > best[0] - best[1] ? p : best));
+    const southWest = lot.reduce((best, p) => (p[1] - p[0] > best[1] - best[0] ? p : best));
+    const unit = (p) => { const d = Math.hypot(p[0] - corner[0], p[1] - corner[1]); return [(p[0] - corner[0]) / d, (p[1] - corner[1]) / d]; };
+    const west = unit(southWest), north = unit(northEast);
+    const at = (a, b) => [corner[0] + west[0] * a + north[0] * b, corner[1] + west[1] * a + north[1] * b];
+    // The inverse of `at`: a point's distances along the Adams and Michigan fronts, which
+    // meet a little off square.
+    const skew = west[0] * north[1] - west[1] * north[0];
+    const inLot = (p) => {
+        const [x, z] = [p[0] - corner[0], p[1] - corner[1]];
+        return [(x * north[1] - z * north[0]) / skew, (west[0] * z - west[1] * x) / skew];
+    };
+    const [adams, michigan] = [inLot(southWest)[0], inLot(northEast)[1]];
+    // Corners and edges by value, since parts share the outline's nodes.
+    const key = (p) => `${p[0].toFixed(3)},${p[1].toFixed(3)}`;
+    // Where a part's edge joins two of the outline's corners a few nodes apart, it follows
+    // the outline between them, so that the roof meets the walls corner to corner: the ring
+    // skips two of the Michigan front's nodes.
+    const index = new Map(lot.map((p, i) => [key(p), i]));
+    const follow = (polygon) => polygon.flatMap((a, i) => {
+        const [from, to] = [index.get(key(a)), index.get(key(polygon[(i + 1) % polygon.length]))], n = lot.length;
+        if (from === undefined || to === undefined)
+            return [a];
+        const [ahead, back] = [(to - from + n) % n, (from - to + n) % n];
+        const step = ahead > 1 && ahead <= 3 ? 1 : back > 1 && back <= 3 ? -1 : 0, between = step === 1 ? ahead - 1 : step === -1 ? back - 1 : 0;
+        return [a, ...Array.from({ length: between }, (_, k) => lot[(from + step * (k + 1) + n) % n])];
+    });
+    // And a part takes every other part's corner within 2 cm of one of its edges: the ring's
+    // edge along the court passes 1.1 cm from the court's corner.
+    const conform = (polygon, others) => polygon.flatMap((a, i) => {
+        const b = polygon[(i + 1) % polygon.length], length = Math.hypot(b[0] - a[0], b[1] - a[1]);
+        const on = others.flat().map((p) => ({ p, t: ((p[0] - a[0]) * (b[0] - a[0]) + (p[1] - a[1]) * (b[1] - a[1])) / length ** 2 }))
+            .filter(({ p, t }) => t > 1e-6 && t < 1 - 1e-6 && Math.abs((p[0] - a[0]) * (b[1] - a[1]) - (p[1] - a[1]) * (b[0] - a[0])) / length < 0.02);
+        return [a, ...[...new Map(on.map((x) => [key(x.p), x])).values()].sort((x, y) => x.t - y.t).map((x) => x.p)];
+    });
+    const followed = mapped.map(follow);
+    const [ring, northWing, innerWings, court, notch] = followed.map((polygon) => conform(polygon, followed.filter((other) => other !== polygon)));
+    const edges = (polygon) => new Set(polygon.flatMap((a, i) => { const b = polygon[(i + 1) % polygon.length]; return [`${key(a)}|${key(b)}`, `${key(b)}|${key(a)}`]; }));
+    const has = (set, run) => set.has(`${key(run.at(0))}|${key(run.at(run.length))}`);
+    // Two outlines sharing a run of edges, as one: the edges neither shares, end to end.
+    const merge = (p, q) => {
+        const [ep, eq] = [edges(p), edges(q)];
+        const kept = [...p.map((a, i) => [a, p[(i + 1) % p.length]]).filter(([a, b]) => !eq.has(`${key(a)}|${key(b)}`)),
+            ...q.map((a, i) => [a, q[(i + 1) % q.length]]).filter(([a, b]) => !ep.has(`${key(a)}|${key(b)}`))];
+        const next = new Map(kept.map(([a, b]) => [key(a), b]));
+        const out = [kept[0][0]];
+        for (let p1 = kept[0][1]; key(p1) !== key(out[0]); p1 = next.get(key(p1)))
+            out.push(p1);
+        return orient(out);
+    };
+    // The court's walls face into it, so their outlines run the other way.
+    const inward = (polygon) => [...polygon].reverse();
+    const [lower, upper, opening] = [inward(court), inward(merge(court, innerWings)), inward(notch)];
+    const [lotEdges, wingEdges, lowerEdges] = [edges(lot), edges(innerWings), edges(court)];
+    const face = (run, lo, hi, paint) => {
+        const a = run.at(0), b = run.at(run.length), n = run.normal(0);
+        kit.quad(shell, [[a[0], lo, a[1]], [b[0], lo, b[1]], [b[0], hi, b[1]], [a[0], hi, a[1]]], [[n[0], 0, n[1]]], paint);
+    };
+    // The outer walls to the roof, the north wall, above the Lake View Building, in common
+    // brick, and open over the court's floor at the notch. Walls split where the ones they
+    // meet end, at the court's floor and the inner wings' roof, so every edge is shared.
+    const notchEdges = edges(notch);
+    planOf(lot).forEach((run) => {
+        const paint = run.normal(0)[1] < -0.9 ? party : core;
+        face(run, 0, h.court, paint);
+        if (!has(notchEdges, run))
+            face(run, h.court, h.roof, paint);
+    });
+    // The court's walls: the inner wings' to their roof, the rest to the roof, and over the
+    // inner wings the widened court's; the notch's but its open side.
+    planOf(lower).forEach((run) => {
+        face(run, h.court, h.inner, courtBrick);
+        if (!has(wingEdges, run))
+            face(run, h.inner, h.roof, courtBrick);
+    });
+    planOf(upper).forEach((run) => { if (!has(lowerEdges, run))
+        face(run, h.inner, h.roof, courtBrick); });
+    planOf(opening).forEach((run) => { if (!has(lotEdges, run))
+        face(run, h.court, h.roof, courtBrick); });
+    paintedSlab(kit, shell, lot, 0, false, roofing);
+    for (const roof of [ring, northWing])
+        paintedSlab(kit, shell, roof, h.roof, true, roofing);
+    paintedSlab(kit, shell, innerWings, h.inner, true, roofing);
+    for (const floor of [court, notch])
+        paintedSlab(kit, shell, floor, h.court, true, roofing);
+    // The cornice projects 90 cm along both fronts, to 2 cm over the roof, stopping 3 cm
+    // short of the north and alley walls. It starts 8 cm inside the lines between the fronts'
+    // corners, which the mapped walls stand at most 2 cm inside and 12.4 cm outside, so it
+    // always meets them. Its cresting: blocks 50 cm wide and 1 m apart near its edge.
+    const [out, lip] = [0.9, 0.02];
+    kit.prism(cornice, planOf(orient([at(-out, michigan - 0.03), at(-out, -out), at(adams - 0.03, -out), at(adams - 0.03, 0.08), at(0.08, 0.08), at(0.08, michigan - 0.03)])), [h.cornice, h.roof + lip]);
+    const [east, south] = [[-north[1], north[0]], [west[1], -west[0]]];
+    for (let b = 0.5; b < michigan - 0.5; b += 1)
+        kit.box(cornice, at(-0.7, b), east, 0.25, -0.15, 0.15, h.roof + lip, h.top);
+    for (let a = 0.5; a < adams - 0.5; a += 1)
+        kit.box(cornice, at(a, -0.7), south, 0.25, -0.15, 0.15, h.roof + lip, h.top);
+    const skin = (plan, keep, from, to, seed, openings, plain) => {
+        const span = rows.filter((row) => row.lo >= from - 1e-9 && row.hi <= to + 1e-9), heights = [span[0].lo, ...span.map((row) => row.hi)];
+        const paints = { wall: plain, granite, band, shadow };
+        chainsOf(plan).forEach((chain, index) => {
+            if (!chain.runs.every((run) => keep(plan[run])))
+                return;
+            const first = chain.runs[0], last = chain.runs.at(-1);
+            const s0 = turnsAt(plan, first)[0] > 0 ? 0.09 : 0.02, s1 = chain.length - (turnsAt(plan, last)[1] > 0 ? 0.09 : 0.02);
+            const [columns, cell] = openings(chain.length);
+            chainSkin(kit, wall, plan, chain, 0, chain.runs.length - 1, s0, s1, columns, heights, 0.02, 0.07, (bay, r) => {
+                const row = span[r], shows = cell((columns[bay - 1] + columns[bay]) / 2, row);
+                return shows === "glass" ? paneColor(row.floor, bay, seed * 8 + index) : paints[shows];
+            }, plain);
+        });
+    };
+    const near = (list, x) => Math.min(...list.map((c) => Math.abs(x - c)));
+    const columnsOf = (length, cuts) => [0, ...[...new Set(cuts.map((c) => Math.round(c * 1e4) / 1e4))].sort((p, q) => p - q), length];
+    // A street front: corner piers 6 m to the first column's middle, each with a window 1.7 m
+    // wide 2.6 m from its corner; `count` bays between, each column 1.6 m wide. A bay holds a
+    // pair of windows 1.2 m wide either side of a 38 cm mullion, the colonnade's opening, and
+    // an attic window 1.7 m wide; a pendant hangs over each column.
+    const front = (count) => (length) => {
+        const pitch = (length - 12) / count, lines = Array.from({ length: count + 1 }, (_, k) => 6 + k * pitch);
+        const centres = lines.slice(1).map((line) => line - pitch / 2), piers = [2.6, length - 2.6];
+        const cuts = [...lines.flatMap((c) => [-0.9, -0.8, -0.45, 0.45, 0.8, 0.9].map((d) => c + d)), ...centres.flatMap((c) => [-1.39, -0.85, -0.19, 0.19, 0.85, 1.39].map((d) => c + d)), ...piers.flatMap((c) => [c - 0.85, c + 0.85])];
+        return [columnsOf(length, cuts), (mid, row) => {
+                const inside = mid > lines[0] && mid < lines.at(-1), line = near(lines, mid), centre = near(centres, mid);
+                const pierWindow = near(piers, mid) < 0.85;
+                switch (row.kind) {
+                    case "granite": return "granite";
+                    case "shop": return inside && line > 0.8 ? "glass" : "granite";
+                    case "belt":
+                    case "band": return "band";
+                    case "glass": return (inside && centre > 0.19 && centre < 1.39) || pierWindow ? "glass" : "wall";
+                    case "rail": return row.pier && pierWindow ? "glass" : inside && line > 0.8 ? "band" : "wall";
+                    case "open": return (row.pier && pierWindow) || (inside && line > 0.8) ? "glass" : "wall";
+                    case "attic": return row.reach !== undefined && line < row.reach ? "shadow" : (inside && centre < 0.85) || pierWindow ? "glass" : "wall";
+                    case "pendant": return line < row.reach ? "shadow" : "wall";
+                    case "frieze": return "shadow";
+                    default: return "wall";
+                }
+            }];
+    };
+    // The alley's and the court's windows, which the drawing does not show: 1.6 m wide, spread
+    // evenly about 3.2 m apart, one to each floor from the third.
+    const spread = (length) => {
+        const count = Math.max(1, Math.round(length / 3.2)), centres = Array.from({ length: count }, (_, k) => length * (k + 0.5) / count);
+        return [columnsOf(length, centres.flatMap((c) => [c - 0.8, c + 0.8])), (mid, row) => ((row.kind === "glass" || row.kind === "attic" || row.pier === true) && near(centres, mid) < 0.8 ? "glass" : "wall")];
+    };
+    const facing = (x, z) => (run) => run.normal(0)[0] * x + run.normal(0)[1] * z > 0.9;
+    // The fronts to the cornice, the alley to the roof; the north wall, shared with the Lake
+    // View Building, stays plain.
+    skin(planOf(lot), facing(1, 0), rows[0].lo, h.cornice, 0, front(11), stone);
+    skin(planOf(lot), facing(0, 1), rows[0].lo, h.cornice, 1, front(9), stone);
+    skin(planOf(lot), facing(-1, 0), rows[0].lo, h.roof, 2, spread, stone);
+    skin(planOf(lower), () => true, h.court, h.inner, 3, spread, courtBrick);
+    skin(planOf(upper), () => true, h.inner, h.roof, 4, spread, courtBrick);
+    skin(planOf(opening), (run) => !has(lotEdges, run), h.court, h.roof, 5, spread, courtBrick);
+    const model = kit.finish({ height: h.top, outlines: [shell, cornice], opacity: 0.16 });
+    model.building.position.set(offset[0], 0, offset[1]);
+    model.building.userData["geography"] = record;
+    model.building.userData["geographicDetail"] = { levels: h, source: "docs/peoples-gas-reference.md" };
+    return model;
+}

package/site/models/railway-exchange-geographic.js

@@ -0,0 +1,176 @@
+import * as THREE from "../vendor/three-r186.js";
+import { createBuilder, polygonOf } from "./building-kit.js";
+import { chainSkin, chainsOf, orient, paintedSlab, planOf, turnsAt } from "./facade-grid.js";
+// The Railway Exchange Building, 224 South Michigan Avenue (Frederick P. Dinkelberg of D. H.
+// Burnham & Co., 1904): the geographic layout's model, on the mapped outline 124873931. The
+// original layout has no model of it; the drawing shows it at Michigan and Jackson, left of
+// the Borg-Warner Building.
+//
+// White terracotta fronts on Michigan and Jackson rise seventeen storeys in eleven bays of
+// paired windows, with a belt under the fourteenth floor. Round windows fill the frieze on
+// the seventeenth, under a projecting cornice and a hipped copper roof. The cornice is the
+// City's 235 ft and the roof's top the Skyscraper Center's 259 ft: each is the published
+// height nearest its drawn reading. The drawn cornice reads 73.7 m, so heights read on the
+// drawing are scaled to meet it; see docs/railway-exchange-reference.md. Units are meters;
+// +x is east, +z is south.
+const drawn = (height) => height * 71.6 / 73.7;
+export const railwayExchangeLevels = Object.freeze({
+    belt: drawn(54.6), // the belt under the fourteenth floor
+    frieze: drawn(67.4), // the frieze and its round windows
+    cornice: drawn(71.8), // the projecting cornice
+    eaves: 71.6, // the cornice's top and the roof's foot, the City's 235 ft
+    top: 78.9, // the roof's top, the Skyscraper Center's 259 ft
+});
+const h = railwayExchangeLevels;
+// The skins' colours: the window tones, and the terracotta, the belt and the plain walls,
+// which no window shares.
+export const railwayExchangePalette = Object.freeze({ glass: [0x2c2c2c, 0x303030, 0x343434, 0x383838], lit: 0x6e6e6e, dim: 0x3c3c3c, terracotta: 0x808080, band: 0x909090, plain: 0x626262 });
+const palette = railwayExchangePalette;
+const color = (hex) => new THREE.Color(hex);
+const glassTones = palette.glass.map(color);
+const litGlass = color(palette.lit), dimGlass = color(palette.dim);
+const terracotta = color(palette.terracotta), band = color(palette.band), plain = color(palette.plain);
+const core = color(0x262626), roofing = color(0x3c3c3c), copper = color(0x9c9c9c);
+function paneColor(row, bay, wall) {
+    const hash = (Math.imul(row + 71, 0x9e3779b1) ^ Math.imul(bay + 101, 0x85ebca77) ^ Math.imul(wall + 83, 0xc2b2ae3d)) >>> 0;
+    const value = hash % 101;
+    if (value < 4)
+        return litGlass;
+    if (value < 8)
+        return dimGlass;
+    return glassTones[value % glassTones.length];
+}
+const rows = [{ lo: 0.25, hi: drawn(0.6), kind: "base", floor: 1 }];
+const push = (hi, kind, floor, dy) => rows.push({ lo: rows.at(-1).hi, hi: drawn(hi), kind, floor, ...(dy === undefined ? {} : { dy }) });
+push(7.4, "shop", 1);
+const sill = (n) => (n <= 13 ? 51.53 - (13 - n) * 3.843 : 55.8 + (n - 14) * 3.85);
+for (let n = 2; n <= 16; n += 1) {
+    if (n === 14) {
+        push(54.6, "wall", 13);
+        push(55.4, "band", 13);
+    }
+    push(sill(n), "wall", n);
+    push(sill(n) + 2.6, "glass", n);
+}
+push(67.4, "wall", 16);
+push(67.8, "frieze", 17);
+for (const [lo, hi] of [[67.8, 68.3], [68.3, 68.8], [68.8, 69.3], [69.3, 69.8], [69.8, 70.3]])
+    push(hi, "oculus", 17, Math.abs((lo + hi) / 2 - 69.05));
+push(71.8, "frieze", 17);
+// Over the cornice's foot, the plain walls' last row to the eaves.
+rows.push({ lo: rows.at(-1).hi, hi: h.eaves, kind: "frieze", floor: 17 });
+export function createRailwayExchangeGeographicBuilding(record, projectPlan, offset) {
+    const kit = createBuilder(record.name, record.id);
+    const shell = kit.batch("Railway Exchange Building · shell", kit.material(0xffffff, { vertexColors: true }));
+    const wall = kit.batch("Railway Exchange Building · terracotta and windows", kit.material(0xffffff, { vertexColors: true }));
+    const cornice = kit.batch("Railway Exchange Building · cornice", kit.material(0x8a8a8a));
+    const lot = orient(polygonOf(projectPlan(record.footprint.coordinates)));
+    // The lot's south-east corner, on Michigan and Jackson, with the Jackson front running
+    // west and the Michigan front north to Symphony Center.
+    const corner = lot.reduce((best, p) => (p[0] + p[1] > best[0] + best[1] ? p : best));
+    const northEast = lot.reduce((best, p) => (p[0] - p[1] > best[0] - best[1] ? p : best));
+    const southWest = lot.reduce((best, p) => (p[1] - p[0] > best[1] - best[0] ? p : best));
+    const northWest = lot.reduce((best, p) => (-p[0] - p[1] > -best[0] - best[1] ? p : best));
+    const unit = (p) => { const d = Math.hypot(p[0] - corner[0], p[1] - corner[1]); return [(p[0] - corner[0]) / d, (p[1] - corner[1]) / d]; };
+    const west = unit(southWest), north = unit(northEast);
+    const at = (a, b) => [corner[0] + west[0] * a + north[0] * b, corner[1] + west[1] * a + north[1] * b];
+    const skew = west[0] * north[1] - west[1] * north[0];
+    const inLot = (p) => {
+        const [x, z] = [p[0] - corner[0], p[1] - corner[1]];
+        return [(x * north[1] - z * north[0]) / skew, (west[0] * z - west[1] * x) / skew];
+    };
+    const [jackson, michigan] = [inLot(southWest)[0], inLot(northEast)[1]];
+    const lift = ([x, z], y) => [x, y, z];
+    // The walls to the roof's foot.
+    planOf(lot).forEach((run) => {
+        const a = run.at(0), b = run.at(run.length), n = run.normal(0);
+        kit.quad(shell, [[a[0], 0, a[1]], [b[0], 0, b[1]], [b[0], h.eaves, b[1]], [a[0], h.eaves, a[1]]], [[n[0], 0, n[1]]], core);
+    });
+    paintedSlab(kit, shell, lot, 0, false, roofing);
+    paintedSlab(kit, shell, lot, h.eaves, true, roofing);
+    // The roof: a closed solid on the lot's four corners, 10 cm inside the lines between them,
+    // which the Jackson wall stands up to 6.7 cm inside, so that no face lies in the walls'.
+    // It rises from a foot 10 cm inside the block, up the eaves, to a flat top 10 m in from
+    // each side over the light well, as the photograph shows; the drawing simplifies it to a
+    // pyramid. Its slopes are in two triangles each, since the lot is out of square.
+    const northWestIn = inLot(northWest);
+    const ring = (inset) => orient([at(inset, inset), at(jackson - inset, inset), at(northWestIn[0] - inset, northWestIn[1] - inset), at(inset, michigan - inset)]);
+    const [eaves, crown] = [ring(0.1), ring(10)], foot = h.eaves - 0.1;
+    planOf(eaves).forEach((run) => {
+        const p = run.at(0), q = run.at(run.length), n = run.normal(0);
+        kit.quad(shell, [lift(p, foot), lift(q, foot), lift(q, h.eaves), lift(p, h.eaves)], [[n[0], 0, n[1]]], copper);
+    });
+    paintedSlab(kit, shell, eaves, foot, false, roofing);
+    paintedSlab(kit, shell, crown, h.top, true, copper);
+    // Each slope's outward normal, from its points and the roof's middle.
+    const middle = lift(at(jackson / 2, michigan / 2), (h.eaves + h.top) / 2);
+    const face = (points) => {
+        const [a, b, c] = points;
+        const n = new THREE.Vector3(b[0] - a[0], b[1] - a[1], b[2] - a[2]).cross(new THREE.Vector3(c[0] - a[0], c[1] - a[1], c[2] - a[2])).normalize();
+        const mid = [0, 1, 2].map((k) => (a[k] + b[k] + c[k]) / 3);
+        if (n.x * (mid[0] - middle[0]) + n.y * (mid[1] - middle[1]) + n.z * (mid[2] - middle[2]) < 0)
+            n.negate();
+        const normal = [n.x, n.y, n.z];
+        kit.triangle(shell, points, [normal, normal, normal], copper);
+    };
+    eaves.forEach((p, i) => {
+        const q = eaves[(i + 1) % 4], [r, s] = [crown[i], crown[(i + 1) % 4]];
+        face([lift(p, h.eaves), lift(q, h.eaves), lift(s, h.top)]);
+        face([lift(p, h.eaves), lift(s, h.top), lift(r, h.top)]);
+    });
+    // The cornice projects 90 cm along both fronts, from 12 cm inside the lines between their
+    // corners to 2 cm over the eaves, stopping 3 cm short of the north and alley walls.
+    kit.prism(cornice, planOf(orient([at(-0.9, michigan - 0.03), at(-0.9, -0.9), at(jackson - 0.03, -0.9), at(jackson - 0.03, 0.12), at(0.12, 0.12), at(0.12, michigan - 0.03)])), [h.cornice, h.eaves + 0.02]);
+    const paints = { wall: terracotta, band, plain };
+    const skin = (keep, span, seed, openings, sides) => {
+        const plan = planOf(lot), heights = [span[0].lo, ...span.map((row) => row.hi)];
+        chainsOf(plan).forEach((chain, index) => {
+            if (!chain.runs.every((run) => keep(plan[run])))
+                return;
+            const first = chain.runs[0], last = chain.runs.at(-1);
+            const s0 = turnsAt(plan, first)[0] > 0 ? 0.09 : 0.02, s1 = chain.length - (turnsAt(plan, last)[1] > 0 ? 0.09 : 0.02);
+            const [columns, cell] = openings(chain.length);
+            chainSkin(kit, wall, plan, chain, 0, chain.runs.length - 1, s0, s1, columns, heights, 0.02, 0.07, (bay, r) => {
+                const row = span[r], shows = cell((columns[bay - 1] + columns[bay]) / 2, row);
+                return shows === "glass" ? paneColor(row.floor, bay, seed * 8 + index) : paints[shows];
+            }, sides);
+        });
+    };
+    const near = (list, x) => Math.min(...list.map((c) => Math.abs(x - c)));
+    // A street front: eleven bays 4.4 m apart about its middle, each a pair of windows 1.44 m
+    // wide either side of a 47 cm mullion and a round window 2.6 m across over it, as drawn.
+    const front = (length) => {
+        const centres = Array.from({ length: 11 }, (_, k) => length / 2 + (k - 5) * 4.4);
+        const cuts = centres.flatMap((c) => [-1.675, -1.3, -0.9, -0.6, -0.235, 0.235, 0.6, 0.9, 1.3, 1.675].map((d) => c + d));
+        return [[0, ...cuts, length], (mid, row) => {
+                const dx = near(centres, mid);
+                if (row.kind === "band")
+                    return "band";
+                if (row.kind === "shop")
+                    return dx < 1.675 ? "glass" : "wall";
+                if (row.kind === "glass")
+                    return dx > 0.235 && dx < 1.675 ? "glass" : "wall";
+                if (row.kind === "oculus")
+                    return dx * dx + row.dy * row.dy <= 1.3 * 1.3 ? "glass" : "wall";
+                return "wall";
+            }];
+    };
+    // The alley's windows, which the drawing does not show: 1.6 m wide, spread evenly about
+    // 3.2 m apart, one to each floor above the ground floor, the seventeenth's as tall as the
+    // round windows' band.
+    const alley = (length) => {
+        const count = Math.max(1, Math.round(length / 3.2)), centres = Array.from({ length: count }, (_, k) => length * (k + 0.5) / count);
+        return [[0, ...centres.flatMap((c) => [c - 0.8, c + 0.8]), length], (mid, row) => ((row.kind === "glass" || row.kind === "oculus") && near(centres, mid) < 0.8 ? "glass" : "plain")];
+    };
+    const facing = (x, z) => (run) => run.normal(0)[0] * x + run.normal(0)[1] * z > 0.9;
+    // Michigan and Jackson carry the fronts; the alley has windows; the north wall, shared
+    // with Symphony Center, stays plain.
+    skin((run) => facing(1, 0)(run) || facing(0, 1)(run), rows.slice(0, -1), 0, front, terracotta);
+    skin(facing(-1, 0), rows, 1, alley, plain);
+    skin(facing(0, -1), rows, 2, (length) => [[0, length], () => "plain"], plain);
+    const model = kit.finish({ height: h.top, outlines: [shell, cornice], opacity: 0.16 });
+    model.building.position.set(offset[0], 0, offset[1]);
+    model.building.userData["geography"] = record;
+    model.building.userData["geographicDetail"] = { levels: h, source: "docs/railway-exchange-reference.md" };
+    return model;
+}

package/site/models/river-plaza-geographic.js

@@ -0,0 +1,104 @@
+import * as THREE from "../vendor/three-r186.js";
+import { createBuilder, polygonOf } from "./building-kit.js";
+import { chainSkin, chainsOf, orient, paintedSlab, planOf, turnsAt } from "./facade-grid.js";
+// River Plaza, 405 North Wabash Avenue (Ezra Gordon–Jack M. Levin and Associates, 1977): the
+// geographic layout's model, on the mapped outline 285867424 and its parts. The original
+// layout has no model of it. From the photograph's camera its top stands behind Two Illinois
+// Center, in the gap between Two Prudential Plaza and Aon Center that the drawing's
+// `office-west-of-aon` group paints, the only mapped building on that sightline tall enough
+// to reach the drawn top.
+//
+// A white concrete slab of 56 storeys with notched corners: a grid of exposed frame and
+// punched windows over a low podium on the river side, to a flat roof at OpenStreetMap's 156 m
+// under a box to the published 159.7 m. See docs/river-plaza-two-illinois-center-reference.md. Units are
+// meters; +x is east, +z is south.
+export const riverPlazaLevels = Object.freeze({
+    podium: 8, // the podium's roof, OpenStreetMap's
+    floors: 56,
+    roof: 156, // the slab's roof, OpenStreetMap's
+    box: 159.7, // the rooftop box's top, the published height and tip, the Skyscraper Center's 524 ft
+    bay: 1.6, // the frame's bays, an estimate from photographs
+});
+const h = riverPlazaLevels;
+const pitch = h.roof / h.floors;
+// The skins' colours: the window tones, and the concrete, which no window shares.
+export const riverPlazaPalette = Object.freeze({ glass: [0x2c2c2c, 0x303030, 0x343434, 0x282828], lit: 0x8a8a8a, dim: 0x505050, concrete: 0x9a9a9a });
+const palette = riverPlazaPalette;
+const color = (hex) => new THREE.Color(hex);
+const glassTones = palette.glass.map(color);
+const litGlass = color(palette.lit), dimGlass = color(palette.dim), concrete = color(palette.concrete);
+const core = color(0x6a6a6a), roofing = color(0x8a8a8a);
+function paneColor(row, bay, wall) {
+    const hash = (Math.imul(row + 19, 0x9e3779b1) ^ Math.imul(bay + 37, 0x85ebca77) ^ Math.imul(wall + 29, 0xc2b2ae3d)) >>> 0;
+    const value = hash % 101;
+    if (value < 12)
+        return litGlass;
+    if (value < 18)
+        return dimGlass;
+    return glassTones[value % glassTones.length];
+}
+export function createRiverPlazaGeographicBuilding(record, projectPlan, offset) {
+    const kit = createBuilder(record.name, record.id);
+    const shell = kit.batch("River Plaza · shell", kit.material(0xffffff, { vertexColors: true }));
+    const wall = kit.batch("River Plaza · concrete and windows", kit.material(0xffffff, { vertexColors: true }));
+    const box = kit.batch("River Plaza · rooftop box", kit.material(0x9a9a9a));
+    const [tower, podium, top] = record.parts.map((part) => orient(polygonOf(projectPlan(part.coordinates))));
+    // The slab and the podium, each a closed shell on its mapped part.
+    for (const [plan, height] of [[tower, h.roof], [podium, h.podium]]) {
+        planOf(plan).forEach((run) => {
+            const a = run.at(0), b = run.at(run.length), n = run.normal(0);
+            kit.quad(shell, [[a[0], 0, a[1]], [b[0], 0, b[1]], [b[0], height, b[1]], [a[0], height, a[1]]], [[n[0], 0, n[1]]], core);
+        });
+        paintedSlab(kit, shell, plan, 0, false, roofing);
+        paintedSlab(kit, shell, plan, height, true, roofing);
+    }
+    // The box on the roof, on its mapped part.
+    kit.prism(box, planOf(top), [h.roof, h.box]);
+    // The slab's skin, one box to a run of a chain, held 2 cm clear of the chain's ends or 9 cm
+    // where the outline turns in: on each floor, a window 1.1 m wide and 1.5 m tall in each
+    // 1.6 m bay of the frame, from the chain's middle out. A run the podium stands against, its
+    // two ends on the podium's outline, starts over the podium's roof; a chain whose runs differ
+    // is skinned in parts, which meet at their joint.
+    const plan = planOf(tower);
+    const edges = planOf(podium);
+    const onEdge = (p) => edges.some((edge) => {
+        const a = edge.at(0), b = edge.at(edge.length), t = Math.max(0, Math.min(1, ((p[0] - a[0]) * (b[0] - a[0]) + (p[1] - a[1]) * (b[1] - a[1])) / (edge.length * edge.length)));
+        return Math.hypot(p[0] - a[0] - t * (b[0] - a[0]), p[1] - a[1] - t * (b[1] - a[1])) < 0.05;
+    });
+    const covered = (run) => onEdge(run.at(0)) && onEdge(run.at(run.length));
+    chainsOf(plan).forEach((chain, index) => {
+        const first = chain.runs[0], last = chain.runs.at(-1);
+        const s0 = turnsAt(plan, first)[0] > 0 ? 0.09 : 0.02, s1 = chain.length - (turnsAt(plan, last)[1] > 0 ? 0.09 : 0.02);
+        const count = Math.floor(chain.length / 2 / h.bay);
+        const centres = Array.from({ length: 2 * count }, (_, k) => chain.length / 2 + (k - count + 0.5) * h.bay);
+        // The chain's parts, each a span of runs the podium covers alike.
+        const parts = [];
+        chain.runs.forEach((run, k) => { const part = parts.at(-1); if (part && covered(plan[run]) === covered(plan[chain.runs[part[0]]]))
+            part[1] = k;
+        else
+            parts.push([k, k]); });
+        for (const [k0, k1] of parts) {
+            const base = covered(plan[chain.runs[k0]]) ? h.podium : 0.25;
+            const from = k0 === 0 ? s0 : chain.starts[k0], to = k1 === chain.runs.length - 1 ? s1 : chain.starts[k1] + plan[chain.runs[k1]].length;
+            const heights = [base];
+            for (let n = Math.ceil(base / pitch); n < h.floors; n += 1) {
+                const sill = n * pitch + 0.75;
+                if (sill > base + 0.2)
+                    heights.push(sill, sill + 1.5);
+            }
+            heights.push(h.roof);
+            const cuts = centres.flatMap((c) => [c - 0.55, c + 0.55]).filter((s) => s > from + 0.01 && s < to - 0.01);
+            const columns = [from, ...cuts, to];
+            chainSkin(kit, wall, plan, chain, k0, k1, from, to, columns, heights, 0.02, 0.07, (bay, r) => {
+                const middle = (columns[bay - 1] + columns[bay]) / 2;
+                const glazed = r % 2 === 1 && centres.some((c) => Math.abs(middle - c) < 0.55);
+                return glazed ? paneColor(r, bay, index) : concrete;
+            }, concrete);
+        }
+    });
+    const model = kit.finish({ height: h.box, outlines: [shell, box], opacity: 0.16 });
+    model.building.position.set(offset[0], 0, offset[1]);
+    model.building.userData["geography"] = record;
+    model.building.userData["geographicDetail"] = { levels: h, source: "docs/river-plaza-two-illinois-center-reference.md" };
+    return model;
+}

package/site/models/sheraton-grand-geographic.js

@@ -0,0 +1,112 @@
+import * as THREE from "../vendor/three-r186.js";
+import { createBuilder, polygonOf } from "./building-kit.js";
+import { chainSkin, chainsOf, orient, paintedSlab, planOf, turnsAt } from "./facade-grid.js";
+// The Sheraton Grand Chicago Riverwalk, 301 East North Water Street (Solomon Cordwell Buenz,
+// 1992): the geographic layout's model, on the mapped tower 592122464 and its corner part
+// 1269924307. The original layout has no model of it. The drawing's `buckingham-east` group,
+// right of The Buckingham, is its corner: a lit crown over a tower of windows.
+//
+// A cream precast tower on an L, its arms ending in round towers, of punched windows at the
+// published 2.67 m floor-to-floor. The corner's round tower rises two floors over the arms,
+// and each round end carries an open drum of maroon fins, floodlit at night. Heights stand on
+// the Skyscraper Center's datum, its top floor at 97 m and the corner drum's top at 112.3 m;
+// its 112.8 m tip, 50 cm higher, is not modelled. See docs/sheraton-grand-reference.md.
+// Units are meters; +x is east, +z is south.
+export const sheratonLevels = Object.freeze({
+    pitch: 2.67, // Emporis's floor-to-floor, 8.75 ft
+    topFloor: 97, // the Skyscraper Center's occupied height, the corner's top floor
+    corner: 100.1, // the corner's roof, a floor-to-roof of 3.1 m over it as Emporis gives it
+    arms: 100.1 - 2 * 2.67, // the arms' roof, two floors lower, at the mapped arms' 32 levels
+    drum: 12.2, // the drums' height, Emporis's architectural height over its main roof
+    top: 112.3, // the corner drum's top, the Skyscraper Center's architectural height
+});
+const h = sheratonLevels;
+// The round ends the drums stand on, circles fitted to the mapped parts' arcs within 11 cm:
+// the corner, part 1269924307, and the east and north arms' ends, parts 1269924306 and
+// 1269924308. Centres are east and north metres from Crain's centre.
+export const sheratonDrums = Object.freeze([
+    { centre: [407.44, 465.95], radius: 7.97, base: h.corner },
+    { centre: [439.52, 462.06], radius: 7.37, base: h.arms },
+    { centre: [409.75, 498.32], radius: 7.39, base: h.arms },
+]);
+// The skins' colours: the window tones, the precast, and the drums' cream and maroon fins,
+// which no window shares.
+export const sheratonPalette = Object.freeze({ glass: [0x2a2a2a, 0x2e2e2e, 0x323232, 0x262626], lit: 0x8a8a8a, dim: 0x505050, precast: 0x848484, drum: 0xb4b4b4, fin: 0x5a5a5a });
+const palette = sheratonPalette;
+const color = (hex) => new THREE.Color(hex);
+const glassTones = palette.glass.map(color);
+const litGlass = color(palette.lit), dimGlass = color(palette.dim), precast = color(palette.precast), drumFace = color(palette.drum), fin = color(palette.fin);
+const core = color(0x585858), roofing = color(0x686868);
+function paneColor(row, bay, wall) {
+    const hash = (Math.imul(row + 17, 0x9e3779b1) ^ Math.imul(bay + 89, 0x85ebca77) ^ Math.imul(wall + 37, 0xc2b2ae3d)) >>> 0;
+    const value = hash % 101;
+    if (value < 14)
+        return litGlass;
+    if (value < 20)
+        return dimGlass;
+    return glassTones[value % glassTones.length];
+}
+// A wall's rows from `base` to `top`: a window 1.5 m tall 80 cm over each floor line, the
+// floors counted down from the top floor at the published pitch, from the last floor line
+// under the base, whose window may clear it.
+function rowsFor(base, top) {
+    const heights = [base];
+    for (let level = h.topFloor - Math.ceil((h.topFloor - base) / h.pitch) * h.pitch; level < top; level += h.pitch) {
+        if (level + 0.8 > base + 0.2 && level + 2.3 < top - 0.2)
+            heights.push(level + 0.8, level + 2.3);
+    }
+    heights.push(top);
+    return heights;
+}
+export function createSheratonGrandGeographicBuilding(record, projectPlan, offset) {
+    const kit = createBuilder(record.name, record.id);
+    const shell = kit.batch("Sheraton Grand · shell", kit.material(0xffffff, { vertexColors: true }));
+    const wall = kit.batch("Sheraton Grand · precast and windows", kit.material(0xffffff, { vertexColors: true }));
+    const drums = kit.batch("Sheraton Grand · drums", kit.material(0xffffff, { vertexColors: true }));
+    const tower = orient(polygonOf(projectPlan(record.parts[0].coordinates)));
+    const circle = (centre, radius, sides = 24) => orient(Array.from({ length: sides }, (_, k) => {
+        const angle = (k / sides) * Math.PI * 2;
+        return [centre[0] + radius * Math.cos(angle), -centre[1] + radius * Math.sin(angle)];
+    }));
+    const cornerPlan = orient(polygonOf(projectPlan(record.parts[1].coordinates)));
+    // A closed solid of walls and slabs on an outline, painted by its runs.
+    const solid = (target, outline, lo, hi, paint) => {
+        planOf(outline).forEach((run, k) => {
+            const a = run.at(0), b = run.at(run.length), n = run.normal(0);
+            kit.quad(target, [[a[0], lo, a[1]], [b[0], lo, b[1]], [b[0], hi, b[1]], [a[0], hi, a[1]]], [[n[0], 0, n[1]]], paint(k));
+        });
+        paintedSlab(kit, target, outline, lo, false, roofing);
+        paintedSlab(kit, target, outline, hi, true, roofing);
+    };
+    // The tower to the arms' roof, and the corner's round tower, on its mapped part, two floors
+    // over it.
+    solid(shell, tower, 0, h.arms, () => core);
+    solid(shell, cornerPlan, h.arms, h.corner, () => core);
+    // Each drum: cream, a maroon fin every other facet, on its round end.
+    for (const { centre, radius, base } of sheratonDrums)
+        solid(drums, circle(centre, radius), base, base + h.drum, (k) => (k % 2 ? fin : drumFace));
+    // The skins, one box to a chain of runs turning less than 30°, so the round ends carry one:
+    // a window 1.4 m wide in each 2.4 m bay, set out from the chain's middle, on every floor.
+    const skin = (outline, base, top, seed) => {
+        const plan = planOf(outline), heights = rowsFor(base, top);
+        chainsOf(plan, 30 * Math.PI / 180).forEach((chain, index) => {
+            const first = chain.runs[0], last = chain.runs.at(-1);
+            const s0 = turnsAt(plan, first)[0] > 0 ? 0.09 : 0.02, s1 = chain.length - (turnsAt(plan, last)[1] > 0 ? 0.09 : 0.02);
+            const count = Math.floor((chain.length - 1.4) / 2 / 2.4);
+            const centres = Array.from({ length: 2 * count + 1 }, (_, k) => chain.length / 2 + (k - count) * 2.4);
+            const cuts = centres.flatMap((c) => [c - 0.7, c + 0.7]).filter((s) => s > s0 + 0.01 && s < s1 - 0.01);
+            const columns = [s0, ...cuts, s1];
+            chainSkin(kit, wall, plan, chain, 0, chain.runs.length - 1, s0, s1, columns, heights, 0.02, 0.07, (bay, r) => {
+                const middle = (columns[bay - 1] + columns[bay]) / 2;
+                return r % 2 === 1 && centres.some((c) => Math.abs(middle - c) < 0.7) ? paneColor(r, bay, seed * 16 + index) : precast;
+            }, precast);
+        });
+    };
+    skin(tower, 0.25, h.arms, 0);
+    skin(cornerPlan, h.arms, h.corner, 1);
+    const model = kit.finish({ height: h.top, outlines: [shell, drums], opacity: 0.16 });
+    model.building.position.set(offset[0], 0, offset[1]);
+    model.building.userData["geography"] = record;
+    model.building.userData["geographicDetail"] = { levels: h, source: "docs/sheraton-grand-reference.md" };
+    return model;
+}