@remotion/effects 4.0.538 → 4.0.540

package/dist/esm/bevel-alpha.mjs

@@ -1,111 +1,23 @@
+import {
+  WEBGPU_MULTIPASS_BINDINGS,
+  setupWebGpuMultipass,
+  cleanupWebGpuMultipass,
+  applyWebGpuMultipass
+} from "./index-kkvzt8b7.mjs";
+import {
+  assertOptionalFiniteNumber,
+  validateUnitInterval,
+  validateNonNegative,
+  parseColorRgba
+} from "./index-wxhvgv2s.mjs";
+import {
+  assertEffectParamsObject,
+  assertOptionalColor
+} from "./index-4fvp93ps.mjs";
+
 // src/bevel-alpha/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/bevel-alpha/shaders.ts
 var BEVEL_ALPHA_VERTEX_SHADER = `#version 300 es
 layout(location = 0) in vec2 aPos;
@@ -199,6 +111,63 @@ void main() {
 }
 `;
 
+// src/bevel-alpha/webgpu-shaders.ts
+var BEVEL_ALPHA_BLUR_WEBGPU_SHADER = `
+${WEBGPU_MULTIPASS_BINDINGS}
+// Alpha-derived normals adapted from EffectCraft (MIT); see ../../THIRD_PARTY_LICENSES.md.
+struct Params {resolution: vec2f, radius: f32, vertical: f32,}
+fn decodeHeight(color: vec4f) -> f32 {return dot(color.rg,vec2f(65280,255))/65535.0;}
+fn readHeight(uv: vec2f, x: f32) -> f32 {
+ if (params.vertical==0.0) {return textureSampleLevel(source,sourceSampler,uv,0).a;}
+ let pixel=uv*params.resolution-0.5;
+ let lower=vec2i(i32(x),i32(floor(pixel.y)));
+ let maximum=vec2i(params.resolution)-1;
+ let a=decodeHeight(textureLoad(source,clamp(lower,vec2i(0),maximum),0));
+ let b=decodeHeight(textureLoad(source,clamp(lower+vec2i(0,1),vec2i(0),maximum),0));
+ return mix(a,b,fract(pixel.y));
+}
+@fragment fn fragment(input: VertexOutput) -> @location(0) vec4f {
+ let radius=max(params.radius,0.0001);
+ let halfKernel=i32(clamp(ceil(radius),4.0,64.0));
+ let sigma=radius/3.0;
+ var sum=0.0;var total=0.0;
+ for (var i=-64;i<=64;i++) {
+  if (abs(i)>halfKernel) {continue;}
+  let offset=f32(i)*radius/f32(halfKernel);
+  let weight=exp(-0.5*offset*offset/(sigma*sigma));
+  let direction=select(vec2f(offset,0),vec2f(0,offset),params.vertical!=0.0);
+  sum+=readHeight(input.uv+direction/params.resolution,input.position.x)*weight;
+  total+=weight;
+ }
+ let value=floor(clamp(sum/total,0.0,1.0)*65535.0+0.5);
+ return vec4f(floor(value/256.0),value-floor(value/256.0)*256.0,0,255)/255.0;
+}
+`;
+var BEVEL_ALPHA_SHADE_WEBGPU_SHADER = `
+${WEBGPU_MULTIPASS_BINDINGS}
+struct Params {resolution: vec2f, thickness: f32, intensity: f32, direction: vec4f, color: vec4f,}
+fn heightAt(pixel: vec2i) -> f32 {
+ return dot(textureLoad(secondary,clamp(pixel,vec2i(0),vec2i(params.resolution)-1),0).rg,vec2f(65280,255))/65535.0;
+}
+@fragment fn fragment(input: VertexOutput) -> @location(0) vec4f {
+ let pixel=vec2i(input.position.xy);
+ // The WebGL shading pass uses output pixel coordinates for texelFetch.
+ // Retain that behavior for sources smaller than the output, with explicit
+ // bounds because WebGPU robust texture access may clamp out-of-range loads.
+ let size=vec2i(textureDimensions(source));
+ let sourcePixel=vec2i(pixel.x,pixel.y+size.y-i32(params.resolution.y));
+ if (any(sourcePixel<vec2i(0)) || any(sourcePixel>=size)) {return vec4f(0);}
+ let color=textureLoad(source,sourcePixel,0);
+ if (params.thickness==0.0 || params.intensity==0.0 || color.a==0.0) {return color;}
+ let dx=(heightAt(pixel+vec2i(1,0))-heightAt(pixel-vec2i(1,0)))*0.5;
+ let dy=(heightAt(pixel+vec2i(0,1))-heightAt(pixel-vec2i(0,1)))*0.5;
+ let normal=normalize(vec3f(-dx*params.thickness*1.25,-dy*params.thickness*1.25,1));
+ let shade=(dot(normal,params.direction.xyz)-params.direction.z)*params.intensity*2.0;
+ var rgb=color.rgb;
+ if (shade>0.0) {rgb+=params.color.rgb*shade*color.a;} else {rgb*=max(1.0+shade,0.0);}
+ return vec4f(clamp(rgb,vec3f(0),vec3f(color.a)),color.a);
+}`;
+
 // src/bevel-alpha/index.ts
 var { createEffect, createWebGL2ContextError } = Internals;
 var DEFAULT_EDGE_THICKNESS = 2;
