@remotion/effects 4.0.539 → 4.0.540

package/dist/esm/noise-displacement.mjs

@@ -1,110 +1,76 @@
+import {
+  assertOptionalFiniteNumber,
+  validateUnitInterval
+} from "./index-wxhvgv2s.mjs";
+import {
+  WEBGPU_SINGLE_PASS_VERTEX,
+  setupWebGpuSinglePass,
+  cleanupWebGpuSinglePass,
+  applyWebGpuSinglePass
+} from "./index-tvfexb7s.mjs";
+import {
+  assertEffectParamsObject,
+  assertRequiredFiniteNumber
+} from "./index-4fvp93ps.mjs";
+
 // 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/noise-displacement-webgpu-shader.ts
+var NOISE_DISPLACEMENT_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;
 
-// 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)}`);
+struct Params { size: vec2f, center: vec2f, radius: f32, strength: f32, seed: f32, grainSize: f32, passes: f32, blur: f32, feather: f32, biasDirection: f32, biasAmount: f32, }
+const DISC = array<vec2f,9>(vec2f(0),vec2f(1,0),vec2f(-1,0),vec2f(0,1),vec2f(0,-1),vec2f(0.707,0.707),vec2f(-0.707,0.707),vec2f(0.707,-0.707),vec2f(-0.707,-0.707));
+const DISC_W = array<f32,9>(1.0,0.7,0.7,0.7,0.7,0.5,0.5,0.5,0.5);
+fn hash12(p: vec2f) -> f32 {
+  var p3=fract(p.xyx*0.1031+vec3f(params.seed*0.0973));
+  p3 += vec3f(dot(p3,p3.yzx+vec3f(33.33)));
+  return fract((p3.x+p3.y)*p3.z);
+}
+fn valueNoise(p: vec2f) -> f32 {
+  let i=floor(p); let f=fract(p); let u=f*f*(vec2f(3.0)-2.0*f);
+  return mix(mix(hash12(i),hash12(i+vec2f(1,0)),u.x),mix(hash12(i+vec2f(0,1)),hash12(i+vec2f(1,1)),u.x),u.y);
+}
+fn noiseVector(p: vec2f) -> vec2f { return vec2f(valueNoise(p+vec2f(17.13,71.79)),valueNoise(p+vec2f(83.41,29.67)))*2.0-vec2f(1.0); }
+fn effectMask(pixel: vec2f) -> f32 {
+  let radius=params.radius*min(params.size.x,params.size.y);
+  let distance=length(pixel-params.center*params.size);
+  if(distance>=radius) { return 0.0; }
+  if(params.feather<=0.0001) { return 1.0; }
+  return 1.0-smoothstep(radius*(1.0-params.feather),radius,distance);
+}
+fn sampleSource(pixel: vec2f) -> vec4f { return textureSampleLevel(source,sourceSampler,clamp(pixel/params.size,vec2f(0),vec2f(1)),0); }
+@fragment fn fragment(input: VertexOutput) -> @location(0) vec4f {
+  let pixel=input.uv*params.size;
+  let mask=effectMask(pixel);
+  if(mask<=0.0 || params.strength<=0.0) { return textureSampleLevel(source,sourceSampler,input.uv,0); }
+  let noiseCoord=pixel/max(params.grainSize,0.001);
+  let direction=params.biasDirection*3.141592653589793/180.0;
+  let displacement=(noiseVector(noiseCoord)+vec2f(cos(direction),sin(direction))*params.biasAmount)*params.strength*mask;
+  let passes=max(i32(params.passes),1);
+  let blurRadius=params.blur*mask;
+  let blurTaps=select(1,9,blurRadius>0.5);
+  var color=vec4f(0); var totalWeight=0.0;
+  for(var s=0;s<12;s++) {
+    if(s>=passes) { break; }
+    let t=select(f32(s)/f32(max(passes-1,1)),1.0,passes==1);
+    let samplePixel=pixel+displacement*t;
+    let passWeight=1.0-t*0.6;
+    for(var b=0;b<9;b++) {
+      if(b>=blurTaps) { break; }
+      let weight=passWeight*DISC_W[b];
+      color += sampleSource(samplePixel+DISC[b]*blurRadius)*weight;
+      totalWeight += weight;
+    }
   }
-};
-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]];
-};
+  return color/totalWeight;
+}
+
+`;
 
 // src/noise-displacement.ts
 var { createEffect, createWebGL2ContextError } = Internals;
@@ -517,59 +483,98 @@ var noiseDisplacement = createEffect({
   type: "dev.remotion.effects.noiseDisplacement",
   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);
+  implementations: {
+    webgpu: Internals.createEffectImplementation({
+      setup: (target) => setupWebGpuSinglePass(target, "noise-displacement"),
+      apply: ({ source, width, height, params, state, gpuDevice }) => {
+        if (!gpuDevice)
+          throw new Error("A WebGPU device is required for the noise-displacement effect");
+        const r = resolve(params);
+        const uniformData = new Float32Array([
+          width,
+          height,
+          r.center[0],
+          r.center[1],
+          r.radius,
+          r.strength,
+          r.seed,
+          r.grainSize,
+          r.passes,
+          r.blur,
+          r.feather,
+          r.biasDirection,
+          r.biasAmount,
+          0,
+          0,
+          0
+        ]);
+        applyWebGpuSinglePass({
+          state,
+          source,
+          width,
+          height,
+          device: gpuDevice,
+          shader: NOISE_DISPLACEMENT_WEBGPU_SHADER,
+          uniformData
+        });
+      },
+      cleanup: cleanupWebGpuSinglePass
+    }),
+    webgl2: Internals.createEffectImplementation({
+      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

package/dist/esm/noise.mjs

@@ -1,114 +1,47 @@
+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/noise.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/noise-webgpu-shader.ts
+var NOISE_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;
 
-// 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]];
-};
+struct Params { size: vec2f, amount: f32, seed: f32, premultiply: f32, }
+fn random(co: vec2f) -> f32 {
+  var p3 = fract(co.xyx * 0.1031 + vec3f(params.seed * 0.0973));
+  p3 += vec3f(dot(p3, p3.yzx + vec3f(33.33)));
+  return fract((p3.x + p3.y) * p3.z);
+}
+@fragment fn fragment(input: VertexOutput) -> @location(0) vec4f {
+  let color = textureSampleLevel(source, sourceSampler, input.uv, 0);
+  if (color.a <= 0.001) { return vec4f(0); }
+  let noise = random(vec2f(input.position.x, params.size.y - input.position.y)) - 0.5;
+  let rgb = color.rgb / color.a;
+  let layer = select(vec3f(noise), rgb * noise, params.premultiply != 0.0);
+  return vec4f(clamp(rgb + layer * params.amount, vec3f(0), vec3f(1)) * color.a, color.a);
+}
+
+`;
 
 // src/noise.ts
 var { createEffect, createWebGL2ContextError } = Internals;
