@remotion/effects 4.0.473 → 4.0.475

package/dist/esm/lines.mjs

@@ -23,6 +23,14 @@ var assertOptionalColor = (value, name) => {
   }
   assertRequiredColor(value, name);
 };
+var assertOptionalBoolean = (value, name) => {
+  if (value === undefined) {
+    return;
+  }
+  if (typeof value !== "boolean") {
+    throw new TypeError(`"${name}" must be a boolean, but got ${JSON.stringify(value)}`);
+  }
+};
 
 // src/color-utils.ts
 var DEFAULT_AMOUNT = 1;
@@ -107,6 +115,7 @@ var DEFAULT_THICKNESS = 40;
 var DEFAULT_GAP = 0;
 var DEFAULT_ANGLE = 0;
 var DEFAULT_OFFSET = 0;
+var DEFAULT_MASK_TO_SOURCE_ALPHA = false;
 var linesSchema = {
   direction: {
     type: "enum",
@@ -147,6 +156,11 @@ var linesSchema = {
     default: DEFAULT_OFFSET,
     description: "Offset",
     hiddenFromList: false
+  },
+  maskToSourceAlpha: {
+    type: "boolean",
+    default: DEFAULT_MASK_TO_SOURCE_ALPHA,
+    description: "Mask to source alpha"
   }
 };
 var resolve = (p) => {
@@ -158,7 +172,8 @@ var resolve = (p) => {
     thickness,
     spacing: thickness + gap,
     angle: p.angle ?? DEFAULT_ANGLE,
-    offset: p.offset ?? DEFAULT_OFFSET
+    offset: p.offset ?? DEFAULT_OFFSET,
+    maskToSourceAlpha: p.maskToSourceAlpha ?? DEFAULT_MASK_TO_SOURCE_ALPHA
   };
 };
 var formatEnum = (variants) => {
@@ -204,6 +219,7 @@ var validateLinesParams = (params) => {
   assertOptionalFiniteNumber(params.gap, "gap");
   assertOptionalFiniteNumber(params.angle, "angle");
   assertOptionalFiniteNumber(params.offset, "offset");
+  assertOptionalBoolean(params.maskToSourceAlpha, "maskToSourceAlpha");
   const thickness = params.thickness ?? DEFAULT_THICKNESS;
   const gap = params.gap ?? DEFAULT_GAP;
   validatePositive(thickness, "thickness");
@@ -234,6 +250,7 @@ uniform float uThickness;
 uniform float uSpacing;
 uniform float uAngle;
 uniform float uOffset;
+uniform bool uMaskToSourceAlpha;
 
 void main() {
 	vec4 texColor = texture(uSource, vUv);
@@ -265,6 +282,14 @@ float c = cos(uAngle);
 	float lineAlpha = lineColor.a;
 	vec3 premultipliedLine = lineColor.rgb * lineAlpha;
 
+	if (uMaskToSourceAlpha) {
+		fragColor = vec4(
+			premultipliedLine * texColor.a + texColor.rgb * (1.0 - lineAlpha),
+			texColor.a
+		);
+		return;
+	}
+
 	fragColor = vec4(
 		premultipliedLine + texColor.rgb * (1.0 - lineAlpha),
 		lineAlpha + texColor.a * (1.0 - lineAlpha)
@@ -392,7 +417,8 @@ var setupLines = (target) => {
       uThickness: gl.getUniformLocation(program, "uThickness"),
       uSpacing: gl.getUniformLocation(program, "uSpacing"),
       uAngle: gl.getUniformLocation(program, "uAngle"),
-      uOffset: gl.getUniformLocation(program, "uOffset")
+      uOffset: gl.getUniformLocation(program, "uOffset"),
+      uMaskToSourceAlpha: gl.getUniformLocation(program, "uMaskToSourceAlpha")
     },
     cachedPaletteKey: "",
     palettePixelData: new Uint8Array(0)
@@ -426,7 +452,8 @@ var lines = createEffect({
   backend: "webgl2",
   calculateKey: (params) => {
     const r = resolve(params);
-    return `lines-${r.colors.join("|")}-${r.direction}-${r.thickness}-${r.spacing}-${r.angle}-${r.offset}`;
+    const maskSuffix = r.maskToSourceAlpha ? "-mask-to-source-alpha" : "";
+    return `lines-${r.colors.join("|")}-${r.direction}-${r.thickness}-${r.spacing}-${r.angle}-${r.offset}${maskSuffix}`;
   },
   setup: (target) => setupLines(target),
   apply: ({ source, width, height, params, state, flipSourceY }) => {
@@ -469,6 +496,8 @@ var lines = createEffect({
       gl.uniform1f(uniforms.uAngle, r.angle * Math.PI / 180);
     if (uniforms.uOffset)
       gl.uniform1f(uniforms.uOffset, r.offset);
+    if (uniforms.uMaskToSourceAlpha)
+      gl.uniform1i(uniforms.uMaskToSourceAlpha, r.maskToSourceAlpha ? 1 : 0);
     gl.bindVertexArray(vao);
     gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
     gl.bindVertexArray(null);

package/dist/esm/mirror.mjs

@@ -23,6 +23,14 @@ var assertOptionalColor = (value, name) => {
   }
   assertRequiredColor(value, name);
 };
+var assertOptionalBoolean = (value, name) => {
+  if (value === undefined) {
+    return;
+  }
+  if (typeof value !== "boolean") {
+    throw new TypeError(`"${name}" must be a boolean, but got ${JSON.stringify(value)}`);
+  }
+};
 
 // src/color-utils.ts
 var DEFAULT_AMOUNT = 1;

package/dist/esm/noise-displacement.mjs

@@ -0,0 +1,578 @@
+// src/noise-displacement.ts
+import { Internals } from "remotion";
+
+// src/validate-effect-param.ts
+var assertEffectParamsObject = (params, effectLabel) => {
+  if (params === null || typeof params !== "object") {
+    throw new TypeError(`${effectLabel} effect requires a parameters object, but got ${JSON.stringify(params)}`);
+  }
+};
+var assertRequiredFiniteNumber = (value, name) => {
+  if (typeof value !== "number" || !Number.isFinite(value)) {
+    throw new TypeError(`"${name}" must be a finite number, but got ${JSON.stringify(value)}`);
+  }
+};
+var assertRequiredColor = (value, name) => {
+  if (typeof value !== "string" || value.length === 0) {
+    throw new TypeError(`"${name}" must be a non-empty string, but got ${JSON.stringify(value)}`);
+  }
+};
+var assertOptionalColor = (value, name) => {
+  if (value === undefined) {
+    return;
+  }
+  assertRequiredColor(value, name);
+};
+var assertOptionalBoolean = (value, name) => {
+  if (value === undefined) {
+    return;
+  }
+  if (typeof value !== "boolean") {
+    throw new TypeError(`"${name}" must be a boolean, but got ${JSON.stringify(value)}`);
+  }
+};
+
+// src/color-utils.ts
+var DEFAULT_AMOUNT = 1;
+var DEFAULT_BRIGHTNESS_AMOUNT = 0;
+var DEFAULT_HUE_DEGREES = 0;
+var colorAmountSchema = {
+  type: "number",
+  min: 0,
+  max: 1,
+  step: 0.01,
+  default: DEFAULT_AMOUNT,
+  description: "Amount",
+  hiddenFromList: false
+};
+var colorMultiplierSchema = {
+  type: "number",
+  min: 0,
+  step: 0.01,
+  default: DEFAULT_AMOUNT,
+  description: "Amount",
+  hiddenFromList: false
+};
+var brightnessAmountSchema = {
+  type: "number",
+  min: -1,
+  max: 1,
+  step: 0.01,
+  default: DEFAULT_BRIGHTNESS_AMOUNT,
+  description: "Amount",
+  hiddenFromList: false
+};
+var hueDegreesSchema = {
+  type: "rotation-degrees",
+  step: 1,
+  default: DEFAULT_HUE_DEGREES,
+  description: "Degrees"
+};
+var assertOptionalFiniteNumber = (value, name) => {
+  if (value === undefined) {
+    return;
+  }
+  assertRequiredFiniteNumber(value, name);
+};
+var validateUnitInterval = (value, name) => {
+  if (value < 0) {
+    throw new TypeError(`"${name}" must be >= 0, but got ${JSON.stringify(value)}`);
+  }
+  if (value > 1) {
+    throw new TypeError(`"${name}" must be <= 1, but got ${JSON.stringify(value)}`);
+  }
+};
+var validateNonNegative = (value, name) => {
+  if (value < 0) {
+    throw new TypeError(`"${name}" must be >= 0, but got ${JSON.stringify(value)}`);
+  }
+};
+var validateSignedUnitInterval = (value, name) => {
+  if (value < -1) {
+    throw new TypeError(`"${name}" must be >= -1, but got ${JSON.stringify(value)}`);
+  }
+  if (value > 1) {
+    throw new TypeError(`"${name}" must be <= 1, but got ${JSON.stringify(value)}`);
+  }
+};
+var clampColorChannel = (value) => {
+  return Math.max(0, Math.min(255, value));
+};
+var parseColorRgba = (ctx, color) => {
+  ctx.clearRect(0, 0, 1, 1);
+  ctx.fillStyle = color;
+  ctx.fillRect(0, 0, 1, 1);
+  const { data } = ctx.getImageData(0, 0, 1, 1);
+  return [data[0], data[1], data[2], data[3]];
+};
+
+// src/noise-displacement.ts
+var { createEffect, createWebGL2ContextError } = Internals;
+var DEFAULT_STRENGTH = 36;
+var DEFAULT_SEED = 0;
+var DEFAULT_GRAIN_SIZE = 8;
+var DEFAULT_PASSES = 6;
+var DEFAULT_BLUR = 0;
+var DEFAULT_FEATHER = 0.25;
+var DEFAULT_BIAS_DIRECTION = 0;
+var DEFAULT_BIAS_AMOUNT = 0;
+var MAX_PASSES = 12;
+var noiseDisplacementSchema = {
+  center: {
+    type: "uv-coordinate",
+    step: 0.01,
+    default: undefined,
+    description: "Center"
+  },
+  radius: {
+    type: "number",
+    min: 0.001,
+    max: 1,
+    step: 0.01,
+    default: undefined,
+    description: "Radius",
+    hiddenFromList: false
+  },
+  strength: {
+    type: "number",
+    min: 0,
+    max: 200,
+    step: 0.1,
+    default: DEFAULT_STRENGTH,
+    description: "Strength",
+    hiddenFromList: false
+  },
+  seed: {
+    type: "number",
+    step: 1,
+    default: DEFAULT_SEED,
+    description: "Seed",
+    hiddenFromList: false
+  },
+  grainSize: {
+    type: "number",
+    min: 0.1,
+    max: 100,
+    step: 0.1,
+    default: DEFAULT_GRAIN_SIZE,
+    description: "Grain size",
+    hiddenFromList: false
+  },
+  passes: {
+    type: "number",
+    min: 1,
+    max: MAX_PASSES,
+    step: 1,
+    default: DEFAULT_PASSES,
+    description: "Passes",
+    hiddenFromList: false
+  },
+  blur: {
+    type: "number",
+    min: 0,
+    max: 100,
+    step: 0.1,
+    default: DEFAULT_BLUR,
+    description: "Blur",
+    hiddenFromList: false
+  },
+  feather: {
+    type: "number",
+    min: 0,
+    max: 1,
+    step: 0.01,
+    default: DEFAULT_FEATHER,
+    description: "Feather",
+    hiddenFromList: false
+  },
+  biasDirection: {
+    type: "rotation-degrees",
+    step: 1,
+    default: DEFAULT_BIAS_DIRECTION,
+    description: "Bias direction"
+  },
+  biasAmount: {
+    type: "number",
+    min: 0,
+    max: 1,
+    step: 0.01,
+    default: DEFAULT_BIAS_AMOUNT,
+    description: "Bias amount",
+    hiddenFromList: false
+  }
+};
+var resolve = (p) => ({
+  center: [...p.center],
+  radius: p.radius,
+  strength: p.strength ?? DEFAULT_STRENGTH,
+  seed: p.seed ?? DEFAULT_SEED,
+  grainSize: p.grainSize ?? DEFAULT_GRAIN_SIZE,
+  passes: p.passes ?? DEFAULT_PASSES,
+  blur: p.blur ?? DEFAULT_BLUR,
+  feather: p.feather ?? DEFAULT_FEATHER,
+  biasDirection: p.biasDirection ?? DEFAULT_BIAS_DIRECTION,
+  biasAmount: p.biasAmount ?? DEFAULT_BIAS_AMOUNT
+});
+var assertRequiredUvCoordinate = (value, name) => {
+  if (!Array.isArray(value) || value.length !== 2 || value.some((item) => typeof item !== "number" || !Number.isFinite(item))) {
+    throw new TypeError(`"${name}" must be a [number, number] tuple`);
+  }
+};
+var assertOptionalIntegerNumber = (value, name) => {
+  if (value === undefined) {
+    return;
+  }
+  if (!Number.isInteger(value)) {
+    throw new TypeError(`"${name}" must be an integer, but got ${JSON.stringify(value)}`);
+  }
+};
+var validatePositive = (value, name) => {
+  if (value <= 0) {
+    throw new TypeError(`"${name}" must be greater than 0, but got ${JSON.stringify(value)}`);
+  }
+};
+var validateMax = (value, max, name) => {
+  if (value > max) {
+    throw new TypeError(`"${name}" must be <= ${max}, but got ${JSON.stringify(value)}`);
+  }
+};
+var validateNoiseDisplacementParams = (params) => {
+  assertEffectParamsObject(params, "Noise Displacement");
+  assertRequiredUvCoordinate(params.center, "center");
+  assertRequiredFiniteNumber(params.radius, "radius");
+  assertOptionalFiniteNumber(params.strength, "strength");
+  assertOptionalFiniteNumber(params.seed, "seed");
+  assertOptionalFiniteNumber(params.grainSize, "grainSize");
+  assertOptionalFiniteNumber(params.passes, "passes");
+  assertOptionalIntegerNumber(params.passes, "passes");
+  assertOptionalFiniteNumber(params.blur, "blur");
+  assertOptionalFiniteNumber(params.feather, "feather");
+  assertOptionalFiniteNumber(params.biasDirection, "biasDirection");
+  assertOptionalFiniteNumber(params.biasAmount, "biasAmount");
+  const r = resolve(params);
+  validateUnitInterval(r.center[0], "center[0]");
+  validateUnitInterval(r.center[1], "center[1]");
+  validatePositive(r.radius, "radius");
+  validateUnitInterval(r.radius, "radius");
+  if (r.strength < 0) {
+    throw new TypeError(`"strength" must be >= 0, but got ${JSON.stringify(r.strength)}`);
+  }
+  validatePositive(r.grainSize, "grainSize");
+  validatePositive(r.passes, "passes");
+  validateMax(r.passes, MAX_PASSES, "passes");
+  if (r.blur < 0) {
+    throw new TypeError(`"blur" must be >= 0, but got ${JSON.stringify(r.blur)}`);
+  }
+  validateUnitInterval(r.feather, "feather");
+  if (r.biasAmount < 0) {
+    throw new TypeError(`"biasAmount" must be >= 0, but got ${JSON.stringify(r.biasAmount)}`);
+  }
+};
+var NOISE_DISPLACEMENT_VS = `#version 300 es
+in vec2 aPos;
+in vec2 aUv;
+out vec2 vUv;
+
+void main() {
+	vUv = aUv;
+	gl_Position = vec4(aPos, 0.0, 1.0);
+}
+`;
+var NOISE_DISPLACEMENT_FS = `#version 300 es
+precision highp float;
+
+in vec2 vUv;
+out vec4 fragColor;
+
+uniform sampler2D uSource;
+uniform vec2 uResolution;
+uniform vec2 uCenter;
+uniform float uRadius;
+uniform float uStrength;
+uniform float uSeed;
+uniform float uGrainSize;
+uniform int uPasses;
+uniform float uBlur;
+uniform float uFeather;
+uniform float uBiasDirection;
+uniform float uBiasAmount;
+
+const float PI = 3.141592653589793;
+const vec2 DISC[9] = vec2[9](
+	vec2(0.0, 0.0),
+	vec2(1.0, 0.0), vec2(-1.0, 0.0), vec2(0.0, 1.0), vec2(0.0, -1.0),
+	vec2(0.707, 0.707), vec2(-0.707, 0.707),
+	vec2(0.707, -0.707), vec2(-0.707, -0.707)
+);
+const float DISC_W[9] = float[9](1.0, 0.7, 0.7, 0.7, 0.7, 0.5, 0.5, 0.5, 0.5);
+
+float hash12(vec2 p) {
+	vec3 p3 = fract(vec3(p.xyx) * 0.1031 + uSeed * 0.0973);
+	p3 += dot(p3, p3.yzx + 33.33);
+	return fract((p3.x + p3.y) * p3.z);
+}
+
+float valueNoise(vec2 p) {
+	vec2 i = floor(p);
+	vec2 f = fract(p);
+	vec2 u = f * f * (3.0 - 2.0 * f);
+	return mix(
+		mix(hash12(i), hash12(i + vec2(1.0, 0.0)), u.x),
+		mix(hash12(i + vec2(0.0, 1.0)), hash12(i + vec2(1.0, 1.0)), u.x),
+		u.y
+	);
+}
+
+vec2 noiseVector(vec2 p) {
+	return vec2(
+		valueNoise(p + vec2(17.13, 71.79)),
+		valueNoise(p + vec2(83.41, 29.67))
+	) * 2.0 - 1.0;
+}
+
+float effectMask(vec2 pixel) {
+	vec2 centerPx = uCenter * uResolution;
+	float radiusPx = uRadius * min(uResolution.x, uResolution.y);
+	float dist = length(pixel - centerPx);
+
+	if (dist >= radiusPx) {
+		return 0.0;
+	}
+
+	if (uFeather <= 0.0001) {
+		return 1.0;
+	}
+
+	float inner = radiusPx * (1.0 - uFeather);
+	return 1.0 - smoothstep(inner, radiusPx, dist);
+}
+
+vec4 sampleSource(vec2 pixel) {
+	vec2 uv = clamp(
+		vec2(pixel.x / uResolution.x, 1.0 - pixel.y / uResolution.y),
+		vec2(0.0),
+		vec2(1.0)
+	);
+	return texture(uSource, uv);
+}
+
+void main() {
+	vec2 pixel = vec2(vUv.x, 1.0 - vUv.y) * uResolution;
+	float mask = effectMask(pixel);
+
+	if (mask <= 0.0 || uStrength <= 0.0) {
+		fragColor = texture(uSource, vUv);
+		return;
+	}
+
+	vec2 noiseCoord = pixel / max(uGrainSize, 0.001);
+	vec2 biasDir = vec2(
+		cos(uBiasDirection * PI / 180.0),
+		sin(uBiasDirection * PI / 180.0)
+	);
+	vec2 displacement = (noiseVector(noiseCoord) + biasDir * uBiasAmount) * uStrength * mask;
+	int passes = max(uPasses, 1);
+	float blurRadius = uBlur * mask;
+	int blurTaps = blurRadius > 0.5 ? 9 : 1;
+
+	vec4 color = vec4(0.0);
+	float totalWeight = 0.0;
+	for (int s = 0; s < 12; s++) {
+		if (s >= passes) {
+			break;
+		}
+
+		float t = passes == 1 ? 1.0 : float(s) / float(passes - 1);
+		vec2 samplePixel = pixel + displacement * t;
+		float passWeight = 1.0 - t * 0.6;
+
+		for (int b = 0; b < 9; b++) {
+			if (b >= blurTaps) {
+				break;
+			}
+
+			float weight = passWeight * DISC_W[b];
+			color += sampleSource(samplePixel + DISC[b] * blurRadius) * weight;
+			totalWeight += weight;
+		}
+	}
+
+	fragColor = color / totalWeight;
+}
+`;
+var compileShader = (gl, type, source) => {
+  const shader = gl.createShader(type);
+  if (!shader) {
+    throw new Error("Failed to create WebGL shader");
+  }
+  gl.shaderSource(shader, source);
+  gl.compileShader(shader);
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    const log = gl.getShaderInfoLog(shader);
+    gl.deleteShader(shader);
+    throw new Error(`Noise displacement shader compile failed: ${log ?? "(no log)"}`);
+  }
+  return shader;
+};
+var linkProgram = (gl, vs, fs) => {
+  const program = gl.createProgram();
+  if (!program) {
+    throw new Error("Failed to create WebGL program");
+  }
+  gl.attachShader(program, vs);
+  gl.attachShader(program, fs);
+  gl.linkProgram(program);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    const log = gl.getProgramInfoLog(program);
+    gl.deleteProgram(program);
+    throw new Error(`Noise displacement program link failed: ${log ?? "(no log)"}`);
+  }
+  return program;
+};
+var setupNoiseDisplacement = (target) => {
+  const gl = target.getContext("webgl2", {
+    premultipliedAlpha: true,
+    alpha: true,
+    preserveDrawingBuffer: true
+  });
+  if (!gl) {
+    throw createWebGL2ContextError("noise displacement effect");
+  }
+  gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
+  const vs = compileShader(gl, gl.VERTEX_SHADER, NOISE_DISPLACEMENT_VS);
+  const fs = compileShader(gl, gl.FRAGMENT_SHADER, NOISE_DISPLACEMENT_FS);
+  const program = linkProgram(gl, vs, fs);
+  gl.deleteShader(vs);
+  gl.deleteShader(fs);
+  const vao = gl.createVertexArray();
+  if (!vao) {
+    throw new Error("Failed to create WebGL vertex array");
+  }
+  gl.bindVertexArray(vao);
+  const data = new Float32Array([
+    -1,
+    -1,
+    0,
+    0,
+    1,
+    -1,
+    1,
+    0,
+    -1,
+    1,
+    0,
+    1,
+    1,
+    1,
+    1,
+    1
+  ]);
+  const vbo = gl.createBuffer();
+  if (!vbo) {
+    throw new Error("Failed to create WebGL buffer");
+  }
+  gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
+  gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
+  const aPos = gl.getAttribLocation(program, "aPos");
+  const aUv = gl.getAttribLocation(program, "aUv");
+  gl.enableVertexAttribArray(aPos);
+  gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 16, 0);
+  gl.enableVertexAttribArray(aUv);
+  gl.vertexAttribPointer(aUv, 2, gl.FLOAT, false, 16, 8);
+  gl.bindVertexArray(null);
+  const texture = gl.createTexture();
+  if (!texture) {
+    throw new Error("Failed to create WebGL texture");
+  }
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+  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.bindTexture(gl.TEXTURE_2D, null);
+  return {
+    gl,
+    program,
+    vao,
+    vbo,
+    texture,
+    uniforms: {
+      uSource: gl.getUniformLocation(program, "uSource"),
+      uResolution: gl.getUniformLocation(program, "uResolution"),
+      uCenter: gl.getUniformLocation(program, "uCenter"),
+      uRadius: gl.getUniformLocation(program, "uRadius"),
+      uStrength: gl.getUniformLocation(program, "uStrength"),
+      uSeed: gl.getUniformLocation(program, "uSeed"),
+      uGrainSize: gl.getUniformLocation(program, "uGrainSize"),
+      uPasses: gl.getUniformLocation(program, "uPasses"),
+      uBlur: gl.getUniformLocation(program, "uBlur"),
+      uFeather: gl.getUniformLocation(program, "uFeather"),
+      uBiasDirection: gl.getUniformLocation(program, "uBiasDirection"),
+      uBiasAmount: gl.getUniformLocation(program, "uBiasAmount")
+    }
+  };
+};
+var noiseDisplacement = createEffect({
+  type: "remotion/noise-displacement",
+  label: "noiseDisplacement()",
+  documentationLink: "https://www.remotion.dev/docs/effects/noise-displacement",
+  backend: "webgl2",
+  calculateKey: (params) => {
+    const r = resolve(params);
+    return `noise-displacement-${r.center.join(":")}-${r.radius}-${r.strength}-${r.seed}-${r.grainSize}-${r.passes}-${r.blur}-${r.feather}-${r.biasDirection}-${r.biasAmount}`;
+  },
+  setup: (target) => setupNoiseDisplacement(target),
+  apply: ({ source, width, height, params, state, flipSourceY }) => {
+    const r = resolve(params);
+    const { gl, program, texture, vao, uniforms } = state;
+    gl.viewport(0, 0, width, height);
+    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    gl.clearColor(0, 0, 0, 0);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, texture);
+    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipSourceY);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
+    gl.useProgram(program);
+    if (uniforms.uSource)
+      gl.uniform1i(uniforms.uSource, 0);
+    if (uniforms.uResolution)
+      gl.uniform2f(uniforms.uResolution, width, height);
+    if (uniforms.uCenter)
+      gl.uniform2f(uniforms.uCenter, r.center[0], r.center[1]);
+    if (uniforms.uRadius)
+      gl.uniform1f(uniforms.uRadius, r.radius);
+    if (uniforms.uStrength)
+      gl.uniform1f(uniforms.uStrength, r.strength);
+    if (uniforms.uSeed)
+      gl.uniform1f(uniforms.uSeed, r.seed);
+    if (uniforms.uGrainSize)
+      gl.uniform1f(uniforms.uGrainSize, r.grainSize);
+    if (uniforms.uPasses)
+      gl.uniform1i(uniforms.uPasses, r.passes);
+    if (uniforms.uBlur)
+      gl.uniform1f(uniforms.uBlur, r.blur);
+    if (uniforms.uFeather)
+      gl.uniform1f(uniforms.uFeather, r.feather);
+    if (uniforms.uBiasDirection)
+      gl.uniform1f(uniforms.uBiasDirection, r.biasDirection);
+    if (uniforms.uBiasAmount)
+      gl.uniform1f(uniforms.uBiasAmount, r.biasAmount);
+    gl.bindVertexArray(vao);
+    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+    gl.bindVertexArray(null);
+    gl.bindTexture(gl.TEXTURE_2D, null);
+    gl.useProgram(null);
+  },
+  cleanup: ({ gl, program, vao, vbo, texture }) => {
+    gl.deleteTexture(texture);
+    gl.deleteBuffer(vbo);
+    gl.deleteProgram(program);
+    gl.deleteVertexArray(vao);
+  },
+  schema: noiseDisplacementSchema,
+  validateParams: validateNoiseDisplacementParams
+});
+export {
+  noiseDisplacement
+};