@a2f0/skyline 0.2.19 → 0.2.22

package/site/study-loader.js

@@ -3,7 +3,7 @@
     const entry = document.currentScript.dataset["study"];
     function showStudyError(message) {
         document.querySelector("#loading").textContent = message;
-        document.querySelectorAll("button").forEach((button) => { button.disabled = true; });
+        document.querySelectorAll("button, input").forEach((control) => { control.disabled = true; });
     }
     if (location.protocol === "file:") {
         const page = location.pathname.split("/").pop();

package/site/study-viewer.js

@@ -109,6 +109,7 @@ export function createBuildingStudy({ models, defaultView = "quarter", views = {
     const night = { sun: [0xffffff, 2.4], ambient: [0xffffff, 0.7], fill: [0xffffff, 0.55] };
     const ambientLight = new THREE.AmbientLight(...night.ambient);
     scene.add(ambientLight);
+    let lightBounds;
     const keyLight = new THREE.DirectionalLight(...night.sun);
     keyLight.position.fromArray(lightPosition);
     keyLight.target.position.set(0, 80, 0);
@@ -489,6 +490,7 @@ export function createBuildingStudy({ models, defaultView = "quarter", views = {
         const next = { ...original, ...layouts?.[name] };
         layout = name;
         ({ models, fit, target, platform, lightPosition, shadowCamera, clippingMargin } = next);
+        lightBounds = undefined;
         extras = next.extras || [];
         models.forEach((model) => { scene.add(model.building); model.setWireframe(wireframe); });
         extras.forEach((object) => scene.add(object));
@@ -501,6 +503,7 @@ export function createBuildingStudy({ models, defaultView = "quarter", views = {
         base.position.set(platform.x || 0, -1.1, platform.z || 0);
         baseEdges.position.copy(base.position);
         keyLight.position.fromArray(lightPosition);
+        keyLight.target.position.set(0, 80, 0);
         Object.assign(keyLight.shadow.camera, shadowCamera);
         keyLight.shadow.camera.updateProjectionMatrix();
         const nextView = previousView && previousView !== defaultView ? previousView : next.defaultView || defaultView;
@@ -586,6 +589,8 @@ export function createBuildingStudy({ models, defaultView = "quarter", views = {
         get groundShadows() { return base.receiveShadow; },
         get activeView() { return activeView; },
         get selectedBuilding() { return selectedModel?.building.userData["buildingId"] || null; },
+        get sunDirection() { return keyLight.position.clone().sub(keyLight.target.position).normalize().toArray(); },
+        get sunIntensity() { return keyLight.intensity; },
         get shadowBounds() {
             // Actual rendered geometry in the shadow camera's clip space, for coverage checks.
             const min = [Infinity, Infinity, Infinity], max = [-Infinity, -Infinity, -Infinity];
@@ -667,7 +672,29 @@ export function createBuildingStudy({ models, defaultView = "quarter", views = {
     Object.defineProperty(canvas, "__buildingStudy", { value: api, configurable: true });
     onReady();
     // Day or night: the transparent canvas shows the page's night behind it until a sky covers it.
+    // A sphere enclosing every caster and the platform fits the shadow camera at any
+    // solar azimuth/elevation. Cache it: dragging time never traverses model vertices.
     function setDaylight(day) {
+        if (day?.direction) {
+            if (!lightBounds) {
+                const min = new THREE.Vector3(Infinity, Infinity, Infinity), max = new THREE.Vector3(-Infinity, -Infinity, -Infinity);
+                for (const bounds of [api.platformBounds, ...api.modelBounds]) {
+                    min.min(new THREE.Vector3().fromArray(bounds.min));
+                    max.max(new THREE.Vector3().fromArray(bounds.max));
+                }
+                lightBounds = { center: min.clone().add(max).multiplyScalar(0.5), radius: max.distanceTo(min) / 2 };
+            }
+            const radius = lightBounds.radius * 1.02;
+            keyLight.target.position.copy(lightBounds.center);
+            keyLight.position.fromArray(day.direction).multiplyScalar(2 * radius + 1).add(lightBounds.center);
+            Object.assign(keyLight.shadow.camera, { left: -radius, right: radius, top: radius, bottom: -radius, near: 1, far: 4 * radius + 2 });
+        }
+        else {
+            keyLight.position.fromArray(lightPosition);
+            keyLight.target.position.set(0, 80, 0);
+            Object.assign(keyLight.shadow.camera, shadowCamera);
+        }
+        keyLight.shadow.camera.updateProjectionMatrix();
         scene.background = day?.sky ?? null;
         base.material.color.setHex(day?.ground ?? nightGround);
         for (const [light, [colour, intensity]] of [[keyLight, day?.sun ?? night.sun], [ambientLight, day?.ambient ?? night.ambient], [fillLight, day?.fill ?? night.fill]]) {

package/site/study.css

@@ -162,6 +162,12 @@ body.skyline-3d { height: 100vh; height: 100dvh; }
 .control-bar .button-group { gap: 4px; }
 .control-bar .camera-views { grid-area: views; justify-self: start; --fold: inset(0 0 0 100%); }
 .control-bar .model-display { grid-area: display; justify-self: end; justify-content: end; --fold: inset(0 100% 0 0); }
+.time-controls { display: grid; grid-template-columns: auto minmax(60px, 1fr) auto auto; align-items: center; gap: 8px; flex-basis: 100%; width: 100%; font-size: 10px; }
+.time-controls label { color: #bbb; }
+.time-controls #time-date { display: block; margin-top: 2px; color: #888; font-size: 9px; }
+.time-controls input { width: 100%; min-width: 0; height: 28px; margin: 0; accent-color: #bbb; cursor: pointer; }
+.time-controls output { min-width: 88px; text-align: right; color: #ddd; font-variant-numeric: tabular-nums; }
+.time-controls button:disabled { opacity: 0.45; cursor: default; }
 .celebration-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: end; gap: 4px; flex-basis: 100%; }
 .celebration-caption { margin-right: 4px; color: #888; font-size: 10px; }
 .control-bar .celebration-controls button { display: grid; place-items: center; width: 36px; height: 36px; padding: 4px; }
@@ -179,8 +185,8 @@ body.skyline-3d { height: 100vh; height: 100dvh; }
 .control-bar .menu-toggle:hover { color: #fff; background: #ffffff14; }
 .menu-toggle svg { width: 20px; height: 20px; fill: currentColor; transition: rotate 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
 .menu-toggle[aria-expanded="true"] svg { rotate: 30deg; }
-/* At desktop widths the badges share the display row, so opening the controls
-   keeps the canvas height unchanged. Smaller screens retain 36px touch targets. */
+/* Compact badges leave room for the time slider. Smaller screens retain 36px
+   touch targets. */
 @container skyline (min-width: 1440px) {
   .celebration-controls { flex-basis: auto; flex-wrap: nowrap; }
   .celebration-caption { display: none; }
@@ -203,6 +209,12 @@ body.skyline-3d { height: 100vh; height: 100dvh; }
   .skyline-trace-tip { display: none; animation: none; }
 }
 @container skyline (max-width: 600px) {
+  .time-controls { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; }
+  .time-controls label { grid-column: 1; grid-row: 1; }
+  .time-controls #time-date { display: inline; margin-left: 8px; }
+  .time-controls output { grid-column: 2; grid-row: 1; }
+  .time-controls input { grid-column: 1; grid-row: 2; height: 32px; }
+  .time-controls button { grid-column: 2; grid-row: 2; }
   .skyline-trace { stroke-width: 8.4; }
   .skyline-trace-tip { stroke-width: 12; }
   .skyline-3d .hint { font-size: 9px; }

package/site/time-of-day.js

@@ -0,0 +1,56 @@
+import * as THREE from "./vendor/three-r186.js";
+import { daylightGround, daylightIntensities } from "./models/colour-materials.js";
+import { nightColours, timeOfDayColours } from "./models/colour-palette.js";
+import { smooth, windowActivity } from "./models/night-windows.js";
+import { chicagoHour, solarPosition } from "./solar-time.js";
+// One tiny texture per viewer, updated in place while dragging and disposed at teardown.
+// Transparent night sky reveals the viewer's existing stars behind opaque buildings.
+export function createTimeLighting(latitude, longitude, transparentNight) {
+    const rows = 256, data = new Uint8Array(rows * 4);
+    const sky = new THREE.DataTexture(data, 1, rows);
+    sky.colorSpace = "srgb";
+    const a = new THREE.Color(), b = new THREE.Color(), pixel = new THREE.Color();
+    function blend(from, to, amount, coloured) {
+        a.setHex(from).lerp(b.setHex(to), amount);
+        if (!coloured) {
+            const grey = a.r * 0.2126 + a.g * 0.7152 + a.b * 0.0722;
+            a.setRGB(grey, grey, grey);
+        }
+        return a.getHex();
+    }
+    return {
+        sky,
+        update(date, coloured) {
+            const { elevation, direction } = solarPosition(date, latitude, longitude);
+            const upper = timeOfDayColours.findIndex((stop) => stop.elevation > elevation);
+            const last = timeOfDayColours.length - 1;
+            const low = timeOfDayColours[upper < 0 ? last : Math.max(0, upper - 1)];
+            const high = timeOfDayColours[upper < 0 ? last : upper];
+            const amount = high === low ? 0 : smooth(low.elevation, high.elevation, elevation);
+            const top = blend(low.sky, high.sky, amount, coloured);
+            const horizon = blend(low.horizon, high.horizon, amount, coloured);
+            const sun = blend(low.sun, high.sun, amount, coloured);
+            const day = smooth(-6, 18, elevation);
+            const opacity = transparentNight ? smooth(-18, -2, elevation) : 1;
+            const topColour = new THREE.Color(top), bottomColour = new THREE.Color(horizon);
+            for (let row = 0; row < rows; row += 1) {
+                const hex = pixel.copy(bottomColour).lerp(topColour, row / (rows - 1)).getHex();
+                // The canvas is composited with premultiplied alpha. Background textures write
+                // directly to it, so premultiply the final sRGB channels here as well.
+                data.set([Math.round(((hex >> 16) & 255) * opacity), Math.round(((hex >> 8) & 255) * opacity), Math.round((hex & 255) * opacity), Math.round(255 * opacity)], row * 4);
+            }
+            sky.needsUpdate = true;
+            const ground = blend(0x161616, daylightGround.blocks, day, false);
+            return {
+                sky, direction, ground,
+                roads: blend(0x2c2c2c, daylightGround.roads, day, false),
+                sun: [sun, daylightIntensities.sun * smooth(-0.833, 8, elevation)],
+                ambient: [blend(nightColours.ambient, top, day, coloured), 0.16 + day * (daylightIntensities.ambient - 0.16)],
+                fill: [blend(nightColours.fill, horizon, day, coloured), 0.08 + day * (daylightIntensities.fill - 0.08)],
+                reflections: { sky: top, horizon, ground: blend(0x080808, 0x444444, day, false) },
+                night: { darkness: 1 - smooth(-6, 3, elevation), activity: windowActivity(chicagoHour(date)), outlineStrength: 0.05 + 0.95 * day },
+            };
+        },
+        dispose() { sky.dispose(); },
+    };
+}