@@ -371,100 +340,182 @@ var bevelAlpha = createEffect({
   type: "remotion/bevel-alpha",
   label: "bevelAlpha()",
   documentationLink: "https://www.remotion.dev/docs/effects/bevel-alpha",
-  backend: "webgl2",
   calculateKey: (params) => `bevel-alpha-${JSON.stringify(resolve(params))}`,
-  setup: setupBevelAlpha,
-  apply: ({ source, width, height, params, state, flipSourceY }) => {
-    const r = resolve(params);
-    const {
-      gl,
-      texture,
-      intermediate,
-      heightTexture,
-      program,
-      vao,
-      framebuffer
-    } = state;
-    if (state.cachedColor !== r.lightColor) {
-      state.cachedColor = r.lightColor;
-      state.cachedColorRgba = parseColorRgba(state.colorCtx, r.lightColor);
-    }
-    gl.viewport(0, 0, width, height);
-    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);
-    if (state.width !== width || state.height !== height) {
-      for (const output of [intermediate, heightTexture]) {
-        gl.bindTexture(gl.TEXTURE_2D, output);
-        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
-      }
-      state.width = width;
-      state.height = height;
-    }
-    gl.bindVertexArray(vao);
-    if (r.edgeThickness > 0 && r.lightIntensity > 0) {
-      gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
-      const ditherEnabled = gl.isEnabled(gl.DITHER);
-      gl.disable(gl.DITHER);
-      try {
-        for (const [pass, input, output] of [
-          [state.horizontal, texture, intermediate],
-          [state.vertical, intermediate, heightTexture]
-        ]) {
-          gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, output, 0);
-          if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) !== gl.FRAMEBUFFER_COMPLETE)
-            throw new Error("Bevel alpha framebuffer is incomplete");
-          gl.bindTexture(gl.TEXTURE_2D, input);
-          gl.useProgram(pass.program);
-          gl.uniform1i(pass.uSource, 0);
-          gl.uniform2f(pass.uResolution, width, height);
-          gl.uniform1f(pass.uRadius, r.edgeThickness * 1.5);
-          gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+  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 color parser");
+        return {
+          ...setupWebGpuMultipass(target, "bevel-alpha"),
+          colorCtx,
+          cachedColor: null,
+          cachedRgba: [0, 0, 0, 0]
+        };
+      },
+      apply: ({ source, width, height, params, state, gpuDevice }) => {
+        if (!gpuDevice)
+          throw new Error("A WebGPU device is required for this effect");
+        const r = resolve(params);
+        if (state.cachedColor !== r.lightColor) {
+          state.cachedColor = r.lightColor;
+          state.cachedRgba = parseColorRgba(state.colorCtx, r.lightColor);
         }
-      } finally {
-        if (ditherEnabled)
-          gl.enable(gl.DITHER);
+        const color = state.cachedRgba.map((channel) => channel / 255);
+        const angle = r.lightAngle % 360 * Math.PI / 180;
+        applyWebGpuMultipass({
+          auxiliarySource: null,
+          state,
+          source,
+          width,
+          height,
+          device: gpuDevice,
+          passes: [
+            {
+              shader: BEVEL_ALPHA_BLUR_WEBGPU_SHADER,
+              uniforms: new Float32Array([
+                width,
+                height,
+                r.edgeThickness * 1.5,
+                0
+              ]),
+              source: -1,
+              secondary: -1
+            },
+            {
+              shader: BEVEL_ALPHA_BLUR_WEBGPU_SHADER,
+              uniforms: new Float32Array([
+                width,
+                height,
+                r.edgeThickness * 1.5,
+                1
+              ]),
+              source: 0,
+              secondary: -1
+            },
+            {
+              shader: BEVEL_ALPHA_SHADE_WEBGPU_SHADER,
+              uniforms: new Float32Array([
+                width,
+                height,
+                r.edgeThickness,
+                r.lightIntensity,
+                Math.sin(angle) * Math.SQRT1_2,
+                -Math.cos(angle) * Math.SQRT1_2,
+                Math.SQRT1_2,
+                0,
+                color[0] * color[3],
+                color[1] * color[3],
+                color[2] * color[3],
+                0
+              ]),
+              source: -1,
+              secondary: 1
+            }
+          ]
+        });
+      },
+      cleanup: cleanupWebGpuMultipass
+    }),
+    webgl2: Internals.createEffectImplementation({
+      setup: setupBevelAlpha,
+      apply: ({ source, width, height, params, state, flipSourceY }) => {
+        const r = resolve(params);
+        const {
+          gl,
+          texture,
+          intermediate,
+          heightTexture,
+          program,
+          vao,
+          framebuffer
+        } = state;
+        if (state.cachedColor !== r.lightColor) {
+          state.cachedColor = r.lightColor;
+          state.cachedColorRgba = parseColorRgba(state.colorCtx, r.lightColor);
+        }
+        gl.viewport(0, 0, width, height);
+        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);
+        if (state.width !== width || state.height !== height) {
+          for (const output of [intermediate, heightTexture]) {
+            gl.bindTexture(gl.TEXTURE_2D, output);
+            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+          }
+          state.width = width;
+          state.height = height;
+        }
+        gl.bindVertexArray(vao);
+        if (r.edgeThickness > 0 && r.lightIntensity > 0) {
+          gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
+          const ditherEnabled = gl.isEnabled(gl.DITHER);
+          gl.disable(gl.DITHER);
+          try {
+            for (const [pass, input, output] of [
+              [state.horizontal, texture, intermediate],
+              [state.vertical, intermediate, heightTexture]
+            ]) {
+              gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, output, 0);
+              if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) !== gl.FRAMEBUFFER_COMPLETE)
+                throw new Error("Bevel alpha framebuffer is incomplete");
+              gl.bindTexture(gl.TEXTURE_2D, input);
+              gl.useProgram(pass.program);
+              gl.uniform1i(pass.uSource, 0);
+              gl.uniform2f(pass.uResolution, width, height);
+              gl.uniform1f(pass.uRadius, r.edgeThickness * 1.5);
+              gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+            }
+          } finally {
+            if (ditherEnabled)
+              gl.enable(gl.DITHER);
+          }
+        }
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        gl.bindTexture(gl.TEXTURE_2D, texture);
+        gl.activeTexture(gl.TEXTURE1);
+        gl.bindTexture(gl.TEXTURE_2D, heightTexture);
+        gl.useProgram(program);
+        gl.uniform1i(state.uSource, 0);
+        gl.uniform1i(state.uHeight, 1);
+        gl.uniform2f(state.uResolution, width, height);
+        gl.uniform1f(state.uEdgeThickness, r.edgeThickness);
+        const angle = r.lightAngle % 360 * Math.PI / 180;
+        gl.uniform3f(state.uLightDirection, Math.sin(angle) * Math.SQRT1_2, -Math.cos(angle) * Math.SQRT1_2, Math.SQRT1_2);
+        const [red, green, blue, alpha] = state.cachedColorRgba;
+        gl.uniform3f(state.uLightColor, red / 255 * alpha / 255, green / 255 * alpha / 255, blue / 255 * alpha / 255);
+        gl.uniform1f(state.uLightIntensity, r.lightIntensity);
+        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+        gl.bindVertexArray(null);
+        gl.bindTexture(gl.TEXTURE_2D, null);
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, null);
+        gl.useProgram(null);
+      },
+      cleanup: (state) => {
+        const { gl } = state;
+        for (const texture of [
+          state.texture,
+          state.intermediate,
+          state.heightTexture
+        ])
+          gl.deleteTexture(texture);
+        for (const program of [
+          state.horizontal.program,
+          state.vertical.program,
+          state.program
+        ])
+          gl.deleteProgram(program);
+        gl.deleteFramebuffer(state.framebuffer);
+        gl.deleteBuffer(state.vbo);
+        gl.deleteVertexArray(state.vao);
       }
