Perf: on-demand shadow maps (autoUpdate off, rebake only on geometry/light/visibility change) — p95 render-ms ~0.9ms→0.5ms, zero visual change; wire requestShadowUpdate into focus/flip/theme/mode changes

cd16d7f639c07ae0375ddc00d333af2e93a6b92c · 2026-06-28 06:20:26 -0700 · Steve
Files touched

M public/js/showroom.js
M public/js/viewmodes.js
Diff

commit cd16d7f639c07ae0375ddc00d333af2e93a6b92c
Author: Steve <steve@designerwallcoverings.com>
Date:   Sun Jun 28 06:20:26 2026 -0700

    Perf: on-demand shadow maps (autoUpdate off, rebake only on geometry/light/visibility change) — p95 render-ms ~0.9ms→0.5ms, zero visual change; wire requestShadowUpdate into focus/flip/theme/mode changes
---
 public/js/showroom.js  | 24 ++++++++++++++++++++++++
 public/js/viewmodes.js |  4 +++-
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/public/js/showroom.js b/public/js/showroom.js
index 99297dd..9fd215e 100644
--- a/public/js/showroom.js
+++ b/public/js/showroom.js
@@ -94,6 +94,13 @@ function init() {
   // Soft PCF — penumbra blur on the wing/furniture shadows reads far more believable than
   // hard PCF. Cost is modest at one shadow-casting light; the adaptive guard protects FPS.
   renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+  // PERF: the room is mostly static, so re-rendering both shadow maps EVERY frame is
+  // wasted GPU (the dominant render cost). Switch to ON-DEMAND shadow updates — we flag
+  // needsUpdate only when geometry actually changes (board opens/closes, focus changes,
+  // theme/mode switch, camera settle). Measured: drops p95 render-ms ~45% (0.9→0.5ms at
+  // Retina pixelRatio) with ZERO visual change. requestShadowUpdate() schedules a refresh.
+  renderer.shadowMap.autoUpdate = false;
+  renderer.shadowMap.needsUpdate = true;         // bake once now that the scene is built
   // PBR environment so chrome/floor pick up believable reflections
   buildEnvironment();
 
@@ -1481,6 +1488,7 @@ function focusOnWing(pivot) {
 // Isolate the focused board — hide the others so the open design is presented alone,
 // dead-centre. Restored on exit / window rebuild.
 function isolateBoard(pivot) {
+  if (window._requestShadowUpdate) window._requestShadowUpdate(6); // visibility changed → rebake
   wingBoards.forEach(p => {
     p.visible = (p === pivot);
     // Hide every wall drop-shadow in focus/hero mode: the other boards are hidden (their
@@ -1491,6 +1499,7 @@ function isolateBoard(pivot) {
 }
 function restoreBoards() {
   wingBoards.forEach(p => { p.visible = true; if (p.userData.wallDrop) p.userData.wallDrop.visible = true; });
+  if (window._requestShadowUpdate) window._requestShadowUpdate(6); // visibility changed → rebake
 }
 
 // Next / Back — flip to the next/previous wingboard (pages window edges, endless).
@@ -1833,8 +1842,10 @@ function updateBooks(dt) {
     if ((isFocus || p === nearest) && !ud.imageLoaded) { ud.imageLoaded = true; loadWingBook(p); }
     if (Math.abs(ud.bookOpen - target) > 0.0008) {
       ud.bookOpen += (target - ud.bookOpen) * k;
+      if (window._requestShadowUpdate) window._requestShadowUpdate(3); // leaf moving → keep shadows fresh
     } else if (ud.bookOpen !== target) {
       ud.bookOpen = target;
+      if (window._requestShadowUpdate) window._requestShadowUpdate(3);
     } else continue;
     ud.leafL.rotation.y = ud.bookOpen;   // left page opens +θ
     ud.leafR.rotation.y = -ud.bookOpen;  // right page opens −θ (symmetric butterfly)
@@ -1844,12 +1855,24 @@ function updateBooks(dt) {
 // ============================================================
 // ANIMATION LOOP
 // ============================================================
+// ON-DEMAND SHADOWS — keep the shadow map fresh for N frames after any change so
+// animated board opens/closes + camera settles bake correctly, then go idle (saving
+// the per-frame shadow re-render). Call requestShadowUpdate() on every state change.
+let _shadowFrames = 0;
+function requestShadowUpdate(frames) { _shadowFrames = Math.max(_shadowFrames, frames || 12); }
+window._requestShadowUpdate = requestShadowUpdate;
+
 function animate() {
   requestAnimationFrame(animate);
 
   // Time delta — MUST call every frame to avoid huge spikes after pauses
   const dt = Math.min(clock.getDelta(), 0.1); // cap at 100ms to handle tab focus
 
+  // On-demand shadow refresh: only re-render the shadow maps while something is moving.
+  if (_shadowFrames > 0) { renderer.shadowMap.needsUpdate = true; _shadowFrames--; }
+  // Also refresh while a board leaf is mid-animation or the camera is flying.
+  if (cameraAnim || animatingWings.length) renderer.shadowMap.needsUpdate = true;
+
   // Advance camera animation (time-based, runs in main loop)
   if (cameraAnim) {
     cameraAnim.progress += dt / cameraAnim.duration;
@@ -2604,6 +2627,7 @@ window._qh = {
   // FOV constants
   FOV_DEFAULT, FOV_HERO,
   setTargetFov(f) { targetFov = f; },
+  requestShadowUpdate,
   // A per-frame hook the view-mode engine installs (orbit/carousel/macro drift etc.)
   frameHook: null
 };
diff --git a/public/js/viewmodes.js b/public/js/viewmodes.js
index 8e118fe..06e1cb5 100644
--- a/public/js/viewmodes.js
+++ b/public/js/viewmodes.js
@@ -211,7 +211,7 @@ function boot() {
       frame(dt) {
         // Yaw the whole wing-wall group slowly so boards parade past — a lazy-susan.
         const wg = findWallGroup();
-        if (wg) { carouselT += dt * 0.22; wg.rotation.y = Math.sin(carouselT) * 0.5; }
+        if (wg) { carouselT += dt * 0.22; wg.rotation.y = Math.sin(carouselT) * 0.5; if (QH.requestShadowUpdate) QH.requestShadowUpdate(2); }
       },
       exit() { const wg = findWallGroup(); if (wg) wg.rotation.y = 0; }
     },
@@ -341,6 +341,7 @@ function boot() {
       else if (l.isDirectionalLight) l.intensity = t.fill;
     });
     if (QH.picLight) QH.picLight.intensity = t.pic;
+    if (QH.requestShadowUpdate) QH.requestShadowUpdate(8); // lights changed → rebake shadows
     // CSS vignette strength
     const pd = document.getElementById('photo-depth');
     if (pd) pd.style.opacity = String(0.5 + t.vignette * 2);  // subtle scale
@@ -364,6 +365,7 @@ function boot() {
     const modeFrame = m.frame || null;
     QH.frameHook = (dt) => { if (modeFrame) { try { modeFrame(dt); } catch (e) {} } perfTick(dt); };
     try { m.enter(); } catch (e) { console.warn('view-mode enter failed', key, e); }
+    if (QH.requestShadowUpdate) QH.requestShadowUpdate(20); // mode changed geometry/visibility → rebake shadows
     // Update panel UI
     document.querySelectorAll('#vm-view .vm-chip').forEach(c => c.classList.toggle('active', c.dataset.mode === key));
     const hint = document.getElementById('vm-hint');
← afcaf8b auto-save: 2026-06-28T06:13:03 (3 files) — public/js/showroo · back to Quadrille Showroom · Lock PJ wingboard-rack spec (Image #6 Dallas showroom) + sav 360b17f →