@a2f0/skyline 0.2.20 → 0.2.23

package/docs/package.md

@@ -10,6 +10,16 @@ To start an embed in sunny-day colour, pass `colour: true` to `mountSkyline` alo
 Omitting `colour` keeps the existing greyscale default. The setting belongs to that instance;
 it does not use storage or affect another embed. The standalone viewer accepts `?colour=1`.
 
+Pass `theme: "light"` or `theme: "dark"` from the host's active theme to choose the
+loading backdrop, animated outline and error palette. It applies synchronously,
+before the viewer's code or stylesheets load. After the first frame, the scene
+supplies its own sky; returning to greyscale restores the black sky and stars.
+Without `theme`, `colour: true`
+boots light and greyscale boots dark. The theme does not select scene materials or
+time of day: for a light host, pass both `theme: "light"` and `colour: true`.
+Destroy and remount when the host theme changes. The standalone viewer also accepts
+`?theme=light&colour=1` (or `?theme=dark`); each instance keeps its own setting.
+
 ## Install from npm
 
 ```sh

package/lib/models/colour-materials.d.ts

@@ -1,5 +1,7 @@
 import type { BuildingModel } from "./building-kit.js";
 import type { Daylight } from "../study-types.js";
+import { type ReflectionColours } from "./colour-reflections.js";
+import { type NightLighting } from "./night-windows.js";
 export declare const materialNames: readonly ["neutral", "glass", "green glass", "blue-green glass", "bronze glass", "lit window", "dim window", "lamp", "limestone", "marble", "white granite", "granite", "dark granite", "slate", "white terracotta", "pink terracotta", "green tile", "brick", "common brick", "orange brick", "brown brick", "buff brick", "glazed brick", "concrete", "precast", "copper", "maroon", "blue enamel", "bronze", "dark metal", "aluminium", "stainless", "opaque spandrel", "crown glass", "crown lights", "screen", "band lights", "sign board", "sign letters", "cap lights"];
 export type MaterialName = (typeof materialNames)[number];
 export type Tones = Readonly<Record<number, MaterialName>>;
@@ -30,9 +32,14 @@ export interface SkylineColour {
     readonly enabled: boolean;
     /** Shows the colours, or restores the greys exactly. */
     set(enabled: boolean): void;
+    /** Updates reflection uniforms without rewriting geometry or recompiling shaders. */
+    setSky(colours: ReflectionColours | null): void;
+    /** Sets ordinary window activity and dims outlines for the time preview, or restores the preset. */
+    setNight(lighting: NightLighting | null): void;
     /**
      * Recolours vertices another writer has since rewritten in grey, such as window
-     * illumination resetting a facade for a celebration.
+     * illumination resetting a facade for a celebration. Re-reads celebration state
+     * so ordinary night windows yield to the message while architectural lights remain.
      */
     refresh(): void;
 }

package/lib/models/colour-materials.js

@@ -1,6 +1,7 @@
 import * as THREE from "../vendor/three-r186.js";
 import { daylightColours, measuredColours } from "./colour-palette.js";
-import { glassReflection } from "./colour-reflections.js";
+import { glassReflection, daylightReflections } from "./colour-reflections.js";
+import { nightWindowMask } from "./night-windows.js";
 // The colour trial (https://github.com/a2f0/skyline/issues/115): which named material each
 // surface of each building is, and a layer that shows the colours measured for those materials
 // (colour-palette.ts) over the greys the models build in, restoring the greys exactly when it is
@@ -358,9 +359,16 @@ export function createDaylight() {
 // another batch already took, since the builder lets batches share them.
 export function createSkylineColour(models) {
     const painted = [], flat = [], taken = new Set();
-    const reflections = [];
+    const facades = [];
+    const outlines = [];
+    let night = null;
     const glassMaterials = new Set(["glass", "green glass", "blue-green glass", "bronze glass", "crown glass", "lit window", "dim window"]);
     for (const model of models) {
+        model.building.traverse((object) => {
+            const line = object;
+            if (line.isLineSegments && line.material instanceof THREE.LineBasicMaterial)
+                outlines.push({ material: line.material, opacity: line.material.opacity });
+        });
         const buildingId = String(model.building.userData["buildingId"]);
         if (!measuredColours[buildingId])
             continue;
@@ -381,7 +389,13 @@ export function createSkylineColour(models) {
                 return;
             const [base, tones = {}] = batch;
             const material = mesh.material;
-            const materialOf = (grey) => tones[toneOf(grey)] ?? base;
+            const names = new Map();
+            const materialOf = (grey) => {
+                let name = names.get(grey);
+                if (!name)
+                    names.set(grey, name = tones[toneOf(grey)] ?? base);
+                return name;
+            };
             const attribute = mesh.geometry.getAttribute("color");
             if (material.vertexColors) {
                 if (!(attribute?.array instanceof Float32Array) || taken.has(attribute))
@@ -413,8 +427,9 @@ export function createSkylineColour(models) {
                 }
                 mask[vertex] = reflects;
             }
-            if (mask.some((value) => value > 0))
-                reflections.push(glassReflection(material, geometry, mask));
+            const windows = nightWindowMask(geometry, buildingId, (vertex) => materialOf(colours ? colours.array[vertex * 3] : material.color.r));
+            if (mask.some((value) => value > 0) || windows.some((value) => value > 0))
+                facades.push({ light: glassReflection(material, geometry, mask, windows), model });
             const colourOf = (grey) => {
                 const swatch = swatches.get(materialOf(grey));
                 return swatch ? paint(grey, swatch) : [grey, grey, grey];
@@ -435,6 +450,12 @@ export function createSkylineColour(models) {
         }
     }
     let enabled = false;
+    function updateNight() {
+        for (const { light, model } of facades)
+            light.setNight(night, enabled, Boolean(model.illumination?.active));
+        for (const { material, opacity } of outlines)
+            material.opacity = opacity * (night?.outlineStrength ?? 1);
+    }
     return {
         get enabled() { return enabled; },
         set(next) {
@@ -459,10 +480,20 @@ export function createSkylineColour(models) {
             }
             for (const { material, grey, colour } of flat)
                 material.color.copy(next ? colour : grey);
-            for (const reflect of reflections)
-                reflect(next);
+            for (const { light } of facades)
+                light(next);
+            updateNight();
+        },
+        setSky(colours) {
+            for (const { light } of facades)
+                light.setSky(colours ?? daylightReflections);
+        },
+        setNight(lighting) {
+            night = lighting;
+            updateNight();
         },
         refresh() {
+            updateNight();
             if (!enabled)
                 return;
             for (const batch of painted) {

package/lib/models/colour-palette.d.ts

@@ -6,3 +6,35 @@ export declare const daylightColours: {
     readonly horizon: 12898785;
     readonly sun: 16774374;
 };
+export declare const nightColours: {
+    readonly ambient: 10596296;
+    readonly fill: 9281469;
+    readonly window: 16764817;
+    readonly windowWhite: 16772558;
+};
+export declare const timeOfDayColours: readonly [{
+    readonly elevation: -18;
+    readonly sky: 132108;
+    readonly horizon: 527643;
+    readonly sun: 16756855;
+}, {
+    readonly elevation: -8;
+    readonly sky: 1319749;
+    readonly horizon: 5984878;
+    readonly sun: 16756086;
+}, {
+    readonly elevation: -2;
+    readonly sky: 4283273;
+    readonly horizon: 15244153;
+    readonly sun: 16757879;
+}, {
+    readonly elevation: 6;
+    readonly sky: 8560581;
+    readonly horizon: 15778720;
+    readonly sun: 16766120;
+}, {
+    readonly sky: 10402779;
+    readonly horizon: 12898785;
+    readonly sun: 16774374;
+    readonly elevation: 25;
+}];

package/lib/models/colour-palette.js

@@ -290,3 +290,14 @@ export const measuredColours = {
 // above the horizon, each the median of a clear box of the same panorama (scripts/sample-colours.ts,
 // the day study's sky), and the sun's warm white, chosen.
 export const daylightColours = { sky: 0x9ebbdb, horizon: 0xc4d1e1, sun: 0xfff4e6 };
+// Art-directed night illumination: quiet cool facades and a mix of warm office lamps.
+export const nightColours = { ambient: 0xa1afc8, fill: 0x8d9fbd, window: 0xffcf91, windowWhite: 0xffedce };
+// Illustrated clear-sky time previews. Solar elevation chooses the stops; these are
+// artistic colours, separate from the photograph-calibrated daytime palette above.
+export const timeOfDayColours = [
+    { elevation: -18, sky: 0x02040c, horizon: 0x080d1b, sun: 0xffb077 },
+    { elevation: -8, sky: 0x142345, horizon: 0x5b526e, sun: 0xffad76 },
+    { elevation: -2, sky: 0x415b89, horizon: 0xe89b79, sun: 0xffb477 },
+    { elevation: 6, sky: 0x829fc5, horizon: 0xf0c3a0, sun: 0xffd4a8 },
+    { elevation: 25, ...daylightColours },
+];

package/lib/models/colour-reflections.d.ts

@@ -1,2 +1,14 @@
 import * as THREE from "../vendor/three-r186.js";
-export declare function glassReflection(material: THREE.MeshToonMaterial, geometry: THREE.BufferGeometry, mask: Float32Array): (enabled: boolean) => void;
+import type { NightLighting } from "./night-windows.js";
+export interface ReflectionColours {
+    sky: number;
+    horizon: number;
+    ground: number;
+}
+export declare const daylightReflections: ReflectionColours;
+export interface GlassReflection {
+    (enabled: boolean): void;
+    setSky(colours: ReflectionColours): void;
+    setNight(lighting: NightLighting | null, coloured: boolean, celebration: boolean): void;
+}
+export declare function glassReflection(material: THREE.MeshToonMaterial, geometry: THREE.BufferGeometry, mask: Float32Array, windows?: Float32Array): GlassReflection;

package/lib/models/colour-reflections.js

@@ -1,32 +1,51 @@
 import * as THREE from "../vendor/three-r186.js";
-import { daylightColours } from "./colour-palette.js";
+import { daylightColours, nightColours } from "./colour-palette.js";
+export const daylightReflections = { ...daylightColours, ground: 0x444444 };
 // A small sky reflection over the measured glass colour. This is an illustration of an open
 // sky, not a reflection of nearby buildings or a replacement for the toon renderer. The mask
 // separates glass from masonry and mullions even when the builder batches them in one mesh.
-// Install only in colour mode, and restore the original shader on exit. Keep the mask attached
-// once used so Three.js releases its GPU buffer when it disposes the geometry.
-export function glassReflection(material, geometry, mask) {
+// The same shader adds night-window emission, independently of material colour. Restore the
+// original shader outside colour/time previews. Keep attributes attached once used so Three.js
+// releases their GPU buffers when it disposes the geometry.
+export function glassReflection(material, geometry, mask, windows = new Float32Array(mask.length * 4)) {
     const attribute = new THREE.Float32BufferAttribute(mask, 1);
+    const windowAttribute = new THREE.Float32BufferAttribute(windows, 4);
     const originalCompile = material.onBeforeCompile, originalKey = material.customProgramCacheKey;
     const key = originalKey.call(material);
     const uniforms = {
         skylineSky: { value: new THREE.Color(daylightColours.sky) },
         skylineHorizon: { value: new THREE.Color(daylightColours.horizon) },
         skylineGround: { value: new THREE.Color(0x444444) },
+        skylineReflecting: { value: 0 },
+        skylineDarkness: { value: 0 },
+        skylineActivity: { value: 0 },
+        skylineWindowsSuppressed: { value: 0 },
+        skylineWindowWarm: { value: new THREE.Color(nightColours.window) },
+        skylineWindowWhite: { value: new THREE.Color(nightColours.windowWhite) },
     };
     const compile = (shader, renderer) => {
         originalCompile.call(material, shader, renderer);
         Object.assign(shader.uniforms, uniforms);
         shader.vertexShader = shader.vertexShader.replace("#include <common>", `#include <common>
 attribute float skylineGlass;