-    }
-    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
-    gl.bindTexture(gl.TEXTURE_2D, texture);
-    gl.activeTexture(gl.TEXTURE1);
-    gl.bindTexture(gl.TEXTURE_2D, heightTexture);
-    gl.useProgram(program);
-    gl.uniform1i(state.uSource, 0);
-    gl.uniform1i(state.uHeight, 1);
-    gl.uniform2f(state.uResolution, width, height);
-    gl.uniform1f(state.uEdgeThickness, r.edgeThickness);
-    const angle = r.lightAngle % 360 * Math.PI / 180;
-    gl.uniform3f(state.uLightDirection, Math.sin(angle) * Math.SQRT1_2, -Math.cos(angle) * Math.SQRT1_2, Math.SQRT1_2);
-    const [red, green, blue, alpha] = state.cachedColorRgba;
-    gl.uniform3f(state.uLightColor, red / 255 * alpha / 255, green / 255 * alpha / 255, blue / 255 * alpha / 255);
-    gl.uniform1f(state.uLightIntensity, r.lightIntensity);
-    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
-    gl.bindVertexArray(null);
-    gl.bindTexture(gl.TEXTURE_2D, null);
-    gl.activeTexture(gl.TEXTURE0);
-    gl.bindTexture(gl.TEXTURE_2D, null);
-    gl.useProgram(null);
-  },
-  cleanup: (state) => {
-    const { gl } = state;
-    for (const texture of [
-      state.texture,
-      state.intermediate,
-      state.heightTexture
-    ])
-      gl.deleteTexture(texture);
-    for (const program of [
-      state.horizontal.program,
-      state.vertical.program,
-      state.program
-    ])
-      gl.deleteProgram(program);
-    gl.deleteFramebuffer(state.framebuffer);
-    gl.deleteBuffer(state.vbo);
-    gl.deleteVertexArray(state.vao);
+    })
   },
   schema: bevelAlphaSchema,
   validateParams: validateBevelAlphaParams

