@a2f0/skyline 0.2.60 → 0.2.61

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

@@ -44,3 +44,13 @@ export interface SkylineColour {
     refresh(): void;
 }
 export declare function createSkylineColour(models: readonly BuildingModel[]): SkylineColour;
+/** A colour layer that is made on first use; see `deferSkylineColour`. */
+export interface DeferredSkylineColour extends SkylineColour {
+    /**
+     * Makes the layer now, if it isn't made yet. Call it before anything rewrites the buildings'
+     * colours, such as a celebration's window illumination: the layer reads their greys once,
+     * when it is made.
+     */
+    prepare(): void;
+}
+export declare function deferSkylineColour(models: readonly BuildingModel[]): DeferredSkylineColour;

package/lib/models/colour-materials.js

@@ -506,3 +506,43 @@ export function createSkylineColour(models) {
         },
     };
 }
+// Making the layer reads every vertex of every building, a large share of the scene's start-up
+// time, and changes nothing on screen until colour, a previewed time or a celebration needs it:
+// its facade shaders install only then (colour-reflections.ts). So this one is made on first
+// use, or by `prepare`, from the same buildings and with the sky and night it was given
+// meanwhile, and acts from then on exactly as one made at once.
+export function deferSkylineColour(models) {
+    let layer;
+    let sky, night = null;
+    const made = () => {
+        if (layer)
+            return layer;
+        layer = createSkylineColour(models);
+        if (sky !== undefined)
+            layer.setSky(sky);
+        if (night)
+            layer.setNight(night);
+        return layer;
+    };
+    return {
+        get enabled() { return layer?.enabled ?? false; },
+        prepare() { made(); },
+        set(enabled) {
+            if (layer || enabled)
+                made().set(enabled);
+        },
+        setSky(colours) {
+            sky = colours;
+            layer?.setSky(colours);
+        },
+        setNight(lighting) {
+            night = lighting;
+            if (layer)
+                layer.setNight(lighting);
+            else if (lighting)
+                made();
+        },
+        // Until it is made, nothing shows colour or a previewed night for it to refresh.
+        refresh() { layer?.refresh(); },
+    };
+}

package/package.json

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

package/site/models/colour-materials.js

@@ -506,3 +506,43 @@ export function createSkylineColour(models) {
         },
     };
 }
+// Making the layer reads every vertex of every building, a large share of the scene's start-up
+// time, and changes nothing on screen until colour, a previewed time or a celebration needs it:
+// its facade shaders install only then (colour-reflections.ts). So this one is made on first
+// use, or by `prepare`, from the same buildings and with the sky and night it was given
+// meanwhile, and acts from then on exactly as one made at once.
+export function deferSkylineColour(models) {
+    let layer;
+    let sky, night = null;
+    const made = () => {
+        if (layer)
+            return layer;
+        layer = createSkylineColour(models);
+        if (sky !== undefined)
+            layer.setSky(sky);
+        if (night)
+            layer.setNight(night);
+        return layer;
+    };
+    return {
+        get enabled() { return layer?.enabled ?? false; },
+        prepare() { made(); },
+        set(enabled) {
+            if (layer || enabled)
+                made().set(enabled);
+        },
+        setSky(colours) {
+            sky = colours;
+            layer?.setSky(colours);
+        },
+        setNight(lighting) {
+            night = lighting;
+            if (layer)
+                layer.setNight(lighting);
+            else if (lighting)
+                made();
+        },
+        // Until it is made, nothing shows colour or a previewed night for it to refresh.
+        refresh() { layer?.refresh(); },
+    };
+}

package/site/skyline-3d.js

@@ -4,7 +4,7 @@ import { chicagoDay, chicagoTime } from "./solar-time.js";
 import { createTimeLighting } from "./time-of-day.js";
 import { createGeographicRoads, geographicOrigin } from "./models/skyline-geography.js";
 import { celebrations } from "./models/celebrations.js";
-import { createDaylight, createSkylineColour, daylightGround } from "./models/colour-materials.js";
+import { createDaylight, daylightGround, deferSkylineColour } from "./models/colour-materials.js";
 import { loadMarkup, loadStylesheet } from "./markup.js";
 // The skyline viewer's full-screen 3D mode: every mapped building, seen through the
 // drawing's own camera and framed as the viewer frames the drawing, so each tower stands
@@ -60,8 +60,9 @@ export function startSkyline3d({ root, frame, assets, signal, colour: initiallyC
         enablePan: true,
         minimumCameraHeight: 1,
     });
-    // The colour trial's layer (models/colour-materials.ts), which the colour toggle turns on.
-    const colour = createSkylineColour(models);
+    // The colour trial's layer (models/colour-materials.ts), which the colour toggle turns on. It
+    // is made on first use rather than before the first frame, which it does not change.
+    const colour = deferSkylineColour(models);
     // A toolbar badge applies one celebration across the skyline, using each
     // building's own supported wording. Context menus change only their building.
     const illuminated = models.filter((model) => model.illumination);
@@ -69,6 +70,8 @@ export function startSkyline3d({ root, frame, assets, signal, colour: initiallyC
     const celebrationAnnouncement = root.querySelector("#celebration-announcement");
     const celebrationButtons = [...root.querySelectorAll("[data-celebration]")];
     function setCelebration(targets, next) {
+        // The colour layer reads the buildings' greys before the lights rewrite them.
+        colour.prepare();
         targets.forEach((model) => model.illumination.set(model.illumination.presets.some(({ id }) => id === next) ? next : null));
         colour.refresh();
         for (const button of celebrationButtons) {