-varying float vSkylineGlass;`).replace("#include <begin_vertex>", `#include <begin_vertex>
-vSkylineGlass = skylineGlass;`);
+attribute vec4 skylineWindow;
+varying float vSkylineGlass;
+varying vec4 vSkylineWindow;`).replace("#include <begin_vertex>", `#include <begin_vertex>
+vSkylineGlass = skylineGlass;
+vSkylineWindow = skylineWindow;`);
         shader.fragmentShader = shader.fragmentShader.replace("#include <common>", `#include <common>
 varying float vSkylineGlass;
+varying vec4 vSkylineWindow;
 uniform vec3 skylineSky;
 uniform vec3 skylineHorizon;
-uniform vec3 skylineGround;`).replace("#include <opaque_fragment>", `
-if (vSkylineGlass > 0.0) {
+uniform vec3 skylineGround;
+uniform float skylineReflecting;
+uniform float skylineDarkness;
+uniform float skylineActivity;
+uniform float skylineWindowsSuppressed;
+uniform vec3 skylineWindowWarm;
+uniform vec3 skylineWindowWhite;`).replace("#include <opaque_fragment>", `
+if (vSkylineGlass > 0.0 && skylineReflecting > 0.0) {
   vec3 eye = vec3(0.0);
   eye.z = 1.0;
   if (!isOrthographic) eye = normalize(vViewPosition);
@@ -36,18 +55,58 @@ if (vSkylineGlass > 0.0) {
   float grazing = pow(1.0 - clamp(dot(normal, eye), 0.0, 1.0), 5.0);
   outgoingLight = mix(outgoingLight, environment, vSkylineGlass * (0.06 + 0.54 * grazing));
 }
+if (vSkylineWindow.z > 0.0 && skylineDarkness > 0.0) {
+  float occupied = 1.0 - smoothstep(skylineActivity - 0.05, skylineActivity + 0.05, vSkylineWindow.x);
+  float dusk = smoothstep(0.12 + 0.35 * vSkylineWindow.x, 0.45 + 0.35 * vSkylineWindow.x, skylineDarkness);
+  float light = vSkylineWindow.z > 1.5 ? skylineDarkness : occupied * dusk * (1.0 - skylineWindowsSuppressed);
+  vec3 lamp = mix(skylineWindowWarm, skylineWindowWhite, vSkylineWindow.w);
+  outgoingLight += lamp * vSkylineWindow.y * light;
+}
 #include <opaque_fragment>`);
     };
