@remotion/effects 4.0.539 → 4.0.541

package/dist/esm/paper.mjs

@@ -1,114 +1,341 @@
+import {
+  assertOptionalFiniteNumber,
+  validateUnitInterval,
+  validateNonNegative,
+  parseColorRgba
+} from "./index-wxhvgv2s.mjs";
+import {
+  WEBGPU_SINGLE_PASS_VERTEX,
+  setupWebGpuSinglePass,
+  cleanupWebGpuSinglePass,
+  applyWebGpuSinglePass
+} from "./index-tvfexb7s.mjs";
+import {
+  assertEffectParamsObject,
+  assertOptionalColor
+} from "./index-4fvp93ps.mjs";
+
 // src/paper.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/paper-webgpu-shader.ts
+var PAPER_WEBGPU_SHADER = `
+diagnostic(off, derivative_uniformity);
+${WEBGPU_SINGLE_PASS_VERTEX}
+@group(0) @binding(0) var source: texture_2d<f32>;
+@group(0) @binding(1) var sourceSampler: sampler;
+@group(0) @binding(2) var<uniform> params: Params;
+struct Params { size: vec2f, aspectRatio: f32, amount: f32, colorFront: vec4f, colorBack: vec4f, contrast: f32, roughness: f32, fiber: f32, fiberSize: f32, crumples: f32, crumpleSize: f32, folds: f32, foldCount: f32, drops: f32, fade: f32, seed: f32, scale: f32, offsetY: f32, }
+@group(0) @binding(3) var noiseTexture: texture_2d<f32>;
+const TWO_PI=6.28318530718;
+const PI=3.14159265358979323846;
+fn getUvFrame(uv: vec2f) -> f32 {
 
-// 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]];
-};
+	var aax: f32 = 2.0 * fwidth(uv.x);
+	var aay: f32 = 2.0 * fwidth(uv.y);
+
+	var left: f32 = smoothstep(0.0, aax, uv.x);
+	var right: f32 = 1.0 - smoothstep(1.0 - aax, 1.0, uv.x);
+	var bottom: f32 = smoothstep(0.0, aay, uv.y);
+	var top: f32 = 1.0 - smoothstep(1.0 - aay, 1.0, uv.y);
+
+	return left * right * bottom * top;
+}
+
+fn rotate(uv: vec2f, th: f32) -> vec2f {
+
+	return mat2x2f(vec2f(cos(th), sin(th)),vec2f(-sin(th), cos(th))) * uv;
+}
+
+fn seedOffset(salt: f32) -> vec2f {
+
+	var seeded: f32 = params.seed + salt;
+	return fract(
+		sin(
+			vec2f(
+				seeded * 12.9898 + 78.233,
+				seeded * 39.3468 + 11.135
+			)
+		) * 43758.5453
+	);
+}
+
+fn randomR(p: vec2f) -> f32 {
+
+	var uv: vec2f = floor(p) / 100.0 + vec2f(0.5);
+	return textureLoad(noiseTexture,vec2i(floor(fract(uv)*vec2f(textureDimensions(noiseTexture)))),0).r;
+}
+
+fn valueNoise(st: vec2f) -> f32 {
+
+	var i: vec2f = floor(st);
+	var f: vec2f = fract(st);
+	var a: f32 = randomR(i);
+	var b: f32 = randomR(i + vec2f(1.0, 0.0));
+	var c: f32 = randomR(i + vec2f(0.0, 1.0));
+	var d: f32 = randomR(i + vec2f(1.0, 1.0));
+	var u: vec2f = f * f * (vec2f(3.0) - 2.0 * f);
+	var x1: f32 = mix(a, b, u.x);
+	var x2: f32 = mix(c, d, u.x);
+	return mix(x1, x2, u.y);
+}
+
+fn fbm(nInput: vec2f) -> f32 {
+var n=nInput;
+	var total: f32 = 0.0;
+	var amplitude: f32 = 0.4;
+	for (var i: i32 = 0; i < 3; i++) {
+		total += valueNoise(n) * amplitude;
+		n *= 1.99;
+		amplitude *= 0.65;
+	}
+	return total;
+}
+
+fn randomG(p: vec2f) -> f32 {
+
+	var uv: vec2f = floor(p) / 50.0 + vec2f(0.5);
+	return textureLoad(noiseTexture,vec2i(floor(fract(uv)*vec2f(textureDimensions(noiseTexture)))),0).g;
+}
+
+fn roughnessNoise(pInput: vec2f) -> f32 {
+var p=pInput;
+	p *= 0.1;
+	var o: f32 = 0.0;
+	for (var i: f32 = 1.0; i < 4.0; i += 1.0) {
+		var w: vec4f = vec4f(floor(p), ceil(p));
+		var f: vec2f = fract(p);
+		o += mix(
+			mix(randomG(w.xy), randomG(w.xw), f.y),
+			mix(randomG(w.zy), randomG(w.zw), f.y),
+			f.x
+		);
+		o += 0.2 / exp(2.0 * abs(sin(0.2 * p.x + 0.5 * p.y)));
+ p *= 2.1;
+	}
+	return o / 3.0;
+}
+
+fn fiberRandom(p: vec2f) -> f32 {
+
+	var uv: vec2f = floor(p) / 100.0;
+	return textureLoad(noiseTexture,vec2i(floor(fract(uv)*vec2f(textureDimensions(noiseTexture)))),0).b;
+}
+
+fn fiberValueNoise(st: vec2f) -> f32 {
+
+	var i: vec2f = floor(st);
+	var f: vec2f = fract(st);
+	var a: f32 = fiberRandom(i);
+	var b: f32 = fiberRandom(i + vec2f(1.0, 0.0));
+	var c: f32 = fiberRandom(i + vec2f(0.0, 1.0));
+	var d: f32 = fiberRandom(i + vec2f(1.0, 1.0));
+	var u: vec2f = f * f * (vec2f(3.0) - 2.0 * f);
+	var x1: f32 = mix(a, b, u.x);
+	var x2: f32 = mix(c, d, u.x);
+	return mix(x1, x2, u.y);
+}
+
+fn fiberNoiseFbm(nInput: vec2f, seedOffset: vec2f) -> f32 {
+var n=nInput;
+	var total: f32 = 0.0;
+	var amplitude: f32 = 1.0;
+	for (var i: i32 = 0; i < 4; i++) {
+		n = rotate(n, 0.7);
+		total += fiberValueNoise(n + seedOffset) * amplitude;
+		n *= 2.0;
+		amplitude *= 0.6;
+	}
+	return total;
+}
+
+fn fiberNoise(uv: vec2f, seedOffset: vec2f) -> f32 {
+
+	var epsilon: f32 = 0.001;
+	var n1: f32 = fiberNoiseFbm(uv + vec2f(epsilon, 0.0), seedOffset);
+	var n2: f32 = fiberNoiseFbm(uv - vec2f(epsilon, 0.0), seedOffset);
+	var n3: f32 = fiberNoiseFbm(uv + vec2f(0.0, epsilon), seedOffset);
+	var n4: f32 = fiberNoiseFbm(uv - vec2f(0.0, epsilon), seedOffset);
+	return length(vec2f(n1 - n2, n3 - n4)) / (2.0 * epsilon);
+}
+
+fn randomGB(p: vec2f) -> vec2f {
+
+	var uv: vec2f = floor(p) / 50.0 + vec2f(0.5);
+	return textureLoad(noiseTexture,vec2i(floor(fract(uv)*vec2f(textureDimensions(noiseTexture)))),0).gb;
+}
+
+fn crumpledNoise(t: vec2f, pw: f32) -> f32 {
+
+	var p: vec2f = floor(t);
+	var wsum: f32 = 0.0;
+	var cl: f32 = 0.0;
+	for (var y: i32 = -1; y < 2; y += 1) {
+		for (var x: i32 = -1; x < 2; x += 1) {
+			var b: vec2f = vec2f(f32(x), f32(y));
+			var q: vec2f = b + p;
+			var q2: vec2f = q - floor(q / 8.0) * 8.0;
+			var c: vec2f = q + randomGB(q2);
+			var r: vec2f = c - t;
+			var w: f32 =
+				pow(smoothstep(0.0, 1.0, 1.0 - abs(r.x)), pw) *
+				pow(smoothstep(0.0, 1.0, 1.0 - abs(r.y)), pw);
+			cl += (0.5 + 0.5 * sin((q2.x + q2.y * 5.0) * 8.0)) * w;
+			wsum += w;
+		}
+	}
+	return pow(select(0.0, cl / select(1.0, wsum, wsum != 0.0), wsum != 0.0), 0.5) * 2.0;
+}
+
+fn crumplesShape(uv: vec2f) -> f32 {
+
+	return crumpledNoise(uv * 0.25, 16.0) * crumpledNoise(uv * 0.5, 2.0);
+}
+
+fn folds(uv: vec2f) -> vec2f {
+
+	var pp: vec3f = vec3f(0.0);
+	var l: f32 = 9.0;
+	for (var i: f32 = 0.0; i < 15.0; i += 1.0) {
+		if (i >= params.foldCount) {
+			break;
+		}
+		var rand: vec2f = randomGB(vec2f(i, i * params.seed));
+		var an: f32 = rand.x * TWO_PI;
+		var p: vec2f = vec2f(cos(an), sin(an)) * rand.y;
+		var dist: f32 = distance(uv, p);
+		l = min(l, dist);
+
+		if (l == dist) {
+			pp = vec3f(uv-p,pp.z);
+			pp.z = dist;
+		}
+	}
+	return mix(pp.xy, vec2f(0.0), pow(pp.z, 0.25));
+}
+
+fn drops(uv: vec2f) -> f32 {
+
+	var iDropsUV: vec2f = floor(uv);
+	var fDropsUV: vec2f = fract(uv);
+	var dropsMinDist: f32 = 1.0;
+	for (var j: i32 = -1; j <= 1; j++) {
+		for (var i: i32 = -1; i <= 1; i++) {
+			var neighbor: vec2f = vec2f(f32(i), f32(j));
+			var offset: vec2f = randomGB(iDropsUV + neighbor);
+			offset = vec2f(0.5) + 0.5 * sin(vec2f(10.0 * params.seed) + TWO_PI * offset);
+			var pos: vec2f = neighbor + offset - fDropsUV;
+			var dist: f32 = length(pos);
+			dropsMinDist = min(dropsMinDist, dropsMinDist * dist);
+		}
+	}
+	return 1.0 - smoothstep(0.05, 0.09, pow(dropsMinDist, 0.5));
+}
+
+@fragment fn fragment(input: VertexOutput) -> @location(0) vec4f {
+ let pixel=vec2f(input.position.x,params.size.y+params.offsetY-input.position.y);
+ let vUv=pixel/params.size;
+	var color: vec4f = textureSampleLevel(source,sourceSampler,vec2f(vUv.x,1.0-vUv.y),0);
+	var sourceAlpha: f32 = color.a;
+
+	if (sourceAlpha <= 0.001 || params.amount <= 0.0) {
+		return color;
+	}
+
+	var sourceRgb: vec3f = color.rgb / sourceAlpha;
+	var imageUV: vec2f = vUv;
+	var patternUV: vec2f = vUv - vec2f(0.5);
+	patternUV /= max(params.scale, 0.001);
+	patternUV = 5.0 * (patternUV * vec2f(params.aspectRatio, 1.0));
+
+	var roughnessUv: vec2f =
+		1.5 * (pixel - 0.5 * params.size) +
+		128.0 * seedOffset(1.0);
+	var roughness: f32 =
+		roughnessNoise(roughnessUv + vec2f(1.0, 0.0)) -
+		roughnessNoise(roughnessUv - vec2f(1.0, 0.0));
+
+	var crumplesUV: vec2f =
+		fract(patternUV * 0.02 / max(params.crumpleSize, 0.001) - vec2f(params.seed)) * 32.0;
+	var crumples: f32 =
+		params.crumples *
+		(crumplesShape(crumplesUV + vec2f(0.05, 0.0)) -
+			crumplesShape(crumplesUV));
+
+	var fiberUV: vec2f = 2.0 / max(params.fiberSize, 0.001) * patternUV;
+	var fiber: f32 = fiberNoise(fiberUV, 64.0 * seedOffset(2.0));
+	fiber = 0.5 * params.fiber * (fiber - 1.0);
+
+	var normal: vec2f = vec2f(0.0);
+	var normalImage: vec2f = vec2f(0.0);
+
+	var foldsUV: vec2f = patternUV * 0.12;
+	foldsUV = rotate(foldsUV, 4.0 * params.seed);
+	var w: vec2f = folds(foldsUV);
+	foldsUV = rotate(foldsUV + vec2f(0.007 * cos(params.seed)), 0.01 * sin(params.seed));
+	var w2: vec2f = folds(foldsUV);
+
+	var dropPattern: f32 = params.drops * drops(patternUV * 2.0);
+
+	var fade: f32 = params.fade * fbm(0.17 * patternUV + vec2f(10.0 * params.seed));
+	fade = clamp(8.0 * fade * fade * fade, 0.0, 1.0);
+
+	w = mix(w, vec2f(0.0), fade);
+	w2 = mix(w2, vec2f(0.0), fade);
+	crumples = mix(crumples, 0.0, fade);
+	dropPattern = mix(dropPattern, 0.0, fade);
+	fiber *= mix(1.0, 0.5, fade);
+	roughness *= mix(1.0, 0.5, fade);
+
+	normal += params.folds * min(5.0 * params.contrast, 1.0) * 4.0 * max(vec2f(0.0), w + w2);
+	normalImage += params.folds * 2.0 * w;
+	normal += vec2f(crumples);
+	normalImage += vec2f(1.5 * crumples);
+	normal += vec2f(3.0 * dropPattern);
+	normalImage += vec2f(0.2 * dropPattern);
+	normal += vec2f(params.roughness * 1.5 * roughness);
+	normal += vec2f(fiber);
+	normalImage += vec2f(params.roughness * 0.75 * roughness);
+	normalImage += vec2f(0.2 * fiber);
+
+	var lightPos: vec3f = vec3f(1.0, 2.0, 1.0);
+	var res: f32 = dot(
+		normalize(vec3f(normal, 9.5 - 9.0 * pow(params.contrast, 0.1))),
+		normalize(lightPos)
+	);
+
+	imageUV += 0.02 * normalImage;
+	var frame: f32 = getUvFrame(imageUV);
+	var displacedSource: vec4f = textureSampleLevel(source,sourceSampler,clamp(vec2f(imageUV.x,1.0-imageUV.y),vec2f(0),vec2f(1)),0);
+	var displacedRgb: vec3f = select(sourceRgb,displacedSource.rgb / max(displacedSource.a,0.001),displacedSource.a > 0.001);
+	displacedRgb += vec3f(0.6 * pow(params.contrast, 0.4) * (res - 0.7));
+
+	var frontRgb: vec3f = mix(vec3f(1.0), params.colorFront.rgb, params.colorFront.a);
+	var backRgb: vec3f = mix(vec3f(1.0), params.colorBack.rgb, params.colorBack.a);
+	var paperTone: vec3f = mix(backRgb, frontRgb, clamp(res, 0.0, 1.0));
+	var texturedRgb: vec3f = displacedRgb * (0.72 + 0.42 * res);
+	texturedRgb = mix(texturedRgb, texturedRgb * paperTone, 0.65);
+	texturedRgb -= vec3f(0.007 * dropPattern);
+	texturedRgb = mix(sourceRgb, texturedRgb, frame);
+
+	var finalRgb: vec3f = mix(sourceRgb, clamp(texturedRgb, vec3f(0.0), vec3f(1.0)), params.amount);
+	return vec4f(finalRgb * sourceAlpha, sourceAlpha);
+}
+
+`;
+var PAPER_CROP_WEBGPU_SHADER = `
+${WEBGPU_SINGLE_PASS_VERTEX}
+@group(0) @binding(0) var source: texture_2d<f32>;
+@group(0) @binding(1) var sourceSampler: sampler;
+@group(0) @binding(2) var<uniform> params: vec4f;
+@fragment fn fragment(input: VertexOutput) -> @location(0) vec4f {
+  return textureLoad(source,vec2i(input.position.xy)+vec2i(0,1),0);
+}
+`;
 
 // src/paper.ts
 var { createEffect, createWebGL2ContextError } = Internals;
