@radialapps/memories-vips-editor 0.1.1 → 0.1.3

package/src/transforms/brightnessContrast.ts

@@ -0,0 +1,78 @@
+// brightnessContrast.ts — glfx.js brightness/contrast port.
+import { clampf } from '../math.js';
+import {
+  isNumInRange,
+  setFloatUniform,
+  type ParamControl,
+  type RenderContext,
+  type Target,
+  type Transform,
+} from './transform.js';
+
+export interface BrightnessContrastEdit {
+  edit: 'brightnessContrast';
+  /** Additive brightness, -1 (solid black) .. 1 (solid white). Default 0. */
+  brightness?: number;
+  /** Contrast, -1 (solid gray) .. 1 (max). Default 0. */
+  contrast?: number;
+}
+
+type Full = Required<BrightnessContrastEdit>;
+
+const FRAG = `
+precision mediump float;
+uniform sampler2D texture;
+uniform float brightness;
+uniform float contrast;
+varying vec2 texCoord;
+void main() {
+  vec4 color = texture2D(texture, texCoord);
+  color.rgb += brightness;
+  if (contrast > 0.0) {
+    color.rgb = (color.rgb - 0.5) / (1.0 - contrast) + 0.5;
+  } else {
+    color.rgb = (color.rgb - 0.5) * (1.0 + contrast) + 0.5;
+  }
+  gl_FragColor = color;
+}
+`;
+
+export class BrightnessContrastTransform implements Transform<
+  'brightnessContrast',
+  BrightnessContrastEdit
+> {
+  public readonly edit = 'brightnessContrast' as const;
+  public controls: ParamControl[] = [
+    { key: 'brightness', label: 'brightness', min: -1, max: 1, step: 0.01, def: 0 },
+    { key: 'contrast', label: 'contrast', min: -1, max: 1, step: 0.01, def: 0 },
+  ];
+
+  public defaults(): Full {
+    return { edit: 'brightnessContrast', brightness: 0, contrast: 0 };
+  }
+
+  public validate(params: BrightnessContrastEdit): string[] {
+    const errs: string[] = [];
+    if (params.brightness !== undefined && !isNumInRange(params.brightness, -1, 1))
+      errs.push('brightness must be a number in [-1,1]');
+    if (params.contrast !== undefined && !isNumInRange(params.contrast, -1, 1))
+      errs.push('contrast must be a number in [-1,1]');
+    return errs;
+  }
+
+  public normalize(params: BrightnessContrastEdit): Full {
+    return {
+      edit: 'brightnessContrast',
+      brightness: clampf(-1, params.brightness ?? 0, 1),
+      contrast: clampf(-1, params.contrast ?? 0, 1),
+    };
+  }
+
+  public apply(ctx: RenderContext, from: Target, to: Target, params: Full): Target {
+    ctx.pass(FRAG, from, to, (gl, p) => {
+      setFloatUniform(gl, p, 'brightness', params.brightness);
+      setFloatUniform(gl, p, 'contrast', params.contrast);
+    });
+    return to;
+  }
+}

package/src/transforms/crop.ts