-    return (enabled) => {
+    let reflecting = false, night = false, installed = false;
+    function install() {
+        const enabled = reflecting || night;
+        if (enabled === installed)
+            return;
+        installed = enabled;
         if (enabled) {
             geometry.setAttribute("skylineGlass", attribute);
+            geometry.setAttribute("skylineWindow", windowAttribute);
             material.onBeforeCompile = compile;
-            material.customProgramCacheKey = () => `${key}:skyline-glass-v1`;
+            material.customProgramCacheKey = () => `${key}:skyline-facade-v2`;
         }
         else {
             material.onBeforeCompile = originalCompile;
             material.customProgramCacheKey = originalKey;
         }
         material.needsUpdate = true;
+    }
+    const set = (enabled) => {
+        reflecting = enabled;
+        uniforms.skylineReflecting.value = enabled ? 1 : 0;
+        install();
     };
+    return Object.assign(set, {
+        setSky(colours) {
+            uniforms.skylineSky.value.setHex(colours.sky);
+            uniforms.skylineHorizon.value.setHex(colours.horizon);
+            uniforms.skylineGround.value.setHex(colours.ground);
+        },
+        setNight(lighting, coloured, celebration) {
+            night = lighting !== null;
+            // A deliberately composed celebration takes precedence over ordinary office rooms.
+            uniforms.skylineDarkness.value = lighting?.darkness ?? 0;
+            uniforms.skylineWindowsSuppressed.value = celebration ? 1 : 0;
+            uniforms.skylineActivity.value = lighting?.activity ?? 0;
+            for (const [uniform, hex] of [[uniforms.skylineWindowWarm, nightColours.window], [uniforms.skylineWindowWhite, nightColours.windowWhite]]) {
+                uniform.value.setHex(hex);
+                if (!coloured) {
+                    const { r, g, b } = uniform.value, grey = r * 0.2126 + g * 0.7152 + b * 0.0722;
+                    uniform.value.setRGB(grey, grey, grey);
+                }
+            }
+            install();
+        },
+    });
 }

