@remotion/effects 4.0.539 → 4.0.540

package/dist/esm/lens-blur.mjs

@@ -1,111 +1,22 @@
+import {
+  assertOptionalFiniteNumber,
+  validateUnitInterval,
+  validateNonNegative
+} from "./index-wxhvgv2s.mjs";
+import {
+  WEBGPU_SINGLE_PASS_VERTEX,
+  setupWebGpuSinglePass,
+  cleanupWebGpuSinglePass,
+  applyWebGpuSinglePass
+} from "./index-tvfexb7s.mjs";
+import {
+  assertEffectParamsObject,
+  assertOptionalBoolean
+} from "./index-4fvp93ps.mjs";
+
 // src/lens-blur/index.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/lens-blur/shader.ts
 var LENS_BLUR_FRAGMENT_SHADER = `#version 300 es
 precision highp float;
@@ -200,6 +111,70 @@ void main() {
 }
 `;
 
+// src/lens-blur/webgpu-shader.ts
+var LENS_BLUR_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: Params;
+// Aperture geometry and highlight controls adapted from EffectCraft's blur2.rs (MIT).
+// See ../../THIRD_PARTY_LICENSES.md.
+struct Params {resolution: vec2f, radius: f32, shape: f32, iris: vec4f, highlights: vec4f, options: vec4f,}
+const PI=3.141592653589793;
+const GOLDEN_ANGLE=2.399963229728653;
+fn toLinear(color: vec3f) -> vec3f {
+ return mix(color/12.92,pow((color+0.055)/1.055,vec3f(2.4)),step(vec3f(0.04045),color));
+}
+fn toSrgb(color: vec3f) -> vec3f {
+ return mix(color*12.92,1.055*pow(max(color,vec3f(0)),vec3f(1.0/2.4))-0.055,step(vec3f(0.0031308),color));
+}
+fn readSource(uv: vec2f) -> vec4f {
+ let sampled=textureSampleLevel(source,sourceSampler,uv,0);
+ if (sampled.a<=0.0) {return vec4f(0);}
+ var color=sampled.rgb/sampled.a;
+ let luminance=dot(color,vec3f(0.2126,0.7152,0.0722));
+ if (params.options.y!=0.0) {color=toLinear(color);}
+ if (luminance>=params.highlights.y) {
+  let brightest=max(color.r,max(color.g,color.b));
+  let highlight=mix(vec3f(brightest),color,params.highlights.z);
+  color+=highlight*(4.0*params.highlights.x);
+ }
+ var coverage=1.0;
+ if (params.highlights.w==0.0) {
+  let pixel=uv*params.resolution;
+  let nearEdge=clamp(pixel+0.5,vec2f(0),vec2f(1));
+  let farEdge=clamp(params.resolution+0.5-pixel,vec2f(0),vec2f(1));
+  coverage=nearEdge.x*nearEdge.y*farEdge.x*farEdge.y;
+ }
+ return vec4f(color*sampled.a,sampled.a)*coverage;
+}
+@fragment fn fragment(input: VertexOutput) -> @location(0) vec4f {
+ if (params.radius==0.0) {return textureSampleLevel(source,sourceSampler,input.uv,0);}
+ var sum=vec4f(0);var total=0.0;
+ for (var i=0;i<2048;i++) {
+  if (f32(i)>=params.options.x) {break;}
+  let angle=f32(i)*GOLDEN_ANGLE;
+  var boundary=1.0;
+  if (params.shape<11.0) {
+   let halfSector=PI/params.shape;
+   let value=angle+PI/2.0;
+   let localAngle=value-floor(value/(2.0*halfSector))*(2.0*halfSector)-halfSector;
+   let polygon=cos(halfSector)/cos(localAngle);
+   boundary=mix(polygon,1.0,params.iris.x);
+  }
+  let distance=sqrt((f32(i)+0.5)/params.options.x)*boundary;
+  let rotatedAngle=angle+params.iris.y;
+  let offset=vec2f(cos(rotatedAngle)*params.iris.z,sin(rotatedAngle))*distance*params.radius;
+  let weight=boundary*boundary;
+  sum+=readSource(input.uv-offset/params.resolution)*weight;
+  total+=weight;
+ }
+ var color=sum/total;
+ if (params.options.y!=0.0 && color.a>0.0) {color=vec4f(toSrgb(color.rgb/color.a)*color.a,color.a);}
+ return vec4f(clamp(color.rgb,vec3f(0),vec3f(color.a)),color.a);
+}
+`;
+
 // src/lens-blur/index.ts
 var { createEffect, createWebGL2ContextError } = Internals;
 var DEFAULT_RADIUS = 10;
@@ -486,61 +461,99 @@ var lensBlur = createEffect({
   type: "remotion/lens-blur",
   label: "lensBlur()",
   documentationLink: "https://www.remotion.dev/docs/effects/lens-blur",
-  backend: "webgl2",
   calculateKey: (params) => {
     const r = resolve(params);
     return `lens-blur-${JSON.stringify(r)}`;
   },
-  setup: (target) => setupLensBlur(target),
-  apply: ({ source, width, height, params, state, flipSourceY }) => {
-    const r = resolve(params);
-    const { gl, program, texture, vao } = 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 (state.uSource)
-      gl.uniform1i(state.uSource, 0);
-    if (state.uResolution)
-      gl.uniform2f(state.uResolution, width, height);
-    if (state.uRadius)
-      gl.uniform1f(state.uRadius, r.radius);
-    if (state.uIrisShape)
-      gl.uniform1i(state.uIrisShape, IRIS_SHAPES.indexOf(r.irisShape) + 3);
-    if (state.uIrisRoundness)
-      gl.uniform1f(state.uIrisRoundness, r.irisRoundness);
-    if (state.uIrisRotation)
-      gl.uniform1f(state.uIrisRotation, r.irisRotation % 360 * Math.PI / 180);
-    if (state.uIrisAspectRatio)
-      gl.uniform1f(state.uIrisAspectRatio, r.irisAspectRatio);
-    if (state.uHighlightGain)
-      gl.uniform1f(state.uHighlightGain, r.highlightGain);
-    if (state.uHighlightThreshold)
-      gl.uniform1f(state.uHighlightThreshold, r.highlightThreshold);
-    if (state.uHighlightSaturation)
-      gl.uniform1f(state.uHighlightSaturation, r.highlightSaturation);
-    if (state.uRepeatEdgePixels)
-      gl.uniform1i(state.uRepeatEdgePixels, r.repeatEdgePixels ? 1 : 0);
-    if (state.uSamples)
-      gl.uniform1i(state.uSamples, r.samples);
-    if (state.uLinearLight)
-      gl.uniform1i(state.uLinearLight, r.linearLight ? 1 : 0);
-    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);
+  implementations: {
+    webgpu: Internals.createEffectImplementation({
+      setup: (target) => setupWebGpuSinglePass(target, "lens-blur"),
+      apply: ({ source, width, height, params, state, gpuDevice }) => {
+        if (!gpuDevice)
+          throw new Error("A WebGPU device is required for this effect");
+        const r = resolve(params);
+        applyWebGpuSinglePass({
+          state,
+          source,
+          width,
+          height,
+          device: gpuDevice,
+          shader: LENS_BLUR_WEBGPU_SHADER,
+          uniformData: new Float32Array([
+            width,
+            height,
+            r.radius,
+            IRIS_SHAPES.indexOf(r.irisShape) + 3,
+            r.irisRoundness,
+            r.irisRotation % 360 * Math.PI / 180,
+            r.irisAspectRatio,
+            0,
+            r.highlightGain,
+            r.highlightThreshold,
+            r.highlightSaturation,
+            r.repeatEdgePixels ? 1 : 0,
+            r.samples,
+            r.linearLight ? 1 : 0,
+            0,
+            0
+          ])
+        });
+      },
+      cleanup: cleanupWebGpuSinglePass
+    }),
+    webgl2: Internals.createEffectImplementation({
+      setup: (target) => setupLensBlur(target),
+      apply: ({ source, width, height, params, state, flipSourceY }) => {
+        const r = resolve(params);
+        const { gl, program, texture, vao } = 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 (state.uSource)
+          gl.uniform1i(state.uSource, 0);
+        if (state.uResolution)
+          gl.uniform2f(state.uResolution, width, height);
+        if (state.uRadius)
+          gl.uniform1f(state.uRadius, r.radius);
+        if (state.uIrisShape)
+          gl.uniform1i(state.uIrisShape, IRIS_SHAPES.indexOf(r.irisShape) + 3);
+        if (state.uIrisRoundness)
+          gl.uniform1f(state.uIrisRoundness, r.irisRoundness);
+        if (state.uIrisRotation)
+          gl.uniform1f(state.uIrisRotation, r.irisRotation % 360 * Math.PI / 180);
+        if (state.uIrisAspectRatio)
+          gl.uniform1f(state.uIrisAspectRatio, r.irisAspectRatio);
+        if (state.uHighlightGain)
+          gl.uniform1f(state.uHighlightGain, r.highlightGain);
+        if (state.uHighlightThreshold)
+          gl.uniform1f(state.uHighlightThreshold, r.highlightThreshold);
+        if (state.uHighlightSaturation)
+          gl.uniform1f(state.uHighlightSaturation, r.highlightSaturation);
+        if (state.uRepeatEdgePixels)
+          gl.uniform1i(state.uRepeatEdgePixels, r.repeatEdgePixels ? 1 : 0);
+        if (state.uSamples)
+          gl.uniform1i(state.uSamples, r.samples);
+        if (state.uLinearLight)
+          gl.uniform1i(state.uLinearLight, r.linearLight ? 1 : 0);
+        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: lensBlurSchema,
   validateParams: validateLensBlurParams

package/dist/esm/levels.mjs

@@ -1,112 +1,19 @@
-// src/levels.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]];
-};
+import {
+  assertOptionalFiniteNumber,
+  validateUnitInterval
+} from "./index-wxhvgv2s.mjs";
+import {
+  WEBGPU_SINGLE_PASS_VERTEX,
+  setupWebGpuSinglePass,
+  cleanupWebGpuSinglePass,
+  applyWebGpuSinglePass
+} from "./index-tvfexb7s.mjs";
+import {
+  assertEffectParamsObject
+} from "./index-4fvp93ps.mjs";
 
 // src/levels.ts
+import { Internals } from "remotion";
 var { createEffect, createWebGL2ContextError } = Internals;
 var DEFAULT_BLACK_POINT = 0;
 var DEFAULT_WHITE_POINT = 1;
@@ -263,6 +170,44 @@ void main() {
 	fragColor = vec4(color * alpha, alpha);
 }
 `;
