shaders-oneshot 0.0.81-shared.1

package/dist/shaders/waves.d.ts

@@ -0,0 +1,53 @@
+import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
+/**
+ * Static line pattern configurable into textures ranging from sharp zigzags to smooth flowing waves.
+ *
+ * Fragment shader uniforms:
+ * - u_colorFront (vec4): Foreground color in RGBA
+ * - u_colorBack (vec4): Background color in RGBA
+ * - u_shape (float): Line shape, 0 = zigzag, 1 = sine, 2-3 = irregular waves, fractional values morph between shapes, needs amplitude > 0, frequency > 0 (0 to 3)
+ * - u_amplitude (float): Wave amplitude, at frequency = 0 it only shifts the lines (0 to 1)
+ * - u_frequency (float): Wave frequency, needs amplitude > 0 (0 to 2)
+ * - u_spacing (float): Space between every two wavy lines (0 to 2)
+ * - u_proportion (float): Blend point between front and back colors, 0.5 = equal distribution (0 to 1)
+ * - u_softness (float): Color transition sharpness, 0 = hard edge, 1 = smooth gradient (0 to 1)
+ *
+ * Vertex shader outputs (used in fragment shader):
+ * - v_patternUV (vec2): UV coordinates for pattern with global sizing (rotation, scale, offset, etc) applied
+ *
+ * Vertex shader uniforms:
+ * - u_resolution (vec2): Canvas resolution in pixels
+ * - u_pixelRatio (float): Device pixel ratio
+ * - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)
+ * - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)
+ * - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas
+ * - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas
+ * - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)
+ * - u_scale (float): Overall zoom level of the graphics (0.01 to 4)
+ * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)
+ * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)
+ * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)
+ *
+ */
+export declare const wavesFragmentShader: string;
+export interface WavesUniforms extends ShaderSizingUniforms {
+    u_colorFront: [number, number, number, number];
+    u_colorBack: [number, number, number, number];
+    u_shape: number;
+    u_frequency: number;
+    u_amplitude: number;
+    u_spacing: number;
+    u_proportion: number;
+    u_softness: number;
+}
+export interface WavesParams extends ShaderSizingParams {
+    colorFront?: string;
+    colorBack?: string;
+    rotation?: number;
+    shape?: number;
+    frequency?: number;
+    amplitude?: number;
+    spacing?: number;
+    proportion?: number;
+    softness?: number;
+}

package/dist/shaders/waves.js

@@ -0,0 +1,66 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import {} from "../shader-sizing.js";
+import { declarePI } from "../shader-utils.js";
+const wavesFragmentShader = `#version 300 es
+precision mediump float;
+
+uniform vec4 u_colorFront;
+uniform vec4 u_colorBack;
+uniform float u_shape;
+uniform float u_frequency;
+uniform float u_amplitude;
+uniform float u_spacing;
+uniform float u_proportion;
+uniform float u_softness;
+
+in vec2 v_patternUV;
+
+out vec4 fragColor;
+
+${declarePI}
+
+void main() {
+  vec2 shape_uv = v_patternUV;
+  shape_uv *= 4.;
+
+  float wave = .5 * cos(shape_uv.x * u_frequency * TWO_PI);
+  float zigzag = 2. * abs(fract(shape_uv.x * u_frequency) - .5);
+  float irregular = sin(shape_uv.x * .25 * u_frequency * TWO_PI) * cos(shape_uv.x * u_frequency * TWO_PI);
+  float irregular2 = .75 * (sin(shape_uv.x * u_frequency * TWO_PI) + .5 * cos(shape_uv.x * .5 * u_frequency * TWO_PI));
+
+  float offset = mix(zigzag, wave, smoothstep(0., 1., u_shape));
+  offset = mix(offset, irregular, smoothstep(1., 2., u_shape));
+  offset = mix(offset, irregular2, smoothstep(2., 3., u_shape));
+  offset *= 2. * u_amplitude;
+
+  float spacing = (.001 + u_spacing);
+  float shape = .5 + .5 * sin((shape_uv.y + offset) * PI / spacing);
+
+  float aa = .0001 + fwidth(shape);
+  float dc = 1. - clamp(u_proportion, 0., 1.);
+  float e0 = dc - u_softness - aa;
+  float e1 = dc + u_softness + aa;
+  float res = smoothstep(min(e0, e1), max(e0, e1), shape);
+
+  vec3 fgColor = u_colorFront.rgb * u_colorFront.a;
+  float fgOpacity = u_colorFront.a;
+  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
+  float bgOpacity = u_colorBack.a;
+
+  vec3 color = fgColor * res;
+  float opacity = fgOpacity * res;
+
+  color += bgColor * (1. - opacity);
+  opacity += bgOpacity * (1. - opacity);
+
+  fragColor = vec4(color, opacity);
+}
+`;
+export {
+  wavesFragmentShader
+};
+//# sourceMappingURL=waves.js.map

