@remotion/effects 4.0.539 → 4.0.541

package/dist/esm/radial-wipe.mjs

@@ -0,0 +1,224 @@
+import {
+  setupSinglePass,
+  prepareSinglePassSource,
+  drawSinglePass,
+  cleanupSinglePass
+} from "./index-8p04sssx.mjs";
+import {
+  assertOptionalFiniteNumber,
+  validateUnitInterval,
+  validateNonNegative
+} from "./index-wxhvgv2s.mjs";
+import {
+  WEBGPU_SINGLE_PASS_VERTEX,
+  setupWebGpuSinglePass,
+  cleanupWebGpuSinglePass,
+  applyWebGpuSinglePass
+} from "./index-tvfexb7s.mjs";
+import {
+  assertEffectParamsObject,
+  assertRequiredFiniteNumber
+} from "./index-4fvp93ps.mjs";
+
+// src/radial-wipe.ts
+import { Internals } from "remotion";
+var DEFAULT_PROGRESS = 0;
+var DEFAULT_START_ANGLE = 0;
+var DEFAULT_CENTER = [0.5, 0.5];
+var DEFAULT_DIRECTION = "clockwise";
+var DEFAULT_FEATHER = 0;
+var DIRECTIONS = ["clockwise", "counterclockwise", "both"];
+var radialWipeSchema = {
+  progress: {
+    type: "number",
+    min: 0,
+    max: 1,
+    step: 0.01,
+    default: DEFAULT_PROGRESS,
+    description: "Progress",
+    hiddenFromList: false
+  },
+  startAngle: {
+    type: "rotation-degrees",
+    step: 1,
+    default: DEFAULT_START_ANGLE,
+    description: "Start angle"
+  },
+  center: {
+    type: "uv-coordinate",
+    min: 0,
+    max: 1,
+    step: 0.01,
+    default: DEFAULT_CENTER,
+    description: "Center"
+  },
+  direction: {
+    type: "enum",
+    variants: { clockwise: {}, counterclockwise: {}, both: {} },
+    default: DEFAULT_DIRECTION,
+    description: "Direction"
+  },
+  feather: {
+    type: "number",
+    min: 0,
+    max: 360,
+    step: 1,
+    default: DEFAULT_FEATHER,
+    description: "Feather",
+    hiddenFromList: false
+  }
+};
+var resolve = (p) => ({
+  progress: p.progress ?? DEFAULT_PROGRESS,
+  startAngle: p.startAngle ?? DEFAULT_START_ANGLE,
+  center: p.center ?? DEFAULT_CENTER,
+  direction: p.direction ?? DEFAULT_DIRECTION,
+  feather: p.feather ?? DEFAULT_FEATHER
+});
+var FRAGMENT_SHADER = `#version 300 es
+precision highp float;
+in vec2 vUv;
+out vec4 fragColor;
+uniform sampler2D uSource;
+uniform vec2 uResolution;
+uniform vec2 uCenter;
+uniform float uStartAngle;
+uniform float uProgress;
+uniform float uFeather;
+uniform int uDirection;
+
+void main() {
+	vec4 source = texture(uSource, vUv);
+	if (uProgress <= 0.0) { fragColor = source; return; }
+	if (uProgress >= 1.0) { fragColor = vec4(0.0); return; }
+	vec2 delta = (vec2(vUv.x, 1.0 - vUv.y) - uCenter) * uResolution;
+	// atan(0, 0) is undefined; the center belongs to the erased sector.
+	if (dot(delta, delta) == 0.0) { fragColor = vec4(0.0); return; }
+	float angle = mod(degrees(atan(delta.x, -delta.y)) - uStartAngle, 360.0);
+	float sweep = 360.0;
+	if (uDirection == 1) angle = 360.0 - angle;
+	if (uDirection == 2) { angle = min(angle, 360.0 - angle); sweep = 180.0; }
+	float distance = angle - uProgress * sweep;
+	float mask = uFeather > 0.0 ? clamp(distance / uFeather + 0.5, 0.0, 1.0) : step(0.0, distance);
+	fragColor = source * mask;
+}
+`;
+var WEBGPU_SHADER = `
+${WEBGPU_SINGLE_PASS_VERTEX}
+struct Params { resolutionCenter: vec4f, controls: vec4f, }
+@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 color = textureSampleLevel(source, sourceSampler, input.uv, 0);
+	let progress = params.controls.y;
+	if (progress <= 0.0) { return color; }
+	if (progress >= 1.0) { return vec4f(0); }
+	let delta = (input.uv - params.resolutionCenter.zw) * params.resolutionCenter.xy;
+	if (dot(delta, delta) == 0.0) { return vec4f(0); }
+	// Avoid the implementation-dependent atan2 result at a signed-zero X argument.
+	var polarAngle = atan2(delta.x, -delta.y);
+	if (delta.y == 0.0) { polarAngle = select(-1.5707963267948966, 1.5707963267948966, delta.x >= 0.0); }
+	let rawAngle = degrees(polarAngle) - params.controls.x;
+	var angle = rawAngle - 360.0 * floor(rawAngle / 360.0);
+	var sweep = 360.0;
+	if (params.controls.w == 1.0) { angle = 360.0 - angle; }
+	if (params.controls.w == 2.0) { angle = min(angle, 360.0 - angle); sweep = 180.0; }
+	let distance = angle - progress * sweep;
+	var mask = step(0.0, distance);
+	if (params.controls.z > 0.0) { mask = clamp(distance / params.controls.z + 0.5, 0.0, 1.0); }
+	return color * mask;
+}
+`;
+var radialWipe = Internals.createEffect({
+  type: "remotion/radial-wipe",
+  label: "radialWipe()",
+  documentationLink: "https://www.remotion.dev/docs/effects/radial-wipe",
+  calculateKey: (params) => `radial-wipe-${JSON.stringify(resolve(params))}`,
+  implementations: {
+    webgpu: Internals.createEffectImplementation({
+      setup: (target) => setupWebGpuSinglePass(target, "radial-wipe"),
+      apply: ({ source, width, height, params, state, gpuDevice }) => {
+        if (!gpuDevice) {
+          throw new Error("A WebGPU device is required for the radial-wipe effect");
+        }
+        const r = resolve(params);
+        applyWebGpuSinglePass({
+          source,
+          width,
+          height,
+          state,
+          device: gpuDevice,
+          shader: WEBGPU_SHADER,
+          uniformData: new Float32Array([
+            width,
+            height,
+            r.center[0],
+            r.center[1],
+            r.startAngle % 360,
+            r.progress,
+            r.feather,
+            DIRECTIONS.indexOf(r.direction)
+          ])
+        });
+      },
+      cleanup: cleanupWebGpuSinglePass
+    }),
+    webgl2: Internals.createEffectImplementation({
+      setup: (target) => setupSinglePass(target, FRAGMENT_SHADER, "radial wipe", [
+        "uResolution",
+        "uCenter",
+        "uStartAngle",
+        "uProgress",
+        "uFeather",
+        "uDirection"
+      ]),
+      apply: ({ source, width, height, params, state, flipSourceY }) => {
+        const r = resolve(params);
+        const { gl, uniforms } = state;
+        prepareSinglePassSource({
+          state,
+          source,
+          width,
+          height,
+          flipSourceY
+        });
+        gl.uniform2f(uniforms.uResolution, width, height);
+        gl.uniform2f(uniforms.uCenter, r.center[0], r.center[1]);
+        gl.uniform1f(uniforms.uStartAngle, r.startAngle % 360);
+        gl.uniform1f(uniforms.uProgress, r.progress);
+        gl.uniform1f(uniforms.uFeather, r.feather);
+        gl.uniform1i(uniforms.uDirection, DIRECTIONS.indexOf(r.direction));
+        drawSinglePass(state);
+      },
+      cleanup: cleanupSinglePass
+    })
+  },
+  schema: radialWipeSchema,
+  validateParams: (params) => {
+    assertEffectParamsObject(params, "Radial wipe");
+    assertOptionalFiniteNumber(params.progress, "progress");
+    assertOptionalFiniteNumber(params.startAngle, "startAngle");
+    assertOptionalFiniteNumber(params.feather, "feather");
+    if (params.center !== undefined) {
+      if (!Array.isArray(params.center) || params.center.length !== 2) {
+        throw new TypeError('"center" must be a tuple of two finite numbers');
+      }
+      assertRequiredFiniteNumber(params.center[0], "center[0]");
+      assertRequiredFiniteNumber(params.center[1], "center[1]");
+    }
+    const r = resolve(params);
+    if (params.direction !== undefined && !DIRECTIONS.includes(params.direction)) {
+      throw new TypeError('"direction" must be "clockwise", "counterclockwise" or "both"');
+    }
+    validateUnitInterval(r.progress, "progress");
+    validateUnitInterval(r.center[0], "center[0]");
+    validateUnitInterval(r.center[1], "center[1]");
+    validateNonNegative(r.feather, "feather");
+    if (r.feather > 360)
+      throw new TypeError('"feather" must be at most 360');
+  }
+});
+export {
+  radialWipe
+};