-var DEFAULT_AMOUNT2 = 0.15;
+var DEFAULT_AMOUNT = 0.15;
 var DEFAULT_SEED = 0;
 var DEFAULT_PREMULTIPLY = false;
 var noiseSchema = {
@@ -117,7 +50,7 @@ var noiseSchema = {
     min: 0,
     max: 1,
     step: 0.01,
-    default: DEFAULT_AMOUNT2,
+    default: DEFAULT_AMOUNT,
     description: "Amount",
     hiddenFromList: false
   },
@@ -135,11 +68,11 @@ var noiseSchema = {
   }
 };
 var resolve = (p) => ({
-  amount: p.amount ?? DEFAULT_AMOUNT2,
+  amount: p.amount ?? DEFAULT_AMOUNT,
   seed: p.seed ?? DEFAULT_SEED,
   premultiply: p.premultiply ?? DEFAULT_PREMULTIPLY
 });
-var assertOptionalBoolean2 = (value, name) => {
+var assertOptionalBoolean = (value, name) => {
   if (value === undefined) {
     return;
   }
@@ -151,7 +84,7 @@ var validateNoiseParams = (params) => {
   assertEffectParamsObject(params, "Noise");
   assertOptionalFiniteNumber(params.amount, "amount");
   assertOptionalFiniteNumber(params.seed, "seed");
-  assertOptionalBoolean2(params.premultiply, "premultiply");
+  assertOptionalBoolean(params.premultiply, "premultiply");
   const r = resolve(params);
   validateUnitInterval(r.amount, "amount");
 };
@@ -306,45 +239,76 @@ var noise = createEffect({
   type: "dev.remotion.effects.noise",
   label: "noise()",
   documentationLink: "https://www.remotion.dev/docs/effects/noise",
-  backend: "webgl2",
   calculateKey: (params) => {
     const r = resolve(params);
     return `noise-${r.amount}-${r.seed}-${r.premultiply ? 1 : 0}`;
   },
-  setup: (target) => setupNoise(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.uAmount)
-      gl.uniform1f(state.uAmount, r.amount);
-    if (state.uSeed)
-      gl.uniform1f(state.uSeed, r.seed);
-    if (state.uPremultiply)
-      gl.uniform1i(state.uPremultiply, r.premultiply ? 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, "noise"),
+      apply: ({ source, width, height, params, state, gpuDevice }) => {
+        if (!gpuDevice)
+          throw new Error("A WebGPU device is required for the noise effect");
+        const r = resolve(params);
+        const uniformData = new Float32Array([
+          width,
+          height,
+          r.amount,
+          r.seed,
+          r.premultiply ? 1 : 0,
+          0,
+          0,
+          0
+        ]);
+        applyWebGpuSinglePass({
+          state,
+          source,
+          width,
+          height,
+          device: gpuDevice,
+          shader: NOISE_WEBGPU_SHADER,
+          uniformData
+        });
+      },
+      cleanup: cleanupWebGpuSinglePass
+    }),
+    webgl2: Internals.createEffectImplementation({
+      setup: (target) => setupNoise(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.uAmount)
+          gl.uniform1f(state.uAmount, r.amount);
+        if (state.uSeed)
+          gl.uniform1f(state.uSeed, r.seed);
+        if (state.uPremultiply)
+          gl.uniform1i(state.uPremultiply, r.premultiply ? 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: noiseSchema,
   validateParams: validateNoiseParams