package/dist/shaders/waves.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/shaders/waves.ts"],
+  "sourcesContent": ["import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\r\nimport { declarePI } from '../shader-utils.js';\r\n\r\n/**\r\n * Static line pattern configurable into textures ranging from sharp zigzags to smooth flowing waves.\r\n *\r\n * Fragment shader uniforms:\r\n * - u_colorFront (vec4): Foreground color in RGBA\r\n * - u_colorBack (vec4): Background color in RGBA\r\n * - u_shape (float): Line shape, 0 = zigzag, 1 = sine, 2-3 = irregular waves, fractional values morph between shapes, needs amplitude > 0, frequency > 0 (0 to 3)\r\n * - u_amplitude (float): Wave amplitude, at frequency = 0 it only shifts the lines (0 to 1)\r\n * - u_frequency (float): Wave frequency, needs amplitude > 0 (0 to 2)\r\n * - u_spacing (float): Space between every two wavy lines (0 to 2)\r\n * - u_proportion (float): Blend point between front and back colors, 0.5 = equal distribution (0 to 1)\r\n * - u_softness (float): Color transition sharpness, 0 = hard edge, 1 = smooth gradient (0 to 1)\r\n *\r\n * Vertex shader outputs (used in fragment shader):\r\n * - v_patternUV (vec2): UV coordinates for pattern with global sizing (rotation, scale, offset, etc) applied\r\n *\r\n * Vertex shader uniforms:\r\n * - u_resolution (vec2): Canvas resolution in pixels\r\n * - u_pixelRatio (float): Device pixel ratio\r\n * - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)\r\n * - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)\r\n * - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas\r\n * - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas\r\n * - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)\r\n * - u_scale (float): Overall zoom level of the graphics (0.01 to 4)\r\n * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)\r\n * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)\r\n * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)\r\n *\r\n */\r\n\r\n// language=GLSL\r\nexport const wavesFragmentShader: string = `#version 300 es\r\nprecision mediump float;\r\n\r\nuniform vec4 u_colorFront;\r\nuniform vec4 u_colorBack;\r\nuniform float u_shape;\r\nuniform float u_frequency;\r\nuniform float u_amplitude;\r\nuniform float u_spacing;\r\nuniform float u_proportion;\r\nuniform float u_softness;\r\n\r\nin vec2 v_patternUV;\r\n\r\nout vec4 fragColor;\r\n\r\n${ declarePI }\r\n\r\nvoid main() {\r\n  vec2 shape_uv = v_patternUV;\r\n  shape_uv *= 4.;\r\n\r\n  float wave = .5 * cos(shape_uv.x * u_frequency * TWO_PI);\r\n  float zigzag = 2. * abs(fract(shape_uv.x * u_frequency) - .5);\r\n  float irregular = sin(shape_uv.x * .25 * u_frequency * TWO_PI) * cos(shape_uv.x * u_frequency * TWO_PI);\r\n  float irregular2 = .75 * (sin(shape_uv.x * u_frequency * TWO_PI) + .5 * cos(shape_uv.x * .5 * u_frequency * TWO_PI));\r\n\r\n  float offset = mix(zigzag, wave, smoothstep(0., 1., u_shape));\r\n  offset = mix(offset, irregular, smoothstep(1., 2., u_shape));\r\n  offset = mix(offset, irregular2, smoothstep(2., 3., u_shape));\r\n  offset *= 2. * u_amplitude;\r\n\r\n  float spacing = (.001 + u_spacing);\r\n  float shape = .5 + .5 * sin((shape_uv.y + offset) * PI / spacing);\r\n\r\n  float aa = .0001 + fwidth(shape);\r\n  float dc = 1. - clamp(u_proportion, 0., 1.);\r\n  float e0 = dc - u_softness - aa;\r\n  float e1 = dc + u_softness + aa;\r\n  float res = smoothstep(min(e0, e1), max(e0, e1), shape);\r\n\r\n  vec3 fgColor = u_colorFront.rgb * u_colorFront.a;\r\n  float fgOpacity = u_colorFront.a;\r\n  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\r\n  float bgOpacity = u_colorBack.a;\r\n\r\n  vec3 color = fgColor * res;\r\n  float opacity = fgOpacity * res;\r\n\r\n  color += bgColor * (1. - opacity);\r\n  opacity += bgOpacity * (1. - opacity);\r\n\r\n  fragColor = vec4(color, opacity);\r\n}\r\n`;\r\n\r\nexport interface WavesUniforms extends ShaderSizingUniforms {\r\n  u_colorFront: [number, number, number, number];\r\n  u_colorBack: [number, number, number, number];\r\n  u_shape: number;\r\n  u_frequency: number;\r\n  u_amplitude: number;\r\n  u_spacing: number;\r\n  u_proportion: number;\r\n  u_softness: number;\r\n}\r\n\r\nexport interface WavesParams extends ShaderSizingParams {\r\n  colorFront?: string;\r\n  colorBack?: string;\r\n  rotation?: number;\r\n  shape?: number;\r\n  frequency?: number;\r\n  amplitude?: number;\r\n  spacing?: number;\r\n  proportion?: number;\r\n  softness?: number;\r\n}\r\n"],
+  "mappings": ";;;;;AAAA,eAAmE;AACnE,SAAS,iBAAiB;AAkCnB,MAAM,sBAA8B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAgBxC,SAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/shared-webgl-renderer.d.ts

