multiplane 0.0.0-stage → 0.3.1

package/src/workers.mjs

@@ -0,0 +1,62 @@
+import { cpus, availableParallelism, freemem, totalmem, release, arch } from 'node:os';
+import { readFileSync } from 'node:fs';
+import path from 'node:path';
+import { userHome } from './platform.mjs';
+import { defaultWorkers } from './render-pool.mjs';
+
+const packageVersion = JSON.parse(readFileSync(new URL('../package.json', import.meta.url))).version;
+export const shotTypes = ['dom', 'canvas', 'three'];
+
+export function memoryWorkers(scale = 1, hardware = {}) {
+  const free = Math.min(hardware.free ?? freemem(), hardware.total ?? totalmem());
+  return Math.max(0, Math.floor((free - 2 * 1024 ** 3) / ((0.25 + 0.1875 * scale * scale) * 1024 ** 3)));
+}
+
+export function benchmarkMachine(info, raster = 'gpu') {
+  return { cpu: cpus().map(cpu => cpu.model), cores: availableParallelism(), memory: totalmem(),
+    gpu: info.gpu, os: { platform: process.platform, release: release(), arch: arch() },
+    chromium: info.chromium, version: packageVersion, raster };
+}
+
+export function readBenchmark(home = userHome()) {
+  try { return JSON.parse(readFileSync(path.join(home, 'benchmark.json'), 'utf8')); }
+  catch { return null; }
+}
+
+function equal(a, b) {
+  if (a === b) return true;
+  if (!a || !b || typeof a !== 'object' || typeof b !== 'object') return false;
+  const keys = Object.keys(a);
+  return keys.length === Object.keys(b).length && keys.every(key => Object.hasOwn(b, key) && equal(a[key], b[key]));
+}
+
+export function validBenchmark(record, machine) {
+  return record?.schema === 'multiplane/1' && equal(record.machine, machine)
+    && shotTypes.every(type => Number.isSafeInteger(record.shots?.[type]?.workers) && record.shots[type].workers > 0
+      && Number.isFinite(record.shots[type].fps) && record.shots[type].fps > 0);
+}
+
+export function selectWorkers({ workers, source, record, machine, type, scale = 1, memoryScale = scale, hardware = {} }) {
+  if (workers !== undefined && ['option', 'config'].includes(source)) return { workers, source };
+  if (validBenchmark(record, machine) && shotTypes.includes(type)) {
+    return { workers: Math.max(1, Math.min(record.shots[type].workers, memoryWorkers(memoryScale, hardware))), source: 'benchmark' };
+  }
+  return { workers: defaultWorkers(scale, hardware), source: 'estimate' };
+}
+
+// Inspect the loaded probe only; its context is discarded before real rendering.
+export async function classifyShot(capture) {
+  return capture.page.evaluate(() => {
+    const canvases = [];
+    const visit = root => {
+      canvases.push(...root.querySelectorAll('canvas'));
+      for (const element of root.querySelectorAll('*')) if (element.shadowRoot) visit(element.shadowRoot);
+    };
+    visit(document);
+    if (canvases.some(canvas => {
+      try { return !canvas.getContext('2d') && !!(canvas.getContext('webgl2') || canvas.getContext('webgl') || canvas.getContext('experimental-webgl')); }
+      catch { return false; }
+    })) return 'three';
+    return canvases.length ? 'canvas' : 'dom';
+  });
+}

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

@@ -0,0 +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>

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

@@ -0,0 +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>

package/tools/bench/shots/scene.js

@@ -0,0 +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();}
+  }
+};

package/tools/bench/shots/webgl.html

@@ -0,0 +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>

package/tools/install-browser.mjs

@@ -0,0 +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;
+}