+var WEBGPU_SHADER = `
+${WEBGPU_SINGLE_PASS_VERTEX}
+struct Params {
+	blackPoint: f32,
+	whitePoint: f32,
+	gamma: f32,
+	outputBlack: f32,
+	outputWhite: f32,
+	channel: f32,
+	padding0: f32,
+	padding1: f32,
+}
+@group(0) @binding(0) var source: texture_2d<f32>;
+@group(0) @binding(1) var sourceSampler: sampler;
+@group(0) @binding(2) var<uniform> params: Params;
+
+@fragment fn fragment(input: VertexOutput) -> @location(0) vec4f {
+	let sourceColor = textureSampleLevel(source, sourceSampler, input.uv, 0.0);
+	let alpha = sourceColor.a;
+	if (alpha <= 0.0) {
+		return vec4f(0.0);
+	}
+	var color = sourceColor.rgb / alpha;
+	let normalized = clamp((color - vec3f(params.blackPoint)) / (params.whitePoint - params.blackPoint), vec3f(0.0), vec3f(1.0));
+	let corrected = pow(normalized, vec3f(1.0 / params.gamma));
+	let outputColor = mix(vec3f(params.outputBlack), vec3f(params.outputWhite), corrected);
+	if (params.channel == 1.0) {
+		color.r = outputColor.r;
+	} else if (params.channel == 2.0) {
+		color.g = outputColor.g;
+	} else if (params.channel == 3.0) {
+		color.b = outputColor.b;
+	} else {
+		color = outputColor;
+	}
+	return vec4f(color * alpha, alpha);
+}
+`;
 var compileShader = (gl, type, source) => {
   const shader = gl.createShader(type);
   if (!shader) {
@@ -359,54 +304,92 @@ var levels = createEffect({
   type: "remotion/levels",
   label: "levels()",
   documentationLink: "https://www.remotion.dev/docs/effects/levels",
-  backend: "webgl2",
   calculateKey: (params) => {
     const { channel, blackPoint, whitePoint, gamma, outputBlack, outputWhite } = resolve(params);
     return `levels-${channel}-${blackPoint}-${whitePoint}-${gamma}-${outputBlack}-${outputWhite}`;
   },
-  setup: setupLevels,
-  apply: ({ source, width, height, params, state, flipSourceY }) => {
-    const { channel, blackPoint, whitePoint, gamma, outputBlack, outputWhite } = resolve(params);
-    const { gl, program, textureSource, uniforms, vao } = 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, textureSource);
-    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.uBlackPoint) {
-      gl.uniform1f(uniforms.uBlackPoint, blackPoint);
-    }
-    if (uniforms.uWhitePoint) {
-      gl.uniform1f(uniforms.uWhitePoint, whitePoint);
-    }
-    if (uniforms.uGamma)
-      gl.uniform1f(uniforms.uGamma, gamma);
-    if (uniforms.uOutputBlack) {
-      gl.uniform1f(uniforms.uOutputBlack, outputBlack);
-    }
-    if (uniforms.uOutputWhite) {
-      gl.uniform1f(uniforms.uOutputWhite, outputWhite);
-    }
-    if (uniforms.uChannel) {
-      gl.uniform1i(uniforms.uChannel, LEVELS_CHANNELS.indexOf(channel));
-    }
-    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, textureSource }) => {
-    gl.deleteTexture(textureSource);
-    gl.deleteBuffer(vbo);
-    gl.deleteProgram(program);
-    gl.deleteVertexArray(vao);
+  implementations: {
+    webgpu: Internals.createEffectImplementation({
+      setup: (target) => setupWebGpuSinglePass(target, "levels"),
+      apply: ({ source, width, height, params, state, gpuDevice }) => {
+        if (!gpuDevice) {
+          throw new Error("A WebGPU device is required for the levels effect");
+        }
+        const r = resolve(params);
+        applyWebGpuSinglePass({
+          state,
+          source,
+          width,
+          height,
+          device: gpuDevice,
+          shader: WEBGPU_SHADER,
+          uniformData: new Float32Array([
+            r.blackPoint,
+            r.whitePoint,
+            r.gamma,
+            r.outputBlack,
+            r.outputWhite,
+            LEVELS_CHANNELS.indexOf(r.channel),
+            0,
+            0
+          ])
+        });
+      },
+      cleanup: cleanupWebGpuSinglePass
+    }),
+    webgl2: Internals.createEffectImplementation({
+      setup: setupLevels,
+      apply: ({ source, width, height, params, state, flipSourceY }) => {
+        const {
+          channel,
+          blackPoint,
+          whitePoint,
+          gamma,
+          outputBlack,
+          outputWhite
+        } = resolve(params);
+        const { gl, program, textureSource, uniforms, vao } = 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, textureSource);
+        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.uBlackPoint) {
+          gl.uniform1f(uniforms.uBlackPoint, blackPoint);
+        }
+        if (uniforms.uWhitePoint) {
+          gl.uniform1f(uniforms.uWhitePoint, whitePoint);
+        }
+        if (uniforms.uGamma)
+          gl.uniform1f(uniforms.uGamma, gamma);
+        if (uniforms.uOutputBlack) {
+          gl.uniform1f(uniforms.uOutputBlack, outputBlack);
+        }
+        if (uniforms.uOutputWhite) {
+          gl.uniform1f(uniforms.uOutputWhite, outputWhite);
+        }
+        if (uniforms.uChannel) {
+          gl.uniform1i(uniforms.uChannel, LEVELS_CHANNELS.indexOf(channel));
+        }
+        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, textureSource }) => {
+        gl.deleteTexture(textureSource);
+        gl.deleteBuffer(vbo);
+        gl.deleteProgram(program);
+        gl.deleteVertexArray(vao);
+      }
+    })
   },
   schema: levelsSchema,
   validateParams: validateLevelsParams