@@ -0,0 +1,63 @@
+/**
+ * A single WebGL2 context shared by every ShaderMount running in "shared" mode.
+ *
+ * Browsers cap the number of live WebGL contexts per page (16 in desktop Chrome). Once a new context would go over
+ * the cap, the browser kills whichever context rendered least recently, and it only brings it back after another
+ * context has been garbage collected. With one context per shader, pages with many shaders, or apps that mount and
+ * unmount them often, end up with shaders that silently turn black.
+ *
+ * Shared mounts compile their programs into this one context instead. On each animation frame the renderer packs
+ * every mount that needs a frame into an atlas on one OffscreenCanvas, draws them all, transfers the result as a
+ * single ImageBitmap and lets each mount copy its region into its own 2D canvas.
+ */
+/** What a ShaderMount implements to be drawn by the shared renderer */
+export interface SharedRenderTarget {
+    /** Called at the start of a frame: advance time and return the pixel size to draw at, or null to skip this frame */
+    prepareSharedFrame(currentTime: number): SharedTargetSize | null;
+    /** Draw into the viewport the renderer has set, whose lower left corner is at (x, y) in GL coordinates */
+    drawShared(x: number, y: number): void;
+    /** Copy this target's region, given with a top left origin, out of the frame into the visible canvas */
+    presentShared(frame: ImageBitmap, x: number, y: number, width: number, height: number): void;
+    /** Called after every frame the target was scheduled for. Return true to be drawn again on the next frame */
+    finishSharedFrame(): boolean;
+    /** The shared context was lost and replaced: recreate every GL resource on the new context */
+    restoreShared(gl: WebGL2RenderingContext): void;
+}
+export interface SharedTargetSize {
+    width: number;
+    height: number;
+}
+export declare class SharedWebGLRenderer {
+    gl: WebGL2RenderingContext;
+    /** Largest width or height a single target can be drawn at */
+    maxSide: number;
+    private canvas;
+    private targets;
+    private scheduled;
+    private rafId;
+    private idleTimeout;
+    private recoveryTimeout;
+    private recoveries;
+    private isLost;
+    private isReleased;
+    private peakWidth;
+    private peakHeight;
+    private framesSinceShrinkCheck;
+    /** The shared renderer, created on first use. Null when the browser can't render this way (no WebGL2 OffscreenCanvas) */
+    static get(): SharedWebGLRenderer | null;
+    private constructor();
+    register(target: SharedRenderTarget): void;
+    unregister(target: SharedRenderTarget): void;
+    /** Draw the target on the next animation frame. Scheduling it several times before then draws it once */
+    schedule(target: SharedRenderTarget): void;
+    private frame;
+    private drawBatch;
+    private ensureCanvasSize;
+    /** Give memory back once the largest atlas we needed recently is much smaller than the canvas */
+    private maybeShrink;
+    private handleContextLost;
+    private scheduleRecovery;
+    private recover;
+    /** Nothing has used the context for a while: release it so it stops counting toward the browser's limit */
+    private release;
+}

package/dist/shared-webgl-renderer.js

