@a2f0/skyline 0.2.20 → 0.2.23

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(); },
+    };
+}

package/site/viewer-page.js

@@ -6,6 +6,7 @@ import { mountViewer } from "./skyline-shell.js";
 // bar open or folded; and `?attribution=hidden` leaves out the OpenStreetMap credit. The site
 // starts the bar open, to show what the scene can do; embedded, it starts folded behind its
 // star, as `mountSkyline` does.
+// `?colour=1` starts in daylight; `?theme=light` or `?theme=dark` overrides the boot palette.
 const settings = new URLSearchParams(location.search);
 const embedded = settings.get("embed") === "1";
 const controls = settings.get("controls");
@@ -15,6 +16,7 @@ mountViewer(document.querySelector("#viewer"), {
     controls: controls === "open" || controls === "closed" ? controls : embedded ? "closed" : "open",
     attribution: settings.get("attribution") !== "hidden",
     colour: settings.get("colour") === "1",
+    theme: document.documentElement.dataset["theme"] === "light" ? "light" : "dark",
     navigation: !embedded,
     page: true,
 });

package/site/viewer.css

@@ -35,6 +35,19 @@
   pointer-events: none;
 }
 
+/* Keep this boot palette in sync with skyline-shell.ts and index.html. It gives
+   way to the scene's own sky at the first frame. The original drawing always
+   keeps its dark sky, including when opened during loading or after a failure. */
+.skyline-viewer[data-theme="light"][data-booting] { color-scheme: light; background: #f5f5f5; color: #444; }
+.skyline-viewer[data-theme="light"][data-booting] > .stars { visibility: hidden; }
+.skyline-viewer[data-theme="light"][data-booting] .loading { color: #444; }
+.skyline-viewer[data-theme="light"][data-booting] .skyline-trace { stroke: #555; }
+.skyline-viewer[data-theme="light"][data-booting] .skyline-trace-tip { stroke: #222; filter: drop-shadow(0 0 9px #22222266); }
+.skyline-viewer[data-theme="light"][data-booting] .controls { color: #444; }
+.skyline-viewer[data-theme="light"][data-booting] .motion-status { color: #555; }
+.skyline-viewer[data-theme="light"][data-booting] .controls :is(button, a):is(:hover, :focus-visible, [aria-pressed="true"]) { color: #111; }
+.skyline-viewer[data-theme="light"][data-booting] .controls :focus-visible { outline-color: #111; }
+
 .stars svg {
   display: block;
   width: 100%;