@displayxr/inline3d 1.16.0 → 1.18.0

package/CHANGELOG.md

@@ -5,6 +5,70 @@ 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.18.0 — 2026-09-24
+
+Touches the **preview tier** (`./splat`, `engine: 'playcanvas'` only). Additive: a page that never
+calls `setVideo` renders the same pixels.
+
+### Added
+
+- **`handle.setVideo(src, options?)`** (#36): a stereo video on the persistent PlayCanvas splat
+  handle, with no second canvas, layer or session. This is for pages that keep one woven canvas for
+  the whole app, where a fresh `addVideo` canvas after a navigation is the side-by-side flash.
+  - `src` is a URL (an SDK-owned `<video>`, autoplaying) or your `HTMLVideoElement`. Options:
+    `format: 'sbs' | 'tb' | 'mono'`, `fit: 'contain' | 'cover'`, `rig: 'display'`,
+    `virtualDisplayHeight`, `loop`, `muted`, `autoplay`.
+  - It resolves on the video's first frame to `{ video, format, fit, remove(), stats() }`. The page
+    drives transport through `video`.
+  - The splat is hidden and a screen-locked plane on the display rig shows the video. Each eye
+    samples only its own half. Flat (mono), it shows the left half at full resolution.
+  - Upload is gated on `requestVideoFrameCallback`. The colour is `addVideo`'s own.
+  - `setVideo(null)` restores the splat, the pose, the lens and the declared view rig exactly.
+  - It throws during an in-flight `setSource`. While a video is on, `setSource` rejects and
+    `setRig` throws. `controls:'page'` throws.
+  - Gates, on a real GPU: each eye shows 0 px of the other half, exit renders **MAE 0.0000**
+    against the pre-video frame with the same declared rig, and colour matches `addVideo`'s paint
+    at MAE 0.003. At 3840×1080 the upload runs 29.9/s with `texImage2D` at p50 0.1 ms, and 0 video
+    frames drop on a 120 Hz panel.
+  - See [`docs/playcanvas-adapter.md` § setVideo](docs/playcanvas-adapter.md#setvideo--a-stereo-video-on-the-persistent-handle-36).
+
+## 1.17.0 — 2026-09-24
+
+Touches the **preview tier** (`./model` and `./splat`, `engine: 'playcanvas'` only). The default look
+does not move except on glTFs that use `KHR_materials_transmission`.
+
+### Changed
+
+- **`environment: 'room'` is now three's room on the PlayCanvas backend** (#36). `addModel(…, {
+  environment: 'room' })` and `setRig('display', { environment: 'room' })` light with three.js's
+  procedural RoomEnvironment, regenerated in memory (ray cast, no asset, ~16 ms once per page), and
+  default to tone mapping `'none'`, three's. Through 1.16 `'room'` was an alias of `'neutral'` on
+  this engine, so a page that passed it to keep its three look got the Sample-Viewer studio with PBR
+  Neutral. **The default is now spelled `'neutral'` and renders exactly as before** (Khronos gate
+  re-run: 16.7 / 6.4 / 2.7 / 9.4, unchanged). On a four-item product catalogue, object MAE against three r180
+  `room` goes from 20.5 / 54.4 / 29.5 / 23.3 (the default) to **10.2 / 11.0 / 7.1 / 6.3** (storm
+  lantern / handbag / boot / compass). Tone mapping and the environment explain the gap, and what is
+  left is where three departs from the Sample Viewer (PlayCanvas `room` is closer to the Sample
+  Viewer lit by the same room than three is: handbag 4.8 vs 13.4). `setRig('display')` with
+  `'room'` renders pixel-identical to `addModel` with it. See
+  [`docs/playcanvas-model-backend.md` § Environments](docs/playcanvas-model-backend.md#environments--neutral-default-and-room-three).
+- `setRig('display')`'s `toneMapping` now defaults to the environment's (`'none'` for `'room'`,
+  `'neutral'` otherwise). A second `setRig('display')` with another environment swaps the IBL it
+  installed.
+
+### Fixed
+
+- **`KHR_materials_transmission` / `_volume` on PlayCanvas** (#36), for `addModel` and for meshes
+  under root on `setRig('display')`:
+  - The scene-colour grab pass the material samples is now requested. Without it the storm lantern's
+    burner rendered as a magenta blob inside the globe.
+  - Transmissive draws sort ahead of blended ones, the pass order of the Sample Viewer and three.
+    The lantern's opaque-alpha globe no longer shows the burner through it.
+  - The grab UV is taken per view. The engine mapped each view's NDC over the whole target, so in
+    stereo each eye sampled across both. Mono renders are identical.
+  - Lantern object MAE vs the Sample Viewer (default look): 14.4 → 12.4.
+  - See [§ Transmission](docs/playcanvas-model-backend.md#transmission-khr_materials_transmission--_volume).
+
 ## 1.16.0 — 2026-09-24
 
 Touches the **preview tier** (`./splat`, `engine: 'playcanvas'` only). Additive. A page that never

package/README.md

@@ -48,7 +48,9 @@ engine's knobs) — and adds `setSource(src, { fadeMs })` (crossfading asset swa
 tilt-and-relax orbit, `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)). It needs the