@@ -0,0 +1,115 @@
+// crop.ts — relative-rect crop (geometric, resolution-independent).
+//
+// Params are fractions of the current image size (origin top-left), so the
+// same JSON means the same framing at any resolution. The pixel rect uses
+// the exact VIPS formula (src/transforms/crop.h): round + clamp to
+// [1px, remainder]; outputDims() shares it so the pipeline pre-sizes `to`.
+import { clampf } from '../math.js';
+import {
+  isNumInRange,
+  type ParamControl,
+  type RenderContext,
+  type Target,
+  type Transform,
+} from './transform.js';
+
+export interface CropEdit {
+  edit: 'crop';
+  /** Left edge, fraction of width, 0..1. Default 0. */
+  x?: number;
+  /** Top edge, fraction of height, 0..1. Default 0. */
+  y?: number;
+  /** Width, fraction of width, >0..1. Default 1. */
+  width?: number;
+  /** Height, fraction of height, >0..1. Default 1. */
+  height?: number;
+}
+
+type Full = Required<CropEdit>;
+
+const MIN_EXTENT = 1e-4;
+
+/** Pixel rect for the given input size; identical to src/transforms/crop.h. */
+export function cropRect(
+  inW: number,
+  inH: number,
+  params: Full,
+): { left: number; top: number; w: number; h: number } {
+  const left = Math.min(inW - 1, Math.max(0, Math.round(params.x * inW)));
+  const top = Math.min(inH - 1, Math.max(0, Math.round(params.y * inH)));
+  const w = Math.min(inW - left, Math.max(1, Math.round(params.width * inW)));
+  const h = Math.min(inH - top, Math.max(1, Math.round(params.height * inH)));
+  return { left, top, w, h };
+}
+
+const FRAG = `
+precision mediump float;
+uniform sampler2D texture;
+uniform vec2 offset;
+uniform vec2 scale;
+varying vec2 texCoord;
+void main() {
+  gl_FragColor = texture2D(texture, offset + texCoord * scale);
+}
+`;
+
+export class CropTransform implements Transform<'crop', CropEdit> {
+  public readonly edit = 'crop' as const;
+  public controls: ParamControl[] = [
+    { key: 'x', label: 'x', min: 0, max: 1, step: 0.01, def: 0 },
+    { key: 'y', label: 'y', min: 0, max: 1, step: 0.01, def: 0 },
+    { key: 'width', label: 'width', min: 0, max: 1, step: 0.01, def: 1 },
+    { key: 'height', label: 'height', min: 0, max: 1, step: 0.01, def: 1 },
+  ];
+
+  public defaults(): Full {
+    return { edit: 'crop', x: 0, y: 0, width: 1, height: 1 };
+  }
+
+  public validate(params: CropEdit): string[] {
+    const errs: string[] = [];
+    if (params.x !== undefined && !isNumInRange(params.x, 0, 1))
+      errs.push('x must be a number in [0,1]');
+    if (params.y !== undefined && !isNumInRange(params.y, 0, 1))
+      errs.push('y must be a number in [0,1]');
+    if (params.width !== undefined && !isNumInRange(params.width, 0, 1))
+      errs.push('width must be a number in [0,1]');
+    if (params.height !== undefined && !isNumInRange(params.height, 0, 1))
+      errs.push('height must be a number in [0,1]');
+    if (errs.length > 0) return errs;
+    const x = params.x ?? 0;
+    const y = params.y ?? 0;
+    const w = params.width ?? 1;
+    const h = params.height ?? 1;
+    if (!(w > 0) || !(h > 0)) errs.push('width/height must be > 0');
+    const eps = 1e-9;
+    if (x + w > 1 + eps || y + h > 1 + eps)
+      errs.push('crop region x+width/y+height must not exceed 1');
+    return errs;
+  }
+
+  public normalize(params: CropEdit): Full {
+    // Keep at least MIN_EXTENT of frame: the renderer rounds that to 1px.
+    const x = clampf(0, params.x ?? 0, 1 - MIN_EXTENT);
+    const y = clampf(0, params.y ?? 0, 1 - MIN_EXTENT);
+    const width = clampf(MIN_EXTENT, params.width ?? 1, 1 - x);
+    const height = clampf(MIN_EXTENT, params.height ?? 1, 1 - y);
+    return { edit: 'crop', x, y, width, height };
+  }
+
+  public outputDims(inW: number, inH: number, params: Full): { w: number; h: number } {
+    const r = cropRect(inW, inH, params);
+    return { w: r.w, h: r.h };
+  }
+
+  public apply(ctx: RenderContext, from: Target, to: Target, params: Full): Target {
+    const r = cropRect(ctx.width, ctx.height, params);
+    ctx.pass(FRAG, from, to, (gl, p) => {
+      const uOff = gl.getUniformLocation(p, 'offset');
+      if (uOff) gl.uniform2f(uOff, r.left / ctx.width, r.top / ctx.height);
+      const uScale = gl.getUniformLocation(p, 'scale');
+      if (uScale) gl.uniform2f(uScale, r.w / ctx.width, r.h / ctx.height);
+    });
+    return to;
+  }
+}

