@a2f0/skyline 0.0.0-stage → 0.1.2

package/site/skyline-scene.js

@@ -0,0 +1,86 @@
+import { geographicBuildings } from "./models/skyline-geography-data.js";
+import { createGeographicBuilding, createGeographicGround } from "./models/skyline-geography.js";
+// The panorama's viewBox, models/skyline-panorama.svg, in the drawing's layer units. Its
+// centre is the skyline camera's sightline and its height the camera's vertical field of view.
+const panorama = { x: -1400, y: -154.834, width: 9378.476, height: 3535.05 };
+// The frame index.html shows the drawing in: skyline-animated.svg's viewBox, bottom-aligned
+// and centred, in the same layer units. The file's `skyline-position` group translates the
+// layer by (1105.5923, -87.26366) inside its viewBox.
+const drawingFrame = { x: -1105.5923, y: 87.26366, width: 8501.0986, height: 2782.0373 };
+// The direction the drawing's camera looks from, south-east of the skyline: its azimuth from
+// south toward east. A building's detail faces it the same way.
+export const skylineAzimuth = 36.1247 * Math.PI / 180;
+// The geographic skyline, registered with Crain's mapped centre at `anchor`: every mapped
+// building, their ground, the settings a study shows them with, and the drawing's camera.
+export function createGeographicSkyline(anchor = [0, 0, 0]) {
+    const offset = [anchor[0], anchor[2]];
+    const models = geographicBuildings.map((record) => createGeographicBuilding(record, offset));
+    const ground = createGeographicGround(offset);
+    // The comparison views share a frame set in ground plan, which holds both layouts: the
+    // original's platform, and every mapped footprint, from 330 North Wabash's west side to
+    // The Buckingham's east, with about 50 m east and west even where a portrait phone's
+    // width binds the frame. North and south it runs from about 100 m past River Plaza's north
+    // side, across the river, to 127 m past the Railway Exchange's mapped south side at
+    // Jackson. Height comparison sees it at an angle, and on a portrait phone can clip the
+    // platform's south-west corner.
+    const center = [anchor[0] + 128, 0, anchor[2] + 85];
+    const planFit = { width: 1050, height: 1520 };
+    const settings = {
+        target: [center[0], 155, center[2]],
+        fit: { width: 1100, height: 950 },
+        platform: { width: 1200, depth: 1600, x: center[0], z: center[2] },
+        clippingMargin: 1800,
+        lightPosition: [-700, 1100, 500],
+        // Wide enough for the platform's far corners, which the geography suite checks.
+        shadowCamera: { left: -1300, right: 1300, top: 1300, bottom: -1300, near: 1, far: 2600 },
+    };
+    // The drawing traces a lakefront photograph. Fitting the mapped buildings'
+    // roofs and tips to their drawn positions (scripts/fit-geographic-camera.ts)
+    // puts its eye on the shore by the Adler Planetarium, 2 m above the street
+    // datum, looking up at the skyline; it is held there while the angles and lens
+    // are refitted, since the drawing barely tells its distance from its lens. The
+    // buildings stay where they are mapped; only the camera is fitted. Eye positions
+    // are meters east, up, and south of Crain's mapped centre.
+    const photoEye = [1471.76, 2, 1948.8];
+    const photoAzimuth = skylineAzimuth, photoPolar = 94.0182 * Math.PI / 180;
+    // The panorama's vertical field of view. The panorama is the reference excerpt's frame
+    // widened about the same centre to every building the drawing shows, so the camera aims
+    // where it always has.
+    const frameFov = 10.5279 * Math.PI / 180;
+    const back = [Math.sin(photoPolar) * Math.sin(photoAzimuth), Math.cos(photoPolar), Math.sin(photoPolar) * Math.cos(photoAzimuth)];
+    // Orbit and zoom pivot on the sightline at Crain's depth.
+    const photoDistance = photoEye[0] * back[0] + photoEye[1] * back[1] + photoEye[2] * back[2];
+    const frameHeight = 2 * photoDistance * Math.tan(frameFov / 2);
+    const photoView = {
+        azimuth: photoAzimuth,
+        polar: photoPolar,
+        distance: photoDistance,
+        target: [anchor[0] + photoEye[0] - photoDistance * back[0], photoEye[1] - photoDistance * back[1], anchor[2] + photoEye[2] - photoDistance * back[2]],
+        fit: { width: frameHeight * panorama.width / panorama.height, height: frameHeight },
+    };
+    // The same camera framing what index.html frames: the drawing's viewBox, a lens shift off
+    // the panorama's centre, held to the viewport's bottom edge. The mapped buildings then
+    // stand where the drawing shows them in the skyline viewer.
+    const unit = frameHeight / panorama.height;
+    const drawingView = {
+        ...photoView,
+        label: "skyline view",
+        fit: { width: drawingFrame.width * unit, height: drawingFrame.height * unit },
+        offset: [
+            (drawingFrame.x + drawingFrame.width / 2 - panorama.x - panorama.width / 2) * unit,
+            (panorama.y + panorama.height / 2 - drawingFrame.y - drawingFrame.height / 2) * unit,
+        ],
+        align: "bottom",
+    };
+    const layout = { models, extras: [ground.group], defaultView: "skyline", ...settings, views: { skyline: photoView } };
+    const comparisonViews = {
+        top: { azimuth: 0, polar: 0, projection: "orthographic", label: "ground plan · north up", fit: planFit, target: center },
+        heights: { azimuth: 0.65, polar: 1.18, projection: "orthographic", label: "height comparison", fit: planFit, target: [center[0], 155, center[2]] },
+    };
+    // The names the comparison views show over each building.
+    const labels = geographicBuildings.map(({ id, shortName }) => ({
+        id, text: shortName,
+        placement: id === "layer3" ? "right" : id === "building-one-prudential-plaza" ? "below" : "above",
+    }));
+    return { models, ground, center, settings, layout, drawingView, comparisonViews, labels };
+}