package/dist/esm/blur.mjs

@@ -1,108 +1,26 @@
+import {
+  setupWebGpuMultipass,
+  cleanupWebGpuMultipass,
+  applyWebGpuMultipass
+} from "./index-kkvzt8b7.mjs";
+import {
+  GAUSSIAN_BLUR_WEBGPU_SHADER
+} from "./index-618ky75w.mjs";
+import {
+  BLUR_VS,
+  BLUR_FS_HORIZONTAL,
+  BLUR_FS_VERTICAL
+} from "./index-b86qstcs.mjs";
+import {
+  assertEffectParamsObject,
+  assertRequiredFiniteNumber
+} from "./index-4fvp93ps.mjs";
+
 // src/blur/index.ts
 import { Internals as Internals2 } 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/blur/blur-runtime.ts
 import { Internals } from "remotion";
-
-// src/gaussian-blur-shader.ts
-var buildGaussianBlurFs = (direction) => {
-  const dirVec = direction === "horizontal" ? "vec2(1.0, 0.0)" : "vec2(0.0, 1.0)";
-  return `#version 300 es
-precision highp float;
-
-in vec2 vUv;
-out vec4 fragColor;
-
-uniform sampler2D uSource;
-uniform float uRadius;
-uniform vec2 uTexelSize;
-
-const int MIN_KERNEL_HALF = 4;
-const int MAX_KERNEL_HALF = 32;
-const float TARGET_SAMPLE_DISTANCE_PX = 2.0;
-const vec2 DIRECTION = ${dirVec};
-
-void main() {
-	if (uRadius <= 0.0) {
-		fragColor = texture(uSource, vUv);
-		return;
-	}
-
-	int kernelHalf = int(
-		min(
-			float(MAX_KERNEL_HALF),
-			max(float(MIN_KERNEL_HALF), ceil(uRadius / TARGET_SAMPLE_DISTANCE_PX))
-		)
-	);
-	float pixelStride = uRadius / float(kernelHalf);
-	float sigma = uRadius / 3.0;
-	float twoSigmaSq = 2.0 * sigma * sigma;
-
-	vec4 sum = vec4(0.0);
-	float weightSum = 0.0;
-
-	for (int i = -MAX_KERNEL_HALF; i <= MAX_KERNEL_HALF; ++i) {
-		if (abs(i) > kernelHalf) {
-			continue;
-		}
-
-		float offsetPx = float(i) * pixelStride;
-		float w = exp(-(offsetPx * offsetPx) / twoSigmaSq);
-		vec2 uv = vUv + DIRECTION * uTexelSize * offsetPx;
-		sum += texture(uSource, uv) * w;
-		weightSum += w;
-	}
-
-	fragColor = sum / weightSum;
-}
-`;
-};
-
-// src/blur/blur-shaders.ts
-var BLUR_VS = `#version 300 es
-layout(location = 0) in vec2 aPos;
-layout(location = 1) in vec2 aUv;
-out vec2 vUv;
-void main() {
-	vUv = aUv;
-	gl_Position = vec4(aPos, 0.0, 1.0);
-}
-`;
-var BLUR_FS_HORIZONTAL = buildGaussianBlurFs("horizontal");
-var BLUR_FS_VERTICAL = buildGaussianBlurFs("vertical");
-
-// src/blur/blur-runtime.ts
 var { createWebGL2ContextError } = Internals;
 var compileShader = (gl, type, source) => {
   const shader = gl.createShader(type);
@@ -421,26 +339,94 @@ var blur = createEffect({
   type: "dev.remotion.effects.blur",
   label: "blur()",
   documentationLink: "https://www.remotion.dev/docs/effects/blur",
-  backend: "webgl2",
   calculateKey: (params) => {
     const r = resolveBlurParams(params);
     return `${r.radius}-${r.horizontal ? 1 : 0}-${r.vertical ? 1 : 0}`;
   },
-  setup: (target) => setupBlur(target),
-  apply: ({ source, width, height, params, state, flipSourceY }) => {
-    const r = resolveBlurParams(params);
-    applyBlur({
-      state,
-      source,
-      width,
-      height,
-      radius: r.radius,
-      horizontal: r.horizontal,
-      vertical: r.vertical,
-      flipSourceY
-    });
+  implementations: {
+    webgpu: Internals2.createEffectImplementation({
+      setup: (target) => setupWebGpuMultipass(target, "blur"),
+      apply: ({ source, width, height, params, state, gpuDevice }) => {
+        if (!gpuDevice)
+          throw new Error("A WebGPU device is required for this effect");
+        const r = resolveBlurParams(params);
+        applyWebGpuMultipass({
+          auxiliarySource: null,
+          state,
+          source,
+          width,
+          height,
+          device: gpuDevice,
+          passes: [
+            {
+              shader: GAUSSIAN_BLUR_WEBGPU_SHADER,
+              uniforms: new Float32Array([
+                width,
+                height,
+                1,
+                0,
+                r.horizontal ? r.radius : 0,
+                0,
+                0,
+                0,
+                0,
+                0,
+                0,
+                0,
+                0,
+                0,
+                0,
+                0
+              ]),
+              source: -1,
+              secondary: -1
+            },
+            {
+              shader: GAUSSIAN_BLUR_WEBGPU_SHADER,
+              uniforms: new Float32Array([
+                width,
+                height,
+                0,
+                1,
+                r.vertical ? r.radius : 0,
+                0,
+                0,
+                0,
+                0,
+                0,
+                0,
+                0,
+                0,
+                0,
+                0,
+                0
+              ]),
+              source: 0,
+              secondary: -1
+            }
+          ]
+        });
+      },
+      cleanup: cleanupWebGpuMultipass
+    }),
+    webgl2: Internals2.createEffectImplementation({
+      setup: (target) => setupBlur(target),
+      apply: ({ source, width, height, params, state, flipSourceY }) => {
+        const r = resolveBlurParams(params);
+        applyBlur({
+          state,
+          source,
+          width,
+          height,
+          radius: r.radius,
+          horizontal: r.horizontal,
+          vertical: r.vertical,
+          flipSourceY
+        });
+      },
+      cleanup: (state) => cleanupBlur(state)
+    })
   },
-  cleanup: (state) => cleanupBlur(state),
   schema: blurSchema,
   validateParams: validateBlurParams
 });