@vysmo/transitions 0.1.0

package/src/transitions/wind.ts

@@ -0,0 +1,48 @@
+import { defineTransition } from "./define.js";
+
+/**
+ * Ported from gl-transitions' wind. Per-row random offset creates a ragged,
+ * wind-blown edge sweeping across the frame.
+ */
+export const wind = defineTransition({
+  name: "wind",
+  defaults: {
+    size: 0.2,
+    direction: [1, 0],
+  },
+  glsl: `
+uniform float uSize;
+uniform vec2 uDirection;
+
+float hash(vec2 p) {
+  return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453);
+}
+
+vec4 transition(vec2 uv) {
+  vec2 d = normalize(uDirection);
+  // Perpendicular coordinate: one random value per "row" along the direction.
+  vec2 perp = vec2(-d.y, d.x);
+  float rowCoord = dot(uv, perp);
+  float r = hash(vec2(rowCoord, 0.0));
+
+  // Projected position along direction, normalized to [0, 1] regardless
+  // of direction (axis-aligned or diagonal). See paint-bleed.ts.
+  float maxProj = max((abs(d.x) + abs(d.y)) * 0.5, 0.0001);
+  float projected = 0.5 + dot(uv - 0.5, -d) / (2.0 * maxProj);
+
+  // size is a fractional ratio in [0, 1]: how much per-row jitter the
+  // wavefront has. Values >1 break endpoint correctness because the
+  // smoothstep range no longer covers the projected coordinate at p=0 or
+  // p=1, leaving per-row stripes visible. Clamp here so the transition
+  // is reliable regardless of caller input.
+  float size = clamp(uSize, 0.0, 1.0);
+
+  // Wavefront sweeps from 0 to 1 + size. Per-row random shift gives ragged edge.
+  // Note: smoothstep(edge0, edge1, x) is undefined when edge0 > edge1, so
+  // express the inverted form as 1 - smoothstep(low, high, x) instead.
+  float arg = projected * (1.0 - size) + size * r - uProgress * (1.0 + size);
+  float m = 1.0 - smoothstep(-size, 0.0, arg);
+  return mix(getFromColor(uv), getToColor(uv), m);
+}
+`,
+});

package/src/transitions/wipe-directional.ts

@@ -0,0 +1,26 @@
+import { defineTransition } from "./define.js";
+
+export const wipeDirectional = defineTransition({
+  name: "wipe-directional",
+  defaults: {
+    angle: 0,
+    softness: 0.05,
+  },
+  glsl: `
+uniform float uAngle;
+uniform float uSoftness;
+
+vec4 transition(vec2 uv) {
+  vec2 dir = vec2(cos(uAngle), sin(uAngle));
+  // Normalize the projection by max |dot(uv-0.5, dir)| = (|dx|+|dy|)/2 so
+  // gradient ∈ [0, 1] for any angle (axis-aligned or diagonal). Without
+  // this, diagonal angles leave corner slivers of the previous image at
+  // progress=1.
+  float maxProj = max((abs(dir.x) + abs(dir.y)) * 0.5, 0.0001);
+  float p = 0.5 + dot(uv - 0.5, dir) / (2.0 * maxProj);
+  float reveal = uProgress * (1.0 + uSoftness);
+  float m = smoothstep(reveal - uSoftness, reveal, p);
+  return mix(getToColor(uv), getFromColor(uv), m);
+}
+`,
+});

package/src/types.ts

@@ -0,0 +1,87 @@
+import type {
+  TextureSource,
+  UniformValue,
+  UniformParams,
+  Widen,
+} from "@vysmo/gl-core";
+
+export type { TextureSource, UniformValue, UniformParams, Widen };
+
+export interface TransitionShader {
+  glsl: string;
+  /**
+   * Full vertex-shader main() body. Required when the transition declares
+   * a `mesh`. Runner prepends a header with `#version 300 es`, precision,
+   * standard uniforms (uProgress, uResolution, uPass, uPassCount,
+   * uInstances, plus author's custom uniforms), the standard attribute
+   * inputs (aPosition, aUv, aOffset, aCentroid, aBary, aRandom), and
+   * `out vec2 vUv`. The author writes `void main() { ... }` and is
+   * responsible for assigning `gl_Position` and passing through `vUv`
+   * (and any other varyings they declare themselves).
+   */
+  vertex?: string;
+  wgsl?: string;
+}
+
+export interface MeshGeometry {
+  /**
+   * Grid subdivisions of the [-1, 1] plane. `[nx, ny]` yields `2·nx·ny`
+   * triangles.
+   */
+  subdivisions: readonly [number, number];
+  /**
+   * Number of mesh instances rendered per pass via drawArraysInstanced.
+   * The vertex shader can branch on `gl_InstanceID` (0..instances-1) to
+   * produce overlapping meshes with different behaviours (e.g. a back
+   * plane + a rotating foreground). Defaults to 1.
+   */
+  instances?: number;
+}
+
+export interface Transition<P extends UniformParams = UniformParams> {
+  name: string;
+  shader: TransitionShader;
+  defaults: P;
+  /**
+   * Number of fragment-shader passes the runner should execute per
+   * render(). Defaults to 1. When > 1, the runner ping-pongs between
+   * two framebuffers; each pass can read the previous pass's output
+   * via getPrevious(uv). The final pass renders to the canvas.
+   *
+   * Ignored when `mesh` is set (mesh transitions are single-pass in v1).
+   */
+  passes?: number;
+  /**
+   * If set, the runner renders this transition with a subdivided-plane
+   * mesh and the author-provided vertex shader, enabling true vertex
+   * geometry effects (per-triangle rotation, flying tiles, real 3D
+   * flips). Transitions without `mesh` keep using the fullscreen-triangle
+   * fragment-only pipeline.
+   */
+  mesh?: MeshGeometry;
+}
+
+export interface RenderArgs<P extends UniformParams> {
+  from: TextureSource;
+  to: TextureSource;
+  progress: number;
+  params?: Partial<P>;
+  /**
+   * Optional displacement-map texture. Transitions that read it via the
+   * `getDisplacement(uv)` shader helper (e.g. flow-warp) will use it to
+   * drive per-pixel UV offsets. Mid-gray (RGB ≈ 128) is interpreted as
+   * "no displacement"; brighter / darker pixels offset positively /
+   * negatively. If omitted, the runner binds a default 1×1 mid-gray
+   * texture so displacement-using transitions degrade to no-op rather
+   * than failing.
+   */
+  displacement?: TextureSource;
+  /**
+   * Optional environment-map texture. Transitions that read it via the
+   * getEnvironment(uv) shader helper (e.g. liquid-chrome with reflection
+   * enabled) use it to fake reflections off metallic / glass surfaces.
+   * If omitted, the runner binds a default 1×1 mid-gray texture so
+   * environment-using transitions degrade to a neutral no-op.
+   */
+  environment?: TextureSource;
+}