-var DEFAULT_AMOUNT2 = 1;
+var DEFAULT_AMOUNT = 1;
 var DEFAULT_COLOR_FRONT = "#9fadbc";
 var DEFAULT_COLOR_BACK = "#ffffff";
 var DEFAULT_CONTRAST = 0.3;
@@ -132,7 +359,7 @@ var paperSchema = {
     min: 0,
     max: 1,
     step: 0.01,
-    default: DEFAULT_AMOUNT2,
+    default: DEFAULT_AMOUNT,
     description: "Amount",
     hiddenFromList: false
   },
@@ -256,7 +483,7 @@ var paperSchema = {
   }
 };
 var resolve = (p) => ({
-  amount: p.amount ?? DEFAULT_AMOUNT2,
+  amount: p.amount ?? DEFAULT_AMOUNT,
   colorFront: p.colorFront ?? DEFAULT_COLOR_FRONT,
   colorBack: p.colorBack ?? DEFAULT_COLOR_BACK,
   contrast: p.contrast ?? DEFAULT_CONTRAST,
@@ -546,7 +773,8 @@ float drops(vec2 uv) {
 }
 
 void main() {
-	vec4 source = texture(uSource, vUv);
+	vec2 paperUv = gl_FragCoord.xy / uResolution;
+	vec4 source = texture(uSource, paperUv);
 	float sourceAlpha = source.a;
 
 	if (sourceAlpha <= 0.001 || uAmount <= 0.0) {
@@ -555,8 +783,8 @@ void main() {
 	}
 
 	vec3 sourceRgb = source.rgb / sourceAlpha;
-	vec2 imageUV = vUv;
-	vec2 patternUV = vUv - 0.5;
+	vec2 imageUV = paperUv;
+	vec2 patternUV = paperUv - 0.5;
 	patternUV /= max(uScale, 0.001);
 	patternUV = 5.0 * (patternUV * vec2(uImageAspectRatio, 1.0));
 
@@ -706,9 +934,17 @@ var createNoiseData = (seed) => {
 };
 var uploadNoiseTexture = (gl, texture, seed) => {
   const data = createNoiseData(seed);
+  const flipY = gl.getParameter(gl.UNPACK_FLIP_Y_WEBGL);
+  const premultiplyAlpha = gl.getParameter(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL);
   gl.bindTexture(gl.TEXTURE_2D, texture);
+  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
   gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
-  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, NOISE_TEXTURE_SIZE, NOISE_TEXTURE_SIZE, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);
+  try {
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, NOISE_TEXTURE_SIZE, NOISE_TEXTURE_SIZE, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);
+  } finally {
+    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipY);
+    gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, premultiplyAlpha);
+  }
 };
 var createNoiseTexture = (gl) => {
   const texture = gl.createTexture();
@@ -824,94 +1060,186 @@ var paper = createEffect({
   type: "dev.remotion.effects.paper",
   label: "paper()",
   documentationLink: "https://www.remotion.dev/docs/effects/paper",
-  backend: "webgl2",
   calculateKey: (params) => {
     const r = resolve(params);
     return `paper-${r.amount}-${r.colorFront}-${r.colorBack}-${r.contrast}-${r.roughness}-${r.fiber}-${r.fiberSize}-${r.crumples}-${r.crumpleSize}-${r.folds}-${r.foldCount}-${r.drops}-${r.fade}-${r.seed}-${r.scale}`;
   },
-  setup: (target) => setupPaper(target),
-  apply: ({ source, width, height, params, state, flipSourceY }) => {
-    const r = resolve(params);
-    const { gl, program, vao, sourceTexture, noiseTexture } = state;
-    if (state.cachedColorFront !== r.colorFront) {
-      state.cachedColorFront = r.colorFront;
-      state.cachedColorFrontRgba = parseColorRgba(state.colorCtx, r.colorFront);
-    }
-    if (state.cachedColorBack !== r.colorBack) {
-      state.cachedColorBack = r.colorBack;
-      state.cachedColorBackRgba = parseColorRgba(state.colorCtx, r.colorBack);
-    }
-    const [frontRed, frontGreen, frontBlue, frontAlpha] = normalizedRgba(state.cachedColorFrontRgba);
-    const [backRed, backGreen, backBlue, backAlpha] = normalizedRgba(state.cachedColorBackRgba);
-    gl.viewport(0, 0, width, height);
-    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
-    gl.clearColor(0, 0, 0, 0);
-    gl.clear(gl.COLOR_BUFFER_BIT);
-    gl.useProgram(program);
-    gl.bindVertexArray(vao);
-    gl.activeTexture(gl.TEXTURE0);
-    gl.bindTexture(gl.TEXTURE_2D, sourceTexture);
-    gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
-    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipSourceY);
-    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
-    gl.activeTexture(gl.TEXTURE1);
-    gl.bindTexture(gl.TEXTURE_2D, noiseTexture);
-    if (state.cachedNoiseSeed !== r.seed) {
-      uploadNoiseTexture(gl, noiseTexture, r.seed);
-      state.cachedNoiseSeed = r.seed;
-    }
-    if (state.uSource)
-      gl.uniform1i(state.uSource, 0);
-    if (state.uResolution)
-      gl.uniform2f(state.uResolution, width, height);
-    if (state.uImageAspectRatio)
-      gl.uniform1f(state.uImageAspectRatio, width / height);
-    if (state.uColorFront)
-      gl.uniform4f(state.uColorFront, frontRed, frontGreen, frontBlue, frontAlpha);
-    if (state.uColorBack)
-      gl.uniform4f(state.uColorBack, backRed, backGreen, backBlue, backAlpha);
-    if (state.uAmount)
-      gl.uniform1f(state.uAmount, r.amount);
-    if (state.uContrast)
-      gl.uniform1f(state.uContrast, r.contrast);
-    if (state.uRoughness)
-      gl.uniform1f(state.uRoughness, r.roughness);
-    if (state.uFiber)
-      gl.uniform1f(state.uFiber, r.fiber);
-    if (state.uFiberSize)
-      gl.uniform1f(state.uFiberSize, r.fiberSize);
-    if (state.uCrumples)
-      gl.uniform1f(state.uCrumples, r.crumples);
-    if (state.uCrumpleSize)
-      gl.uniform1f(state.uCrumpleSize, r.crumpleSize);
-    if (state.uFolds)
-      gl.uniform1f(state.uFolds, r.folds);
-    if (state.uFoldCount)
-      gl.uniform1f(state.uFoldCount, r.foldCount);
-    if (state.uDrops)
-      gl.uniform1f(state.uDrops, r.drops);
-    if (state.uFade)
-      gl.uniform1f(state.uFade, r.fade);
-    if (state.uSeed)
-      gl.uniform1f(state.uSeed, r.seed);
-    if (state.uScale)
-      gl.uniform1f(state.uScale, r.scale);
-    if (state.uNoiseTexture)
-      gl.uniform1i(state.uNoiseTexture, 1);
-    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
-    gl.bindVertexArray(null);
-    gl.activeTexture(gl.TEXTURE1);
-    gl.bindTexture(gl.TEXTURE_2D, null);
-    gl.activeTexture(gl.TEXTURE0);
-    gl.bindTexture(gl.TEXTURE_2D, null);
-    gl.useProgram(null);
-  },
-  cleanup: ({ gl, program, vao, vbo, sourceTexture, noiseTexture }) => {
-    gl.deleteTexture(sourceTexture);
-    gl.deleteTexture(noiseTexture);
-    gl.deleteBuffer(vbo);
-    gl.deleteProgram(program);
-    gl.deleteVertexArray(vao);
+  implementations: {
+    webgpu: Internals.createEffectImplementation({
+      setup: (target) => {
+        const canvas = document.createElement("canvas");
+        canvas.width = 1;
+        canvas.height = 1;
+        const colorCtx = canvas.getContext("2d", { willReadFrequently: true });
+        if (!colorCtx)
+          throw new Error("Could not create paper color parsing context");
+        const paddedCanvas = document.createElement("canvas");
+        return {
+          ...setupWebGpuSinglePass(target, "paper"),
+          colorCtx,
+          noiseData: new Uint8Array(0),
+          noiseSeed: null,
+          paddedCanvas,
+          paddedState: setupWebGpuSinglePass(paddedCanvas, "paper")
+        };
+      },
+      apply: ({ source, width, height, params, state, gpuDevice }) => {
+        if (!gpuDevice)
+          throw new Error("A WebGPU device is required for the paper effect");
+        const r = resolve(params);
+        const offsetY = height % 2;
+        if (offsetY && (state.paddedCanvas.width !== width || state.paddedCanvas.height !== height + 1)) {
+          state.paddedCanvas.width = width;
+          state.paddedCanvas.height = height + 1;
+        }
+        const uniformData = new Float32Array([
+          width,
+          height,
+          width / height,
+          r.amount,
+          ...normalizedRgba(parseColorRgba(state.colorCtx, r.colorFront)),
+          ...normalizedRgba(parseColorRgba(state.colorCtx, r.colorBack)),
+          r.contrast,
+          r.roughness,
+          r.fiber,
+          r.fiberSize,
+          r.crumples,
+          r.crumpleSize,
+          r.folds,
+          r.foldCount,
+          r.drops,
+          r.fade,
+          r.seed,
+          r.scale,
+          offsetY,
+          0,
+          0,
+          0
+        ]);
+        if (state.noiseSeed !== r.seed) {
+          state.noiseData = createNoiseData(r.seed);
+          state.noiseSeed = r.seed;
+        }
+        applyWebGpuSinglePass({
+          state: offsetY ? state.paddedState : state,
+          source,
+          width,
+          height,
+          device: gpuDevice,
+          shader: PAPER_WEBGPU_SHADER,
+          uniformData
+        }, {
+          sourceFilter: null,
+          auxiliaryTexture: {
+            data: state.noiseData,
+            width: NOISE_TEXTURE_SIZE,
+            height: NOISE_TEXTURE_SIZE,
+            format: "rgba8unorm"
+          }
+        });
+        if (offsetY) {
+          applyWebGpuSinglePass({
+            state,
+            source: state.paddedCanvas,
+            width,
+            height,
+            device: gpuDevice,
+            shader: PAPER_CROP_WEBGPU_SHADER,
+            uniformData: new Float32Array([width, height, 0, 0])
+          });
+        }
+      },
+      cleanup: (state) => {
+        cleanupWebGpuSinglePass(state.paddedState);
+        cleanupWebGpuSinglePass(state);
+      }
+    }),
+    webgl2: Internals.createEffectImplementation({
+      setup: (target) => setupPaper(target),
+      apply: ({ source, width, height, params, state, flipSourceY }) => {
+        const r = resolve(params);
+        const { gl, program, vao, sourceTexture, noiseTexture } = state;
+        if (state.cachedColorFront !== r.colorFront) {
+          state.cachedColorFront = r.colorFront;
+          state.cachedColorFrontRgba = parseColorRgba(state.colorCtx, r.colorFront);
+        }
+        if (state.cachedColorBack !== r.colorBack) {
+          state.cachedColorBack = r.colorBack;
+          state.cachedColorBackRgba = parseColorRgba(state.colorCtx, r.colorBack);
+        }
+        const [frontRed, frontGreen, frontBlue, frontAlpha] = normalizedRgba(state.cachedColorFrontRgba);
+        const [backRed, backGreen, backBlue, backAlpha] = normalizedRgba(state.cachedColorBackRgba);
+        gl.viewport(0, 0, width, height);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        gl.clearColor(0, 0, 0, 0);
+        gl.clear(gl.COLOR_BUFFER_BIT);
+        gl.useProgram(program);
+        gl.bindVertexArray(vao);
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, sourceTexture);
+        gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
+        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipSourceY);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
+        gl.activeTexture(gl.TEXTURE1);
+        gl.bindTexture(gl.TEXTURE_2D, noiseTexture);
+        if (state.cachedNoiseSeed !== r.seed) {
+          uploadNoiseTexture(gl, noiseTexture, r.seed);
+          state.cachedNoiseSeed = r.seed;
+        }
+        if (state.uSource)
+          gl.uniform1i(state.uSource, 0);
+        if (state.uResolution)
+          gl.uniform2f(state.uResolution, width, height);
+        if (state.uImageAspectRatio)
+          gl.uniform1f(state.uImageAspectRatio, width / height);
+        if (state.uColorFront)
+          gl.uniform4f(state.uColorFront, frontRed, frontGreen, frontBlue, frontAlpha);
+        if (state.uColorBack)
+          gl.uniform4f(state.uColorBack, backRed, backGreen, backBlue, backAlpha);
+        if (state.uAmount)
+          gl.uniform1f(state.uAmount, r.amount);
+        if (state.uContrast)
+          gl.uniform1f(state.uContrast, r.contrast);
+        if (state.uRoughness)
+          gl.uniform1f(state.uRoughness, r.roughness);
+        if (state.uFiber)
+          gl.uniform1f(state.uFiber, r.fiber);
+        if (state.uFiberSize)
+          gl.uniform1f(state.uFiberSize, r.fiberSize);
+        if (state.uCrumples)
+          gl.uniform1f(state.uCrumples, r.crumples);
+        if (state.uCrumpleSize)
+          gl.uniform1f(state.uCrumpleSize, r.crumpleSize);
+        if (state.uFolds)
+          gl.uniform1f(state.uFolds, r.folds);
+        if (state.uFoldCount)
+          gl.uniform1f(state.uFoldCount, r.foldCount);
+        if (state.uDrops)
+          gl.uniform1f(state.uDrops, r.drops);
+        if (state.uFade)
+          gl.uniform1f(state.uFade, r.fade);
+        if (state.uSeed)
+          gl.uniform1f(state.uSeed, r.seed);
+        if (state.uScale)
+          gl.uniform1f(state.uScale, r.scale);
+        if (state.uNoiseTexture)
+          gl.uniform1i(state.uNoiseTexture, 1);
+        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+        gl.bindVertexArray(null);
+        gl.activeTexture(gl.TEXTURE1);
+        gl.bindTexture(gl.TEXTURE_2D, null);
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, null);
+        gl.useProgram(null);
+      },
+      cleanup: ({ gl, program, vao, vbo, sourceTexture, noiseTexture }) => {
+        gl.deleteTexture(sourceTexture);
+        gl.deleteTexture(noiseTexture);
+        gl.deleteBuffer(vbo);
+        gl.deleteProgram(program);
+        gl.deleteVertexArray(vao);
+      }
+    })
   },
   schema: paperSchema,
   validateParams: validatePaperParams