@a2f0/skyline 0.0.0-stage → 0.1.2

package/site/models/university-club-geographic.js

@@ -0,0 +1,217 @@
+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 University Club of Chicago, 76 East Monroe Street (Holabird & Roche, 1909): the
+// geographic layout's model, on the mapped outline 126982632. The original layout has no
+// model of it; the drawing shows it left of Willoughby Tower, behind the Monroe Building.
+//
+// A Gothic club on the corner of Michigan and Monroe. Its walls rise to a crenellated
+// parapet, with the tall arched windows of its top hall in four bays to each street front.
+// Behind the parapet an upper floor carries a steep roof whose gable faces Michigan, with
+// pinnacles at its foot and a cross on its peak at OpenStreetMap's 67.7 m, and a small
+// gable with its own cross on the Monroe side. Heights are measured on the drawing down from that peak; see
+// docs/university-club-reference.md. Units are meters; +x is east, +z is south.
+export const universityClubLevels = Object.freeze({
+    band: 46.2, // the band under the parapet
+    parapet: 48.95, // the parapet wall
+    walls: 51, // the parapet's top, between the merlons
+    merlons: 51.75,
+    eaves: 56.4, // the upper floor's eaves
+    pinnacles: 62.5,
+    ridge: 67.7, // the gable's peak, OpenStreetMap's height
+    cross: 69.75,
+    dormer: 59.3, // the Monroe side's small gable
+    dormerCross: 60.4,
+    back: 3.3, // the upper floor's setback from Michigan
+    sides: 1.3, // and from Monroe and the north wall
+});
+const h = universityClubLevels;
+// The skins' colours: the window tones, and the stone and its band, which no window shares.
+export const universityClubPalette = Object.freeze({ glass: [0x4a4a4a, 0x4e4e4e, 0x525252, 0x565656], lit: 0x8c8c8c, dim: 0x444444, stone: 0xa4a4a4, band: 0xb4b4b4 });
+const palette = universityClubPalette;
+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), band = color(palette.band), core = color(0x2e2e2e), roofing = color(0x343434), flat = color(0x4a4a4a);
+function paneColor(row, bay, wall) {
+    const hash = (Math.imul(row + 43, 0x9e3779b1) ^ Math.imul(bay + 71, 0x85ebca77) ^ Math.imul(wall + 59, 0xc2b2ae3d)) >>> 0;
+    const value = hash % 101;
+    if (value < 4)
+        return litGlass;
+    if (value < 8)
+        return dimGlass;
+    return glassTones[value % glassTones.length];
+}
+const wallRows = [
+    { lo: 0.25, hi: 1, kind: "wall", floor: 1 },
+    { lo: 1, hi: 4.4, kind: "full", floor: 1 },
+];
+for (let n = 2; n <= 9; n += 1) {
+    const base = 5 + (n - 2) * 3.525;
+    wallRows.push({ lo: wallRows.at(-1).hi, hi: base + 0.8, kind: "wall", floor: n });
+    wallRows.push({ lo: base + 0.8, hi: base + 2.9, kind: "pair", floor: n });
+}
+wallRows.push({ lo: wallRows.at(-1).hi, hi: 33.65, kind: "wall", floor: 10 });
+wallRows.push({ lo: 33.65, hi: 36.7, kind: "full", floor: 10 });
+wallRows.push({ lo: 36.7, hi: 37.3, kind: "wall", floor: 11 });
+wallRows.push({ lo: 37.3, hi: 43.1, kind: "full", floor: 11 });
+wallRows.push({ lo: 43.1, hi: 43.9, kind: "head", floor: 11 });
+wallRows.push({ lo: 43.9, hi: h.band, kind: "wall", floor: 11 });
+wallRows.push({ lo: h.band, hi: h.parapet, kind: "band", floor: 12 });
+wallRows.push({ lo: h.parapet, hi: h.walls, kind: "wall", floor: 12 });
+// The upper floor's windows under its eaves, and the Monroe gable's.
+const upperRows = [
+    { lo: h.walls, hi: 52, kind: "wall", floor: 13 },
+    { lo: 52, hi: 55.9, kind: "full", floor: 13 },
+    { lo: 55.9, hi: h.eaves, kind: "wall", floor: 13 },
+];
+const dormerRows = [
+    { lo: h.walls, hi: 53.7, kind: "wall", floor: 13 },
+    { lo: 53.7, hi: 55.9, kind: "full", floor: 13 },
+    { lo: 55.9, hi: h.eaves, kind: "wall", floor: 13 },
+];
+export function createUniversityClubGeographicBuilding(record, projectPlan, offset) {
+    const kit = createBuilder(record.name, record.id);
+    const shell = kit.batch("University Club · shell", kit.material(0xffffff, { vertexColors: true }));
+    const wall = kit.batch("University Club · stone and windows", kit.material(0xffffff, { vertexColors: true }));
+    const ornament = kit.batch("University Club · merlons and pinnacles", kit.material(0xa0a0a0));
+    const lot = orient(polygonOf(projectPlan(record.footprint.coordinates)));
+    // The lot's south-east corner, with its Monroe front running west and its Michigan front
+    // north.
+    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 neighbours = [lot[(lot.indexOf(corner) + 1) % lot.length], lot[(lot.indexOf(corner) + lot.length - 1) % lot.length]];
+    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(neighbours[0][0] < neighbours[1][0] ? neighbours[0] : neighbours[1]), 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 Monroe and Michigan, whose fronts 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 [length, depth] = [Math.max(...lot.map((p) => inLot(p)[0])), inLot(northEast)[1]];
+    const rect = (a0, a1, b0, b1) => orient([at(a0, b0), at(a1, b0), at(a1, b1), at(a0, b1)]);
+    const lift = ([x, z], y) => [x, y, z];
+    // The main block, to the parapet's top.
+    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.walls, b[1]], [a[0], h.walls, a[1]]], [[n[0], 0, n[1]]], core);
+    });
+    paintedSlab(kit, shell, lot, 0, false, flat);
+    paintedSlab(kit, shell, lot, h.walls, true, flat);
+    // A closed block whose walls rise from `base` to `eaves` under a gable roof to `ridge`,
+    // its ridge running along the lot's a axis (west from Michigan) or its b axis (north
+    // from Monroe); the gables are stone and the slopes roofing.
+    const gabled = (a0, a1, b0, b1, base, eaves, ridge, along) => {
+        const corners = rect(a0, a1, b0, b1);
+        planOf(corners).forEach((run) => {
+            const p = run.at(0), q = run.at(run.length), n = run.normal(0);
+            kit.quad(shell, [lift(p, base), lift(q, base), lift(q, eaves), lift(p, eaves)], [[n[0], 0, n[1]]], core);
+        });
+        paintedSlab(kit, shell, corners, base, false, flat);
+        const middle = along === "a" ? (b0 + b1) / 2 : (a0 + a1) / 2;
+        const ridgeAt = (s) => lift(along === "a" ? at(s, middle) : at(middle, s), ridge);
+        const [s0, s1] = along === "a" ? [a0, a1] : [b0, b1];
+        const eave = (s, t) => lift(along === "a" ? at(s, t) : at(t, s), eaves);
+        const [t0, t1] = along === "a" ? [b0, b1] : [a0, a1];
+        const centre = lift(at((a0 + a1) / 2, (b0 + b1) / 2), (eaves + ridge) / 2);
+        // Each face's outward normal, from its points and the block's middle.
+        const face = (points, paint) => {
+            const [a, b, c] = points;
+            const u = new THREE.Vector3(b[0] - a[0], b[1] - a[1], b[2] - a[2]), v = new THREE.Vector3(c[0] - a[0], c[1] - a[1], c[2] - a[2]);
+            const n = u.cross(v).normalize(), mid = points.reduce((sum, p) => [sum[0] + p[0] / points.length, sum[1] + p[1] / points.length, sum[2] + p[2] / points.length], [0, 0, 0]);
+            if (n.x * (mid[0] - centre[0]) + n.y * (mid[1] - centre[1]) + n.z * (mid[2] - centre[2]) < 0)
+                n.negate();
+            const normal = [n.x, n.y, n.z];
+            if (points.length === 3)
+                kit.triangle(shell, points, [normal, normal, normal], paint);
+            else
+                kit.quad(shell, points, [normal], paint);
+        };
+        face([eave(s0, t0), eave(s1, t0), ridgeAt(s1), ridgeAt(s0)], roofing);
+        face([eave(s1, t1), eave(s0, t1), ridgeAt(s0), ridgeAt(s1)], roofing);
+        face([eave(s0, t1), eave(s0, t0), ridgeAt(s0)], stone);
+        face([eave(s1, t0), eave(s1, t1), ridgeAt(s1)], stone);
+        return corners;
+    };
+    const upper = gabled(h.back, length - h.sides, h.sides, depth - h.sides, h.walls, h.eaves, h.ridge, "a");
+    // The Monroe side's small gable stands 15 cm proud of the upper floor, clear of its skin,
+    // its foot sunk 10 cm into the main block.
+    const dormer = gabled(13.7, 18.7, h.sides - 0.15, 5, h.walls - 0.1, h.eaves, h.dormer, "b");
+    // A wall's skin, one box to a chain the `keep` test accepts, held 2 cm clear of its ends
+    // or 9 cm where the outline turns in. `openings` lays a wall's columns out across it and
+    // says how much of a window each crosses: 0 none, 1 a full window's edge, 2 a pair's
+    // window, 3 a pair's window and the head, 4 the head between a pair. Floors below
+    // `lowest` stay stone.
+    const glazing = { wall: [], band: [], pair: [2, 3], full: [1, 2, 3, 4], head: [3, 4] };
+    const skin = (corners, rows, seed, keep, openings, lowest = 1) => {
+        const plan = planOf(corners), heights = [rows[0].lo, ...rows.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, crossing] = openings(chain.length, plan[first].at(0), plan[last].at(plan[last].length));
+            chainSkin(kit, wall, plan, chain, 0, chain.runs.length - 1, s0, s1, columns, heights, 0.02, 0.07, (bay, r) => {
+                const row = rows[r];
+                if (row.kind === "band")
+                    return band;
+                return row.floor >= lowest && glazing[row.kind].includes(crossing(bay)) ? paneColor(row.floor, bay, seed * 8 + index) : stone;
+            }, stone);
+        });
+    };
+    // A position along a wall from its start, given in lot coordinates across it.
+    const along = (length, start, end, target) => {
+        const [p, q] = [inLot(start), inLot(end)], axis = Math.abs(q[0] - p[0]) > Math.abs(q[1] - p[1]) ? 0 : 1;
+        return length * (target - p[axis]) / (q[axis] - p[axis]);
+    };
+    // The street fronts' bays, 3.5 m wide and 4.55 m apart from 3.1 m along each front, as the
+    // drawing has them; each splits into a full window's edges, a pair's two windows, and the
+    // head over their mullion.
+    const bays = (length, start, end) => {
+        const centres = Array.from({ length: 12 }, (_, k) => along(length, start, end, 3.1 + 4.55 * k)).filter((c) => c - 1.75 > 0.1 && c + 1.75 < length - 0.1).sort((p, q) => p - q);
+        const steps = [-1.75, -1.5, -0.875, -0.3, 0.3, 0.875, 1.5, 1.75];
+        const columns = [0, ...centres.flatMap((c) => steps.map((s) => c + s)), length];
+        // Bays count from one: a pier, then 1, 2, 3, 4, 3, 2, 1 across each window.
+        return [columns, (bay) => (bay > 8 * centres.length || (bay - 1) % 8 === 0 ? 0 : [0, 1, 2, 3, 4, 3, 2, 1][(bay - 1) % 8])];
+    };
+    // Windows `width` wide every `pitch` metres, centred on each wall, glazed as a pair's.
+    const spaced = (width, pitch) => (length) => {
+        const count = Math.max(1, Math.round(length / pitch)), centres = Array.from({ length: count }, (_, k) => length * (k + 0.5) / count);
+        const columns = [0, ...centres.flatMap((c) => [c - width / 2, c + width / 2]), length];
+        return [columns, (bay) => (bay % 2 === 0 && bay <= 2 * count ? 2 : 0)];
+    };
+    const facing = (x, z) => (run) => run.normal(0)[0] * x + run.normal(0)[1] * z > 0.9;
+    const street = (run) => facing(1, 0)(run) || facing(0, 1)(run), party = facing(0, -1);
+    skin(lot, wallRows, 0, street, bays);
+    // The west wall's windows run from the ground; the north wall is shared with the
+    // six-storey 30 South Michigan and stays blank below its eighth floor.
+    skin(lot, wallRows, 1, (run) => !street(run) && !party(run), spaced(2.4, 4.55));
+    skin(lot, wallRows, 4, party, spaced(2.4, 4.55), 8);
+    // The upper floor's windows, 3.6 m wide about 5.5 m apart, and the small gable's one.
+    skin(upper, upperRows, 2, () => true, spaced(3.6, 5.5));
+    skin(dormer, dormerRows, 3, facing(0, 1), spaced(2.4, 5));
+    // Merlons along the street fronts' parapet, 1.2 m wide every 2.1 m, 3 cm inside the walls;
+    // pinnacles at the gable's foot, rising from 10 cm inside the main block; and a cross on
+    // each gable's peak, its foot inside the roof: the Michigan gable's facing Michigan, the
+    // small gable's facing Monroe.
+    const block = (a0, a1, b0, b1, lo, hi) => kit.prism(ornament, planOf(rect(a0, a1, b0, b1)), [lo, hi]);
+    for (let s = 1.05; s + 0.6 < depth; s += 2.1)
+        block(0.03, 0.53, s - 0.6, s + 0.6, h.walls, h.merlons);
+    for (let s = 1.05; s + 0.6 < length; s += 2.1)
+        block(Math.max(s - 0.6, 0.56), s + 0.6, 0.03, 0.53, h.walls, h.merlons);
+    for (const b of [h.sides, depth - h.sides])
+        block(h.back - 0.6, h.back + 0.6, b - 0.6, b + 0.6, h.walls - 0.1, h.pinnacles);
+    const peak = depth / 2;
+    block(h.back + 0.15, h.back + 0.45, peak - 0.15, peak + 0.15, h.ridge - 0.7, h.cross);
+    block(h.back + 0.2, h.back + 0.4, peak - 0.6, peak + 0.6, 68.9, 69.25);
+    block(16.075, 16.325, h.sides + 0.2, h.sides + 0.45, h.dormer - 0.5, h.dormerCross);
+    block(15.7, 16.7, h.sides + 0.25, h.sides + 0.4, 59.65, 60);
+    const model = kit.finish({ height: h.cross, outlines: [shell, ornament], 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/university-club-reference.md" };
+    return model;
+}

package/site/models/willoughby-tower-geographic.js

@@ -0,0 +1,195 @@
+import * as THREE from "../vendor/three-r186.js";
+import { createBuilder, inside, polygonOf } from "./building-kit.js";
+import { chainSkin, chainsOf, orient, paintedSlab, planOf, turnsAt } from "./facade-grid.js";
+// Willoughby Tower, 8 South Michigan Avenue (Samuel N. Crowen, 1929): the geographic
+// layout's model, on the mapped outline 124873939. The original layout has no model of it;
+// the drawing shows it left of Six North Michigan, outside the excerpt it is fitted to.
+//
+// A limestone Gothic tower on an L-shaped lot at Michigan and Madison. The base fills the
+// lot to the setback over the 23rd floor, under a parapet of pinnacles. A shaft rises at
+// the lot's south-east corner, 17.4 m along its south wall and 11 m along Michigan, with a
+// shoulder four floors high west of it, to a crown of arched windows under pinnacles and
+// gables, its tallest pinnacles at the published 133.5 m. Heights are measured on the
+// drawing down from that top; see docs/willoughby-tower-reference.md. Units are meters; +x
+// is east, +z is south.
+export const willoughbyLevels = Object.freeze({
+    setback: 80.5, // the base's parapet, over the 23rd floor
+    shoulder: 92, // the shoulder's roof, west of the shaft
+    shaft: 123.5, // the shaft's top, under the crown
+    crown: 131.7, // the crown's parapet
+    gable: 132.2, // the gables over the crown's long faces
+    sidePinnacles: 132.5, // the pinnacles flanking the crown's short faces
+    top: 133.5, // the crown's central pinnacles, the published architectural height
+    shaftWidth: 17.4, // along the south wall from the south-east corner
+    shaftDepth: 11, // along Michigan from the south-east corner
+    crownEnds: 2.1, // the crown's inset from the shaft's Michigan and west faces
+    crownSides: 1.2, // and from its south and north faces
+    crownWindows: 10.2, // the long faces' windows, centred this far west of Michigan
+});
+const h = willoughbyLevels;
+// Each floor's level: a two-storey granite base, then 3.35 m floors to the crown's.
+const floor = (n) => (n < 2 ? 0 : 6 + (n - 2) * 3.35);
+const color = (hex) => new THREE.Color(hex);
+const glassTones = [0x2a2a2a, 0x2e2e2e, 0x323232, 0x363636].map(color);
+const litGlass = color(0x6e6e6e), dimGlass = color(0x444444);
+const stone = color(0x585858), granite = color(0x4a4a4a), strip = color(0x2d2d2d), core = color(0x262626), roofing = color(0x3e3e3e);
+function paneColor(row, bay, wall) {
+    const hash = (Math.imul(row + 29, 0x9e3779b1) ^ Math.imul(bay + 53, 0x85ebca77) ^ Math.imul(wall + 41, 0xc2b2ae3d)) >>> 0;
+    const value = hash % 101;
+    if (value < 4)
+        return litGlass;
+    if (value < 8)
+        return dimGlass;
+    return glassTones[value % glassTones.length];
+}
+const allRows = [{ lo: 0.25, hi: floor(3) - 0.3, kind: "granite", floor: 1 }];
+for (let n = 3; n <= 36; n += 1) {
+    allRows.push({ lo: floor(n) - 0.3, hi: floor(n) + 0.9, kind: "stone", floor: n });
+    allRows.push({ lo: floor(n) + 0.9, hi: floor(n + 1) - 0.3, kind: "glass", floor: n });
+}
+allRows.push({ lo: floor(37) - 0.3, hi: 124.7, kind: "stone", floor: 37 });
+allRows.push({ lo: 124.7, hi: 127.1, kind: "tall", floor: 37 });
+allRows.push({ lo: 127.1, hi: 128.6, kind: "arch", floor: 37 });
+allRows.push({ lo: 128.6, hi: 129.1, kind: "head", floor: 37 });
+allRows.push({ lo: 129.1, hi: h.crown, kind: "stone", floor: 38 });
+const rowsBetween = (lo, hi) => allRows
+    .map((row) => ({ ...row, lo: Math.max(row.lo, lo), hi: Math.min(row.hi, hi) }))
+    .filter((row) => row.hi - row.lo > 0.05);
+export function createWilloughbyTowerGeographicBuilding(record, projectPlan, offset) {
+    const kit = createBuilder(record.name, record.id);
+    const shell = kit.batch("Willoughby Tower · shell", kit.material(0xffffff, { vertexColors: true }));
+    const wall = kit.batch("Willoughby Tower · stone and windows", kit.material(0xffffff, { vertexColors: true }));
+    const pinnacles = kit.batch("Willoughby Tower · pinnacles", kit.material(0x626262));
+    const lot = orient(polygonOf(projectPlan(record.footprint.coordinates)));
+    // The lot's south-east corner, and its south wall and Michigan front running from it.
+    const corner = lot.reduce((best, p) => (p[0] + p[1] > best[0] + best[1] ? p : best));
+    const neighbours = [lot[(lot.indexOf(corner) + 1) % lot.length], lot[(lot.indexOf(corner) + lot.length - 1) % lot.length]];
+    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, north] = neighbours[0][0] < neighbours[1][0] ? [unit(neighbours[0]), unit(neighbours[1])] : [unit(neighbours[1]), unit(neighbours[0])];
+    const at = (a, b) => [corner[0] + west[0] * a + north[0] * b, corner[1] + west[1] * a + north[1] * b];
+    const rect = (a0, a1, b0, b1) => orient([at(a0, b0), at(a1, b0), at(a1, b1), at(a0, b1)]);
+    // The south wall's length: the farthest lot corner on its line.
+    const southWall = Math.max(...lot.filter((p) => Math.abs((p[0] - corner[0]) * west[1] - (p[1] - corner[1]) * west[0]) < 0.5).map((p) => (p[0] - corner[0]) * west[0] + (p[1] - corner[1]) * west[1]));
+    const shaft = rect(0, h.shaftWidth, 0, h.shaftDepth), shoulder = rect(h.shaftWidth, southWall, 0, h.shaftDepth), crown = rect(h.crownEnds, h.shaftWidth - h.crownEnds, h.crownSides, h.shaftDepth - h.crownSides);
+    // A solid on an outline between two heights.
+    const solid = (corners, lo, hi) => {
+        planOf(corners).forEach((run) => {
+            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]]], core);
+        });
+        paintedSlab(kit, shell, corners, lo, false, roofing);
+        paintedSlab(kit, shell, corners, hi, true, roofing);
+    };
+    solid(lot, 0, h.setback);
+    solid(shoulder, h.setback, h.shoulder);
+    solid(shaft, h.setback, h.shaft);
+    solid(crown, h.shaft, h.crown);
+    // Whether a run lies along an outline's edges.
+    const lies = (run, on) => [0, run.length / 2, run.length].every((s) => {
+        const p = run.at(s);
+        return on.some((q, i) => {
+            const r = on[(i + 1) % on.length], [dx, dz] = [r[0] - q[0], r[1] - q[1]], l = Math.hypot(dx, dz);
+            const t = Math.max(0, Math.min(1, ((p[0] - q[0]) * dx + (p[1] - q[1]) * dz) / (l * l)));
+            return Math.hypot(q[0] + dx * t - p[0], q[1] + dz * t - p[1]) < 0.05;
+        });
+    });
+    const crownGlass = { tall: ["tallSide", "tallMiddle"], arch: ["tallSide", "tallMiddle", "side", "middle"], head: ["tallMiddle", "middle"] };
+    const skin = (corners, lo, hi, seed, keep, openings) => {
+        const plan = planOf(corners), rows = rowsBetween(lo, hi), heights = [rows[0].lo, ...rows.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, kind] = openings(chain.length, plan[first].at(0), plan[last].at(plan[last].length));
+            chainSkin(kit, wall, plan, chain, 0, chain.runs.length - 1, s0, s1, columns, heights, 0.02, 0.07, (bay, r) => {
+                const row = rows[r], opening = kind(bay);
+                if (row.kind === "granite")
+                    return granite;
+                if (opening === "strip")
+                    return row.floor >= 37 ? stone : strip;
+                if (row.kind === "tall" || row.kind === "arch" || row.kind === "head")
+                    return crownGlass[row.kind].includes(opening) ? paneColor(row.floor, bay, seed * 8 + index) : stone;
+                if (row.kind === "stone" || opening === "stone")
+                    return stone;
+                return paneColor(row.floor, bay, seed * 8 + index);
+            }, stone);
+        });
+    };
+    // Windows every 3 m, 1.6 m wide, between stone piers; a short wall stays stone.
+    const punched = (length) => {
+        const bays = Math.round(length / 3);
+        if (bays < 1)
+            return [[0, length], () => "stone"];
+        const columns = [0, ...Array.from({ length: bays }, (_, i) => [length * (i + 0.5) / bays - 0.8, length * (i + 0.5) / bays + 0.8]).flat(), length];
+        return [columns, (bay) => (bay % 2 === 0 && bay >= 2 && bay <= 2 * bays ? "window" : "stone")];
+    };
+    // The shaft's Michigan face: three dark strips in the middle, a window near each edge,
+    // symmetrical about its middle.
+    const stripped = (length) => {
+        const at = (f) => length * f;
+        const columns = [0, at(0.15), at(0.25), at(0.315), at(0.385), at(0.465), at(0.535), at(0.615), at(0.685), at(0.75), at(0.85), length];
+        return [columns, (bay) => (bay === 2 || bay === 10 ? "window" : bay === 4 || bay === 6 || bay === 8 ? "strip" : "stone")];
+    };
+    // The inverse of `at`: a point's distances along the south wall and the Michigan front,
+    // which meet a degree 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];
+    };
+    // The crown: three arched windows to a face, 0.9 m wide and 1.7 m apart, their heads
+    // narrowing to the middle 0.45 m. A short face's are tall and centred on it; a long
+    // face's are short, centred crownWindows west of Michigan, as the drawing has them.
+    const arched = (length, start, end) => {
+        const [a0, b0] = inLot(start), [a1, b1] = inLot(end), long = Math.abs(a1 - a0) > Math.abs(b1 - b0);
+        const middle = long ? length * (h.crownWindows - a0) / (a1 - a0) : length * (h.shaftDepth / 2 - b0) / (b1 - b0);
+        const columns = [0, ...[-1.7, 0, 1.7].flatMap((d) => [middle + d - 0.45, middle + d - 0.225, middle + d + 0.225, middle + d + 0.45]), length];
+        // Bays count from one: a pier, then side, middle, side for each window, then the last pier.
+        return [columns, (bay) => { const k = (bay - 1) % 4; return bay > 12 || k === 0 ? "stone" : k === 2 ? (long ? "middle" : "tallMiddle") : long ? "side" : "tallSide"; }];
+    };
+    const michigan = (run) => run.normal(0)[0] > 0.9;
+    skin(lot, 0.25, h.setback, 0, () => true, punched);
+    skin(shoulder, h.setback, h.shoulder, 1, (run) => !lies(run, shaft), punched);
+    skin(shaft, h.setback, h.shaft, 2, (run) => michigan(run), stripped);
+    skin(shaft, h.setback, h.shaft, 3, (run) => !michigan(run) && !lies(run, shoulder), punched);
+    skin(shaft, h.shoulder, h.shaft, 4, (run) => lies(run, shoulder), punched);
+    skin(crown, h.shaft, h.crown, 5, () => true, arched);
+    // Pinnacles on the base's parapet along the two street fronts, clear of the shaft. On the
+    // crown, a central pinnacle reaching the published top stands over each face's windows,
+    // flanked on the short faces by lower pinnacles and on the long faces by a gable.
+    const pinnacle = (p, lo, hi, size) => {
+        const c = size / 2;
+        kit.prism(pinnacles, planOf(orient([[p[0] - c, p[1] - c], [p[0] + c, p[1] - c], [p[0] + c, p[1] + c], [p[0] - c, p[1] + c]])), [lo, hi]);
+    };
+    const stations = [];
+    planOf(lot).forEach((run) => {
+        const n = run.normal(0);
+        if (!(n[0] > 0.9 || n[1] < -0.9))
+            return;
+        const count = Math.max(1, Math.round(run.length / 6));
+        for (let i = 0; i <= count; i += 1) {
+            const p = run.at(run.length * i / count);
+            if (inside(rect(-1.5, h.shaftWidth + 1.5, -1.5, h.shaftDepth + 1.5), p) || stations.some((q) => Math.hypot(p[0] - q[0], p[1] - q[1]) < 2))
+                continue;
+            stations.push(p);
+            pinnacle(p, h.setback, h.setback + 3, 0.9);
+        }
+    });
+    for (const a of [h.crownEnds, h.shaftWidth - h.crownEnds]) {
+        pinnacle(at(a, h.shaftDepth / 2), h.crown, h.top, 1.6);
+        for (const d of [-2.9, 2.9])
+            pinnacle(at(a, h.shaftDepth / 2 + d), h.crown, h.sidePinnacles, 1.1);
+    }
+    for (const [b, inward] of [[h.crownSides, 1], [h.shaftDepth - h.crownSides, -1]]) {
+        pinnacle(at(h.crownWindows, b), h.crown, h.top, 1.6);
+        // The gable stands 10 cm inside the wall, its foot sunk into the crown.
+        const gable = rect(h.crownWindows - 3.45, h.crownWindows + 3.45, b + inward * 0.1, b + inward * 0.6);
+        kit.prism(pinnacles, planOf(gable), [h.crown - 0.1, h.gable]);
+    }
+    const model = kit.finish({ height: h.top, outlines: [shell, pinnacles], 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/willoughby-tower-reference.md" };
+    return model;
+}

package/site/models/window-illumination.js

@@ -0,0 +1,64 @@
+import * as THREE from "../vendor/three-r186.js";
+import { celebrations, windowWord } from "./celebrations.js";
+// Reuse the actual glass triangles. The emission mask changes neither the
+// silhouette nor depth/hover ownership, and needs no overlay or extra draw call.
+export function createWindowIllumination(geometry, material, cells, columns, lineTopFloors) {
+    const colors = geometry.getAttribute("color");
+    const original = new Float32Array(colors.array);
+    const emission = new THREE.Float32BufferAttribute(new Float32Array(colors.count), 1);
+    geometry.setAttribute("windowLight", emission);
+    material.onBeforeCompile = (shader) => {
+        shader.vertexShader = `attribute float windowLight;\nvarying float vWindowLight;\n${shader.vertexShader}`
+            .replace("#include <begin_vertex>", "#include <begin_vertex>\nvWindowLight = windowLight;");
+        shader.fragmentShader = `varying float vWindowLight;\n${shader.fragmentShader}`
+            .replace("#include <emissivemap_fragment>", "#include <emissivemap_fragment>\ntotalEmissiveRadiance += vec3(vWindowLight);");
+    };
+    material.customProgramCacheKey = () => "skyline-window-illumination-v1";
+    let active = null, litWindows = 0;
+    const available = new Set(cells.map((cell) => `${cell.column}:${cell.floor}`));
+    const masks = new Map(celebrations.map((preset) => {
+        const lit = new Set();
+        preset.lines.forEach((word, line) => {
+            const rows = windowWord(word), width = rows[0].length;
+            if (width > columns - 2)
+                throw new Error(`${word} does not fit the facade`);
+            const left = Math.floor((columns - width) / 2);
+            const top = lineTopFloors[line];
+            if (top === undefined)
+                throw new Error(`No facade zone for message line ${line + 1}`);
+            rows.forEach((row, down) => [...row].forEach((pixel, across) => {
+                if (pixel === "1")
+                    lit.add(`${left + across}:${top - down}`);
+            }));
+        });
+        // Refuse a layout which silently drops letters into missing window cells.
+        for (const key of lit)
+            if (!available.has(key))
+                throw new Error(`Missing celebration window: ${key}`);
+        return [preset.id, lit];
+    }));
+    return {
+        presets: celebrations,
+        get active() { return active; },
+        get litWindows() { return litWindows; },
+        set(next) {
+            const lit = next === null ? undefined : masks.get(next);
+            if (next !== null && !lit)
+                throw new Error(`Unknown celebration: ${next}`);
+            active = next;
+            litWindows = lit?.size ?? 0;
+            colors.array.set(original);
+            emission.array.fill(0);
+            if (lit)
+                for (const cell of cells) {
+                    const on = lit.has(`${cell.column}:${cell.floor}`);
+                    for (let vertex = cell.vertex; vertex < cell.vertex + 6; vertex += 1) {
+                        // Closed shades darken only the message face's office glass.
+                        colors.setXYZ(vertex, 0.018, 0.018, 0.018);
+                        emission.setX(vertex, on ? 1 : 0);
+                    }
+                }
+            colors.needsUpdate = emission.needsUpdate = true;
+        },
+    };
+}

package/site/skyline-3d.html

@@ -0,0 +1,92 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="robots" content="noindex" />
+    <meta name="theme-color" content="#000000" />
+    <link rel="icon" href="data:," />
+    <link rel="stylesheet" href="study.css" />
+    <title>3D Chicago Skyline</title>
+  </head>
+  <body class="skyline-3d">
+    <main class="viewport" id="viewport">
+      <canvas id="building" tabindex="0" role="img" aria-label="Interactive 3D Chicago skyline: every mapped building of the skyline study, seen from the drawing's camera on the lakefront by the Adler Planetarium" aria-describedby="camera-hint"></canvas>
+      <div class="loading" id="loading" role="status">
+        <span class="visually-hidden">Preparing the skyline…</span>
+        <!-- skyline-loading:start -->
+        <svg class="skyline-trace" viewBox="0 0 1000 390.01" aria-hidden="true" focusable="false">
+          <defs><path id="skyline-loading-outline" pathLength="1" d="M0 390.01 L24 390.01 L24 326.71 L36.78 320.28 L76.29 320.28 L78.85 321.63 L79.08 320.54 L87.68 320.54 L87.92 316.21 L133.24 316.74 L133.47 317.75 L133.94 317.75 L134.17 316.74 L164.38 316.74 L164.85 317.75 L165.08 321.6 L181.12 321.6 L181.35 329.03 L189.48 329.03 L190.41 330.18 L207.85 330.18 L208.08 328.36 L208.54 328.36 L209.01 331.14 L212.26 338.16 L212.49 334.77 L213.89 334.77 L214.12 344.27 L216.21 344.27 L216.45 348.52 L234.57 348.52 L234.81 318.86 L238.53 318.86 L238.76 308.7 L242.48 308.7 L242.71 280.86 L244.57 280.86 L244.8 273.62 L245.03 272.91 L245.73 272.91 L245.96 272.02 L249.68 272.02 L249.91 273.17 L251.54 273.17 L251.77 272.02 L253.87 272.02 L254.1 273.17 L255.26 272.91 L255.49 272.02 L257.58 272.02 L257.82 272.91 L258.75 272.91 L258.98 280.86 L260.84 280.86 L261.07 318.86 L261.3 316.21 L263.63 316.21 L263.86 318.86 L265.02 318.86 L265.25 316.21 L268.04 316.21 L268.28 333.8 L272.69 333.8 L272.92 321.07 L274.55 321.07 L274.78 314 L288.96 314 L289.19 317.54 L300.58 317.54 L300.81 310.9 L311.51 310.9 L311.74 229.87 L323.13 229.87 L323.36 222.27 L330.8 222.27 L331.03 219.97 L349.39 220.16 L349.62 229.87 L352.41 229.87 L352.64 249.49 L382.16 249.49 L382.39 383.11 L386.81 383.11 L387.04 262.54 L406.57 233.23 L407.26 233.23 L410.05 252.75 L410.52 252.78 L410.75 233.23 L411.21 233.23 L439.11 263.31 L439.34 313.74 L444.22 313.74 L444.45 202.79 L513.71 202.79 L513.95 228.1 L528.36 228.1 L528.59 76.89 L548.34 76.8 L548.58 67.61 L561.59 67.52 L562.29 16 L563.68 16 L564.61 67.52 L571.82 67.61 L572.05 83.08 L572.98 83.08 L573.21 152.98 L579.49 143.92 L580.88 121.96 L582.04 143.91 L595.53 163.38 L598.55 173.04 L598.78 176.62 L600.41 176.62 L600.64 180.12 L602.03 180.12 L602.27 183.62 L603.66 183.62 L603.89 187.12 L605.52 187.12 L605.75 336.98 L606.22 379.83 L608.77 379.83 L609.01 89.53 L622.72 89.53 L622.95 83.96 L641.78 83.96 L642.01 69.64 L642.71 69.64 L642.94 83.96 L661.77 83.96 L662 89.53 L675.25 89.53 L675.48 202.65 L675.94 189.66 L748.46 189.66 L748.69 202.65 L755.43 202.65 L755.66 208.92 L800.75 208.92 L801.22 295.71 L806.33 295.71 L806.56 284.84 L818.42 284.84 L818.65 282.28 L837.48 282.28 L837.71 284.84 L848.17 284.84 L848.4 291.4 L848.87 291.4 L849.1 295.71 L854.91 295.71 L855.14 266.9 L894.19 266.9 L894.42 390.01 L937.42 390.01 L937.65 306.26 L939.51 306.26 L939.74 290.76 L953.69 290.76 L953.92 306.26 L958.57 306.26 L958.8 295.48 L974.14 295.48 L974.37 306.26 L976 306.26 L976 390.01 L1000 390.01" /></defs>
+          <use class="skyline-trace-rail" href="#skyline-loading-outline" />
+          <use class="skyline-trace-line" href="#skyline-loading-outline" />
+          <use class="skyline-trace-tip" href="#skyline-loading-outline" />
+        </svg>
+        <!-- skyline-loading:end -->
+      </div>
+      <div class="scene-notes" id="scene-notes">
+        <p class="hint" id="camera-hint">Drag to orbit · scroll or pinch to zoom<br />Arrow keys rotate · + / − zoom · Home resets</p>
+        <p id="celebration-status" aria-hidden="true" hidden></p>
+        <p class="attribution">Streets and footprints <a href="https://www.openstreetmap.org/copyright" target="_blank" rel="noopener">© OpenStreetMap contributors</a></p>
+      </div>
+      <p class="visually-hidden" id="motion-status" role="status">Camera moves only when you interact or start the turntable.</p>
+      <p class="visually-hidden" id="celebration-announcement" role="status"></p>
+      <noscript><style>#loading { display: none; }</style><p class="loading">Enable JavaScript to explore the 3D skyline.</p></noscript>
+      <dialog class="detail-panel" id="building-detail" aria-label="Building detail">
+        <button type="button" class="detail-close" id="detail-close" aria-label="Close building detail" title="Close (Esc)">×</button>
+      </dialog>
+    </main>
+    <footer class="control-bar" aria-label="3D skyline controls">
+      <!-- Chicago's six-pointed star, after devopsrockstars' white-star-only.svg, drawn in
+           the bar's muted grey: points 12 units out, the notches between them 4.66. -->
+      <button type="button" class="menu-toggle" id="menu-toggle" aria-expanded="false" aria-controls="camera-views model-display scene-notes" aria-label="Skyline controls" title="Show the controls">
+        <svg viewBox="-12 -12 24 24" aria-hidden="true" focusable="false"><path d="M0-12 2.33-4.04 10.39-6 4.66 0 10.39 6 2.33 4.04 0 12-2.33 4.04-10.39 6-4.66 0-10.39-6-2.33-4.04Z" /></svg>
+      </button>
+      <div class="button-group camera-views" id="camera-views" role="group" aria-label="Camera views">
+        <button type="button" data-view="skyline" aria-pressed="true">skyline view</button>
+        <button type="button" data-view="quarter" aria-pressed="false">three-quarter</button>
+        <button type="button" data-view="side" aria-pressed="false">side</button>
+        <button type="button" data-view="top" aria-pressed="false">ground plan ↓</button>
+        <button type="button" data-view="heights" aria-pressed="false">height comparison</button>
+        <button type="button" id="reset">reset view</button>
+      </div>
+      <div class="button-group model-display" id="model-display" role="group" aria-label="Model display">
+        <button type="button" id="streets" aria-pressed="true">streets</button>
+        <button type="button" id="footprints" aria-pressed="false">footprints</button>
+        <button type="button" id="wireframe" aria-pressed="false">wireframe</button>
+        <button type="button" id="turntable" aria-pressed="false" aria-describedby="motion-status">turntable</button>
+        <button type="button" id="show-original" title="Compare with the original skyline SVG" hidden>show original</button>
+        <div class="celebration-controls" id="celebration-controls" role="group" aria-label="Celebratory window lighting">
+          <span class="celebration-caption">lights</span>
+          <button type="button" data-celebration="bulls" aria-label="Bulls lighting" aria-pressed="false">
+            <svg viewBox="0 0 32 32" aria-hidden="true" focusable="false"><path d="M7 12C3 12 2 8 3 4c2 4 4 4 7 5l6-2 6 2c3-1 5-1 7-5 1 4 0 8-4 8l-2 10-4 5h-6l-4-5Z"/><path class="logo-cut" d="m9 15 5 2m9-2-5 2m-4 6h4"/></svg>
+          </button>
+          <button type="button" data-celebration="cubs" aria-label="Cubs lighting" aria-pressed="false">
+            <svg viewBox="0 0 32 32" aria-hidden="true" focusable="false"><circle class="logo-line" cx="16" cy="16" r="13"/><path d="M24 10a10 10 0 1 0 0 12l-4-3a5 5 0 1 1 0-6Z"/></svg>
+          </button>
+          <button type="button" data-celebration="sox" aria-label="White Sox lighting" aria-pressed="false">
+            <svg viewBox="0 0 32 32" aria-hidden="true" focusable="false"><text x="2" y="13">S</text><text x="11" y="22">O</text><text x="21" y="30">X</text></svg>
+          </button>
+          <button type="button" data-celebration="bears" aria-label="Bears lighting" aria-pressed="false">
+            <svg viewBox="0 0 32 32" aria-hidden="true" focusable="false"><path d="m3 16 5-8 11-2 10 5-7 3-4-3-7 2-2 3 2 3 7 2 4-3 7 3-10 5-11-2Z"/></svg>
+          </button>
+          <button type="button" data-celebration="hawks" aria-label="Blackhawks lighting" aria-pressed="false">
+            <svg viewBox="0 0 32 32" aria-hidden="true" focusable="false"><path class="logo-line" d="M10 5h12v7c0 5-3 7-6 7s-6-2-6-7ZM10 7H5v4c0 4 3 5 6 5m11-9h5v4c0 4-3 5-6 5m-5 3v6m-6 2h12"/></svg>
+          </button>
+          <button type="button" data-celebration="thanks" aria-label="Thanksgiving lighting" aria-pressed="false">
+            <svg viewBox="0 0 32 32" aria-hidden="true" focusable="false"><path class="logo-line" d="M8 27 24 4M12 21C2 21 3 12 3 12c7 0 10 4 9 9Zm5-7C8 14 10 6 10 6c6 0 9 4 7 8Zm-3 4c3-6 10-5 13-3-2 6-8 9-13 3Zm6-9c0-5 5-7 8-7 1 6-2 10-8 7Z"/></svg>
+          </button>
+        </div>
+      </div>
+    </footer>
+    <div class="tooltip" id="tooltip" aria-hidden="true" hidden></div>
+    <div class="context-menu" id="building-menu" hidden>
+      <p class="context-menu-title" id="building-menu-title"></p>
+      <div role="menu" aria-labelledby="building-menu-title">
+        <a role="menuitem" id="building-detail-link" href="building-detail.html">building detail</a>
+        <div id="building-lighting-menu" role="group" aria-label="Celebratory window lighting" hidden></div>
+      </div>
+    </div>
+    <!-- The loader is compiled into dist/; opened from the sources, say how to build it. -->
+    <script src="study-loader.js" data-study="./skyline-3d.js" onerror="document.querySelector('#loading').textContent = 'Build the site with bun run build:site, then serve dist/ with python3 -m http.server -d dist to explore the 3D skyline.'"></script>
+  </body>
+</html>