multiplane 0.3.6 → 0.3.8

package/src/three/index.js

@@ -176,7 +176,7 @@ export function createThreeLayer({ stage = document.querySelector('#stage'), siz
     }
     return patterns.get(count);
   }
-  function renderAccumulation(focus, radius, count, blur, rotation, budget = count) {
+  function renderAccumulation(focus, radius, count, blur, rotation, budget = count, stride = 1, offset = 0) {
     const position = camera.position.clone(), projection = camera.projectionMatrix.clone();
     const projectionInverse = camera.projectionMatrixInverse.clone();
     const autoClear = renderer.autoClear, oldTarget = renderer.getRenderTarget();
@@ -195,7 +195,9 @@ export function createThreeLayer({ stage = document.querySelector('#stage'), siz
       sumMaterial.uniforms.cameraNear.value = camera.near;
       sumMaterial.uniforms.cameraFar.value = camera.far;
       sumMaterial.uniforms.blurScale.value = radius * height * projection.elements[5] * 0.5 * blur / Math.sqrt(budget);
-      for (const [x, y, jx, jy] of pattern(count)) {
+      const points = pattern(count * stride);
+      for (let i = offset; i < points.length; i += stride) {
+        const [x, y, jx, jy] = points[i];
         const dx = (x * Math.cos(rotation) - y * Math.sin(rotation)) * radius;
         const dy = (x * Math.sin(rotation) + y * Math.cos(rotation)) * radius;
         camera.position.copy(position).addScaledVector(right, dx).addScaledVector(up, dy);
@@ -225,34 +227,34 @@ export function createThreeLayer({ stage = document.querySelector('#stage'), siz
     textures.add(texture);
     return texture;
   }
-  /**
-   * @param {object} options
-   * @param {number} [options.lodBias=0] Texture mip LOD bias; negative values sharpen
-   * front-facing cards but can cause moire on dense textures at oblique angles.
-   */
-  function card({ src, width, height, radius = 0, position = [0, 0, 0], rotation = [0, 0, 0],
-    border = null, shadow = false, annotations = [], browserFrame = false, textureWidth = 2048, style = {}, lodBias = 0 }) {
-    if (!Number.isFinite(lodBias)) throw Object.assign(new Error('lodBias must be a finite number.'), { code: 'shot_contract_invalid' });
-    const textureStyle = { ...layerStyle, ...style };
-    const composeBackground = annotations.length > 0 || browserFrame || style.textureBackground !== undefined;
+  /**
+   * @param {object} options
+   * @param {number} [options.lodBias=0] Texture mip LOD bias; negative values sharpen
+   * front-facing cards but can cause moire on dense textures at oblique angles.
+   */
+  function card({ src, width, height, radius = 0, position = [0, 0, 0], rotation = [0, 0, 0],
+    border = null, shadow = false, annotations = [], browserFrame = false, textureWidth = 2048, style = {}, lodBias = 0 }) {
+    if (!Number.isFinite(lodBias)) throw Object.assign(new Error('lodBias must be a finite number.'), { code: 'shot_contract_invalid' });
+    const textureStyle = { ...layerStyle, ...style };
+    const composeBackground = annotations.length > 0 || browserFrame || style.textureBackground !== undefined;
     const group = new THREE.Group();
     group.position.fromArray(position); group.rotation.set(...rotation);
-    const material = new THREE.MeshBasicMaterial({ color: 0xffffff, side: THREE.DoubleSide, transparent: !composeBackground });
-    if (lodBias !== 0) {
-      material.onBeforeCompile = shader => {
-        shader.uniforms.cardLodBias = { value: lodBias };
-        shader.fragmentShader = 'uniform float cardLodBias;\n' + shader.fragmentShader.replace('#include <map_fragment>',
-          THREE.ShaderChunk.map_fragment.replace('texture2D( map, vMapUv )', 'texture2D( map, vMapUv, cardLodBias )'));
-      };
-      material.customProgramCacheKey = () => 'card-lod-bias';
-    }
+    const material = new THREE.MeshBasicMaterial({ color: 0xffffff, side: THREE.DoubleSide, transparent: !composeBackground });
+    if (lodBias !== 0) {
+      material.onBeforeCompile = shader => {
+        shader.uniforms.cardLodBias = { value: lodBias };
+        shader.fragmentShader = 'uniform float cardLodBias;\n' + shader.fragmentShader.replace('#include <map_fragment>',
+          THREE.ShaderChunk.map_fragment.replace('texture2D( map, vMapUv )', 'texture2D( map, vMapUv, cardLodBias )'));
+      };
+      material.customProgramCacheKey = () => 'card-lod-bias';
+    }
     const mesh = new THREE.Mesh(roundedGeometry(width, height, radius), material);
     group.add(mesh);
     if (border) {
       const edge = new THREE.Mesh(roundedGeometry(width + 2 * border.width, height + 2 * border.width, radius + border.width),
-        new THREE.MeshBasicMaterial({ color: border.color, side: THREE.DoubleSide,
-          polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 1 }));
-      group.add(edge);
+        new THREE.MeshBasicMaterial({ color: border.color, side: THREE.DoubleSide,
+          polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 1 }));
+      group.add(edge);
     }
     if (shadow) {
       const c = document.createElement('canvas'); c.width = c.height = 512;
@@ -336,16 +338,22 @@ export function createThreeLayer({ stage = document.querySelector('#stage'), siz
         });
         const budget = adaptive ? Math.min(maximum, Math.max(count, Math.ceil((2 * maxRadius / spacing) ** 2))) : count;
         const probe = globalThis.__multiplaneMotionProbe;
-        // Probes retain the stable base pattern; final captures share one frame budget.
-        const divisor = probe?.motionSamples ?? motionBlur;
-        const minimum = probe?.time === undefined ? 2 : 8;
-        const actual = rotate && motionBlur > 1 ? Math.min(budget, Math.max(minimum, Math.ceil(budget / divisor))) : budget;
-        if (probe) probe.samples += actual;
+        // Probes retain the stable base pattern; final captures share one frame budget.
+        const divisor = probe?.motionSamples ?? motionBlur;
+        const minimum = probe?.time === undefined ? 2 : 8;
+        const actual = rotate && motionBlur > 1 ? Math.min(budget, Math.max(minimum, Math.ceil(budget / divisor))) : budget;
+        if (probe) probe.samples += actual;
         if (probe && rotate && motionBlur > 1) probe.used = true;
         const phase = (probe?.time ?? t) * 997 * Math.sqrt(2);
-        const rotation = rotate && motionBlur > 1 ? (phase - Math.floor(phase)) * Math.PI * 2 : 0;
+        // Final temporal samples partition one lens pattern, including its jitter.
+        // Fixed-phase probes and direct layer calls retain their existing pattern.
+        const interleaved = rotate && motionBlur > 1 && probe?.time === undefined
+          && Number.isInteger(probe?.motionIndex) && probe.motionIndex >= 0;
+        const stride = interleaved ? divisor : 1;
+        const rotation = !interleaved && rotate && motionBlur > 1 ? (phase - Math.floor(phase)) * Math.PI * 2 : 0;
         Object.assign(stats, { samples: actual, maxBlurRadius: maxRadius, rotation });
-        renderAccumulation(focus, radius, actual, blur, rotation, budget);
+        renderAccumulation(focus, radius, actual, blur, rotation, interleaved ? actual * stride : budget,
+          stride, interleaved ? probe.motionIndex : 0);
       }
     },
     gpuInfo() {

package/src/verify.mjs

@@ -48,11 +48,11 @@ export async function verifyShot(shot, options = {}) {
       let errors = 0, totalChangedPixels = 0;
       for (const t of times) {
         events.check(); references.set(t, decodePNG(await processed.frame(t)));
-        dofHistogram[processed.lastDofSamples] = (dofHistogram[processed.lastDofSamples] ?? 0) + 1;
+        dofHistogram[processed.lastDofSamples] = (dofHistogram[processed.lastDofSamples] ?? 0) + 1;
         histogram[processed.lastBlurSamples] = (histogram[processed.lastBlurSamples] ?? 0) + 1;
       }
       data.post = { ...processed.post, adaptiveBlur: Number(options['adaptive-blur'] ?? 0.5) };
-      data.blurSamples = blurSampleReport(histogram);
+      data.blurSamples = blurSampleReport(histogram);
       data.dofSamples = blurSampleReport(dofHistogram);
       const check = async (t, actual, name, reference = references.get(t)) => {
         events.check();

package/src/video-pipe.mjs

@@ -1,6 +1,6 @@
-export async function writeFrame(stream, bytes) {
-  const chunkSize = 1024 * 1024;
-  for (let offset = 0; offset < bytes.length; offset += chunkSize) {
-    await new Promise((resolve, reject) => stream.write(bytes.subarray(offset, offset + chunkSize), error => error ? reject(error) : resolve()));
-  }
-}
+export async function writeFrame(stream, bytes) {
+  const chunkSize = 1024 * 1024;
+  for (let offset = 0; offset < bytes.length; offset += chunkSize) {
+    await new Promise((resolve, reject) => stream.write(bytes.subarray(offset, offset + chunkSize), error => error ? reject(error) : resolve()));
+  }
+}

package/tools/bench/shots/canvas-2d.html

@@ -1 +1 @@
-<!doctype html><html><head><meta charset="utf-8"><link rel="icon" href="data:,"><title>canvas-2d</title><style>@font-face{font-family:Bench;src:url('../../../examples/assets/Roboto-Variable.ttf')}html,body{margin:0}#stage{width:1920px;height:1080px;position:relative;overflow:hidden;background:#18202c}canvas{position:absolute;inset:0;width:1920px;height:1080px}.tile{position:absolute;color:#fff;background:#375575;font:16px Bench;padding:4px;box-shadow:2px 3px 5px #0008}</style></head><body><div id="stage" data-kind="canvas-2d"></div><script src="scene.js"></script></body></html>
+<!doctype html><html><head><meta charset="utf-8"><link rel="icon" href="data:,"><title>canvas-2d</title><style>@font-face{font-family:Bench;src:url('../../../examples/assets/Roboto-Variable.ttf')}html,body{margin:0}#stage{width:1920px;height:1080px;position:relative;overflow:hidden;background:#18202c}canvas{position:absolute;inset:0;width:1920px;height:1080px}.tile{position:absolute;color:#fff;background:#375575;font:16px Bench;padding:4px;box-shadow:2px 3px 5px #0008}</style></head><body><div id="stage" data-kind="canvas-2d"></div><script src="scene.js"></script></body></html>

package/tools/bench/shots/dom-light.html

@@ -1 +1 @@
-<!doctype html><html><head><meta charset="utf-8"><link rel="icon" href="data:,"><title>dom-light</title><style>@font-face{font-family:Bench;src:url('../../../examples/assets/Roboto-Variable.ttf')}html,body{margin:0}#stage{width:1920px;height:1080px;position:relative;overflow:hidden;background:#18202c}canvas{position:absolute;inset:0;width:1920px;height:1080px}.tile{position:absolute;color:#fff;background:#375575;font:16px Bench;padding:4px;box-shadow:2px 3px 5px #0008}</style></head><body><div id="stage" data-kind="dom-light"></div><script src="scene.js"></script></body></html>
+<!doctype html><html><head><meta charset="utf-8"><link rel="icon" href="data:,"><title>dom-light</title><style>@font-face{font-family:Bench;src:url('../../../examples/assets/Roboto-Variable.ttf')}html,body{margin:0}#stage{width:1920px;height:1080px;position:relative;overflow:hidden;background:#18202c}canvas{position:absolute;inset:0;width:1920px;height:1080px}.tile{position:absolute;color:#fff;background:#375575;font:16px Bench;padding:4px;box-shadow:2px 3px 5px #0008}</style></head><body><div id="stage" data-kind="dom-light"></div><script src="scene.js"></script></body></html>

package/tools/bench/shots/scene.js

@@ -1,45 +1,45 @@
-const stage = document.querySelector('#stage');
-const kind = stage.dataset.kind;
-const tiles = [];
-if (kind.startsWith('dom') || kind === 'mixed') {
-  const count = kind === 'dom-heavy' ? 1200 : 12;
-  for (let i = 0; i < count; i++) {
-    const tile = document.createElement('div');
-    tile.className = 'tile'; tile.textContent = `Item ${i}`;
-    tile.style.left = `${(i % 40) * 48}px`; tile.style.top = `${Math.floor(i / 40) * 35}px`;
-    if (kind === 'dom-heavy') tile.style.filter = `blur(${i % 3 * 0.15}px)`;
-    stage.append(tile); tiles.push(tile);
-  }
-}
-let canvas, ctx, gl, program, timeLocation;
-if (['canvas-2d', 'webgl', 'mixed'].includes(kind)) {
-  canvas = document.createElement('canvas'); stage.append(canvas);
-  canvas.width = 1920 * devicePixelRatio; canvas.height = 1080 * devicePixelRatio;
-  if (kind === 'canvas-2d') ctx = canvas.getContext('2d', { alpha: false, colorSpace: 'srgb' });
-  else {
-    gl = canvas.getContext('webgl', { alpha: kind === 'mixed', premultipliedAlpha: true, antialias: true, preserveDrawingBuffer: true });
-    if (!gl) throw Error('WebGL unavailable');
-    const shader = (type, source) => { const s = gl.createShader(type); gl.shaderSource(s, source); gl.compileShader(s); if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) throw Error(gl.getShaderInfoLog(s)); return s; };
-    program = gl.createProgram();
-    gl.attachShader(program, shader(gl.VERTEX_SHADER, 'attribute vec2 p;void main(){gl_Position=vec4(p,0.,1.);}'));
-    gl.attachShader(program, shader(gl.FRAGMENT_SHADER, `precision highp float;uniform float t;uniform vec2 size;void main(){vec2 p=gl_FragCoord.xy/size;float stripe=step(.5,fract((p.x+p.y)*12.+t));gl_FragColor=vec4(.15+.55*p.x,.2+.5*p.y,.25+.4*stripe,${kind === 'mixed' ? '.5' : '1.'});}`));
-    gl.linkProgram(program); if (!gl.getProgramParameter(program, gl.LINK_STATUS)) throw Error(gl.getProgramInfoLog(program));
-    gl.useProgram(program); const b = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER,b); gl.bufferData(gl.ARRAY_BUFFER,new Float32Array([-1,-1,1,-1,-1,1,-1,1,1,-1,1,1]),gl.STATIC_DRAW);
-    const loc=gl.getAttribLocation(program,'p');gl.enableVertexAttribArray(loc);gl.vertexAttribPointer(loc,2,gl.FLOAT,false,0,0);
-    gl.uniform2f(gl.getUniformLocation(program,'size'),canvas.width,canvas.height);timeLocation=gl.getUniformLocation(program,'t');gl.viewport(0,0,canvas.width,canvas.height);
-    window.BENCH_GL = gl;
-  }
-}
-window.SHOT = {
-  duration: 2, fps: 30, ready: document.fonts.load('16px Bench'),
-  render(t) {
-    for (let i=0;i<tiles.length;i++) tiles[i].style.transform=`translate(${Math.sin(t*3+i)*20}px,${Math.cos(t*2+i)*10}px)`;
-    if(ctx){
-      // Capture can temporarily change DPR; use the fixed backing-store dimensions.
-      ctx.setTransform(canvas.width/1920,0,0,canvas.height/1080,0,0);ctx.fillStyle='#18202c';ctx.fillRect(0,0,1920,1080);
-      for(let i=0;i<160;i++){ctx.fillStyle=`hsl(${i*17%360} 60% 60%)`;ctx.beginPath();ctx.arc((i%20)*96+48+Math.sin(t*3+i)*20,Math.floor(i/20)*130+65,28+i%9,0,Math.PI*2);ctx.fill();}
-      ctx.fillStyle='#ffffff80';ctx.fillRect(300+t*100,250,600,400);
-    }
-    if(gl){gl.uniform1f(timeLocation,t);gl.drawArrays(gl.TRIANGLES,0,6);gl.finish();}
-  }
+const stage = document.querySelector('#stage');
+const kind = stage.dataset.kind;
+const tiles = [];
+if (kind.startsWith('dom') || kind === 'mixed') {
+  const count = kind === 'dom-heavy' ? 1200 : 12;
+  for (let i = 0; i < count; i++) {
+    const tile = document.createElement('div');
+    tile.className = 'tile'; tile.textContent = `Item ${i}`;
+    tile.style.left = `${(i % 40) * 48}px`; tile.style.top = `${Math.floor(i / 40) * 35}px`;
+    if (kind === 'dom-heavy') tile.style.filter = `blur(${i % 3 * 0.15}px)`;
+    stage.append(tile); tiles.push(tile);
+  }
+}
+let canvas, ctx, gl, program, timeLocation;
+if (['canvas-2d', 'webgl', 'mixed'].includes(kind)) {
+  canvas = document.createElement('canvas'); stage.append(canvas);
+  canvas.width = 1920 * devicePixelRatio; canvas.height = 1080 * devicePixelRatio;
+  if (kind === 'canvas-2d') ctx = canvas.getContext('2d', { alpha: false, colorSpace: 'srgb' });
+  else {
+    gl = canvas.getContext('webgl', { alpha: kind === 'mixed', premultipliedAlpha: true, antialias: true, preserveDrawingBuffer: true });
+    if (!gl) throw Error('WebGL unavailable');
+    const shader = (type, source) => { const s = gl.createShader(type); gl.shaderSource(s, source); gl.compileShader(s); if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) throw Error(gl.getShaderInfoLog(s)); return s; };
+    program = gl.createProgram();
+    gl.attachShader(program, shader(gl.VERTEX_SHADER, 'attribute vec2 p;void main(){gl_Position=vec4(p,0.,1.);}'));
+    gl.attachShader(program, shader(gl.FRAGMENT_SHADER, `precision highp float;uniform float t;uniform vec2 size;void main(){vec2 p=gl_FragCoord.xy/size;float stripe=step(.5,fract((p.x+p.y)*12.+t));gl_FragColor=vec4(.15+.55*p.x,.2+.5*p.y,.25+.4*stripe,${kind === 'mixed' ? '.5' : '1.'});}`));
+    gl.linkProgram(program); if (!gl.getProgramParameter(program, gl.LINK_STATUS)) throw Error(gl.getProgramInfoLog(program));
+    gl.useProgram(program); const b = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER,b); gl.bufferData(gl.ARRAY_BUFFER,new Float32Array([-1,-1,1,-1,-1,1,-1,1,1,-1,1,1]),gl.STATIC_DRAW);
+    const loc=gl.getAttribLocation(program,'p');gl.enableVertexAttribArray(loc);gl.vertexAttribPointer(loc,2,gl.FLOAT,false,0,0);
+    gl.uniform2f(gl.getUniformLocation(program,'size'),canvas.width,canvas.height);timeLocation=gl.getUniformLocation(program,'t');gl.viewport(0,0,canvas.width,canvas.height);
+    window.BENCH_GL = gl;
+  }
+}
+window.SHOT = {
+  duration: 2, fps: 30, ready: document.fonts.load('16px Bench'),
+  render(t) {
+    for (let i=0;i<tiles.length;i++) tiles[i].style.transform=`translate(${Math.sin(t*3+i)*20}px,${Math.cos(t*2+i)*10}px)`;
+    if(ctx){
+      // Capture can temporarily change DPR; use the fixed backing-store dimensions.
+      ctx.setTransform(canvas.width/1920,0,0,canvas.height/1080,0,0);ctx.fillStyle='#18202c';ctx.fillRect(0,0,1920,1080);
+      for(let i=0;i<160;i++){ctx.fillStyle=`hsl(${i*17%360} 60% 60%)`;ctx.beginPath();ctx.arc((i%20)*96+48+Math.sin(t*3+i)*20,Math.floor(i/20)*130+65,28+i%9,0,Math.PI*2);ctx.fill();}
+      ctx.fillStyle='#ffffff80';ctx.fillRect(300+t*100,250,600,400);
+    }
+    if(gl){gl.uniform1f(timeLocation,t);gl.drawArrays(gl.TRIANGLES,0,6);gl.finish();}
+  }
 };

package/tools/bench/shots/webgl.html

@@ -1 +1 @@
-<!doctype html><html><head><meta charset="utf-8"><link rel="icon" href="data:,"><title>webgl</title><style>@font-face{font-family:Bench;src:url('../../../examples/assets/Roboto-Variable.ttf')}html,body{margin:0}#stage{width:1920px;height:1080px;position:relative;overflow:hidden;background:#18202c}canvas{position:absolute;inset:0;width:1920px;height:1080px}.tile{position:absolute;color:#fff;background:#375575;font:16px Bench;padding:4px;box-shadow:2px 3px 5px #0008}</style></head><body><div id="stage" data-kind="webgl"></div><script src="scene.js"></script></body></html>
+<!doctype html><html><head><meta charset="utf-8"><link rel="icon" href="data:,"><title>webgl</title><style>@font-face{font-family:Bench;src:url('../../../examples/assets/Roboto-Variable.ttf')}html,body{margin:0}#stage{width:1920px;height:1080px;position:relative;overflow:hidden;background:#18202c}canvas{position:absolute;inset:0;width:1920px;height:1080px}.tile{position:absolute;color:#fff;background:#375575;font:16px Bench;padding:4px;box-shadow:2px 3px 5px #0008}</style></head><body><div id="stage" data-kind="webgl"></div><script src="scene.js"></script></body></html>

package/tools/install-browser.mjs

@@ -1,18 +1,18 @@
-import { createRequire } from 'node:module';
-import { spawnSync } from 'node:child_process';
-import path from 'node:path';
-import { existsSync } from 'node:fs';
-
-if (!process.env.PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD) {
-  const require = createRequire(import.meta.url);
-  const playwrightRequire = createRequire(require.resolve('playwright/package.json'));
-  // Avoid taking Playwright's installation lock when both pinned browsers already exist.
-  const { registry: { registry } } = playwrightRequire('playwright-core/lib/coreBundle');
-  const installed = ['chromium', 'chromium-headless-shell'].every(name => existsSync(registry.findExecutable(name).executablePath()));
-  if (installed) process.exit(0);
-  const result = spawnSync(process.execPath, [path.join(path.dirname(require.resolve('playwright/package.json')), 'cli.js'), 'install', 'chromium'],
-    { stdio: 'inherit', windowsHide: true });
-  if (result.error) throw result.error;
-  if (process.platform === 'linux') console.error('If Chromium cannot launch because system libraries are missing, run npx playwright install-deps chromium.');
-  process.exitCode = result.status ?? 1;
-}
+import { createRequire } from 'node:module';
+import { spawnSync } from 'node:child_process';
+import path from 'node:path';
+import { existsSync } from 'node:fs';
+
+if (!process.env.PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD) {
+  const require = createRequire(import.meta.url);
+  const playwrightRequire = createRequire(require.resolve('playwright/package.json'));
+  // Avoid taking Playwright's installation lock when both pinned browsers already exist.
+  const { registry: { registry } } = playwrightRequire('playwright-core/lib/coreBundle');
+  const installed = ['chromium', 'chromium-headless-shell'].every(name => existsSync(registry.findExecutable(name).executablePath()));
+  if (installed) process.exit(0);
+  const result = spawnSync(process.execPath, [path.join(path.dirname(require.resolve('playwright/package.json')), 'cli.js'), 'install', 'chromium'],
+    { stdio: 'inherit', windowsHide: true });
+  if (result.error) throw result.error;
+  if (process.platform === 'linux') console.error('If Chromium cannot launch because system libraries are missing, run npx playwright install-deps chromium.');
+  process.exitCode = result.status ?? 1;
+}