package/dist/esm/rain-fall.mjs

@@ -0,0 +1,114 @@
+import {
+  COMMON_WEATHER_DEFAULTS,
+  createWeatherSchema,
+  resolveWeatherParams,
+  validateWeatherRange,
+  validateWeatherParams,
+  setupWeather,
+  drawWeather,
+  cleanupWeather,
+  setupWeatherWebGpu,
+  cleanupWeatherWebGpu,
+  drawWeatherWebGpu
+} from "./index-rswpzmm5.mjs";
+
+// src/rain-fall.ts
+import { Internals } from "remotion";
+var { createEffect } = Internals;
+var DEFAULTS = {
+  ...COMMON_WEATHER_DEFAULTS,
+  size: 1,
+  speed: 4000,
+  wind: 0,
+  windVariation: 0,
+  color: "#cccccc",
+  opacity: 0.25,
+  transferMode: "lighten",
+  drops: 1e5,
+  appearance: "refracting"
+};
+var rainFallSchema = {
+  drops: {
+    type: "number",
+    min: 0,
+    max: 1e5,
+    step: 1,
+    integer: true,
+    default: DEFAULTS.drops,
+    description: "Drops",
+    hiddenFromList: false
+  },
+  ...createWeatherSchema(DEFAULTS, 20000, 1e4),
+  appearance: {
+    type: "enum",
+    variants: { refracting: {}, "soft-solid": {} },
+    default: DEFAULTS.appearance,
+    description: "Appearance"
+  }
+};
+var resolve = (params) => ({
+  ...resolveWeatherParams(params, DEFAULTS),
+  count: params.drops ?? DEFAULTS.drops,
+  sizeVariation: 0,
+  speedVariation: 0,
+  wiggleAmount: 0,
+  wiggleAmountVariation: 0,
+  wiggleFrequency: 0,
+  wiggleFrequencyVariation: 0,
+  appearance: params.appearance ?? DEFAULTS.appearance
+});
+var rainFall = createEffect({
+  type: "remotion/rain-fall",
+  label: "rainFall()",
+  documentationLink: "https://www.remotion.dev/docs/effects/rain-fall",
+  calculateKey: (params) => `rain-fall-${JSON.stringify(resolve(params))}`,
+  implementations: {
+    webgpu: Internals.createEffectImplementation({
+      setup: setupWeatherWebGpu,
+      apply: ({ source, width, height, params, state, gpuDevice }) => {
+        if (!gpuDevice)
+          throw new Error("A WebGPU device is required for the rain fall effect");
+        drawWeatherWebGpu({
+          source,
+          width,
+          height,
+          params: resolve(params),
+          state,
+          device: gpuDevice,
+          type: "rain"
+        });
+      },
+      cleanup: cleanupWeatherWebGpu
+    }),
+    webgl2: Internals.createEffectImplementation({
+      setup: (target) => setupWeather(target, "rain fall"),
+      apply: ({ source, width, height, params, state, flipSourceY }) => {
+        drawWeather({
+          state,
+          source,
+          width,
+          height,
+          flipSourceY,
+          params: resolve(params),
+          type: "rain"
+        });
+      },
+      cleanup: cleanupWeather
+    })
+  },
+  schema: rainFallSchema,
+  validateParams: (params) => {
+    validateWeatherParams(params, "Rain fall", 20000, 1e4);
+    validateWeatherRange(params.drops, "drops", 0, 1e5);
+    if (params.drops !== undefined && !Number.isInteger(params.drops)) {
+      throw new TypeError('"drops" must be an integer');
+    }
+    if (params.appearance !== undefined && params.appearance !== "refracting" && params.appearance !== "soft-solid") {
+      throw new TypeError('"appearance" must be "refracting" or "soft-solid"');
+    }
+  }
+});
+export {
+  rainFall,
+  rainFallSchema
+};