@@ -0,0 +1,262 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+const CONTEXT_ATTRIBUTES = {
+  alpha: true,
+  premultipliedAlpha: true,
+  // Every draw is a quad that covers its whole viewport, so multisampling would only cost memory
+  antialias: false,
+  depth: false,
+  stencil: false,
+  preserveDrawingBuffer: false
+};
+const MAX_ATLAS_SIDE = 4096;
+const SIZE_STEP = 256;
+const SHRINK_CHECK_FRAMES = 600;
+const IDLE_RELEASE_MS = 1e4;
+const MAX_RECOVERIES = 5;
+const RECOVERY_WINDOW_MS = 6e4;
+const MAX_RECOVERY_ATTEMPTS = 6;
+let instance = null;
+class SharedWebGLRenderer {
+  gl;
+  /** Largest width or height a single target can be drawn at */
+  maxSide;
+  canvas;
+  targets = /* @__PURE__ */ new Set();
+  scheduled = /* @__PURE__ */ new Set();
+  rafId = null;
+  idleTimeout = null;
+  recoveryTimeout = null;
+  recoveries = [];
+  isLost = false;
+  isReleased = false;
+  peakWidth = 0;
+  peakHeight = 0;
+  framesSinceShrinkCheck = 0;
+  /** The shared renderer, created on first use. Null when the browser can't render this way (no WebGL2 OffscreenCanvas) */
+  static get() {
+    if (instance && !instance.isReleased) return instance;
+    const created = createContext();
+    if (!created) return null;
+    instance = new SharedWebGLRenderer(created.canvas, created.gl);
+    return instance;
+  }
+  constructor(canvas, gl) {
+    this.canvas = canvas;
+    this.gl = gl;
+    this.maxSide = getMaxSide(gl);
+    canvas.addEventListener("webglcontextlost", this.handleContextLost);
+  }
+  register(target) {
+    this.targets.add(target);
+    if (this.idleTimeout !== null) {
+      clearTimeout(this.idleTimeout);
+      this.idleTimeout = null;
+    }
+  }
+  unregister(target) {
+    this.targets.delete(target);
+    this.scheduled.delete(target);
+    if (this.targets.size === 0 && this.idleTimeout === null) {
+      this.idleTimeout = setTimeout(this.release, IDLE_RELEASE_MS);
+    }
+  }
+  /** Draw the target on the next animation frame. Scheduling it several times before then draws it once */
+  schedule(target) {
+    if (!this.targets.has(target)) return;
+    this.scheduled.add(target);
+    if (this.rafId === null && !this.isLost && !this.isReleased) {
+      this.rafId = requestAnimationFrame(this.frame);
+    }
+  }
+  frame = (currentTime) => {
+    this.rafId = null;
+    if (this.gl.isContextLost()) {
+      this.handleContextLost();
+      return;
+    }
+    const targets = Array.from(this.scheduled);
+    this.scheduled.clear();
+    const items = [];
+    for (const target of targets) {
+      const size = target.prepareSharedFrame(currentTime);
+      if (size && size.width > 0 && size.height > 0) {
+        items.push({
+          target,
+          width: Math.min(size.width, this.maxSide),
+          height: Math.min(size.height, this.maxSide),
+          x: 0,
+          y: 0
+        });
+      }
+    }
+    items.sort((a, b) => b.height - a.height);
+    let start = 0;
+    while (start < items.length) {
+      const batch = packShelves(items, start, this.maxSide);
+      this.drawBatch(items.slice(start, batch.end), batch.width, batch.height);
+      start = batch.end;
+    }
+    if (items.length > 0) {
+      this.maybeShrink();
+    }
+    for (const target of targets) {
+      if (target.finishSharedFrame()) {
+        this.schedule(target);
+      }
+    }
+  };
+  drawBatch(items, width, height) {
+    this.ensureCanvasSize(width, height);
+    const gl = this.gl;
+    const bufferHeight = gl.drawingBufferHeight;
+    for (const item of items) {
+      const glY = bufferHeight - item.y - item.height;
+      gl.viewport(item.x, glY, item.width, item.height);
+      item.target.drawShared(item.x, glY);
+    }
+    const frame = this.canvas.transferToImageBitmap();
+    for (const item of items) {
+      item.target.presentShared(frame, item.x, item.y, item.width, item.height);
+    }
+    frame.close();
+  }
+  ensureCanvasSize(width, height) {
+    this.peakWidth = Math.max(this.peakWidth, width);
+    this.peakHeight = Math.max(this.peakHeight, height);
+    if (this.canvas.width >= width && this.canvas.height >= height) return;
+    this.canvas.width = Math.min(this.maxSide, Math.max(this.canvas.width, roundUpToStep(width)));
+    this.canvas.height = Math.min(this.maxSide, Math.max(this.canvas.height, roundUpToStep(height)));
+    const { drawingBufferWidth, drawingBufferHeight } = this.gl;
+    if (drawingBufferWidth < this.canvas.width || drawingBufferHeight < this.canvas.height) {
+      this.maxSide = Math.min(drawingBufferWidth, drawingBufferHeight);
+    }
+  }
+  /** Give memory back once the largest atlas we needed recently is much smaller than the canvas */
+  maybeShrink() {
+    this.framesSinceShrinkCheck++;
+    if (this.framesSinceShrinkCheck < SHRINK_CHECK_FRAMES) return;
+    const width = roundUpToStep(this.peakWidth);
+    const height = roundUpToStep(this.peakHeight);
+    if (width * height * 2 < this.canvas.width * this.canvas.height) {
+      this.canvas.width = width;
+      this.canvas.height = height;
+    }
+    this.framesSinceShrinkCheck = 0;
+    this.peakWidth = 0;
+    this.peakHeight = 0;
+  }
+  handleContextLost = () => {
+    if (this.isReleased || this.isLost) return;
+    this.isLost = true;
+    if (this.rafId !== null) {
+      cancelAnimationFrame(this.rafId);
+      this.rafId = null;
+    }
+    this.scheduleRecovery(0);
+  };
+  scheduleRecovery(attempt) {
+    const now = performance.now();
+    this.recoveries = this.recoveries.filter((time) => now - time < RECOVERY_WINDOW_MS);
+    if (this.recoveries.length >= MAX_RECOVERIES || attempt >= MAX_RECOVERY_ATTEMPTS) {
+      console.warn("Paper Shaders: the shared WebGL context keeps getting lost, giving up on restoring it");
+      return;
+    }
+    const delay = attempt === 0 ? 0 : Math.min(1e3 * 2 ** (attempt - 1), 8e3);
+    this.recoveryTimeout = setTimeout(() => {
+      this.recoveryTimeout = null;
+      requestAnimationFrame(() => this.recover(attempt));
+    }, delay);
+  }
+  recover(attempt) {
+    if (this.isReleased) return;
+    const created = createContext();
+    if (!created) {
+      this.scheduleRecovery(attempt + 1);
+      return;
+    }
+    this.recoveries.push(performance.now());
+    this.canvas.removeEventListener("webglcontextlost", this.handleContextLost);
+    this.canvas = created.canvas;
+    this.gl = created.gl;
+    this.maxSide = getMaxSide(created.gl);
+    this.canvas.addEventListener("webglcontextlost", this.handleContextLost);
+    this.isLost = false;
+    for (const target of this.targets) {
+      target.restoreShared(this.gl);
+    }
+    if (this.scheduled.size > 0 && this.rafId === null) {
+      this.rafId = requestAnimationFrame(this.frame);
+    }
+  }
+  /** Nothing has used the context for a while: release it so it stops counting toward the browser's limit */
+  release = () => {
+    this.idleTimeout = null;
+    if (this.targets.size > 0) return;
+    this.isReleased = true;
+    if (this.rafId !== null) {
+      cancelAnimationFrame(this.rafId);
+      this.rafId = null;
+    }
+    if (this.recoveryTimeout !== null) {
+      clearTimeout(this.recoveryTimeout);
+      this.recoveryTimeout = null;
+    }
+    this.canvas.removeEventListener("webglcontextlost", this.handleContextLost);
+    this.gl.getExtension("WEBGL_lose_context")?.loseContext();
+    if (instance === this) {
+      instance = null;
+    }
+  };
+}
+function createContext() {
+  if (typeof OffscreenCanvas === "undefined" || typeof OffscreenCanvas.prototype.transferToImageBitmap !== "function") {
+    return null;
+  }
+  const canvas = new OffscreenCanvas(SIZE_STEP, SIZE_STEP);
+  const gl = canvas.getContext("webgl2", CONTEXT_ATTRIBUTES);
+  if (!gl) return null;
+  return { canvas, gl };
+}
+function getMaxSide(gl) {
+  const viewportDims = gl.getParameter(gl.MAX_VIEWPORT_DIMS);
+  return Math.min(
+    MAX_ATLAS_SIDE,
+    gl.getParameter(gl.MAX_TEXTURE_SIZE) ?? MAX_ATLAS_SIDE,
+    gl.getParameter(gl.MAX_RENDERBUFFER_SIZE) ?? MAX_ATLAS_SIDE,
+    viewportDims?.[0] ?? MAX_ATLAS_SIDE,
+    viewportDims?.[1] ?? MAX_ATLAS_SIDE
+  );
+}
+function roundUpToStep(size) {
+  return Math.max(SIZE_STEP, Math.ceil(size / SIZE_STEP) * SIZE_STEP);
+}
+function packShelves(items, start, maxSide) {
+  let x = 0;
+  let y = 0;
+  let shelfHeight = 0;
+  let width = 0;
+  let end = start;
+  for (; end < items.length; end++) {
+    const item = items[end];
+    if (x > 0 && x + item.width > maxSide) {
+      y += shelfHeight;
+      x = 0;
+      shelfHeight = 0;
+    }
+    if (end > start && y + item.height > maxSide) break;
+    item.x = x;
+    item.y = y;
+    x += item.width;
+    shelfHeight = Math.max(shelfHeight, item.height);
+    width = Math.max(width, x);
+  }
+  return { end, width, height: y + shelfHeight };
+}
+export {
+  SharedWebGLRenderer
+};
+//# sourceMappingURL=shared-webgl-renderer.js.map