package/lib/models/night-windows.d.ts

@@ -0,0 +1,13 @@
+import type * as THREE from "../vendor/three-r186.js";
+import type { MaterialName } from "./colour-materials.js";
+export interface NightLighting {
+    /** Sunset/dawn transition, from daylight (0) to full darkness (1). */
+    darkness: number;
+    /** Illustrative occupancy, not a record of actual tenants or working hours. */
+    activity: number;
+    /** Unlit drawing outlines must dim with the surrounding architecture. */
+    outlineStrength: number;
+}
+export declare const smooth: (low: number, high: number, value: number) => number;
+export declare function windowActivity(hour: number): number;
+export declare function nightWindowMask(geometry: THREE.BufferGeometry, buildingId: string, materialOf: (vertex: number) => MaterialName): Float32Array;

package/lib/models/night-windows.js

@@ -0,0 +1,76 @@
+export const smooth = (low, high, value) => {
+    const t = Math.max(0, Math.min(1, (value - low) / (high - low)));
+    return t * t * (3 - 2 * t);
+};
+// A continuous daily cycle: busy evenings, a few overnight rooms, then early arrivals.
+// Midnight shares the same curve from either side, including when scrubbing backwards.
+export function windowActivity(hour) {
+    const late = hour < 12 ? hour + 24 : hour;
+    return 0.76 - 0.52 * smooth(21, 26, late) + 0.3 * smooth(29, 32, late) + (hour < 12 ? 0.22 * smooth(8, 12, hour) : 0);
+}
+function hash(value) {
+    let seed = 2166136261;
+    for (const character of value)
+        seed = Math.imul(seed ^ character.charCodeAt(0), 16777619);
+    // Avalanche adjacent room keys: plain FNV leaves trailing bay digits correlated,
+    // making a whole east-facing floor turn on together instead of small room groups.
+    seed = Math.imul(seed ^ (seed >>> 16), 0x85ebca6b);
+    seed = Math.imul(seed ^ (seed >>> 13), 0xc2b2ae35);
+    seed ^= seed >>> 16;
+    return (seed >>> 0) / 4294967296;
+}
+const architectural = new Set(["lamp", "crown lights", "band lights", "sign letters", "cap lights"]);
+// The building kit emits panes as paired triangles, interspersed with standalone
+// triangles for other features. Find shared edges rather than assuming quad alignment.
+// Reuse those exact surfaces;
+// never turn a generic glass shell, spandrel, masonry face or roof into a light source.
+// Adjacent bays share a floor/room seed, so offices come on in small groups. Identity
+// depends on local geometry and building ID, not load order, camera or slider direction.
+export function nightWindowMask(geometry, buildingId, materialOf) {
+    const positions = geometry.getAttribute("position"), normals = geometry.getAttribute("normal");
+    const mask = new Float32Array(positions.count * 4);
+    const samePoint = (a, b) => positions.getX(a) === positions.getX(b) && positions.getY(a) === positions.getY(b) && positions.getZ(a) === positions.getZ(b);
+    for (let first = 0; first < positions.count;) {
+        const name = materialOf(first), crown = architectural.has(name);
+        const window = name === "lit window" || name === "dim window";
+        if (!crown && (!window || Math.abs(normals.getY(first)) > 0.5)) {
+            first += 3;
+            continue;
+        }
+        let count = 3;
+        if (first + 6 <= positions.count && materialOf(first + 3) === name
+            && normals.getX(first) === normals.getX(first + 3) && normals.getY(first) === normals.getY(first + 3) && normals.getZ(first) === normals.getZ(first + 3)) {
+            let shared = 0;
+            for (let a = first; a < first + 3; a += 1) {
+                for (let b = first + 3; b < first + 6; b += 1)
+                    if (samePoint(a, b)) {
+                        shared += 1;
+                        break;
+                    }
+            }
+            if (shared === 2)
+                count = 6;
+        }
+        const end = first + count;
+        let x = 0, y = 0, z = 0;
+        for (let vertex = first; vertex < end; vertex += 1) {
+            x += positions.getX(vertex);
+            y += positions.getY(vertex);
+            z += positions.getZ(vertex);
+        }
+        const floor = Math.round(y / count / 3.4), across = Math.floor(x / count / 7), depth = Math.floor(z / count / 7);
+        const room = hash(`${buildingId}:${floor}:${across}:${depth}`);
+        const brightness = hash(`${buildingId}:${floor}:${across}:${depth}:brightness`);
+        for (let vertex = first; vertex < end; vertex += 1) {
+            if (materialOf(vertex) !== name)
+                continue;
+            const rank = name === "lit window" ? 0.05 + room * 0.8 : 0.3 + room * 0.75;
+            mask[vertex * 4] = rank;
+            mask[vertex * 4 + 1] = crown ? 0.3 : 0.25 + brightness * 0.45;
+            mask[vertex * 4 + 2] = crown ? 2 : 1;
+            mask[vertex * 4 + 3] = brightness;
+        }
+        first = end;
+    }
+    return mask;
+}