package/dist/esm/region-blur.mjs

@@ -1,187 +1,34 @@
+import {
+  WEBGPU_MULTIPASS_BINDINGS,
+  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 {
+  publicUvToShaderUv
+} from "./index-gnsce796.mjs";
+import {
+  assertOptionalFiniteNumber,
+  validateUnitInterval,
+  validateNonNegative
+} from "./index-wxhvgv2s.mjs";
+import {
+  assertEffectParamsObject
+} from "./index-4fvp93ps.mjs";
+
 // src/region-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/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/region-blur/region-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/uv-coordinate.ts
-var publicUvToShaderUv = (uv) => {
-  return [uv[0], 1 - uv[1]];
-};
-
-// src/region-blur/region-blur-runtime.ts
 var { createWebGL2ContextError } = Internals;
 var COMPOSITE_FRAGMENT_SHADER = `#version 300 es
 precision highp float;
@@ -447,6 +294,24 @@ var cleanupRegionBlur = (state) => {
   gl.deleteProgram(state.compositeProgram);
 };
 
+// src/region-blur/webgpu-shader.ts
+var REGION_BLUR_WEBGPU_SHADER = `
+${WEBGPU_MULTIPASS_BINDINGS}
+struct Params {resolution: vec2f, feather: f32, roundness: f32, corners: vec4f,}
+@fragment fn fragment(input: VertexOutput) -> @location(0) vec4f {
+ let minimum = params.corners.xy * params.resolution;
+ let maximum = params.corners.zw * params.resolution;
+ let halfSize = (maximum - minimum) * 0.5;
+ let center = (minimum + maximum) * 0.5;
+ let radius = min(halfSize.x, halfSize.y) * params.roundness;
+ let offset = abs(input.uv * params.resolution - center) - halfSize + vec2f(radius);
+ let distance = length(max(offset, vec2f(0))) + min(max(offset.x, offset.y), 0.0) - radius;
+ var mask = select(0.0, 1.0, distance <= 0.0);
+ if (params.feather > 0.0) {mask = 1.0 - smoothstep(-params.feather * 0.5, params.feather * 0.5, distance);}
+ return mix(textureSampleLevel(source, sourceSampler, input.uv, 0), textureSampleLevel(secondary, sourceSampler, input.uv, 0), mask);
+}
+`;
+
 // src/region-blur/index.ts
 var { createEffect } = Internals2;
 var DEFAULT_BLUR_RADIUS = 40;
@@ -528,24 +393,105 @@ var regionBlur = createEffect({
   type: "remotion/region-blur",
   label: "regionBlur()",
   documentationLink: "https://www.remotion.dev/docs/effects/region-blur",
-  backend: "webgl2",
   calculateKey: (params) => {
     const resolved = resolve(params);
     return `region-blur-${resolved.topLeft.join(":")}-${resolved.bottomRight.join(":")}-${resolved.blurRadius}-${resolved.feather}-${resolved.roundness}`;
   },
-  setup: (target) => setupRegionBlur(target),
-  apply: ({ source, width, height, params, state, flipSourceY }) => {
-    const resolved = resolve(params);
-    applyRegionBlur({
-      state,
-      source,
-      width,
-      height,
-      flipSourceY,
-      ...resolved
-    });
+  implementations: {
+    webgpu: Internals2.createEffectImplementation({
+      setup: (target) => setupWebGpuMultipass(target, "region-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);
+        applyWebGpuMultipass({
+          auxiliarySource: null,
+          state,
+          source,
+          width,
+          height,
+          device: gpuDevice,
+          passes: [
+            {
+              shader: GAUSSIAN_BLUR_WEBGPU_SHADER,
+              uniforms: new Float32Array([
+                width,
+                height,
+                1,
+                0,
+                r.blurRadius,
+                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.blurRadius,
+                0,
+                0,
+                0,
+                0,
+                0,
+                0,
+                0,
+                0,
+                0,
+                0,
+                0
+              ]),
+              source: 0,
+              secondary: -1
+            },
+            {
+              shader: REGION_BLUR_WEBGPU_SHADER,
+              uniforms: new Float32Array([
+                width,
+                height,
+                r.feather,
+                r.roundness,
+                ...r.topLeft,
+                ...r.bottomRight
+              ]),
+              source: -1,
+              secondary: 1
+            }
+          ]
+        });
+      },
+      cleanup: cleanupWebGpuMultipass
+    }),
+    webgl2: Internals2.createEffectImplementation({
+      setup: (target) => setupRegionBlur(target),
+      apply: ({ source, width, height, params, state, flipSourceY }) => {
+        const resolved = resolve(params);
+        applyRegionBlur({
+          state,
+          source,
+          width,
+          height,
+          flipSourceY,
+          ...resolved
+        });
+      },
+      cleanup: (state) => cleanupRegionBlur(state)
+    })
   },
-  cleanup: (state) => cleanupRegionBlur(state),
   schema: regionBlurSchema,
   validateParams: validateRegionBlurParams
 });