multiplane 0.3.3 → 0.3.7

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;
+}