package/site/skyline-study.html

@@ -0,0 +1,83 @@
+<!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="#080808" />
+    <link rel="icon" href="data:," />
+    <link rel="stylesheet" href="study.css" />
+    <title>Thirty-four on the skyline — Skyline Study</title>
+  </head>
+  <body class="skyline-study">
+    <header>
+      <div>
+        <p class="eyebrow">Chicago skyline / building study 02</p>
+        <h1>Thirty-four on the skyline</h1>
+        <p class="address">Geographic layout: every mapped building, from the Railway Exchange to the towers around The Buckingham · Original drawing: The Heritage · Kemper · Crain Communications · Michigan Plaza South · Trump International Hotel and Tower · One Prudential Plaza · Two Prudential Plaza · Aon Center</p>
+      </div>
+      <nav class="study-links" aria-label="Studies">
+        <a href="building-study.html">Crain solo →</a>
+        <a class="back" href="index.html">← back to skyline</a>
+      </nav>
+    </header>
+    <main>
+      <div class="layout-controls">
+        <div class="button-group" role="group" aria-label="Building layout">
+          <button type="button" data-layout="original" aria-pressed="false">original drawing</button>
+          <button type="button" data-layout="geographic" aria-pressed="true">geographic layout</button>
+        </div>
+        <p id="layout-status" role="status">Geographic layout · mapped footprints and published heights, or heights read on the drawing where none is published, with detailed facades on all thirty-four buildings. Skyline view: the drawing’s camera, on the lakefront by the Adler Planetarium. Light grey outlines: mapped ground coverage. Grey lines: street centerlines. Grid: 100 m.</p>
+      </div>
+      <div class="comparison">
+        <figure>
+          <figcaption class="caption" id="model-caption">01 / geographic study</figcaption>
+          <div class="viewport" id="viewport">
+            <canvas id="building" tabindex="0" role="img" aria-label="Interactive 3D study of the Heritage at Millennium Park, Kemper, Crain Communications, Michigan Plaza South, Trump International Hotel and Tower, One and Two Prudential Plaza, and Aon Center, with 330 North Wabash, the Blue Cross and Blue Shield Tower, 340 on the Park, The Buckingham, Millennium Park Plaza, Willoughby Tower, Six North Michigan, the Michigan Boulevard Building, 180 North Michigan Avenue, the University Club of Chicago, the Monroe Building, the MacLean Center, the Lake View Building, the Peoples Gas Building, the Borg-Warner Building, the Railway Exchange Building, the Gage Building, the Edson Keith and Theodore Ascher Buildings, the Chicago Athletic Association, Two Illinois Center, River Plaza, the Hyatt Regency Chicago West Tower, the Sheraton Grand Chicago Riverwalk, Three Illinois Center, and Swissôtel Chicago in the geographic layout" aria-describedby="camera-hint"></canvas>
+            <span class="view-label" id="view-label">skyline view</span>
+            <p class="loading" id="loading" role="status">Preparing the skyline…</p>
+            <p class="hint" id="camera-hint">Drag to orbit · scroll or pinch to zoom<br />Arrow keys rotate · + / − zoom · Home resets</p>
+          </div>
+        </figure>
+      </div>
+      <div class="toolbar" aria-label="Skyline study controls">
+        <div class="button-group" role="group" aria-label="Camera views">
+          <button type="button" data-view="skyline" aria-pressed="true">skyline view</button>
+          <button type="button" data-view="quarter">three-quarter</button>
+          <button type="button" data-view="side">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" role="group" aria-label="Model display">
+          <button type="button" id="streets" aria-pressed="true" disabled>streets</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>
+        </div>
+      </div>
+      <figure class="reference">
+        <figcaption class="caption">02 / source SVG</figcaption>
+        <img src="models/skyline-panorama.svg" alt="The whole drawn skyline, every building the drawing shows, from the Railway Exchange Building on the left to the towers around The Buckingham on the right" />
+      </figure>
+      <details class="geographic-details" open>
+        <summary>Footprints, coordinates &amp; height differences</summary>
+        <p>Ground plan uses an orthographic camera: roofs do not grow with height. Both layouts align at Crain and keep the same camera and zoom when toggled in ground plan or height comparison. The drawing’s other positions are artistic. Only the geographic layout is mapped.</p>
+        <p>All values are meters. Ground extents are east–west × north–south bounding dimensions, including mapped podiums, rather than facade lengths. Coordinates are east and north of Crain (<span id="coordinate-origin"></span>). Top heights include modeled spires and antennas; architectural heights exclude antennas.</p>
+        <div class="dimension-scroll" tabindex="0" role="region" aria-label="Building dimension comparison">
+          <table class="dimension-table">
+            <thead><tr><th scope="col">Building / footprint source</th><th scope="col">East, north</th><th scope="col">Original ground extent</th><th scope="col">Mapped ground extent</th><th scope="col">Original → geographic top (Δ)</th><th scope="col">Height source &amp; assumptions</th></tr></thead>
+            <tbody id="dimensions-body"></tbody>
+          </table>
+        </div>
+        <p>Footprints and streets: <a href="https://www.openstreetmap.org/copyright">© OpenStreetMap contributors · ODbL</a>, local snapshot from September 17, 2026, with 330 North Wabash's outline from September 27, 2026, and the outlines and parts of the Blue Cross and Blue Shield Tower, 340 on the Park, The Buckingham, Millennium Park Plaza, Willoughby Tower, Six North Michigan, the Michigan Boulevard Building, 180 North Michigan Avenue, the University Club of Chicago, the Monroe Building, the MacLean Center, the Lake View Building, the Peoples Gas Building, the Borg-Warner Building and the Railway Exchange Building from September 28, 2026, and the outlines and parts of the Gage, Edson Keith and Theodore Ascher Buildings, the Chicago Athletic Association, Two Illinois Center, River Plaza, the Hyatt Regency West Tower, the Sheraton Grand Chicago Riverwalk, Three Illinois Center and Swissôtel Chicago from September 29, 2026, and streets from September 30, 2026. Mapped outlines are not a survey. Street lines show location, not curb width; they are flattened to one ground plane, with lower streets omitted. Heritage has a detailed facade reconstruction using <a href="https://gisapps.chicago.gov/gisimages/zoning_pds/PD787.pdf">city design drawings</a> and published heights; its facade spacing and rooftop equipment remain approximate. Other roofs are simplified and some podium heights are estimated. This lets you inspect spacing; exact street widths and Chicago’s multiple road levels need additional data.</p>
+      </details>
+      <div class="notes">
+        <p>The page opens on the geographic layout, seen from the drawing’s camera; <strong>original drawing</strong> follows the SVG’s angle, proportions, and spacing. Orbit around the Heritage’s curved bow and finned crown, Kemper’s ribs, Crain’s diamond roof, Michigan Plaza’s window grid, Trump’s stepped shaft and spire, One Prudential’s punch-card slab and antenna, Two Prudential’s stepped gables, tiers, and turned pyramid, and Aon’s granite piers and roof screens. Depth, hidden sides, and lower floors obscured in the drawing are approximate.</p>
+        <p id="motion-status" role="status">Camera moves only when you interact or start the turntable.</p>
+      </div>
+      <noscript><p>Enable JavaScript to explore the 3D scene. The source SVG remains visible above.</p></noscript>
+    </main>
+    <div class="tooltip" id="tooltip" aria-hidden="true" hidden></div>
+    <script src="study-loader.js" data-study="./skyline-study.js"></script>
+  </body>
+</html>