package/src/transforms/exposure.ts

@@ -0,0 +1,59 @@
+// exposure.ts — stop-based gain (2^stops).
+import { clampf, exposureMult } from '../math.js';
+import {
+  isNumInRange,
+  setFloatUniform,
+  type ParamControl,
+  type RenderContext,
+  type Target,
+  type Transform,
+} from './transform.js';
+
+export interface ExposureEdit {
+  edit: 'exposure';
+  /** Exposure shift in stops, -5..5. Pixel gain is 2^stops. Default 0. */
+  stops?: number;
+}
+
+type Full = Required<ExposureEdit>;
+
+const FRAG = `
+precision mediump float;
+uniform sampler2D texture;
+uniform float mult;
+varying vec2 texCoord;
+void main() {
+  vec4 color = texture2D(texture, texCoord);
+  color.rgb *= mult;
+  gl_FragColor = color;
+}
+`;
+
+export class ExposureTransform implements Transform<'exposure', ExposureEdit> {
+  public readonly edit = 'exposure' as const;
+  public controls: ParamControl[] = [
+    { key: 'stops', label: 'stops', min: -5, max: 5, step: 0.05, def: 0 },
+  ];
+
+  public defaults(): Full {
+    return { edit: 'exposure', stops: 0 };
+  }
+
+  public validate(params: ExposureEdit): string[] {
+    if (params.stops !== undefined && !isNumInRange(params.stops, -5, 5))
+      return ['stops must be a number in [-5,5]'];
+    return [];
+  }
+
+  public normalize(params: ExposureEdit): Full {
+    return { edit: 'exposure', stops: clampf(-5, params.stops ?? 0, 5) };
+  }
+
+  public apply(ctx: RenderContext, from: Target, to: Target, params: Full): Target {
+    const mult = exposureMult(params.stops);
+    ctx.pass(FRAG, from, to, (gl, p) => {
+      setFloatUniform(gl, p, 'mult', mult);
+    });
+    return to;
+  }
+}

package/src/transforms/grayscale.ts

@@ -0,0 +1,42 @@
+// grayscale.ts — channel-average desaturation (== saturation -1).
+import type { ParamControl, RenderContext, Target, Transform } from './transform.js';
+
+export interface GrayscaleEdit {
+  edit: 'grayscale';
+}
+
+type Full = Required<GrayscaleEdit>;
+
+const FRAG = `
+precision mediump float;
+uniform sampler2D texture;
+varying vec2 texCoord;
+void main() {
+  vec4 color = texture2D(texture, texCoord);
+  float average = (color.r + color.g + color.b) / 3.0;
+  color.rgb = vec3(average);
+  gl_FragColor = color;
+}
+`;
+
+export class GrayscaleTransform implements Transform<'grayscale', GrayscaleEdit> {
+  public readonly edit = 'grayscale' as const;
+  public controls: ParamControl[] = [];
+
+  public defaults(): Full {
+    return { edit: 'grayscale' };
+  }
+
+  public validate(_params: GrayscaleEdit): string[] {
+    return [];
+  }
+
+  public normalize(_params: GrayscaleEdit): Full {
+    return { edit: 'grayscale' };
+  }
+
+  public apply(ctx: RenderContext, from: Target, to: Target, _params: Full): Target {
+    ctx.pass(FRAG, from, to);
+    return to;
+  }
+}

package/src/transforms/hueSaturation.ts

