@a2f0/skyline 0.0.0-stage → 0.1.2

package/lib/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/lib/models/willoughby-tower-geographic.d.ts

@@ -0,0 +1,17 @@
+import type { BuildingModel, Plan } from "./building-kit.js";
+import type { GeoBuilding } from "./skyline-geography-data.js";
+export declare const willoughbyLevels: Readonly<{
+    setback: 80.5;
+    shoulder: 92;
+    shaft: 123.5;
+    crown: 131.7;
+    gable: 132.2;
+    sidePinnacles: 132.5;
+    top: 133.5;
+    shaftWidth: 17.4;
+    shaftDepth: 11;
+    crownEnds: 2.1;
+    crownSides: 1.2;
+    crownWindows: 10.2;
+}>;
+export declare function createWilloughbyTowerGeographicBuilding(record: GeoBuilding, projectPlan: (coordinates: [number, number][]) => Plan, offset: [number, number]): BuildingModel;

package/lib/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/lib/models/window-illumination.d.ts

@@ -0,0 +1,14 @@
+import * as THREE from "../vendor/three-r186.js";
+import type { Celebration, CelebrationId } from "./celebrations.js";
+export interface WindowCell {
+    vertex: number;
+    column: number;
+    floor: number;
+}
+export interface WindowIllumination {
+    readonly presets: readonly Celebration[];
+    readonly active: CelebrationId | null;
+    readonly litWindows: number;
+    set(active: CelebrationId | null): void;
+}
+export declare function createWindowIllumination(geometry: THREE.BufferGeometry, material: THREE.MeshToonMaterial, cells: readonly WindowCell[], columns: number, lineTopFloors: readonly number[]): WindowIllumination;

package/lib/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/lib/package-assets.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Copies the viewer's complete asset directory into a host application's static
+ * directory. This module is for Node/Bun build scripts, never browser entrypoints.
+ */
+export declare function copySkylineAssets(destination: string | URL): Promise<void>;

package/lib/package-assets.js

@@ -0,0 +1,9 @@
+import { cp, mkdir } from "node:fs/promises";
+/**
+ * Copies the viewer's complete asset directory into a host application's static
+ * directory. This module is for Node/Bun build scripts, never browser entrypoints.
+ */
+export async function copySkylineAssets(destination) {
+    await mkdir(destination, { recursive: true });
+    await cp(new URL("../site/", import.meta.url), destination, { recursive: true });
+}

package/lib/skyline-package.d.ts

@@ -0,0 +1,23 @@
+export type { BuildingModel, Vec2, Vec3 } from "./models/building-kit.js";
+export type { FitBox, PlatformOptions, ShadowCameraOptions, StudyView, StudyLayout, StudyLabel } from "./study-types.js";
+export type { GeographicSkyline } from "./skyline-scene.js";
+export interface SkylineOptions {
+    /** Directory serving the package's viewer assets, e.g. "/static/skyline/". */
+    assetsUrl: string | URL;
+    /** Accessible title for the embedded viewer. */
+    title?: string;
+    /** Show the standalone toolbar and study links. Hidden by default when embedded. */
+    navigation?: boolean;
+}
+export interface SkylineInstance {
+    /** The viewer's frame; its styles are isolated from the host application. */
+    readonly element: HTMLIFrameElement;
+    /** Removes the viewer, releasing its document, event handlers and WebGL context. */
+    destroy(): void;
+}
+/**
+ * Mounts the complete interactive viewer inside a host-owned container. Importing
+ * this module never touches the DOM; call it after mounting a browser component.
+ * The container controls placement and size. Destroy it when that component leaves.
+ */
+export declare function mountSkyline(container: HTMLElement, { assetsUrl, title, navigation }: SkylineOptions): SkylineInstance;

package/lib/skyline-package.js

@@ -0,0 +1,25 @@
+/**
+ * Mounts the complete interactive viewer inside a host-owned container. Importing
+ * this module never touches the DOM; call it after mounting a browser component.
+ * The container controls placement and size. Destroy it when that component leaves.
+ */
+export function mountSkyline(container, { assetsUrl, title = "Interactive Chicago skyline", navigation = false }) {
+    const document = container.ownerDocument;
+    const base = new URL(assetsUrl, document.baseURI);
+    if (!/^(https?:)$/.test(base.protocol))
+        throw new TypeError("Skyline assets must be served over HTTP or HTTPS.");
+    if (base.search || base.hash)
+        throw new TypeError("Skyline assetsUrl must be a directory URL without a query or fragment.");
+    if (!base.pathname.endsWith("/"))
+        base.pathname += "/";
+    const element = document.createElement("iframe");
+    element.title = title;
+    const viewerUrl = new URL("index.html", base);
+    if (!navigation)
+        viewerUrl.searchParams.set("embed", "1");
+    element.src = viewerUrl.href;
+    element.allowFullscreen = true;
+    element.style.cssText = "display:block;width:100%;height:100%;border:0";
+    container.append(element);
+    return { element, destroy() { element.remove(); } };
+}

package/lib/skyline-scene.d.ts

@@ -0,0 +1,25 @@
+import { createGeographicGround } from "./models/skyline-geography.js";
+import type { BuildingModel, Vec3 } from "./models/building-kit.js";
+import type { FitBox, PlatformOptions, ShadowCameraOptions, StudyLabel, StudyLayout, StudyView } from "./study-types.js";
+export interface GeographicSkyline {
+    models: BuildingModel[];
+    ground: ReturnType<typeof createGeographicGround>;
+    center: Vec3;
+    settings: {
+        target: Vec3;
+        fit: FitBox;
+        platform: PlatformOptions & {
+            x: number;
+            z: number;
+        };
+        clippingMargin: number;
+        lightPosition: Vec3;
+        shadowCamera: ShadowCameraOptions;
+    };
+    layout: StudyLayout;
+    drawingView: StudyView;
+    comparisonViews: Record<string, StudyView>;
+    labels: StudyLabel[];
+}
+export declare const skylineAzimuth: number;
+export declare function createGeographicSkyline(anchor?: Vec3): GeographicSkyline;