@displayxr/inline3d 1.18.0 → 1.19.1

package/CHANGELOG.md

@@ -5,6 +5,52 @@ entry points (`.`, `./three`) are frozen for 1.x, while the **scene subpaths** (
 `./splat`, `./model`) are a preview tier whose options may change in any release. Entries below say
 which tier they touch, because that is what tells you whether an upgrade can move your pixels.
 
+## 1.19.1 — 2026-09-24
+
+Touches packaging only (`./splat` and `./model`, `engine: 'playcanvas'`). No pixels move: the
+code is moved, not changed.
+
+### Fixed
+
+- **A bundled app that uses only `./splat` builds again without `meshoptimizer` installed**
+  (#36). This was a regression in 1.16.0.
+  - `setRig('display')` lazily imported `inline3d-model-playcanvas.js` for its look helpers. That
+    module also contains `import('meshoptimizer/decoder')` for `./model`'s optional meshopt
+    decoder.
+  - Bundlers (webpack, Turbopack, Vite/rollup, esbuild) follow every `import()` in the graph, so
+    the build failed with *Can't resolve 'meshoptimizer/decoder'*.
+  - The two generated environments, their yaw constants and `prepareTransmission` now live in a
+    new internal module, `js/inline3d-pc-look.js`. The splat adapter imports that module, which
+    reaches nothing optional. `inline3d-model-playcanvas.js` re-exports every name it exported
+    before.
+  - `./model` still needs `meshoptimizer` only for EXT_meshopt_compression assets, as before.
+  - A unit test walks the import graph from each package entry. It fails if `./splat` reaches
+    meshoptimizer, and also if `./model` stops reaching it.
+  - Gate, on a real GPU: `setRig('display')` vs `addModel` is still **MAE 0.0000** (max 0), mono
+    and stereo, with `antialias: true`. The renders are pixel-identical to the 1.16 gate's.
+
+## 1.19.0 — 2026-09-24
+
+Touches the **preview tier** (`./splat` and `./model`, `engine: 'playcanvas'` only). The defaults
+keep the wheel's pixels. One default does change: a two-finger touch now pinch-zooms (within the
+old 0.2–6 range, with no relax) where it used to act as an erratic one-finger drag.
+
+### Added
+
+- **`zoom: { min, max, relax, ease }`** (#36), bounded zoom that relaxes back to rest.
+  - Wheel, pinch and `setPose` clamp to `[min, max]`. Defaults are 0.2 and 6, as before.
+  - `relax: true` eases back to rest (1×, or the last `setPose` zoom) once the wheel has been idle
+    150 ms or the pinch ends. It uses the orbit's τ 0.6 s, with a landing floor so 2× is exactly
+    home in about 2.9 s, and it never fights a live gesture.
+  - The zoom scales about the focus, so the focus keeps its place and its disparity in both eyes.
+  - The gallery's Spatial View passes `{ min: 1, max: 2, relax: true }`: you can't zoom out past
+    the frame's edges, and a peek comes back on its own.
+- **Two-finger pinch zoom** on the PlayCanvas viewer, with Pointer Events and the same bounds.
+- Gates, on a real GPU (1280×720):
+  - Zooming out is refused: MAE 0 against the rest render.
+  - Wheel and pinch reach the 2× cap and return to **MAE 0** against rest 3 s after release.
+  - In fake stereo, the focus's disparity is unchanged at 1×, 1.5× and 2×.
+
 ## 1.18.0 — 2026-09-24
 
 Touches the **preview tier** (`./splat`, `engine: 'playcanvas'` only). Additive: a page that never

package/README.md

@@ -45,7 +45,8 @@ API is not yet covered by the semver promise below.
 renders the same splat window with the [PlayCanvas](https://playcanvas.com/) engine instead of
 Spark — same handle, same rig/focus/camera-block behaviour, same `perf` presets (mapped onto the
 engine's knobs) — and adds `setSource(src, { fadeMs })` (crossfading asset swaps), `feather`, a
-tilt-and-relax orbit, `handle.engine` (the engine objects, for advanced pages) and
+tilt-and-relax orbit, two-finger pinch plus bounded zoom that relaxes back to rest
+(`zoom: { min, max, relax }`, [§Zoom bounds and relax](docs/playcanvas-adapter.md#zoom-bounds-and-relax)), `handle.engine` (the engine objects, for advanced pages) and
 `handle.setRig('display' | 'camera' | 'auto')`: a live, reversible rig switch, so one persistent tile
 can show a glTF under `handle.engine.root` exactly as `addModel` would and then go back to the photo's
 capture rig ([§setRig](docs/playcanvas-adapter.md#setrig--switching-between-the-display-rig-and-the-camera-rig-36)), and
@@ -176,6 +177,7 @@ js/
                       preview: the `engine: 'playcanvas'` backend of addSplat(), loaded on demand
   inline3d-model-entry.js       experimental: addModel() — picks the engine (PlayCanvas default)
   inline3d-model-playcanvas.js  the PlayCanvas model backend (Sample-Viewer lighting, engine decoders)
+  inline3d-pc-look.js           PlayCanvas look helpers for both adapters (environments, transmission)
   inline3d-model.js             the three.js model backend (engine:'three'; ./model/three)
   inline3d-playcanvas-engine.js named playcanvas imports for both PlayCanvas adapters (tree-shaking)
   inline3d-splat-effects.js     splat shader effects: the runner, the effect registry (PlayCanvas)

package/js/inline3d-model-entry.js

@@ -54,7 +54,7 @@ export function resolveModelEngine(opts = {}) {
 }
 
 /** Options that exist only on the PlayCanvas backend: an error on an explicit engine:'three'. */
-const PLAYCANVAS_ONLY = ['playcanvas', 'environmentRotation', 'controls', 'comfortDepth', 'onBeforeFrame', 'antialias', 'preserveDrawingBuffer', 'nearClip', 'farClip', 'orbitMaxDeg', 'orbitEase'];
+const PLAYCANVAS_ONLY = ['playcanvas', 'environmentRotation', 'controls', 'comfortDepth', 'onBeforeFrame', 'antialias', 'preserveDrawingBuffer', 'nearClip', 'farClip', 'orbitMaxDeg', 'orbitEase', 'zoom'];
 
 /**
  * Everything that can be checked before a module loads. Throws at CALL time — a page bug is true

package/js/inline3d-model-playcanvas.js

@@ -39,6 +39,38 @@
 
 import { PlayCanvasSplatViewer, pageRigTRS, pageViewAxis, pageViewRig } from './inline3d-splat-playcanvas.js';
 import { resolveControls, normalizeCameraPose, now, MAX_DT_S } from './inline3d-splat-shared.js';
+import {
+  NEUTRAL_STUDIO,
+  neutralStudioRadiance,
+  neutralStudioRGBE,
+  ENV_YAW_DEG,
+  useNeutralStudio,
+  useLightingSource,
+  ROOM_ENVIRONMENT,
+  roomRadiance,
+  roomEquirect,
+  roomRGBE,
+  ROOM_YAW_DEG,
+  useRoomEnvironment,
+  prepareTransmission,
+} from './inline3d-pc-look.js';
+
+// The look helpers moved to ./inline3d-pc-look.js (so ./splat never reaches the meshopt decoder
+// below); re-exported so every name this module exported before still resolves here.
+export {
+  NEUTRAL_STUDIO,
+  neutralStudioRadiance,
+  neutralStudioRGBE,
+  ENV_YAW_DEG,
+  useNeutralStudio,
+  ROOM_ENVIRONMENT,
+  roomRadiance,
+  roomEquirect,
+  roomRGBE,
+  ROOM_YAW_DEG,
+  useRoomEnvironment,
+  prepareTransmission,
+};
 
 const TAG = '[inline3d/model]';
 
@@ -234,155 +266,7 @@ export function meshoptBufferViewHook(decoder) {
 }
 
 // ── lighting ────────────────────────────────────────────────────────────────────────────────
-
-/**
- * THE DEFAULT ENVIRONMENT: a neutral photo studio, generated in memory as an equirect radiance
- * map — a floor-to-ceiling brightness profile plus a handful of soft area lights (spherical
- * Gaussians). The parameters were FITTED (least squares, solid-angle weighted) to the glTF Sample
- * Viewer's "Studio Neutral" environment, so that this backend's default lighting matches the
- * Khronos reference; the image itself is ours (a dozen numbers, not a copy of the HDRI), so the
- * SDK ships no asset and carries no attribution requirement. Grey by construction (r = g = b).
- *
- * `profile` is the radiance at evenly spaced polar angles from straight up (0) to straight down
- * (π); `lobes` are [amplitude, sharpness, polar, azimuth] with the direction
- * (sinθ·cosφ, cosθ, sinθ·sinφ) — Y up, the engine's equirect convention. A lobe's amplitude may
- * be negative (a dark backdrop); the result is clamped at 0.
- */
-export const NEUTRAL_STUDIO = Object.freeze({
-  profile: [5.003, 5.049, 3.917, 1.968, 1.378, 0.893, 0.8074, 0.7525, 0.6427, -0.1814],
-  lobes: [
-    [11.31, 4.869, 0.9712, 6.105],
-    [1.759, 3.839, 1.404, 3.558],
-    [0.9139, 1.621, 1.719, 6.239],
-    [0.572, 7.846, 1.497, 6.066],
-    [0.6379, 7.687, 1.42, 6.385],
-    [-0.7782, 6.701, 1.13, 6.133],
-    [-1.263, 8.179, 1.671, 6.188],
-    [-1.456, 7.734, 1.256, 6.568],
-    [-6.7, 0.8014, 0.449, 6.171],
-    [0.4015, 3.915, 1.621, 5.688],
-    [-0.5387, 6.494, 2.828, 5.614],
-    [6.623, 1.864, 0.7199, 6.135],
-    [0.2623, 6.922, 1.755, 5.903],
-    [0.2597, 6.906, 1.566, 5.934],
-    [0.1584, 6.954, 1.514, 6.179],
-    [0.2272, 6.945, 1.422, 5.891],
-    [0.03496, 6.974, 1.414, 6.205],
-    [0.3804, 6.979, 1.393, 6.08],
-  ],
-});
-
-/** Lobes as [amplitude, sharpness, mx, my, mz] — the trig done once per env, not per texel. */
-const _lobeCache = new WeakMap();
-function lobesOf(env) {
-  let l = _lobeCache.get(env);
-  if (!l) {
-    l = env.lobes.map(([a, s, th, ph]) => [a, Math.exp(s), Math.sin(th) * Math.cos(ph), Math.cos(th), Math.sin(th) * Math.sin(ph)]);
-    _lobeCache.set(env, l);
-  }
-  return l;
-}
-
-/** Radiance of NEUTRAL_STUDIO (or `env`) toward unit direction (x, y, z). */
-export function neutralStudioRadiance(x, y, z, env = NEUTRAL_STUDIO) {
-  const prof = env.profile;
-  const n = prof.length - 1;
-  const theta = Math.acos(Math.max(-1, Math.min(1, y)));
-  const t = (theta / Math.PI) * n;
-  const i = Math.min(n - 1, Math.floor(t));
-  const f = t - i;
-  let v = prof[i] * (1 - f) + prof[i + 1] * f;
-  for (const [a, k, mx, my, mz] of lobesOf(env)) v += a * Math.exp(k * (x * mx + y * my + z * mz - 1));
-  return v > 0 ? v : 0;
-}
-
-/** RGBE-encode a grey radiance. */
-function rgbe(v, out, o) {
-  if (!(v > 1e-32)) {
-    out[o] = out[o + 1] = out[o + 2] = out[o + 3] = 0;
-    return;
-  }
-  let e = Math.ceil(Math.log2(v));
-  let m = v / Math.pow(2, e);
-  if (m >= 1) {
-    m /= 2;
-    e += 1;
-  }
-  const b = Math.min(255, Math.floor(m * 256));
-  out[o] = out[o + 1] = out[o + 2] = b;
-  out[o + 3] = e + 128;
-}
-
-/**
- * The equirect as RGBE bytes, row 0 = straight up. `u` runs with the azimuth φ = 2π·u, which is
- * the convention the fit used; the engine's own equirect orientation is applied through
- * `scene.skyboxRotation` (§ ENV_YAW_DEG), not baked in here.
- */
-const _rgbeCache = new Map();
-export function neutralStudioRGBE(width = 256, height = 128, env = NEUTRAL_STUDIO) {
-  // Every tile on a page gets the same image: build it once (a copy per call, since the engine
-  // may keep the array it is handed).
-  const key = env === NEUTRAL_STUDIO ? `${width}x${height}` : null;
-  if (key && _rgbeCache.has(key)) return _rgbeCache.get(key).slice();
-  const out = new Uint8Array(width * height * 4);
-  for (let r = 0; r < height; r++) {
-    const theta = ((r + 0.5) / height) * Math.PI;
-    const st = Math.sin(theta);
-    const y = Math.cos(theta);
-    for (let c = 0; c < width; c++) {
-      const phi = ((c + 0.5) / width) * 2 * Math.PI;
-      rgbe(neutralStudioRadiance(st * Math.cos(phi), y, st * Math.sin(phi), env), out, (r * width + c) * 4);
-    }
-  }
-  if (key) _rgbeCache.set(key, out.slice());
-  return out;
-}
-
-/**
- * Yaw (degrees about +Y) applied to the generated studio, as `scene.skyboxRotation`. Calibrated
- * headless against the Sample Viewer at its default `environmentRotation` (90°): a sweep over
- * 0/90/180/270 × mirrored, then ±15/±30, has a clean minimum at 0 on all four reference models
- * (the engine's equirect convention already lines up with the layout the fit used). Kept as a
- * named constant so a future engine that flips its convention is a one-line fix.
- */
-export const ENV_YAW_DEG = 0;
-
-/** Build the default environment on this app and set it as the scene's envAtlas. */
-export function useNeutralStudio(pc, app, yawDeg) {
-  return useRgbeEquirect(pc, app, 'inline3d-neutral-studio', neutralStudioRGBE(256, 128), 256, 128, yawDeg);
-}
-
-/** A grey RGBE equirect (row 0 = up) → prefiltered envAtlas on the scene. */
-function useRgbeEquirect(pc, app, name, bytes, W, H, yawDeg) {
-  const tex = new pc.Texture(app.graphicsDevice, {
-    name,
-    width: W,
-    height: H,
-    format: pc.PIXELFORMAT_RGBA8,
-    type: pc.TEXTURETYPE_RGBE,
-    projection: pc.TEXTUREPROJECTION_EQUIRECT,
-    mipmaps: false,
-    addressU: pc.ADDRESS_REPEAT,
-    addressV: pc.ADDRESS_CLAMP_TO_EDGE,
-    levels: [bytes],
-  });
-  return useLightingSource(pc, app, tex, true, yawDeg);
-}
-
-/** Any equirect/cube source → prefiltered envAtlas on the scene. */
-function useLightingSource(pc, app, source, own, yawDeg = 0) {
-  const lighting = pc.EnvLighting.generateLightingSource(source);
-  const atlas = pc.EnvLighting.generateAtlas(lighting);
-  lighting.destroy?.();
-  if (own) source.destroy?.();
-  app.scene.envAtlas = atlas;
-  app.scene.skyboxIntensity = 1;
-  app.scene.exposure = 1;
-  // Always written (identity at 0): a later environment on the same scene must not inherit the
-  // previous one's yaw (setRig switches room ↔ neutral on one app).
-  if (pc.Quat) app.scene.skyboxRotation = new pc.Quat().setFromEulerAngles(0, yawDeg || 0, 0);
-  return atlas;
-}
+// (The generated environments and prepareTransmission are in ./inline3d-pc-look.js.)
 
 /** A texture asset from a URL (an equirect .hdr/.png/.jpg for `envMap`). */
 function loadTexture(pc, app, url) {
@@ -395,241 +279,6 @@ function loadTexture(pc, app, url) {
   });
 }
 
-// ── the room environment (environment: 'room') ─────────────────────────────────────────────
-
-/**
- * `environment: 'room'` — three.js's procedural RoomEnvironment, regenerated here without three:
- * the same scene (a white room lit by one point light, six grey boxes, six emissive panels), shaded
- * the way three shades it when `PMREMGenerator.fromScene(new RoomEnvironment(), 0.04)` bakes it —
- * which is exactly what `addModel(…, { engine: 'three', environment: 'room' })` lights with.
- *
- * It exists so a page that chose `'room'` on the three path gets that look on this backend. It is
- * NOT the default: the default (`'neutral'`) is matched to the Khronos Sample Viewer, and three's
- * room is a different, brighter room (mean radiance ~0.97 vs ~0.89, most of it from a 100-nit
- * ceiling panel and two 50-nit wall panels).
- *
- * The scene's numbers (positions, rotations, scales, intensities) are three.js's
- * examples/jsm/environments/RoomEnvironment.js (MIT, © three.js authors), itself after
- * model-viewer's EnvironmentScene. No image is shipped: `roomRadiance` ray-casts the boxes per
- * texel. Checked against three r180's own bake (its PMREM, read back through `textureCubeUV`):
- * texel-to-texel ratio median 1.000 (p10 0.989, p90 1.006), solid-angle-weighted MAE 0.03 unblurred
- * and 0.04 with the 0.04-rad blur. Solids are [cx, cy, cz, angleY, sx, sy, sz] (boxes) and
- * [cx, cy, cz, sx, sy, sz, emissive] (panels), BoxGeometry(1) scaled — i.e. full extents.
- */
-export const ROOM_ENVIRONMENT = Object.freeze({
-  light: [0.418, 16.199, 0.3, 900, 28, 2], // point light: position, intensity (cd), cutoff distance, decay
-  room: [-0.757, 13.219, 0.717, 31.713, 28.305, 28.591], // seen from inside
-  boxes: [
-    [-10.906, 2.009, 1.846, -0.195, 2.328, 7.905, 4.651],
-    [-5.607, -0.754, -0.758, 0.994, 1.97, 1.534, 3.955],
-    [6.167, 0.857, 7.803, 0.561, 3.927, 6.285, 3.687],
-    [-2.017, 0.018, 6.124, 0.333, 2.002, 4.566, 2.064],
-    [2.291, -0.756, -2.621, -0.286, 1.546, 1.552, 1.496],
-    [-2.193, -0.369, -5.547, 0.516, 3.875, 3.487, 2.986],
-  ],
-  panels: [
-    [-16.116, 14.37, 8.208, 0.1, 2.428, 2.739, 50],
-    [-16.109, 18.021, -8.207, 0.1, 2.425, 2.751, 50],
-    [14.904, 12.198, -1.832, 0.15, 4.265, 6.331, 17],
-    [-0.462, 8.89, 14.52, 4.38, 5.441, 0.088, 43],
-    [3.235, 11.486, -12.541, 2.5, 2.0, 0.1, 20],
-    [0.0, 20.0, 0.0, 1.0, 0.1, 1.0, 100],
-  ],
-  blur: 0.04, // radians — the sigma addModel's three path passes to fromScene
-});
-
-/** Every solid as [cx, cy, cz, cosY, sinY, hx, hy, hz, kind (0 room, 1 lit box, 2 panel), emissive]. */
-const _roomSolids = new WeakMap();
-function roomSolids(env) {
-  let out = _roomSolids.get(env);
-  if (out) return out;
-  const [rx, ry, rz, sx, sy, sz] = env.room;
-  out = [[rx, ry, rz, 1, 0, sx / 2, sy / 2, sz / 2, 0, 0]];
-  for (const [px, py, pz, a, bx, by, bz] of env.boxes) out.push([px, py, pz, Math.cos(a), Math.sin(a), bx / 2, by / 2, bz / 2, 1, 0]);
-  for (const [px, py, pz, bx, by, bz, e] of env.panels) out.push([px, py, pz, 1, 0, bx / 2, by / 2, bz / 2, 2, e]);
-  _roomSolids.set(env, out);
-  return out;
-}
-
-/**
- * Radiance of the room seen from the origin toward unit direction (x, y, z): the nearest solid
- * along the ray. A panel is its emissive value; a wall or box (white, roughness 1, non-metal) is
- * three's direct physical shading from the one point light, unshadowed as in three (the scene casts
- * no shadows) — Lambert plus GGX at alpha 1 (D = 1/π, V = 0.5/(NL+NV), Schlick F0 0.04), with
- * three's inverse-square falloff and its (1 − (d/cutoff)⁴)² window.
- */
-export function roomRadiance(x, y, z, env = ROOM_ENVIRONMENT) {
-  let best = Infinity;
-  let nx = 0;
-  let ny = 0;
-  let nz = 0;
-  let emit = -1;
-  let found = false;
-  for (const b of roomSolids(env)) {
-    const c = b[3];
-    const s = b[4];
-    // The ray in the solid's frame (a rotation about Y): local = Rᵀ(p − centre).
-    const ox = -b[0];
-    const oy = -b[1];
-    const oz = -b[2];
-    const o = [c * ox - s * oz, oy, s * ox + c * oz];
-    const d = [c * x - s * z, y, s * x + c * z];
-    let t0 = -Infinity;
-    let t1 = Infinity;
-    let a0 = 0;
-    let a1 = 0;
-    let miss = false;
-    for (let i = 0; i < 3; i++) {
-      const h = b[5 + i];
-      if (Math.abs(d[i]) < 1e-12) {
-        if (o[i] < -h || o[i] > h) {
-          miss = true;
-          break;
-        }
-        continue;
-      }
-      let n = (-h - o[i]) / d[i];
-      let f = (h - o[i]) / d[i];
-      let sn = -1; // the entry face's outward normal is −axis when the ray runs +axis
-      if (n > f) {
-        const t = n;
-        n = f;
-        f = t;
-        sn = 1;
-      }
-      if (n > t0) {
-        t0 = n;
-        a0 = (i + 1) * sn;
-      }
-      if (f < t1) {
-        t1 = f;
-        a1 = -(i + 1) * sn;
-      }
-    }
-    if (miss || t0 > t1 || t1 < 0) continue;
-    const inside = b[8] === 0;
-    const t = inside ? t1 : t0;
-    if (!(t > 0) || t >= best) continue;
-    best = t;
-    found = true;
-    if (b[8] === 2) {
-      emit = b[9];
-      continue;
-    }
-    emit = -1;
-    const a = inside ? a1 : a0;
-    const sg = (inside ? -1 : 1) * Math.sign(a); // the room is seen from inside: its normals point in
-    const ax = Math.abs(a) - 1;
-    const l0 = ax === 0 ? sg : 0;
-    const l2 = ax === 2 ? sg : 0;
-    nx = c * l0 + s * l2;
-    ny = ax === 1 ? sg : 0;
-    nz = -s * l0 + c * l2;
-  }
-  if (!found) return 0;
-  if (emit >= 0) return emit;
-  const [lx, ly, lz, I, cutoff, decay] = env.light;
-  let tx = lx - x * best;
-  let ty = ly - y * best;
-  let tz = lz - z * best;
-  const dist = Math.hypot(tx, ty, tz);
-  tx /= dist;
-  ty /= dist;
-  tz /= dist;
-  const nl = nx * tx + ny * ty + nz * tz;
-  if (nl <= 0) return 0;
-  const win = Math.max(0, Math.min(1, 1 - Math.pow(dist / cutoff, 4)));
-  const E = (I / Math.max(Math.pow(dist, decay), 0.01)) * win * win * nl;
-  const nv = Math.max(1e-4, -(nx * x + ny * y + nz * z));
-  const hx = tx - x;
-  const hy = ty - y;
-  const hz = tz - z;
-  const vh = Math.max(0, (tx * hx + ty * hy + tz * hz) / Math.hypot(hx, hy, hz));
-  const F = 0.04 + 0.96 * Math.pow(1 - vh, 5);
-  return (E / Math.PI) * (1 + F * (0.5 / (nl + nv)));
-}
-
-/**
- * The room as a float equirect (row 0 = up, the same convention as neutralStudioRGBE), blurred by a
- * Gaussian of `sigma` radians — separable on the sphere: σ in rows, σ/sinθ in columns (wrapping).
- */
-export function roomEquirect(W = 256, H = 128, sigma = ROOM_ENVIRONMENT.blur, env = ROOM_ENVIRONMENT) {
-  const out = new Float32Array(W * H);
-  for (let r = 0; r < H; r++) {
-    const th = ((r + 0.5) / H) * Math.PI;
-    const st = Math.sin(th);
-    const y = Math.cos(th);
-    for (let c = 0; c < W; c++) {
-      const ph = ((c + 0.5) / W) * 2 * Math.PI;
-      out[r * W + c] = roomRadiance(st * Math.cos(ph), y, st * Math.sin(ph), env);
-    }
-  }
-  if (!(sigma > 0)) return out;
-  const perRow = Math.PI / H; // radians per row, and per column at the equator
-  const tmp = new Float32Array(W * H);
-  for (let r = 0; r < H; r++) {
-    const st = Math.max(Math.sin(((r + 0.5) / H) * Math.PI), 1e-3);
-    const sg = Math.min(sigma / perRow / st, W / 4);
-    const R = Math.ceil(3 * sg);
-    const k = [];
-    let ks = 0;
-    for (let i = -R; i <= R; i++) {
-      const v = Math.exp(-(i * i) / (2 * sg * sg));
-      k.push(v);
-      ks += v;
-    }
-    for (let c = 0; c < W; c++) {
-      let a = 0;
-      for (let i = -R; i <= R; i++) a += k[i + R] * out[r * W + (((c + i) % W) + W) % W];
-      tmp[r * W + c] = a / ks;
-    }
-  }
-  const sg = sigma / perRow;
-  const R = Math.ceil(3 * sg);
-  for (let r = 0; r < H; r++) {
-    for (let c = 0; c < W; c++) {
-      let a = 0;
-      let ks = 0;
-      for (let i = -R; i <= R; i++) {
-        const rr = r + i;
-        if (rr < 0 || rr >= H) continue;
-        const v = Math.exp(-(i * i) / (2 * sg * sg));
-        a += v * tmp[rr * W + c];
-        ks += v;
-      }
-      out[r * W + c] = a / ks;
-    }
-  }
-  return out;
-}
-
-/** The room as RGBE bytes (cached per size: every tile on a page gets the same image). */
-const _roomCache = new Map();
-export function roomRGBE(W = 256, H = 128) {
-  const key = `${W}x${H}`;
-  let bytes = _roomCache.get(key);
-  if (!bytes) {
-    const f = roomEquirect(W, H);
-    bytes = new Uint8Array(W * H * 4);
-    for (let i = 0; i < f.length; i++) rgbe(f[i], bytes, i * 4);
-    _roomCache.set(key, bytes);
-  }
-  return bytes.slice();
-}
-
-/**
- * Yaw that lines the generated room up with three's world (its +X panel on +X, the ceiling panel
- * overhead). Calibrated headless against three r180's own `environment: 'room'` render on two
- * catalogue meshes: a sweep over 0/90/180/270 × mirrored has a clean minimum at 90, unmirrored, on
- * both. (The neutral studio's 0 is the Sample Viewer's orientation, a different frame.)
- */
-export const ROOM_YAW_DEG = 90;
-
-/** Build the room environment on this app and set it as the scene's envAtlas. */
-export function useRoomEnvironment(pc, app, yawDeg = ROOM_YAW_DEG) {
-  return useRgbeEquirect(pc, app, 'inline3d-room', roomRGBE(256, 128), 256, 128, yawDeg);
-}
-
 /** Each environment's tone mapping: the look it was matched to. */
 export const ENVIRONMENT_TONE_MAPPING = Object.freeze({ neutral: 'neutral', room: 'none', studio: 'neutral', none: 'neutral' });
 
@@ -675,100 +324,6 @@ function addStudioLights(pc, app, root) {
   app.scene.ambientLight = new pc.Color(amb, amb, amb);
 }
 
-// ── KHR_materials_transmission / volume on this engine ─────────────────────────────────────
-
-/**
- * The engine reads KHR_materials_transmission (and _volume) into `useDynamicRefraction` +
- * `BLEND_NORMAL`, and a dynamic-refraction material samples the camera's SCENE COLOUR MAP. Three
- * things the engine leaves to the app, all needed for a glass or transmissive glTF to look like
- * it does in the Khronos Sample Viewer (and three):
- *
- *  1. THE GRAB PASS. Nothing renders the scene colour map unless a camera asks for it; without it
- *     the material samples an unbound texture — the storm lantern's burner rendered as a MAGENTA
- *     blob inside its globe (measured). `viewer.useSceneColor()` asks, on every eye camera.
- *  2. PASS ORDER. Both references draw opaque → transmissive → blended. The engine puts a
- *     transmissive material in the ONE back-to-front transparent list with the blended ones, so a
- *     blended globe (depthWrite off) can be drawn before the transmissive body behind it, which
- *     then paints over it — the burner showed THROUGH the lantern's opaque-alpha globe. A sort
- *     distance that puts transmissive draws first (back-to-front among themselves) restores the
- *     order: object MAE 10.7 → 10.2 vs three, 11.2 → 10.8 vs the Sample Viewer.
- *  3. STEREO. The engine turns the refracted point's clip position into a grab-texture UV by
- *     mapping the VIEW's NDC over the WHOLE target (`getGrabScreenPos`). A stereo tile draws two
- *     views side by side into one target, so each eye would sample across both. The patched chunk
- *     measures the offset from THIS fragment instead (NDC delta ÷ NDC-per-pixel, from the
- *     derivatives), which is exact for any viewport and identical in mono.
- */
-const GRAB_UV_FN = `
-vec2 inline3dGrabUV(vec4 clipPos) {
-	vec4 p0 = matrix_viewProjection * vec4(vPositionW, 1.0);
-	vec2 n0 = p0.xy / p0.w;
-	vec2 dn = clipPos.xy / clipPos.w - n0;
-	vec2 perPx = vec2(dFdx(n0.x), dFdy(n0.y));
-	vec2 off = vec2(abs(perPx.x) > 1e-9 ? dn.x / perPx.x : 0.0, abs(perPx.y) > 1e-9 ? dn.y / perPx.y : 0.0);
-	return (gl_FragCoord.xy + off) * uScreenSize.zw;
-}
-`;
-const _grabChunk = new WeakMap();
-let _warnedGrabChunk = false;
-
-/** The engine's refractionDynamicPS with the per-view grab UV (null if its shape is not the expected one). */
-function stereoRefractionChunk(pc, device) {
-  if (_grabChunk.has(device)) return _grabChunk.get(device);
-  let out = null;
-  try {
-    const src = pc.ShaderChunks?.get?.(device, pc.SHADERLANGUAGE_GLSL)?.get?.('refractionDynamicPS');
-    const call = /getGrabScreenPos\(\s*projectionPoint\s*\)/;
-    const def = /vec3\s+evalRefractionColor\s*\(/;
-    if (typeof src === 'string' && call.test(src) && def.test(src)) {
-      out = src.replace(def, (m) => `${GRAB_UV_FN}\n${m}`).replace(call, 'inline3dGrabUV(projectionPoint)');
-    }
-  } catch {
-    out = null;
-  }
-  if (!out && !_warnedGrabChunk) {
-    _warnedGrabChunk = true;
-    console.warn(`${TAG} this engine's refraction shader has an unexpected shape; transmissive materials keep the engine's grab UV (correct in mono, not per eye in stereo).`);
-  }
-  _grabChunk.set(device, out);
-  return out;
-}
-
-/** Transmissive draws first, back-to-front among themselves (the engine's own key + an offset). */
-function transmissiveFirst(mi, camPos, camFwd) {
-  const c = mi.aabb.center;
-  return 1e6 + (c.x - camPos.x) * camFwd.x + (c.y - camPos.y) * camFwd.y + (c.z - camPos.z) * camFwd.z;
-}
-
-/**
- * Apply 1–3 above to every dynamic-refraction mesh under `entity` not already handled (`seen`).
- * Returns how many transmissive mesh instances there are under it (handled now or before) —
- * the caller turns the grab pass on when that is > 0. Cheap to call again: handled ones are skipped.
- */
-export function prepareTransmission(pc, entity, device, seen = new WeakSet()) {
-  const renders = entity?.findComponents ? entity.findComponents('render') : [];
-  let n = 0;
-  for (const r of renders) {
-    for (const mi of r.meshInstances || []) {
-      const m = mi.material;
-      if (!m?.useDynamicRefraction) continue;
-      n++;
-      if (seen.has(mi)) continue;
-      seen.add(mi);
-      mi.calculateSortDistance = transmissiveFirst;
-      if (!seen.has(m)) {
-        seen.add(m);
-        const chunk = device ? stereoRefractionChunk(pc, device) : null;
-        if (chunk && typeof m.getShaderChunks === 'function') {
-          m.getShaderChunks(pc.SHADERLANGUAGE_GLSL).set('refractionDynamicPS', chunk);
-          m.shaderChunksVersion = pc.CHUNKAPI_2_8 ?? '2.8';
-          m.update?.();
-        }
-      }
-    }
-  }
-  return n;
-}
-
 // ── framing ─────────────────────────────────────────────────────────────────────────────────
 
 /** Union of the render mesh instances' world AABBs (content space, the file's own units). */
@@ -903,6 +458,7 @@ export function attachPlayCanvasModel(out, wall, canvas, src, opts, pending = []
     flipY: false, // glTF is already Y-up
     orbitMaxDeg: opts.orbitMaxDeg,
     orbitEase: opts.orbitEase,
+    zoom: opts.zoom,
     feather,
     nearClip: opts.nearClip,
     farClip: opts.farClip,