package/lib/skyline-package.d.ts

@@ -18,6 +18,8 @@ export interface SkylineOptions {
     readonly controls?: "open" | "closed";
     /** Start in the opt-in sunny-day colour view. Greyscale by default. */
     readonly colour?: boolean;
+    /** Loading backdrop and trace. Defaults to light with colour: true, dark otherwise. */
+    readonly theme?: "light" | "dark";
     /**
      * Show the OpenStreetMap credit with the 3D scene's controls. Shown by default. OpenStreetMap's
      * licence requires that credit wherever its data appears, so hide it only when the host page
@@ -38,4 +40,4 @@ export interface SkylineOptions {
  * size and placement: give it an explicit height. Call `destroy` when the hosting component
  * leaves.
  */
-export declare function mountSkyline(container: HTMLElement, { assetsUrl, title, controls, colour, attribution, three }: SkylineOptions): SkylineInstance;
+export declare function mountSkyline(container: HTMLElement, { assetsUrl, title, controls, colour, theme, attribution, three }: SkylineOptions): SkylineInstance;

package/lib/skyline-package.js

@@ -8,10 +8,10 @@ import { mountViewer } from "./skyline-shell.js";
  * size and placement: give it an explicit height. Call `destroy` when the hosting component
  * leaves.
  */
-export function mountSkyline(container, { assetsUrl, title = "Interactive Chicago skyline", controls = "closed", colour = false, attribution = true, three }) {
+export function mountSkyline(container, { assetsUrl, title = "Interactive Chicago skyline", controls = "closed", colour = false, theme, attribution = true, three }) {
     if (controls !== "open" && controls !== "closed")
         throw new TypeError('Skyline controls must be "open" or "closed".');
     if (typeof colour !== "boolean")
         throw new TypeError("Skyline colour must be a boolean.");
-    return mountViewer(container, { assetsUrl, title, controls, colour, attribution, navigation: false, page: false, three });
+    return mountViewer(container, { assetsUrl, title, controls, colour, theme, attribution, navigation: false, page: false, three });
 }

package/lib/skyline-shell.d.ts

@@ -13,6 +13,8 @@ export interface ViewerContext {
     readonly controls: "open" | "closed";
     /** Start the scene and its building details in sunny-day colour. */
     readonly colour?: boolean;
+    /** Loading backdrop and trace; defaults to light for colour, dark otherwise. */
+    readonly theme: "light" | "dark";
     /** Show the OpenStreetMap credit with the scene's controls. */
     readonly attribution: boolean;
     /**
@@ -56,7 +58,8 @@ export interface SkylineInstance {
      */
     destroy(): void;
 }
-export interface ViewerOptions extends Omit<ViewerContext, "assets" | "signal"> {
+export interface ViewerOptions extends Omit<ViewerContext, "assets" | "signal" | "theme"> {
+    readonly theme?: "light" | "dark" | undefined;
     /** The assets' directory; relative URLs resolve against the container's document. */
     readonly assetsUrl: string | URL;
     /** The viewer's accessible name: `element` is a region with this label. */

package/lib/skyline-shell.js

@@ -33,7 +33,7 @@ function loaded(link) {
 // mirroring the viewer's layout, and the rest sizes it to fill the container.
 const HOST_STYLE = "all:initial;direction:ltr;display:block;position:relative;isolation:isolate;width:100%;height:100%;overflow:hidden";
 // The failure message's own look, since the viewer's stylesheets may be what failed.
-const FAILURE_STYLE = "box-sizing:border-box;height:100%;margin:0;padding:24px;background:#000;color:#aaa;font:12px/1.5 ui-monospace,monospace";
+const FAILURE_STYLE = "box-sizing:border-box;height:100%;margin:0;padding:24px;background:inherit;color:inherit;font:12px/1.5 ui-monospace,monospace";
 /** Shows why the viewer couldn't start, in place of the viewer. */
 function showFailure(root, error) {
     const message = root.ownerDocument.createElement("p");
@@ -49,8 +49,16 @@ function showFailure(root, error) {
 export function mountViewer(container, { assetsUrl, title, ...options }) {
     const document = container.ownerDocument;
     const assets = assetsBase(document, assetsUrl);
+    const theme = options.theme === undefined ? (options.colour ? "light" : "dark") : options.theme;
+    if (theme !== "light" && theme !== "dark")
+        throw new TypeError('Skyline theme must be "light" or "dark".');
     const element = document.createElement("div");
     element.style.cssText = HOST_STYLE;
+    // Paint before any assets arrive, including when a stylesheet fails to load.
+    // Keep the boot palette in sync with viewer.css and index.html.
+    element.style.colorScheme = theme;
+    element.style.backgroundColor = theme === "light" ? "#f5f5f5" : "#000";
+    element.style.color = theme === "light" ? "#444" : "#aaa";
     element.setAttribute("role", "region");
     element.setAttribute("aria-label", title);
     element.setAttribute("aria-busy", "true");
@@ -70,7 +78,7 @@ export function mountViewer(container, { assetsUrl, title, ...options }) {
         Promise.resolve(options.three).catch(() => { });
     const controller = new AbortController();
     let destroyed = false, mounted = false;
-    const context = { ...options, assets, signal: controller.signal };
+    const context = { ...options, theme, assets, signal: controller.signal };
     const ready = new Promise((resolve, reject) => {
         Promise.all([importViewer(new URL(VIEWER, assets).href), ...stylesheets.map(loaded)])
             .then(async ([viewer]) => {

package/lib/study-types.d.ts

@@ -49,6 +49,8 @@ export interface StudyLabel {
 }
 export interface Daylight {
     sky: THREE.Texture;
+    /** Unit vector toward the sun in world east/up/south coordinates. */
+    direction?: Vec3;
     sun: readonly [colour: number, intensity: number];
     ambient: readonly [colour: number, intensity: number];
     fill: readonly [colour: number, intensity: number];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a2f0/skyline",
-  "version": "0.2.20",
+  "version": "0.2.23",
   "description": "Interactive Chicago skyline viewer and reusable Three.js building models",
   "license": "UNLICENSED",
   "repository": {

package/site/building-detail.js

@@ -2,7 +2,8 @@ import * as THREE from "./vendor/three-r186.js";
 import { createBuildingStudy } from "./study-viewer.js";
 import { skylineAzimuth } from "./skyline-comparison.js";
 import { geographicBuildings } from "./models/skyline-geography-data.js";
-import { createGeographicBuilding, footprintMetrics } from "./models/skyline-geography.js";
+import { createGeographicBuilding, footprintMetrics, geographicOrigin } from "./models/skyline-geography.js";
+import { createTimeLighting } from "./time-of-day.js";
 import { createDaylight, createSkylineColour } from "./models/colour-materials.js";
 // One mapped building of the 3D skyline, alone on its own platform, as the building study
 // shows Crain: building-detail.html?building=<id>, and the panel the 3D skyline floats over
@@ -82,14 +83,30 @@ function showBuilding(record, root, frame, signal, initiallyColoured, onColourCh
     });
     const colour = createSkylineColour([model]), button = root.querySelector("#colour");
     let daylight;
-    signal.addEventListener("abort", () => daylight?.sky.dispose(), { once: true });
+    let selectedTime = null;
+    let timeLight;
+    signal.addEventListener("abort", () => { daylight?.sky.dispose(); timeLight?.dispose(); }, { once: true });
     function setColour(enabled) {
         colour.set(enabled);
-        if (enabled)
-            daylight ??= createDaylight();
-        viewer.setDaylight(enabled ? daylight : null);
+        if (selectedTime) {
+            // Each renderer owns its sky texture and disposal listeners. Sharing the parent's
+            // texture would retain closed detail renderers until the whole skyline is destroyed.
+            timeLight ??= createTimeLighting(geographicOrigin[1], geographicOrigin[0], false);
+            const lighting = timeLight.update(selectedTime, enabled);
+            colour.setSky(lighting.reflections);
+            colour.setNight(lighting.night);
+            viewer.setDaylight(lighting);
+        }
+        else {
+            if (enabled)
+                daylight ??= createDaylight();
+            colour.setSky(null);
+            colour.setNight(null);
+            viewer.setDaylight(enabled ? daylight : null);
+        }
         button.setAttribute("aria-pressed", String(enabled));
-        button.title = enabled ? "Restore the building's greyscale view" : "Show the building in sunny-day colour";
+        button.title = selectedTime ? (enabled ? "Show this time in greyscale" : "Show this time in colour")
+            : enabled ? "Restore the building's greyscale view" : "Show the building in sunny-day colour";
     }
     button.addEventListener("click", () => {
         setColour(!colour.enabled);
@@ -97,7 +114,13 @@ function showBuilding(record, root, frame, signal, initiallyColoured, onColourCh
     }, { signal });
     if (initiallyColoured)
         setColour(true);
-    return { setColour };
+    return {
+        setColour,
+        setTime(date, coloured) {
+            selectedTime = date;
+            setColour(coloured);
+        },
+    };
 }
 // Sources open beside the page, so a detail floated over the skyline stays where it is.
 function link(document, href, text) {

package/site/index.html

@@ -25,7 +25,7 @@
         height: 100%;
         margin: 0;
         overflow: hidden;
-        background: #000;
+        background: inherit;
       }
 
       .notice {
@@ -35,7 +35,20 @@
         color: #aaa;
         font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
       }
+      /* Keep the boot palette in sync with skyline-shell.ts and viewer.css. */
+      :root[data-theme="light"] { color-scheme: light; background: #f5f5f5; }
+      :root[data-theme="light"] .notice { color: #444; }
     </style>
+    <script>
+      // Apply the backdrop before first paint, while the viewer modules load.
+      {
+        const settings = new URLSearchParams(location.search);
+        const light = settings.get("theme") === "light" ||
+          (settings.get("theme") !== "dark" && settings.get("colour") === "1");
+        document.documentElement.dataset.theme = light ? "light" : "dark";
+        document.querySelector('meta[name="theme-color"]').content = light ? "#f5f5f5" : "#000000";
+      }
+    </script>
   </head>
   <body>
     <!-- The viewer renders into a shadow root inside this element, as in a host's page. -->