odori 0.0.6 → 0.0.8

package/dist/effects.js

@@ -0,0 +1,628 @@
+"use client";
+import {
+  SceneContext,
+  useFrame,
+  useReadiness,
+  useVideo
+} from "./chunk-UMNWCL6I.js";
+
+// src/effects/capture.ts
+var captureMethod = () => {
+  if (typeof document === "undefined") return "foreign-object";
+  const probe = document.createElement("canvas").getContext("2d");
+  return probe && typeof probe.drawElement === "function" ? "native" : "foreign-object";
+};
+var PAINTED = [
+  "align-items",
+  "background",
+  "border",
+  "border-radius",
+  "box-shadow",
+  "box-sizing",
+  "clip-path",
+  "color",
+  "display",
+  "filter",
+  "flex",
+  "flex-direction",
+  "flex-wrap",
+  "font",
+  "gap",
+  "grid",
+  "grid-template-columns",
+  "grid-template-rows",
+  "height",
+  "justify-content",
+  "left",
+  "letter-spacing",
+  "line-height",
+  "margin",
+  "mix-blend-mode",
+  "opacity",
+  "overflow",
+  "padding",
+  "font-family",
+  "font-size",
+  "font-stretch",
+  "font-style",
+  "font-variant",
+  "font-weight",
+  "position",
+  "right",
+  "text-align",
+  "text-decoration",
+  "text-shadow",
+  "text-transform",
+  "top",
+  "transform",
+  "transform-origin",
+  "white-space",
+  "width",
+  "word-break",
+  "writing-mode",
+  "z-index"
+];
+var inlineStyles = (source, clone) => {
+  const computed = window.getComputedStyle(source);
+  const declarations = [];
+  for (const property of PAINTED) {
+    const value = computed.getPropertyValue(property);
+    if (value && value !== "none" && value !== "normal" && value !== "auto") {
+      declarations.push(`${property}:${value}`);
+    }
+  }
+  clone.setAttribute("style", declarations.join(";"));
+  clone.removeAttribute("class");
+  const sourceChildren = source.children;
+  const cloneChildren = clone.children;
+  for (let index = 0; index < sourceChildren.length; index += 1) {
+    const child = cloneChildren[index];
+    if (child) inlineStyles(sourceChildren[index], child);
+  }
+};
+var inlineCanvases = (source, clone) => {
+  const sourceCanvases = source.querySelectorAll("canvas");
+  const cloneCanvases = clone.querySelectorAll("canvas");
+  for (let index = 0; index < sourceCanvases.length; index += 1) {
+    const original = sourceCanvases[index];
+    const placeholder = cloneCanvases[index];
+    if (!placeholder) continue;
+    let url = "";
+    try {
+      url = original.toDataURL("image/png");
+    } catch {
+    }
+    const image = clone.ownerDocument.createElement("img");
+    image.setAttribute("src", url);
+    image.setAttribute("width", String(original.width));
+    image.setAttribute("height", String(original.height));
+    image.setAttribute("style", placeholder.getAttribute("style") ?? "");
+    placeholder.replaceWith(image);
+  }
+};
+var serializeElement = (element) => {
+  const clone = element.cloneNode(true);
+  inlineStyles(element, clone);
+  inlineCanvases(element, clone);
+  clone.style.position = "static";
+  clone.style.left = "auto";
+  clone.style.top = "auto";
+  clone.style.right = "auto";
+  clone.style.bottom = "auto";
+  clone.style.transform = "none";
+  clone.style.pointerEvents = "auto";
+  return new XMLSerializer().serializeToString(clone);
+};
+var captureElement = async (element, options) => {
+  const { width, height } = options;
+  if (document.fonts?.ready) await document.fonts.ready;
+  const markup = serializeElement(element);
+  const svg = [
+    `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">`,
+    `<foreignObject width="100%" height="100%">`,
+    `<div xmlns="http://www.w3.org/1999/xhtml" style="width:${width}px;height:${height}px">`,
+    markup,
+    `</div></foreignObject></svg>`
+  ].join("");
+  const image = new Image(width, height);
+  image.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
+  await image.decode();
+  return image;
+};
+
+// src/effects/shader.ts
+var numberUniform = (defaultValue) => ({ size: 1, defaultValue });
+var vec2Uniform = (defaultValue) => ({ size: 2, defaultValue });
+var vec3Uniform = (defaultValue) => ({ size: 3, defaultValue });
+var vec4Uniform = (defaultValue) => ({
+  size: 4,
+  defaultValue
+});
+var defineShaderEffect = (definition) => {
+  assertPortableShader(definition.name, definition.fragmentShader);
+  return (values = {}) => ({ definition, values });
+};
+var VERTEX_SHADER = `#version 300 es
+void main() {
+  vec2 corners[3] = vec2[3](vec2(-1.0, -1.0), vec2(3.0, -1.0), vec2(-1.0, 3.0));
+  gl_Position = vec4(corners[gl_VertexID], 0.0, 1.0);
+}`;
+var SHADER_PRELUDE = `#version 300 es
+precision highp float;
+uniform sampler2D source;
+uniform vec2 resolution;
+uniform float frame;
+uniform float fps;
+uniform float seconds;
+uniform float progress;
+out vec4 odoriColour;
+// sample is a reserved word in GLSL ES 3.00, so the helper is tex.
+vec4 tex(vec2 uv) { return texture(source, uv); }
+
+/*
+ * Randomness that is the same on every backend.
+ *
+ * The idiom everyone reaches for is fract(sin(dot(p, k)) * 43758.5453), and it
+ * is not portable: sin() of a large argument is implementation defined, so
+ * SwiftShader and Metal disagree. Measured on one frame of grain, that idiom
+ * scored 0.75 SSIM between the two while this one scores 0.999993. Integer
+ * arithmetic in GLSL ES 3.00 is exact, so it is the only randomness a renderer
+ * that has to reproduce itself can use.
+ *
+ * Seed from the frame, never from a clock, and the same frame keeps the same
+ * noise however it was rendered.
+ */
+uint odoriPcg(uint v) {
+  uint state = v * 747796405u + 2891336453u;
+  uint word = ((state >> ((state >> 28u) + 4u)) ^ state) * 277803737u;
+  return (word >> 22u) ^ word;
+}
+float hash(vec2 p) {
+  uvec2 q = uvec2(ivec2(p));
+  return float(odoriPcg(q.x ^ odoriPcg(q.y)) & 0xffffffu) / float(0xffffffu);
+}
+`;
+var ShaderCompileError = class extends Error {
+  constructor(effect, log, source) {
+    const line = Number(/(\d+):(\d+)/.exec(log)?.[2] ?? 0);
+    const quoted = source.split("\n")[line - 1];
+    super(`${effect}: ${log.trim()}${quoted ? `
+  ${line} | ${quoted.trim()}` : ""}`);
+    this.effect = effect;
+    this.log = log;
+    this.source = source;
+    this.name = "ShaderCompileError";
+  }
+  effect;
+  log;
+  source;
+};
+var assertPortableShader = (name, fragmentShader) => {
+  if (/fract\s*\(\s*sin\s*\(/.test(fragmentShader)) {
+    throw new Error(
+      `${name}: fract(sin(...)) is not reproducible. sin() of a large argument is implementation defined, so this renders differently on different graphics backends. Use the prelude's hash(vec2), which is exact everywhere.`
+    );
+  }
+};
+var compile = (gl, type, source, effect) => {
+  const shader = gl.createShader(type);
+  if (!shader) throw new Error(`${effect}: the browser refused to create a shader.`);
+  gl.shaderSource(shader, source);
+  gl.compileShader(shader);
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    const log = gl.getShaderInfoLog(shader) ?? "compilation failed";
+    gl.deleteShader(shader);
+    throw new ShaderCompileError(effect, log, source);
+  }
+  return shader;
+};
+var createTarget = (gl, width, height) => {
+  const texture = gl.createTexture();
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+  const framebuffer = gl.createFramebuffer();
+  gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
+  gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
+  gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+  return { texture, framebuffer };
+};
+var EffectPipeline = class {
+  gl;
+  passes = [];
+  sourceTexture;
+  targets = null;
+  width = 0;
+  height = 0;
+  constructor(canvas, effects) {
+    const gl = canvas.getContext("webgl2", {
+      // The buffer is read back by odori test and by the screenshot, and a
+      // composited buffer is cleared unless this is asked for.
+      preserveDrawingBuffer: true,
+      premultipliedAlpha: false,
+      antialias: false
+    });
+    if (!gl) {
+      throw new Error(
+        "WebGL2 is unavailable. Studio needs hardware or software GL; the render worker enables ANGLE's software backend itself."
+      );
+    }
+    this.gl = gl;
+    this.sourceTexture = gl.createTexture();
+    gl.bindTexture(gl.TEXTURE_2D, this.sourceTexture);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+    const vertex = compile(gl, gl.VERTEX_SHADER, VERTEX_SHADER, "odori");
+    for (const { definition } of effects) {
+      const source = `${SHADER_PRELUDE}${definition.fragmentShader}`;
+      const program = gl.createProgram();
+      gl.attachShader(program, vertex);
+      gl.attachShader(program, compile(gl, gl.FRAGMENT_SHADER, source, definition.name));
+      gl.linkProgram(program);
+      if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+        throw new Error(`${definition.name}: ${gl.getProgramInfoLog(program) ?? "link failed"}`);
+      }
+      const locations = /* @__PURE__ */ new Map();
+      for (const name of ["source", "resolution", "frame", "fps", "seconds", "progress", ...Object.keys(definition.uniforms)]) {
+        locations.set(name, gl.getUniformLocation(program, name));
+      }
+      this.passes.push({ program, locations, definition });
+    }
+  }
+  /** The renderer as Studio reports it, for the capability panel. */
+  get renderer() {
+    const debug = this.gl.getExtension("WEBGL_debug_renderer_info");
+    return String(this.gl.getParameter(debug ? debug.UNMASKED_RENDERER_WEBGL : this.gl.RENDERER));
+  }
+  resize(width, height) {
+    if (this.width === width && this.height === height && this.targets) return;
+    this.disposeTargets();
+    this.width = width;
+    this.height = height;
+    this.targets = this.passes.length > 1 ? [createTarget(this.gl, width, height), createTarget(this.gl, width, height)] : null;
+  }
+  setUniforms(pass, effect, clock) {
+    const { gl } = this;
+    const at = (name) => pass.locations.get(name) ?? null;
+    gl.uniform1i(at("source"), 0);
+    gl.uniform2f(at("resolution"), this.width, this.height);
+    gl.uniform1f(at("frame"), clock.frame);
+    gl.uniform1f(at("fps"), clock.fps);
+    gl.uniform1f(at("seconds"), clock.frame / clock.fps);
+    gl.uniform1f(at("progress"), clock.frame / Math.max(1, clock.durationInFrames - 1));
+    for (const [name, spec] of Object.entries(pass.definition.uniforms)) {
+      const value = effect.values[name] ?? spec.defaultValue;
+      const location = at(name);
+      if (location === null) continue;
+      const numbers = typeof value === "number" ? [value] : [...value];
+      if (spec.size === 1) gl.uniform1f(location, numbers[0]);
+      else if (spec.size === 2) gl.uniform2f(location, numbers[0], numbers[1]);
+      else if (spec.size === 3) gl.uniform3f(location, numbers[0], numbers[1], numbers[2]);
+      else gl.uniform4f(location, numbers[0], numbers[1], numbers[2], numbers[3]);
+    }
+  }
+  /** Upload the captured picture and run every pass over it. */
+  paint(source, effects, clock) {
+    const { gl } = this;
+    const canvas = gl.canvas;
+    this.resize(canvas.width, canvas.height);
+    gl.viewport(0, 0, this.width, this.height);
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, this.sourceTexture);
+    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
+    let input = this.sourceTexture;
+    this.passes.forEach((pass, index) => {
+      const last = index === this.passes.length - 1;
+      const target = last || !this.targets ? null : this.targets[index % 2];
+      gl.bindFramebuffer(gl.FRAMEBUFFER, target ? target.framebuffer : null);
+      gl.useProgram(pass.program);
+      gl.activeTexture(gl.TEXTURE0);
+      gl.bindTexture(gl.TEXTURE_2D, input);
+      this.setUniforms(pass, effects[index], clock);
+      gl.drawArrays(gl.TRIANGLES, 0, 3);
+      if (target) input = target.texture;
+    });
+    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    gl.finish();
+  }
+  disposeTargets() {
+    if (!this.targets) return;
+    for (const target of this.targets) {
+      this.gl.deleteFramebuffer(target.framebuffer);
+      this.gl.deleteTexture(target.texture);
+    }
+    this.targets = null;
+  }
+  dispose() {
+    this.disposeTargets();
+    this.gl.deleteTexture(this.sourceTexture);
+    for (const pass of this.passes) this.gl.deleteProgram(pass.program);
+    this.passes.length = 0;
+  }
+};
+
+// src/effects/surface.tsx
+import { useContext, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+var hidden = {
+  // Laid out at full size and painted, because an element with `display:none`
+  // has no computed style worth copying, but kept off screen and out of the
+  // way of hit testing.
+  left: "-99999px",
+  pointerEvents: "none",
+  position: "fixed",
+  top: 0
+};
+var HtmlInCanvas = ({
+  children,
+  width,
+  height,
+  onInit,
+  onPaint,
+  onDispose,
+  onCapabilities
+}) => {
+  const video = useVideo();
+  const frame = useFrame();
+  const readiness = useReadiness();
+  const scene = useContext(SceneContext);
+  const surfaceWidth = width ?? video.width;
+  const surfaceHeight = height ?? video.height;
+  const source = useRef(null);
+  const canvas = useRef(null);
+  const renderer = useRef(null);
+  const [failure, setFailure] = useState(null);
+  const latest = useRef({ onInit, onPaint, onDispose, onCapabilities });
+  latest.current = { onInit, onPaint, onDispose, onCapabilities };
+  useIsomorphicLayoutEffect(() => {
+    const element = canvas.current;
+    if (!element || !latest.current.onInit) return void 0;
+    try {
+      renderer.current = latest.current.onInit({ canvas: element, width: surfaceWidth, height: surfaceHeight });
+    } catch (error) {
+      setFailure(error instanceof Error ? error.message : String(error));
+    }
+    return () => {
+      if (renderer.current !== null) latest.current.onDispose?.(renderer.current);
+      renderer.current = null;
+    };
+  }, [surfaceWidth, surfaceHeight]);
+  useIsomorphicLayoutEffect(() => {
+    const host = source.current;
+    const element = canvas.current;
+    if (!host || !element) return void 0;
+    if (host.offsetWidth === 0 || host.offsetHeight === 0) return void 0;
+    const release = readiness.hold();
+    let cancelled = false;
+    void (async () => {
+      try {
+        const picture = await captureElement(host, { width: surfaceWidth, height: surfaceHeight });
+        if (cancelled) return;
+        const paint = latest.current.onPaint;
+        const clock = {
+          frame,
+          fps: video.fps,
+          seconds: frame / video.fps,
+          progress: scene ? Math.min(1, Math.max(0, (frame - scene.start) / Math.max(1, scene.durationInFrames - 1))) : frame / Math.max(1, video.durationInFrames - 1),
+          durationInFrames: scene ? scene.durationInFrames : video.durationInFrames,
+          width: surfaceWidth,
+          height: surfaceHeight
+        };
+        if (paint) {
+          paint({ ...clock, renderer: renderer.current, source: picture, canvas: element });
+        } else {
+          const context = element.getContext("2d");
+          context?.clearRect(0, 0, element.width, element.height);
+          context?.drawImage(picture, 0, 0, element.width, element.height);
+        }
+      } catch (error) {
+        if (!cancelled) setFailure(error instanceof Error ? error.message : String(error));
+      } finally {
+        release();
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [frame, surfaceWidth, surfaceHeight]);
+  useEffect(() => {
+    latest.current.onCapabilities?.({
+      capture: captureMethod(),
+      backend: latest.current.onInit ? "webgl2" : "canvas-2d",
+      ...failure ? { error: failure } : {}
+    });
+  }, [failure]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: source,
+        "data-odori-capture": "",
+        style: { ...hidden, height: surfaceHeight, width: surfaceWidth },
+        "aria-hidden": "true",
+        children
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "canvas",
+      {
+        ref: canvas,
+        width: surfaceWidth,
+        height: surfaceHeight,
+        style: { display: "block", height: "100%", width: "100%" }
+      }
+    ),
+    failure ? /* @__PURE__ */ jsx(
+      "pre",
+      {
+        style: {
+          background: "#1a0b0b",
+          color: "#ff9d9d",
+          font: "13px ui-monospace, monospace",
+          inset: 0,
+          margin: 0,
+          padding: 24,
+          position: "absolute",
+          whiteSpace: "pre-wrap"
+        },
+        children: failure
+      }
+    ) : null
+  ] });
+};
+var EffectSurface = ({
+  children,
+  effects,
+  width,
+  height,
+  onCapabilities
+}) => {
+  const pipeline = useRef(null);
+  const list = useRef(effects);
+  list.current = effects;
+  return /* @__PURE__ */ jsx(
+    HtmlInCanvas,
+    {
+      width,
+      height,
+      onInit: ({ canvas }) => {
+        try {
+          pipeline.current = new EffectPipeline(canvas, list.current);
+        } catch (error) {
+          pipeline.current = null;
+          throw error instanceof ShaderCompileError ? error : new Error(String(error));
+        }
+        return pipeline.current;
+      },
+      onPaint: ({ renderer, source, frame, fps, durationInFrames }) => {
+        if (!renderer) return;
+        renderer.paint(source, list.current, { frame, fps, durationInFrames });
+      },
+      onDispose: (renderer) => renderer?.dispose(),
+      onCapabilities,
+      children
+    }
+  );
+};
+
+// src/effects/library.ts
+var barrelDistortion = defineShaderEffect({
+  name: "barrel-distortion",
+  uniforms: {
+    amount: numberUniform(0.3),
+    radius: numberUniform(0.6),
+    centre: vec2Uniform([0.5, 0.5])
+  },
+  fragmentShader: `
+uniform float amount;
+uniform float radius;
+uniform vec2 centre;
+void main() {
+  vec2 uv = gl_FragCoord.xy / resolution;
+  // Corrected for the frame's shape, or a wide composition bulges into an
+  // oval instead of a circle.
+  vec2 aspect = vec2(resolution.x / resolution.y, 1.0);
+  vec2 offset = (uv - centre) * aspect;
+  float distance = length(offset) / max(radius, 0.0001);
+  float scale = 1.0 + amount * (1.0 - clamp(distance, 0.0, 1.0));
+  odoriColour = tex(centre + offset / scale / aspect);
+}`
+});
+var rgbSplit = defineShaderEffect({
+  name: "rgb-split",
+  uniforms: { amount: numberUniform(4), angle: numberUniform(0) },
+  fragmentShader: `
+uniform float amount;
+uniform float angle;
+void main() {
+  vec2 uv = gl_FragCoord.xy / resolution;
+  vec2 shift = vec2(cos(angle), sin(angle)) * amount / resolution;
+  odoriColour = vec4(tex(uv + shift).r, tex(uv).g, tex(uv - shift).b, tex(uv).a);
+}`
+});
+var scanlines = defineShaderEffect({
+  name: "scanlines",
+  uniforms: { opacity: numberUniform(0.08), spacing: numberUniform(3) },
+  fragmentShader: `
+uniform float opacity;
+uniform float spacing;
+void main() {
+  vec2 uv = gl_FragCoord.xy / resolution;
+  float line = step(0.5, fract(gl_FragCoord.y / max(spacing, 1.0)));
+  odoriColour = tex(uv) * (1.0 - opacity * line);
+}`
+});
+var pixelate = defineShaderEffect({
+  name: "pixelate",
+  uniforms: { size: numberUniform(8) },
+  fragmentShader: `
+uniform float size;
+void main() {
+  float block = max(size, 1.0);
+  vec2 snapped = (floor(gl_FragCoord.xy / block) + 0.5) * block;
+  odoriColour = tex(snapped / resolution);
+}`
+});
+var filmGrain = defineShaderEffect({
+  name: "film-grain",
+  uniforms: { amount: numberUniform(0.06) },
+  fragmentShader: `
+uniform float amount;
+void main() {
+  vec2 uv = gl_FragCoord.xy / resolution;
+  float noise = hash(gl_FragCoord.xy + frame) - 0.5;
+  odoriColour = tex(uv) + vec4(vec3(noise * amount), 0.0);
+}`
+});
+var magnify = defineShaderEffect({
+  name: "magnify",
+  uniforms: {
+    amount: numberUniform(1.6),
+    radius: numberUniform(0.22),
+    centre: vec2Uniform([0.5, 0.5]),
+    softness: numberUniform(0.06)
+  },
+  fragmentShader: `
+uniform float amount;
+uniform float radius;
+uniform vec2 centre;
+uniform float softness;
+void main() {
+  vec2 uv = gl_FragCoord.xy / resolution;
+  vec2 aspect = vec2(resolution.x / resolution.y, 1.0);
+  vec2 offset = (uv - centre) * aspect;
+  float inside = 1.0 - smoothstep(radius - softness, radius + softness, length(offset));
+  float scale = mix(1.0, max(amount, 0.0001), inside);
+  odoriColour = tex(centre + offset / scale / aspect);
+}`
+});
+export {
+  EffectPipeline,
+  EffectSurface,
+  HtmlInCanvas,
+  SHADER_PRELUDE,
+  ShaderCompileError,
+  assertPortableShader,
+  barrelDistortion,
+  captureElement,
+  captureMethod,
+  defineShaderEffect,
+  filmGrain,
+  magnify,
+  numberUniform,
+  pixelate,
+  rgbSplit,
+  scanlines,
+  serializeElement,
+  vec2Uniform,
+  vec3Uniform,
+  vec4Uniform
+};
+//# sourceMappingURL=effects.js.map