@a2f0/skyline 0.0.0-stage → 0.1.1

package/site/skyline-comparison.js

@@ -0,0 +1,97 @@
+import * as THREE from "./vendor/three-r186.js";
+import { geographicBuildings } from "./models/skyline-geography-data.js";
+import { footprintMetrics, geographicOrigin } from "./models/skyline-geography.js";
+import { createGeographicSkyline } from "./skyline-scene.js";
+export { createGeographicSkyline, skylineAzimuth } from "./skyline-scene.js";
+// The drawing has no geographic position. Register the two scenes at Crain's
+// center without changing the original models, rotations, or skyline camera.
+// The drawing shown under each layout's scene.
+const drawings = {
+    original: {
+        src: "models/skyline-reference.svg",
+        alt: "Original SVG geometry showing the Heritage at Millennium Park's bowed, finned crown and rooftop screen, Kemper's vertical ribs, Crain's diamond roof, the dark, gridded Michigan Plaza South tower, Trump International Hotel and Tower's stepped shaft and spire, One Prudential Plaza's punch-card slab under a tall antenna mast, Two Prudential Plaza's chevrons and spire, and Aon Center's granite piers",
+    },
+    geographic: {
+        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",
+    },
+};
+export function createSkylineComparison(models, anchor) {
+    const { ground, layout, comparisonViews: views, labels } = createGeographicSkyline([anchor.x, anchor.y, anchor.z]);
+    const layouts = { geographic: layout };
+    const number = (n) => n.toFixed(1);
+    const signed = (n) => `${n >= 0 ? "+" : "−"}${Math.abs(n).toFixed(1)}`;
+    const tbody = document.querySelector("#dimensions-body");
+    for (const record of geographicBuildings) {
+        // A mapped building the drawing does not model, such as 330 North Wabash, has no
+        // original extents to compare.
+        const model = models.find((entry) => entry.building.userData["buildingId"] === record.id);
+        model?.building.updateMatrixWorld(true);
+        const min = [Infinity, Infinity], max = [-Infinity, -Infinity];
+        let highest = 0;
+        model?.building.traverse((child) => {
+            const mesh = child;
+            if (!mesh.isMesh)
+                return;
+            const positions = mesh.geometry.getAttribute("position"), point = new THREE.Vector3();
+            for (let i = 0; i < positions.count; i += 1) {
+                point.fromBufferAttribute(positions, i).applyMatrix4(mesh.matrixWorld);
+                highest = Math.max(highest, point.y);
+                if (point.y > 0.2)
+                    continue;
+                [point.x, point.z].forEach((n, axis) => { min[axis] = Math.min(min[axis], n); max[axis] = Math.max(max[axis], n); });
+            }
+        });
+        const footprint = footprintMetrics(record.footprint.coordinates);
+        const row = document.createElement("tr");
+        const name = document.createElement("th");
+        name.scope = "row";
+        const link = document.createElement("a");
+        link.href = `https://www.openstreetmap.org/way/${record.footprint.way}`;
+        link.textContent = record.shortName;
+        name.append(link);
+        row.append(name);
+        const values = [
+            `${signed(footprint.center[0])}, ${signed(footprint.center[1])}`,
+            model ? `${number(max[0] - min[0])} × ${number(max[1] - min[1])}` : "not modeled",
+            `${number(footprint.size[0])} × ${number(footprint.size[1])}`,
+            model ? `${number(highest)} → ${number(record.tipHeight)} (${signed(record.tipHeight - highest)})` : `— → ${number(record.tipHeight)}`,
+        ];
+        for (const value of values) {
+            const cell = document.createElement("td");
+            cell.textContent = value;
+            row.append(cell);
+        }
+        const source = document.createElement("td");
+        const height = document.createElement("a");
+        height.href = record.heightSource;
+        height.textContent = record.heightFromDrawing ? `${record.height} m, measured on the drawing` : `${record.height} m architectural${record.heightSource.startsWith("https://www.openstreetmap.org/way/") ? " (OSM)" : ""}`;
+        source.append(height, document.createElement("br"), record.note);
+        row.append(source);
+        tbody.append(row);
+    }
+    document.querySelector("#coordinate-origin").textContent = `${geographicOrigin[1].toFixed(7)}° N, ${Math.abs(geographicOrigin[0]).toFixed(7)}° W`;
+    const streetButton = document.querySelector("#streets");
+    function onLayoutChange(name) {
+        const geographic = name === "geographic";
+        streetButton.disabled = !geographic;
+        document.querySelector("#layout-status").textContent = geographic
+            ? "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."
+            : "Original layout · proportions and spacing fitted to the drawing. Use ground plan or height comparison, then toggle layouts to compare at the same camera scale.";
+        document.querySelector("#model-caption").textContent = geographic ? "01 / geographic study" : "01 / original 3D study";
+        // The drawing under the scene frames what the scene does: the whole skyline for the
+        // geographic layout, the excerpt the original layout is fitted to otherwise.
+        const drawing = document.querySelector(".reference img"), { src, alt } = drawings[geographic ? "geographic" : "original"];
+        if (drawing.getAttribute("src") !== src)
+            drawing.src = src;
+        drawing.alt = alt;
+    }
+    function connect(viewer) {
+        streetButton.addEventListener("click", () => {
+            ground.streets.visible = !ground.streets.visible;
+            streetButton.setAttribute("aria-pressed", String(ground.streets.visible));
+            viewer.requestRender();
+        });
+    }
+    return { layouts, views, labels, onLayoutChange, connect };
+}