package/site/skyline-study.js

@@ -0,0 +1,109 @@
+import { createBuildingStudy } from "./study-viewer.js";
+import { createSkylineComparison } from "./skyline-comparison.js";
+import { createCrainSkylineBuilding } from "./models/crain-communications.js";
+import { createHeritageAtMillenniumParkBuilding } from "./models/heritage-at-millennium-park.js";
+import { createKemperBuilding } from "./models/kemper.js";
+import { createMichiganPlazaSouthBuilding } from "./models/michigan-plaza-south.js";
+import { createOnePrudentialPlazaBuilding } from "./models/one-prudential-plaza.js";
+import { createTrumpInternationalTowerBuilding } from "./models/trump-international-tower.js";
+import { createTwoPrudentialPlazaBuilding } from "./models/two-prudential-plaza.js";
+import { createAonCenterBuilding } from "./models/aon-center.js";
+// The SVG's Crain facade widths suggest a ~42° azimuth. Kemper's near roof
+// corner rises above its neighbors, placing the eye below the roof. A long
+// lens keeps the traced verticals nearly parallel.
+const azimuth = 41.5 * Math.PI / 180;
+const elevation = -2 * Math.PI / 180;
+const crain = createCrainSkylineBuilding();
+const kemper = createKemperBuilding();
+const michigan = createMichiganPlazaSouthBuilding();
+const heritage = createHeritageAtMillenniumParkBuilding();
+const prudential = createOnePrudentialPlazaBuilding();
+const trump = createTrumpInternationalTowerBuilding();
+const twoPrudential = createTwoPrudentialPlazaBuilding();
+const aon = createAonCenterBuilding();
+function place(model, across, towardCamera) {
+    // Center the wider group while retaining the drawing's relative spacing.
+    across -= 76.5;
+    model.building.position.set(across * Math.cos(azimuth) + towardCamera * Math.sin(azimuth), 0, -across * Math.sin(azimuth) + towardCamera * Math.cos(azimuth));
+}
+// The real Crain from the drawing's datum up, fitted through this camera to the drawn
+// diamond and the twenty-nine drawn sills on its left face: 1.276 times its size, the
+// same exaggeration the drawing gives the other fitted towers, and turned 4.86° to meet
+// the drawing's view of its faces. Depth keeps the earlier placement.
+crain.building.scale.setScalar(1.276);
+crain.building.rotation.y = 4.86 * Math.PI / 180;
+place(crain, 25.49, 10);
+place(kemper, -38, -20);
+kemper.building.rotation.y = 9.1 * Math.PI / 180;
+place(michigan, 104, -12);
+michigan.building.rotation.y = -1.4 * Math.PI / 180;
+// Fitted through this camera to Heritage's drawn corners, mullions, and crown fins.
+// The plan needs no rotation, and its depth keeps the tower behind Kemper's left face.
+place(heritage, -91.9, -31.85);
+// The real One Prudential from the drawing's 40 m datum up, fitted through this camera at
+// all five test layouts to the drawn roof, band, penthouse, and mast, the drawn piers, the
+// screen's fins, the wing's ribs and corners, and the drawn window rows: 1.314 times its
+// size and turned 7.29°. Depth barely changes the picture, so it comes from the drawing's
+// occlusion instead: One Prudential is drawn over Michigan Plaza's rightmost 47 layer
+// units, so it has to stand in front of it.
+prudential.building.scale.setScalar(1.314);
+prudential.building.rotation.y = 7.29 * Math.PI / 180;
+place(prudential, 179.02, 25);
+// The real Trump shaft from the drawing's 40.7 m datum up, fitted through this camera at all
+// five test layouts to the drawn roof, step, crown, and spire, the drawn mullion lines, and
+// the drawn floor rows: 1.065 times its size and turned 7.95°. It stands behind One
+// Prudential in the SVG, and its depth keeps that lower-facade occlusion.
+trump.building.scale.setScalar(1.065);
+trump.building.rotation.y = 7.95 * Math.PI / 180;
+place(trump, 201.61, -40);
+// The real Two Prudential from the drawing's 35.4 m datum up, fitted through this camera at
+// all five test layouts to the drawn eaves, gables, pyramid, spire and tiers, and the drawn
+// piers of its south and east faces and its lower tier: 1.289 times its size and turned
+// 8.59°. It stands behind the shared podium, and its depth keeps that occlusion.
+twoPrudential.building.scale.setScalar(1.289);
+twoPrudential.building.rotation.y = 8.59 * Math.PI / 180;
+place(twoPrudential, 269.67, -45);
+// The real Aon Center from the drawing's datum up, fitted through this camera at all five
+// test layouts to the drawn roof, the fifteen drawn piers on each face, and the drawn floor
+// bands: 1.329 times its size, turned 10.2° so the camera meets its faces as the
+// photograph does. Depth keeps the earlier placement.
+aon.building.scale.setScalar(1.329);
+aon.building.rotation.y = 10.2 * Math.PI / 180;
+place(aon, 368.16, 40);
+const models = [heritage, kemper, crain, michigan, trump, prudential, twoPrudential, aon];
+const comparison = createSkylineComparison(models, crain.building.position);
+// The page opens on the geographic layout; `?layout=original` opens on the drawing's fit.
+const initialLayout = new URLSearchParams(location.search).get("layout") === "original" ? "original" : "geographic";
+const viewer = createBuildingStudy({
+    models,
+    layouts: comparison.layouts,
+    initialLayout,
+    labels: comparison.labels,
+    onLayoutChange: comparison.onLayoutChange,
+    defaultView: "skyline",
+    views: {
+        skyline: { azimuth, polar: Math.PI / 2 - elevation, label: "skyline view" },
+        quarter: { azimuth: azimuth + 0.3, polar: Math.PI / 2 - 0.28, label: "three-quarter view" },
+        side: { azimuth: azimuth + Math.PI / 2, polar: Math.PI / 2 - 0.14, label: "side view" },
+        ...comparison.views,
+    },
+    fov: 6,
+    minimumDistanceRatio: 0.1,
+    maximumZoom: 24,
+    enablePan: true,
+    // The viewer moves the near plane outward at wider views to retain precision.
+    near: 10,
+    far: 10000,
+    // The reference frame grew around the same centre to include Aon. Its platform
+    // footprint and farthest corner remain inside the clipping margin at every zoom.
+    clippingMargin: 560,
+    target: [0, 172.5, 0],
+    minimumCameraHeight: 1,
+    fit: { height: 572.658, width: 717.635 },
+    platform: { width: 750, depth: 580, color: 0x222222 },
+    lightPosition: [-330, 560, 510],
+    // Keep the key light's direction while moving it back far enough that Aon's
+    // upper corner does not cross its near plane. The solo study keeps its preset.
+    shadowCamera: { left: -540, right: 560, top: 550, bottom: -400, near: 1, far: 1300 },
+});
+comparison.connect(viewer);