package/dist/shared-webgl-renderer.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/shared-webgl-renderer.ts"],
+  "sourcesContent": ["/**\n * A single WebGL2 context shared by every ShaderMount running in \"shared\" mode.\n *\n * Browsers cap the number of live WebGL contexts per page (16 in desktop Chrome). Once a new context would go over\n * the cap, the browser kills whichever context rendered least recently, and it only brings it back after another\n * context has been garbage collected. With one context per shader, pages with many shaders, or apps that mount and\n * unmount them often, end up with shaders that silently turn black.\n *\n * Shared mounts compile their programs into this one context instead. On each animation frame the renderer packs\n * every mount that needs a frame into an atlas on one OffscreenCanvas, draws them all, transfers the result as a\n * single ImageBitmap and lets each mount copy its region into its own 2D canvas.\n */\n\n/** What a ShaderMount implements to be drawn by the shared renderer */\nexport interface SharedRenderTarget {\n  /** Called at the start of a frame: advance time and return the pixel size to draw at, or null to skip this frame */\n  prepareSharedFrame(currentTime: number): SharedTargetSize | null;\n  /** Draw into the viewport the renderer has set, whose lower left corner is at (x, y) in GL coordinates */\n  drawShared(x: number, y: number): void;\n  /** Copy this target's region, given with a top left origin, out of the frame into the visible canvas */\n  presentShared(frame: ImageBitmap, x: number, y: number, width: number, height: number): void;\n  /** Called after every frame the target was scheduled for. Return true to be drawn again on the next frame */\n  finishSharedFrame(): boolean;\n  /** The shared context was lost and replaced: recreate every GL resource on the new context */\n  restoreShared(gl: WebGL2RenderingContext): void;\n}\n\nexport interface SharedTargetSize {\n  width: number;\n  height: number;\n}\n\ninterface AtlasItem {\n  target: SharedRenderTarget;\n  width: number;\n  height: number;\n  x: number;\n  y: number;\n}\n\nconst CONTEXT_ATTRIBUTES: WebGLContextAttributes = {\n  alpha: true,\n  premultipliedAlpha: true,\n  // Every draw is a quad that covers its whole viewport, so multisampling would only cost memory\n  antialias: false,\n  depth: false,\n  stencil: false,\n  preserveDrawingBuffer: false,\n};\n\n/** Largest atlas side we pack into, keeps each transferred frame at 64MB or less */\nconst MAX_ATLAS_SIDE = 4096;\n/** Canvas sizes are rounded up to this step so small size changes don't reallocate the drawing buffer */\nconst SIZE_STEP = 256;\n/** How many frames to watch the needed size for before shrinking an oversized canvas */\nconst SHRINK_CHECK_FRAMES = 600;\n/** How long to keep the context alive with no mounts, e.g. while an app swaps pages */\nconst IDLE_RELEASE_MS = 10_000;\n/** At most this many context replacements per window, so we never fight other page elements for contexts forever */\nconst MAX_RECOVERIES = 5;\nconst RECOVERY_WINDOW_MS = 60_000;\nconst MAX_RECOVERY_ATTEMPTS = 6;\n\nlet instance: SharedWebGLRenderer | null = null;\n\nexport class SharedWebGLRenderer {\n  public gl: WebGL2RenderingContext;\n  /** Largest width or height a single target can be drawn at */\n  public maxSide: number;\n  private canvas: OffscreenCanvas;\n  private targets: Set<SharedRenderTarget> = new Set();\n  private scheduled: Set<SharedRenderTarget> = new Set();\n  private rafId: number | null = null;\n  private idleTimeout: ReturnType<typeof setTimeout> | null = null;\n  private recoveryTimeout: ReturnType<typeof setTimeout> | null = null;\n  private recoveries: number[] = [];\n  private isLost = false;\n  private isReleased = false;\n  private peakWidth = 0;\n  private peakHeight = 0;\n  private framesSinceShrinkCheck = 0;\n\n  /** The shared renderer, created on first use. Null when the browser can't render this way (no WebGL2 OffscreenCanvas) */\n  static get(): SharedWebGLRenderer | null {\n    if (instance && !instance.isReleased) return instance;\n    const created = createContext();\n    if (!created) return null;\n    instance = new SharedWebGLRenderer(created.canvas, created.gl);\n    return instance;\n  }\n\n  private constructor(canvas: OffscreenCanvas, gl: WebGL2RenderingContext) {\n    this.canvas = canvas;\n    this.gl = gl;\n    this.maxSide = getMaxSide(gl);\n    canvas.addEventListener('webglcontextlost', this.handleContextLost);\n  }\n\n  public register(target: SharedRenderTarget): void {\n    this.targets.add(target);\n    if (this.idleTimeout !== null) {\n      clearTimeout(this.idleTimeout);\n      this.idleTimeout = null;\n    }\n  }\n\n  public unregister(target: SharedRenderTarget): void {\n    this.targets.delete(target);\n    this.scheduled.delete(target);\n    if (this.targets.size === 0 && this.idleTimeout === null) {\n      this.idleTimeout = setTimeout(this.release, IDLE_RELEASE_MS);\n    }\n  }\n\n  /** Draw the target on the next animation frame. Scheduling it several times before then draws it once */\n  public schedule(target: SharedRenderTarget): void {\n    if (!this.targets.has(target)) return;\n    this.scheduled.add(target);\n    if (this.rafId === null && !this.isLost && !this.isReleased) {\n      this.rafId = requestAnimationFrame(this.frame);\n    }\n  }\n\n  private frame = (currentTime: number) => {\n    this.rafId = null;\n\n    if (this.gl.isContextLost()) {\n      this.handleContextLost();\n      return;\n    }\n\n    const targets = Array.from(this.scheduled);\n    this.scheduled.clear();\n\n    const items: AtlasItem[] = [];\n    for (const target of targets) {\n      const size = target.prepareSharedFrame(currentTime);\n      if (size && size.width > 0 && size.height > 0) {\n        items.push({\n          target,\n          width: Math.min(size.width, this.maxSide),\n          height: Math.min(size.height, this.maxSide),\n          x: 0,\n          y: 0,\n        });\n      }\n    }\n\n    // Tallest first keeps the shelves tight\n    items.sort((a, b) => b.height - a.height);\n    let start = 0;\n    while (start < items.length) {\n      const batch = packShelves(items, start, this.maxSide);\n      this.drawBatch(items.slice(start, batch.end), batch.width, batch.height);\n      start = batch.end;\n    }\n\n    if (items.length > 0) {\n      this.maybeShrink();\n    }\n\n    for (const target of targets) {\n      if (target.finishSharedFrame()) {\n        this.schedule(target);\n      }\n    }\n  };\n\n  private drawBatch(items: AtlasItem[], width: number, height: number) {\n    this.ensureCanvasSize(width, height);\n\n    const gl = this.gl;\n    const bufferHeight = gl.drawingBufferHeight;\n    for (const item of items) {\n      const glY = bufferHeight - item.y - item.height;\n      gl.viewport(item.x, glY, item.width, item.height);\n      item.target.drawShared(item.x, glY);\n    }\n\n    // Hands the drawing buffer over without copying it, the canvas starts the next batch with a fresh one\n    const frame = this.canvas.transferToImageBitmap();\n    for (const item of items) {\n      item.target.presentShared(frame, item.x, item.y, item.width, item.height);\n    }\n    frame.close();\n  }\n\n  private ensureCanvasSize(width: number, height: number) {\n    this.peakWidth = Math.max(this.peakWidth, width);\n    this.peakHeight = Math.max(this.peakHeight, height);\n\n    if (this.canvas.width >= width && this.canvas.height >= height) return;\n\n    this.canvas.width = Math.min(this.maxSide, Math.max(this.canvas.width, roundUpToStep(width)));\n    this.canvas.height = Math.min(this.maxSide, Math.max(this.canvas.height, roundUpToStep(height)));\n\n    // Browsers may allocate a smaller drawing buffer than asked for, never pack past what we actually got\n    const { drawingBufferWidth, drawingBufferHeight } = this.gl;\n    if (drawingBufferWidth < this.canvas.width || drawingBufferHeight < this.canvas.height) {\n      this.maxSide = Math.min(drawingBufferWidth, drawingBufferHeight);\n    }\n  }\n\n  /** Give memory back once the largest atlas we needed recently is much smaller than the canvas */\n  private maybeShrink() {\n    this.framesSinceShrinkCheck++;\n    if (this.framesSinceShrinkCheck < SHRINK_CHECK_FRAMES) return;\n\n    const width = roundUpToStep(this.peakWidth);\n    const height = roundUpToStep(this.peakHeight);\n    if (width * height * 2 < this.canvas.width * this.canvas.height) {\n      this.canvas.width = width;\n      this.canvas.height = height;\n    }\n\n    this.framesSinceShrinkCheck = 0;\n    this.peakWidth = 0;\n    this.peakHeight = 0;\n  }\n\n  private handleContextLost = () => {\n    if (this.isReleased || this.isLost) return;\n    this.isLost = true;\n\n    if (this.rafId !== null) {\n      cancelAnimationFrame(this.rafId);\n      this.rafId = null;\n    }\n\n    // We don't wait for 'webglcontextrestored': browsers restore an evicted context only once another context has\n    // been garbage collected, which can take a long time or never happen. The mounts keep showing their last frame\n    // in their 2D canvases while we replace the context with a new one.\n    this.scheduleRecovery(0);\n  };\n\n  private scheduleRecovery(attempt: number) {\n    const now = performance.now();\n    this.recoveries = this.recoveries.filter((time) => now - time < RECOVERY_WINDOW_MS);\n    if (this.recoveries.length >= MAX_RECOVERIES || attempt >= MAX_RECOVERY_ATTEMPTS) {\n      console.warn('Paper Shaders: the shared WebGL context keeps getting lost, giving up on restoring it');\n      return;\n    }\n\n    const delay = attempt === 0 ? 0 : Math.min(1000 * 2 ** (attempt - 1), 8000);\n    // The animation frame also holds recovery off while the tab is hidden, when nothing would be drawn anyway\n    this.recoveryTimeout = setTimeout(() => {\n      this.recoveryTimeout = null;\n      requestAnimationFrame(() => this.recover(attempt));\n    }, delay);\n  }\n\n  private recover(attempt: number) {\n    if (this.isReleased) return;\n\n    const created = createContext();\n    if (!created) {\n      this.scheduleRecovery(attempt + 1);\n      return;\n    }\n\n    this.recoveries.push(performance.now());\n    this.canvas.removeEventListener('webglcontextlost', this.handleContextLost);\n    this.canvas = created.canvas;\n    this.gl = created.gl;\n    this.maxSide = getMaxSide(created.gl);\n    this.canvas.addEventListener('webglcontextlost', this.handleContextLost);\n    this.isLost = false;\n\n    for (const target of this.targets) {\n      target.restoreShared(this.gl);\n    }\n    if (this.scheduled.size > 0 && this.rafId === null) {\n      this.rafId = requestAnimationFrame(this.frame);\n    }\n  }\n\n  /** Nothing has used the context for a while: release it so it stops counting toward the browser's limit */\n  private release = () => {\n    this.idleTimeout = null;\n    if (this.targets.size > 0) return;\n\n    this.isReleased = true;\n    if (this.rafId !== null) {\n      cancelAnimationFrame(this.rafId);\n      this.rafId = null;\n    }\n    if (this.recoveryTimeout !== null) {\n      clearTimeout(this.recoveryTimeout);\n      this.recoveryTimeout = null;\n    }\n\n    this.canvas.removeEventListener('webglcontextlost', this.handleContextLost);\n    this.gl.getExtension('WEBGL_lose_context')?.loseContext();\n\n    if (instance === this) {\n      instance = null;\n    }\n  };\n}\n\nfunction createContext(): { canvas: OffscreenCanvas; gl: WebGL2RenderingContext } | null {\n  if (typeof OffscreenCanvas === 'undefined' || typeof OffscreenCanvas.prototype.transferToImageBitmap !== 'function') {\n    return null;\n  }\n\n  const canvas = new OffscreenCanvas(SIZE_STEP, SIZE_STEP);\n  const gl = canvas.getContext('webgl2', CONTEXT_ATTRIBUTES);\n  if (!gl) return null;\n\n  return { canvas, gl };\n}\n\nfunction getMaxSide(gl: WebGL2RenderingContext): number {\n  const viewportDims = gl.getParameter(gl.MAX_VIEWPORT_DIMS) as Int32Array | null;\n  return Math.min(\n    MAX_ATLAS_SIDE,\n    gl.getParameter(gl.MAX_TEXTURE_SIZE) ?? MAX_ATLAS_SIDE,\n    gl.getParameter(gl.MAX_RENDERBUFFER_SIZE) ?? MAX_ATLAS_SIDE,\n    viewportDims?.[0] ?? MAX_ATLAS_SIDE,\n    viewportDims?.[1] ?? MAX_ATLAS_SIDE\n  );\n}\n\nfunction roundUpToStep(size: number): number {\n  return Math.max(SIZE_STEP, Math.ceil(size / SIZE_STEP) * SIZE_STEP);\n}\n\n/**\n * Place items left to right on shelves, starting a new shelf when one is full, until the atlas is full.\n * Writes each item's x/y (top left origin) and returns where the batch ended and the atlas size it needs.\n */\nfunction packShelves(\n  items: AtlasItem[],\n  start: number,\n  maxSide: number\n): { end: number; width: number; height: number } {\n  let x = 0;\n  let y = 0;\n  let shelfHeight = 0;\n  let width = 0;\n  let end = start;\n\n  for (; end < items.length; end++) {\n    const item = items[end]!;\n    if (x > 0 && x + item.width > maxSide) {\n      y += shelfHeight;\n      x = 0;\n      shelfHeight = 0;\n    }\n    // Every batch takes at least one item, sizes are already clamped to maxSide so it always fits\n    if (end > start && y + item.height > maxSide) break;\n\n    item.x = x;\n    item.y = y;\n    x += item.width;\n    shelfHeight = Math.max(shelfHeight, item.height);\n    width = Math.max(width, x);\n  }\n\n  return { end, width, height: y + shelfHeight };\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/types.d.ts

@@ -0,0 +1,3 @@
+export type vec4 = [number, number, number, number];
+export type vec3 = [number, number, number];
+export type vec2 = [number, number];

package/dist/types.js

@@ -0,0 +1,6 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/vertex-shader.d.ts

@@ -0,0 +1,2 @@
+/** Vertex shader for the shader mount */
+export declare const vertexShaderSource = "#version 300 es\nprecision mediump float;\n\nlayout(location = 0) in vec4 a_position;\n\nuniform vec2 u_resolution;\nuniform float u_pixelRatio;\nuniform float u_imageAspectRatio;\nuniform float u_originX;\nuniform float u_originY;\nuniform float u_worldWidth;\nuniform float u_worldHeight;\nuniform float u_fit;\nuniform float u_scale;\nuniform float u_rotation;\nuniform float u_offsetX;\nuniform float u_offsetY;\n\nout vec2 v_objectUV;\nout vec2 v_objectBoxSize;\nout vec2 v_responsiveUV;\nout vec2 v_responsiveBoxGivenSize;\nout vec2 v_patternUV;\nout vec2 v_patternBoxSize;\nout vec2 v_imageUV;\n\nvec3 getBoxSize(float boxRatio, vec2 givenBoxSize) {\n  vec2 box = vec2(0.);\n  // fit = none\n  box.x = boxRatio * min(givenBoxSize.x / boxRatio, givenBoxSize.y);\n  float noFitBoxWidth = box.x;\n  if (u_fit == 1.) { // fit = contain\n    box.x = boxRatio * min(u_resolution.x / boxRatio, u_resolution.y);\n  } else if (u_fit == 2.) { // fit = cover\n    box.x = boxRatio * max(u_resolution.x / boxRatio, u_resolution.y);\n  }\n  box.y = box.x / boxRatio;\n  return vec3(box, noFitBoxWidth);\n}\n\nvoid main() {\n  gl_Position = a_position;\n\n  vec2 uv = gl_Position.xy * .5;\n  vec2 boxOrigin = vec2(.5 - u_originX, u_originY - .5);\n  vec2 givenBoxSize = vec2(u_worldWidth, u_worldHeight);\n  givenBoxSize = max(givenBoxSize, vec2(1.)) * u_pixelRatio;\n  float r = u_rotation * 3.14159265358979323846 / 180.;\n  mat2 graphicRotation = mat2(cos(r), sin(r), -sin(r), cos(r));\n  vec2 graphicOffset = vec2(-u_offsetX, u_offsetY);\n\n\n  // ===================================================\n\n  float fixedRatio = 1.;\n  vec2 fixedRatioBoxGivenSize = vec2(\n  (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,\n  (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y\n  );\n\n  v_objectBoxSize = getBoxSize(fixedRatio, fixedRatioBoxGivenSize).xy;\n  vec2 objectWorldScale = u_resolution.xy / v_objectBoxSize;\n\n  v_objectUV = uv;\n  v_objectUV *= objectWorldScale;\n  v_objectUV += boxOrigin * (objectWorldScale - 1.);\n  v_objectUV += graphicOffset;\n  v_objectUV /= u_scale;\n  v_objectUV = graphicRotation * v_objectUV;\n\n  // ===================================================\n\n  v_responsiveBoxGivenSize = vec2(\n  (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,\n  (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y\n  );\n  float responsiveRatio = v_responsiveBoxGivenSize.x / v_responsiveBoxGivenSize.y;\n  vec2 responsiveBoxSize = getBoxSize(responsiveRatio, v_responsiveBoxGivenSize).xy;\n  vec2 responsiveBoxScale = u_resolution.xy / responsiveBoxSize;\n\n  #ifdef ADD_HELPERS\n  v_responsiveHelperBox = uv;\n  v_responsiveHelperBox *= responsiveBoxScale;\n  v_responsiveHelperBox += boxOrigin * (responsiveBoxScale - 1.);\n  #endif\n\n  v_responsiveUV = uv;\n  v_responsiveUV *= responsiveBoxScale;\n  v_responsiveUV += boxOrigin * (responsiveBoxScale - 1.);\n  v_responsiveUV += graphicOffset;\n  v_responsiveUV /= u_scale;\n  v_responsiveUV.x *= responsiveRatio;\n  v_responsiveUV = graphicRotation * v_responsiveUV;\n  v_responsiveUV.x /= responsiveRatio;\n\n  // ===================================================\n\n  float patternBoxRatio = givenBoxSize.x / givenBoxSize.y;\n  vec2 patternBoxGivenSize = vec2(\n  (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,\n  (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y\n  );\n  patternBoxRatio = patternBoxGivenSize.x / patternBoxGivenSize.y;\n\n  vec3 boxSizeData = getBoxSize(patternBoxRatio, patternBoxGivenSize);\n  v_patternBoxSize = boxSizeData.xy;\n  float patternBoxNoFitBoxWidth = boxSizeData.z;\n  vec2 patternBoxScale = u_resolution.xy / v_patternBoxSize;\n\n  v_patternUV = uv;\n  v_patternUV += graphicOffset / patternBoxScale;\n  v_patternUV += boxOrigin;\n  v_patternUV -= boxOrigin / patternBoxScale;\n  v_patternUV *= u_resolution.xy;\n  v_patternUV /= u_pixelRatio;\n  if (u_fit > 0.) {\n    v_patternUV *= (patternBoxNoFitBoxWidth / v_patternBoxSize.x);\n  }\n  v_patternUV /= u_scale;\n  v_patternUV = graphicRotation * v_patternUV;\n  v_patternUV += boxOrigin / patternBoxScale;\n  v_patternUV -= boxOrigin;\n  // x100 is a default multiplier between vertex and fragmant shaders\n  // we use it to avoid UV presision issues\n  v_patternUV *= .01;\n\n  // ===================================================\n\n  vec2 imageBoxSize;\n  if (u_fit == 1.) { // contain\n    imageBoxSize.x = min(u_resolution.x / u_imageAspectRatio, u_resolution.y) * u_imageAspectRatio;\n  } else if (u_fit == 2.) { // cover\n    imageBoxSize.x = max(u_resolution.x / u_imageAspectRatio, u_resolution.y) * u_imageAspectRatio;\n  } else {\n    imageBoxSize.x = min(10.0, 10.0 / u_imageAspectRatio * u_imageAspectRatio);\n  }\n  imageBoxSize.y = imageBoxSize.x / u_imageAspectRatio;\n  vec2 imageBoxScale = u_resolution.xy / imageBoxSize;\n\n  v_imageUV = uv;\n  v_imageUV *= imageBoxScale;\n  v_imageUV += boxOrigin * (imageBoxScale - 1.);\n  v_imageUV += graphicOffset;\n  v_imageUV /= u_scale;\n  v_imageUV.x *= u_imageAspectRatio;\n  v_imageUV = graphicRotation * v_imageUV;\n  v_imageUV.x /= u_imageAspectRatio;\n\n  v_imageUV += .5;\n  v_imageUV.y = 1. - v_imageUV.y;\n}";