+capture rig ([§setRig](docs/playcanvas-adapter.md#setrig--switching-between-the-display-rig-and-the-camera-rig-36)), and
+`handle.setVideo(src, { format: 'sbs' | 'tb' | 'mono' })`: a stereo video on that same tile, each eye
+its own half, with no second canvas ([§setVideo](docs/playcanvas-adapter.md#setvideo--a-stereo-video-on-the-persistent-handle-36)). It needs the
 optional peer `playcanvas` (`>=2.22.3 <3`) and reads `.sog`, `.ply` and a Streamed-SOG
 `lod-meta.json`. **Spark stays the default**; a page that never passes `engine` never loads
 `playcanvas`. What differs, and why: [`docs/playcanvas-adapter.md`](docs/playcanvas-adapter.md).
@@ -69,7 +71,8 @@ Splat and model rendering on the PlayCanvas backend uses the PlayCanvas engine (
 **Models render with PlayCanvas by default (1.12).** `addModel(wall, canvas, 'chair.glb')` loads
 the glTF with the PlayCanvas engine (optional peer `playcanvas`), lit to match the Khronos glTF
 Sample Viewer: an in-memory neutral studio environment, Khronos PBR Neutral tone mapping,
-exposure 1. `engine: 'three'` is the 1.11 three.js renderer, unchanged (also importable as
+exposure 1. `environment: 'room'` gives three's RoomEnvironment look instead (a page tuned on the
+three path). `engine: 'three'` is the 1.11 three.js renderer, unchanged (also importable as
 `@displayxr/inline3d/model/three`). Each engine is imported only when a tile asks for it. Draco
 and KTX2 use the same served decoder folders on both engines. Design, the Sample-Viewer MAE table
 and what throws: [`docs/playcanvas-model-backend.md`](docs/playcanvas-model-backend.md).

package/THIRD_PARTY_NOTICES.md

@@ -6,7 +6,7 @@ it are adapted from, or run on, the MIT-licensed projects below. Their notices f
 | Project | Version | How it is used |
 |---|---|---|
 | [PlayCanvas engine](https://github.com/playcanvas/engine) | 2.22.3 | Optional peer (`playcanvas`): the default splat backend and the `./model` backend. Shader code in this package is **adapted** from it: the non-square-pixel footprint rewrite of `src/scene/shader-lib/glsl/chunks/gsplat/vert/gsplatCorner.js` (`js/inline3d-splat-playcanvas.js`), the quad-extent cap in `gsplatCommon.js` (`js/inline3d-splat-perf.js`), and the dissolve effect and its hash/noise/fbm helpers from `scripts/esm/gsplat/shader-effect-dissolve.mjs` (`js/inline3d-splat-effects.js`). Each adapted site carries a provenance comment. |
-| [three.js](https://github.com/mrdoob/three.js) | ≥ 0.150 | Optional peer (`three`): the `./three` helpers, the Spark splat path, `./model`'s `engine: 'three'`. |
+| [three.js](https://github.com/mrdoob/three.js) | ≥ 0.150 | Optional peer (`three`): the `./three` helpers, the Spark splat path, `./model`'s `engine: 'three'`. The PlayCanvas backend's `environment: 'room'` is **adapted** from `examples/jsm/environments/RoomEnvironment.js` (its scene numbers, re-rendered by ray casting in `js/inline3d-model-playcanvas.js`, `ROOM_ENVIRONMENT`). |
 | [Spark](https://github.com/sparkjsdev/spark) | ≥ 2.0 | Optional peer (`@sparkjsdev/spark`): the Spark splat backend. |
 
 ## PlayCanvas engine — MIT

package/js/inline3d-model-playcanvas.js

@@ -24,6 +24,8 @@
 //     and was fitted to the Sample Viewer's "Studio Neutral". three's path keeps RoomEnvironment
 //     and no tone mapping (unchanged since 1.11); the two backends therefore do not look
 //     identical, by design — docs/playcanvas-model-backend.md §Lighting has the MAE table.
+//     `environment: 'room'` is three's room on this engine (§ the room environment), untonemapped,
+//     for a page tuned on the three path (§Environments).
 //   · Decoders are the ENGINE's: Draco and Basis through the engine's own worker readers (fed the
 //     SAME files three's `libs/draco/` and `libs/basis/` folders hold), meshopt through the
 //     container's bufferView hook with meshoptimizer's `MeshoptDecoder` (the engine has no
@@ -347,10 +349,13 @@ 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) {
-  const W = 256;
-  const H = 128;
+  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: 'inline3d-neutral-studio',
+    name,
     width: W,
     height: H,
     format: pc.PIXELFORMAT_RGBA8,
@@ -359,7 +364,7 @@ export function useNeutralStudio(pc, app, yawDeg) {
     mipmaps: false,
     addressU: pc.ADDRESS_REPEAT,
     addressV: pc.ADDRESS_CLAMP_TO_EDGE,
-    levels: [neutralStudioRGBE(W, H)],
+    levels: [bytes],
   });
   return useLightingSource(pc, app, tex, true, yawDeg);
 }
@@ -373,7 +378,9 @@ function useLightingSource(pc, app, source, own, yawDeg = 0) {
   app.scene.envAtlas = atlas;
   app.scene.skyboxIntensity = 1;
   app.scene.exposure = 1;
-  if (pc.Quat && yawDeg) app.scene.skyboxRotation = new pc.Quat().setFromEulerAngles(0, yawDeg, 0);
+  // 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;
 }
 
@@ -388,6 +395,244 @@ 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' });
+
 /**
  * `environment: 'studio'` — three's three-point rig, same directions and ratios. Engine lights
  * shine along their local −Y, so each is aimed by rotation (never lookAt). three's punctual
@@ -430,6 +675,100 @@ 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). */
@@ -535,7 +874,7 @@ export function attachPlayCanvasModel(out, wall, canvas, src, opts, pending = []
     fitSweep = true,
     renderScale = 1,
     feather = 0,
-    environment = 'room',
+    environment = 'neutral',
     envMap = null,
     decoderPath = null,
     meshoptDecoder = null,
@@ -568,7 +907,8 @@ export function attachPlayCanvasModel(out, wall, canvas, src, opts, pending = []
     nearClip: opts.nearClip,
     farClip: opts.farClip,
     sky: false,
-    toneMapping: 'neutral',
+    // Each environment's own look: 'room' is three's (untonemapped), the rest the Sample Viewer's.
+    toneMapping: envMap ? 'neutral' : ENVIRONMENT_TONE_MAPPING[environment] || 'neutral',
   });
 
   let handle = null;
@@ -701,7 +1041,8 @@ export function attachPlayCanvasModel(out, wall, canvas, src, opts, pending = []
     const yaw = Number.isFinite(opts.environmentRotation) ? opts.environmentRotation : 0;
     if (typeof envMap === 'string') useLightingSource(pc, app, await loadTexture(pc, app, envMap), true, yaw);
     else if (envMap && typeof envMap === 'object') useLightingSource(pc, app, envMap, false, yaw);
-    else if (environment === 'room' || environment === 'neutral') useNeutralStudio(pc, app, ENV_YAW_DEG + yaw);
+    else if (environment === 'room') useRoomEnvironment(pc, app, ROOM_YAW_DEG + yaw);
+    else if (environment === 'neutral') useNeutralStudio(pc, app, ENV_YAW_DEG + yaw);
     else if (environment === 'studio') addStudioLights(pc, app, viewer.content);
     if (removed) return out;
 
@@ -736,6 +1077,8 @@ export function attachPlayCanvasModel(out, wall, canvas, src, opts, pending = []
     if (removed) return out;
 
     const entity = asset.resource.instantiateRenderEntity();
+    // KHR_materials_transmission / volume: grab pass, pass order, per-eye grab UV (§ prepareTransmission).
+    if (prepareTransmission(pc, entity, app.graphicsDevice) > 0) viewer.useSceneColor(true);
     viewer.content.addChild(entity);
     out.model = entity;
     out.container = asset.resource; // animations, materials, textures (engine types)

package/js/inline3d-playcanvas-engine.js

@@ -53,6 +53,7 @@ export {
   SEMANTIC_TEXCOORD0,
   ShaderChunks,
   SHADERLANGUAGE_GLSL,
+  CHUNKAPI_2_8,
   // setSource's frame snapshot
   RenderTarget,
   FILTER_NEAREST,