@@ -0,0 +1,86 @@
+// hueSaturation.ts — glfx.js hue/saturation port.
+import { clampf } from '../math.js';
+import {
+  isNumInRange,
+  setFloatUniform,
+  type ParamControl,
+  type RenderContext,
+  type Target,
+  type Transform,
+} from './transform.js';
+
+export interface HueSaturationEdit {
+  edit: 'hueSaturation';
+  /** Hue rotation, -1 (-180deg) .. 1 (+180deg). Default 0. */
+  hue?: number;
+  /** Saturation, -1 (gray) .. 1 (max). Default 0. */
+  saturation?: number;
+}
+
+type Full = Required<HueSaturationEdit>;
+
+const FRAG = `
+precision mediump float;
+uniform sampler2D texture;
+uniform float hue;
+uniform float saturation;
+varying vec2 texCoord;
+void main() {
+  vec4 color = texture2D(texture, texCoord);
+
+  float angle = hue * 3.14159265;
+  float s = sin(angle), c = cos(angle);
+  vec3 weights = (vec3(2.0 * c, -sqrt(3.0) * s - c, sqrt(3.0) * s - c) + 1.0) / 3.0;
+  color.rgb = vec3(
+    dot(color.rgb, weights.xyz),
+    dot(color.rgb, weights.zxy),
+    dot(color.rgb, weights.yzx)
+  );
+
+  float average = (color.r + color.g + color.b) / 3.0;
+  if (saturation > 0.0) {
+    color.rgb += (average - color.rgb) * (1.0 - 1.0 / (1.001 - saturation));
+  } else {
+    color.rgb += (average - color.rgb) * (-saturation);
+  }
+
+  gl_FragColor = color;
+}
+`;
+
+export class HueSaturationTransform implements Transform<'hueSaturation', HueSaturationEdit> {
+  public readonly edit = 'hueSaturation' as const;
+  public controls: ParamControl[] = [
+    { key: 'hue', label: 'hue', min: -1, max: 1, step: 0.01, def: 0 },
+    { key: 'saturation', label: 'saturation', min: -1, max: 1, step: 0.01, def: 0 },
+  ];
+
+  public defaults(): Full {
+    return { edit: 'hueSaturation', hue: 0, saturation: 0 };
+  }
+
+  public validate(params: HueSaturationEdit): string[] {
+    const errs: string[] = [];
+    if (params.hue !== undefined && !isNumInRange(params.hue, -1, 1))
+      errs.push('hue must be a number in [-1,1]');
+    if (params.saturation !== undefined && !isNumInRange(params.saturation, -1, 1))
+      errs.push('saturation must be a number in [-1,1]');
+    return errs;
+  }
+
+  public normalize(params: HueSaturationEdit): Full {
+    return {
+      edit: 'hueSaturation',
+      hue: clampf(-1, params.hue ?? 0, 1),
+      saturation: clampf(-1, params.saturation ?? 0, 1),
+    };
+  }
+
+  public apply(ctx: RenderContext, from: Target, to: Target, params: Full): Target {
+    ctx.pass(FRAG, from, to, (gl, p) => {
+      setFloatUniform(gl, p, 'hue', params.hue);
+      setFloatUniform(gl, p, 'saturation', params.saturation);
+    });
+    return to;
+  }
+}

package/src/transforms/index.ts

@@ -0,0 +1,49 @@
+// transforms/index.ts — registry: name -> Transform instance.
+//
+// Adding a transform: write its file (params interface + Transform class),
+// import it here, add one line to TRANSFORMS. The pipeline, validation,
+// serialization, and demo pick it up with no other changes.
+import type { Edit, EditName } from '../types.js';
+import { lookup, type Transform } from './transform.js';
+import { BlurTransform } from './blur.js';
+import { BrightnessContrastTransform } from './brightnessContrast.js';
+import { CropTransform } from './crop.js';
+import { ExposureTransform } from './exposure.js';
+import { GrayscaleTransform } from './grayscale.js';
+import { HueSaturationTransform } from './hueSaturation.js';
+import { InvertTransform } from './invert.js';
+import { RotateTransform } from './rotate.js';
+import { SepiaTransform } from './sepia.js';
+import { SharpenTransform } from './sharpen.js';
+import { VibranceTransform } from './vibrance.js';
+import { VignetteTransform } from './vignette.js';
+
+export const TRANSFORMS: Record<EditName, Transform<string, object>> = {
+  brightnessContrast: new BrightnessContrastTransform(),
+  exposure: new ExposureTransform(),
+  hueSaturation: new HueSaturationTransform(),
+  sepia: new SepiaTransform(),
+  vibrance: new VibranceTransform(),
+  blur: new BlurTransform(),
+  sharpen: new SharpenTransform(),
+  vignette: new VignetteTransform(),
+  invert: new InvertTransform(),
+  grayscale: new GrayscaleTransform(),
+  crop: new CropTransform(),
+  rotate: new RotateTransform(),
+};
+
+/** Human-readable problems; empty means the edit is VIPS-appliable. */
+export function validateEdit(edit: Edit): string[] {
+  if (typeof edit !== 'object' || edit === null) return ['edit must be an object'];
+  const t = lookup(TRANSFORMS, edit.edit);
+  if (!t) return [`unknown edit ${String(edit.edit)}`];
+  return t.validate(edit);
+}
+
+/** Fill defaults + clamp, so serialized JSON always passes validateEdit. */
+export function normalizeEdit(edit: Edit): Edit {
+  const t = lookup(TRANSFORMS, edit.edit);
+  if (!t) throw new Error(`unknown edit ${String(edit.edit)}`);
+  return t.normalize(edit) as Edit;
+}

package/src/transforms/invert.ts

@@ -0,0 +1,41 @@
+// invert.ts — per-pixel inversion.
+import type { ParamControl, RenderContext, Target, Transform } from './transform.js';
+
+export interface InvertEdit {
+  edit: 'invert';
+}
+
+type Full = Required<InvertEdit>;
+
+const FRAG = `
+precision mediump float;
+uniform sampler2D texture;
+varying vec2 texCoord;
+void main() {
+  vec4 color = texture2D(texture, texCoord);
+  color.rgb = 1.0 - color.rgb;
+  gl_FragColor = color;
+}
+`;
+
+export class InvertTransform implements Transform<'invert', InvertEdit> {
+  public readonly edit = 'invert' as const;
+  public controls: ParamControl[] = [];
+
+  public defaults(): Full {
+    return { edit: 'invert' };
+  }
+
+  public validate(_params: InvertEdit): string[] {
+    return [];
+  }
+
+  public normalize(_params: InvertEdit): Full {
+    return { edit: 'invert' };
+  }
+
+  public apply(ctx: RenderContext, from: Target, to: Target, _params: Full): Target {
+    ctx.pass(FRAG, from, to);
+    return to;
+  }
+}

package/src/transforms/rotate.ts

@@ -0,0 +1,211 @@
+// rotate.ts — clockwise rotation, exact 90s + arbitrary angles.
+//
+// angle is clockwise degrees in [-180,180] (matches vips_rotate() and
+// src/transforms/rotate.h). Multiples of 90 use the exact axis swap (no
+// resample, no band change); other angles expand the canvas to the VIPS
+// bounding box and sample with bilinear over a transparent background —
+// the VIPS side likewise appends an alpha band for non-90 angles, so
+// preview and VIPS agree on dims and corners.
+import { clampf } from '../math.js';
+import {
+  isNumInRange,
+  setFloatUniform,
+  type ParamControl,
+  type RenderContext,
+  type Target,
+  type Transform,
+} from './transform.js';
+
+export interface RotateEdit {
+  edit: 'rotate';
+  /** Clockwise degrees, -180..180. Default 0. */
+  angle?: number;
+}
+
+type Full = Required<RotateEdit>;
+
+/** Normalize like src/transforms/rotate.h: fmod + wrap to (-180,180]. */
+export function normAngle(angle: number): number {
+  let a = angle % 360;
+  if (a <= -180) a += 360;
+  else if (a > 180) a -= 360;
+  return a;
+}
+
+/** Quarter turns when snapped to a multiple of 90, else null. */
+export function snapQuarters(angle: number): number | null {
+  const a = normAngle(angle);
+  if (a === 0) return 0;
+  const q = Math.round(a / 90);
+  if (Math.abs(a - q * 90) < 1e-9) return q;
+  return null;
+}
+
+/** Snapped cos/sin for the shader (exact 0/±1 at multiples of 90). */
+export function cosSin(angle: number): { c: number; s: number } {
+  const q = snapQuarters(angle);
+  if (q !== null) {
+    const qq = ((q % 4) + 4) % 4;
+    return [
+      { c: 1, s: 0 },
+      { c: 0, s: 1 },
+      { c: -1, s: 0 },
+      { c: 0, s: -1 },
+    ][qq] as { c: number; s: number };
+  }
+  const rad = (normAngle(angle) * Math.PI) / 180;
+  return { c: Math.cos(rad), s: Math.sin(rad) };
+}
+
+/** Bounding box; identical to the VIPS rotate output for all probed sizes. */
+export function rotateDims(inW: number, inH: number, params: Full): { w: number; h: number } {
+  const q = snapQuarters(params.angle);
+  if (q !== null) return ((q % 2) + 2) % 2 === 0 ? { w: inW, h: inH } : { w: inH, h: inW };
+  const { c, s } = cosSin(params.angle);
+  const ac = Math.abs(c);
+  const as = Math.abs(s);
+  return { w: Math.round(inW * ac + inH * as), h: Math.round(inW * as + inH * ac) };
+}
+
+/**
+ * Output origin (top-left of the output in transform space): round() of the
+ * forward-mapped bounding-box min, exactly like vips_affine's oarea for
+ * vips_rotate (integer texel lattice, texel (i,j) at (i,j); output texel
+ * (x,y) samples the input at Minv*(x+ox, y+oy)).
+ */
+export function rotateOrigin(inW: number, inH: number, params: Full): { ox: number; oy: number } {
+  const { c, s } = cosSin(params.angle);
+  const xs = [0, c * inW, -s * inH, c * inW - s * inH];
+  const ys = [0, s * inW, c * inH, s * inW + c * inH];
+  return { ox: Math.round(Math.min(...xs)), oy: Math.round(Math.min(...ys)) };
+}
+
+function frag(precision: string): string {
+  return `
+precision ${precision} float;
+uniform sampler2D texture;
+uniform float cosA;
+uniform float sinA;
+uniform vec2 inSize;
+uniform vec2 outSize;
+uniform vec2 outOrigin;
+varying vec2 texCoord;
+
+// One bilinear tap on the integer texel lattice (texel (i,j) at (i,j));
+// outside [0,W-1]x[0,H-1] reads the transparent background, exactly like
+// the vips_affine embed behind vips_rotate. The 1e-4 epsilon keeps
+// near-integer coordinates (float error) on their texel centers.
+vec4 tap(vec2 lattice) {
+  if (lattice.x < -0.0001 || lattice.x > inSize.x - 1.0 + 0.0001 ||
+      lattice.y < -0.0001 || lattice.y > inSize.y - 1.0 + 0.0001) {
+    return vec4(0.0);
+  }
+  return texture2D(texture, (lattice + 0.5) / inSize);
+}
+
+void main() {
+  // Output texel (x,y) <=> lattice point (x+ox, y+oy), backward-mapped
+  // with the inverse rotation (y-down, clockwise-positive).
+  vec2 lat = vec2(texCoord.x * outSize.x - 0.5 + outOrigin.x,
+                  texCoord.y * outSize.y - 0.5 + outOrigin.y);
+  vec2 inp = vec2(cosA * lat.x + sinA * lat.y,
+                  -sinA * lat.x + cosA * lat.y);
+  vec2 p0 = floor(inp);
+  vec2 f = inp - p0;
+  float w00 = (1.0 - f.x) * (1.0 - f.y);
+  float w10 = f.x * (1.0 - f.y);
+  float w01 = (1.0 - f.x) * f.y;
+  float w11 = f.x * f.y;
+  vec4 t00 = tap(p0);
+  vec4 t10 = tap(p0 + vec2(1.0, 0.0));
+  vec4 t01 = tap(p0 + vec2(0.0, 1.0));
+  vec4 t11 = tap(p0 + vec2(1.0, 1.0));
+  // vips_affine premultiplies alpha before resampling and unpremultiplies
+  // after (float path: factor 0 when |alpha| < 0.01, else rgb /= alpha).
+  vec3 prgb = t00.rgb * (t00.a * w00) + t10.rgb * (t10.a * w10) +
+              t01.rgb * (t01.a * w01) + t11.rgb * (t11.a * w11);
+  float pa = t00.a * w00 + t10.a * w10 + t01.a * w01 + t11.a * w11;
+  if (abs(pa) < 0.01) {
+    gl_FragColor = vec4(0.0, 0.0, 0.0, pa);
+  } else {
+    gl_FragColor = vec4(prgb / pa, pa);
+  }
+}
+`;
+}
+
+const FRAG_HIGH = frag('highp');
+const FRAG_MED = frag('mediump');
+
+// Exact multiples of 90 go through vips_rot() on the VIPS side (pixel
+// shuffle, no resampling, no band change) — the preview mirrors that with
+// a pure UV swizzle (O(1) math, exact under any precision). Quarter q is
+// clockwise: out(x,y) = in(y,H-1-x) / in(W-1-x,H-1-y) / in(W-1-y,x).
+const FRAG_QUARTER = `
+precision mediump float;
+uniform sampler2D texture;
+uniform int quarter;
+varying vec2 texCoord;
+void main() {
+  vec2 uv = texCoord;
+  if (quarter == 1) {
+    uv = vec2(texCoord.y, 1.0 - texCoord.x);
+  } else if (quarter == 2) {
+    uv = vec2(1.0 - texCoord.x, 1.0 - texCoord.y);
+  } else if (quarter == 3) {
+    uv = vec2(1.0 - texCoord.y, texCoord.x);
+  }
+  gl_FragColor = texture2D(texture, uv);
+}
+`;
+
+export class RotateTransform implements Transform<'rotate', RotateEdit> {
+  public readonly edit = 'rotate' as const;
+  public controls: ParamControl[] = [
+    { key: 'angle', label: 'angle °', min: -180, max: 180, step: 1, def: 0 },
+  ];
+
+  public defaults(): Full {
+    return { edit: 'rotate', angle: 0 };
+  }
+
+  public validate(params: RotateEdit): string[] {
+    if (params.angle !== undefined && !isNumInRange(params.angle, -180, 180))
+      return ['angle must be a number in [-180,180]'];
+    return [];
+  }
+
+  public normalize(params: RotateEdit): Full {
+    return { edit: 'rotate', angle: clampf(-180, params.angle ?? 0, 180) };
+  }
+
+  public outputDims(inW: number, inH: number, params: Full): { w: number; h: number } {
+    return rotateDims(inW, inH, params);
+  }
+
+  public apply(ctx: RenderContext, from: Target, to: Target, params: Full): Target {
+    const q = snapQuarters(params.angle);
+    if (q !== null) {
+      const quarter = ((q % 4) + 4) % 4;
+      ctx.pass(FRAG_QUARTER, from, to, (gl, p) => {
+        const uQ = gl.getUniformLocation(p, 'quarter');
+        if (uQ) gl.uniform1i(uQ, quarter);
+      });
+      return to;
+    }
+    const { c, s } = cosSin(params.angle);
+    const o = rotateOrigin(ctx.width, ctx.height, params);
+    const shader = ctx.highp ? FRAG_HIGH : FRAG_MED;
+    ctx.pass(shader, from, to, (gl, p) => {
+      setFloatUniform(gl, p, 'cosA', c);
+      setFloatUniform(gl, p, 'sinA', s);
+      const uIn = gl.getUniformLocation(p, 'inSize');
+      if (uIn) gl.uniform2f(uIn, ctx.width, ctx.height);
+      const uOut = gl.getUniformLocation(p, 'outSize');
+      if (uOut) gl.uniform2f(uOut, ctx.outWidth, ctx.outHeight);
+      const uOrigin = gl.getUniformLocation(p, 'outOrigin');
+      if (uOrigin) gl.uniform2f(uOrigin, o.ox, o.oy);
+    });
+    return to;
+  }
+}