@remotion/effects 4.0.539 → 4.0.541

package/dist/esm/evolve.mjs

@@ -1,117 +1,35 @@
-// src/evolve.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,
+  validateNonNegative
+} from "./index-wxhvgv2s.mjs";
+import {
+  WEBGPU_SINGLE_PASS_VERTEX,
+  setupWebGpuSinglePass,
+  cleanupWebGpuSinglePass,
+  applyWebGpuSinglePass
+} from "./index-tvfexb7s.mjs";
+import {
+  assertEffectParamsObject
+} from "./index-4fvp93ps.mjs";
 
 // src/evolve.ts
+import { Internals } from "remotion";
 var { createEffect, createWebGL2ContextError } = Internals;
-var EVOLVE_DIRECTIONS = ["left", "right", "top", "bottom"];
+var EVOLVE_DIRECTIONS = ["left", "right", "top", "bottom", "angle"];
+var EVOLVE_FEATHER_UNITS = ["relative", "pixels"];
+var DIRECTION_VECTORS = {
+  left: [1, 0],
+  right: [-1, 0],
+  top: [0, 1],
+  bottom: [0, -1]
+};
 var DEFAULT_PROGRESS = 0.5;
 var DEFAULT_FEATHER = 0.1;
 var DEFAULT_DIRECTION = "left";
+var DEFAULT_ANGLE = 90;
+var DEFAULT_FEATHER_UNIT = "relative";
+var DEFAULT_FEATHER_PIXELS = 0;
 var evolveSchema = {
   progress: {
     type: "number",
@@ -128,19 +46,47 @@ var evolveSchema = {
       left: {},
       right: {},
       top: {},
-      bottom: {}
+      bottom: {},
+      angle: {
+        angle: {
+          type: "rotation-degrees",
+          step: 1,
+          default: DEFAULT_ANGLE,
+          description: "Angle"
+        }
+      }
     },
     default: DEFAULT_DIRECTION,
     description: "Direction"
   },
-  feather: {
-    type: "number",
-    min: 0,
-    max: 1,
-    step: 0.01,
-    default: DEFAULT_FEATHER,
-    description: "Feather",
-    hiddenFromList: false
+  featherUnit: {
+    type: "enum",
+    variants: {
+      relative: {
+        feather: {
+          type: "number",
+          min: 0,
+          max: 1,
+          step: 0.01,
+          default: DEFAULT_FEATHER,
+          description: "Feather",
+          hiddenFromList: false
+        }
+      },
+      pixels: {
+        featherPixels: {
+          type: "number",
+          min: 0,
+          max: 500,
+          step: 1,
+          default: DEFAULT_FEATHER_PIXELS,
+          description: "Feather in pixels",
+          hiddenFromList: false
+        }
+      }
+    },
+    default: DEFAULT_FEATHER_UNIT,
+    description: "Feather unit"
   }
 };
 var formatEnum = (variants) => {
@@ -160,16 +106,23 @@ var assertOptionalEnum = (value, name, variants) => {
 var resolve = (p) => ({
   progress: p.progress ?? DEFAULT_PROGRESS,
   direction: p.direction ?? DEFAULT_DIRECTION,
-  feather: p.feather ?? DEFAULT_FEATHER
+  feather: p.feather ?? DEFAULT_FEATHER,
+  angle: p.angle ?? DEFAULT_ANGLE,
+  featherUnit: p.featherUnit ?? DEFAULT_FEATHER_UNIT,
+  featherPixels: p.featherPixels ?? DEFAULT_FEATHER_PIXELS
 });
 var validateEvolveParams = (params) => {
   assertEffectParamsObject(params, "Evolve");
   assertOptionalFiniteNumber(params.progress, "progress");
   assertOptionalFiniteNumber(params.feather, "feather");
+  assertOptionalFiniteNumber(params.angle, "angle");
+  assertOptionalFiniteNumber(params.featherPixels, "featherPixels");
+  assertOptionalEnum(params.featherUnit, "featherUnit", EVOLVE_FEATHER_UNITS);
   assertOptionalEnum(params.direction, "direction", EVOLVE_DIRECTIONS);
   const r = resolve(params);
   validateUnitInterval(r.progress, "progress");
   validateUnitInterval(r.feather, "feather");
+  validateNonNegative(r.featherPixels, "featherPixels");
 };
 var EVOLVE_VS = `#version 300 es
 in vec2 aPos;
@@ -191,6 +144,10 @@ uniform sampler2D uSource;
 uniform float uProgress;
 uniform float uFeather;
 uniform int uDirection;
+uniform vec2 uResolution;
+uniform vec2 uTravelDirection;
+uniform bool uUsePixelFeather;
+uniform float uFeatherPixels;
 
 float getT(vec2 uv) {
 	// 0: left, 1: right, 2: top, 3: bottom
@@ -232,7 +189,30 @@ float maskValue(float t, float progress, float feather) {
 void main() {
 	vec4 source = texture(uSource, vUv);
 	float t = getT(vUv);
-	float mask = maskValue(t, uProgress, uFeather);
+	float mask;
+	if (uDirection == 4 || uUsePixelFeather) {
+		vec2 extent = uResolution * uTravelDirection;
+		float low = min(0.0, extent.x) + min(0.0, extent.y);
+		float high = max(0.0, extent.x) + max(0.0, extent.y);
+		vec2 position = vec2(vUv.x, 1.0 - vUv.y) * uResolution;
+		float projection = dot(position, uTravelDirection);
+		if (uUsePixelFeather) {
+			// Adapted from EffectCraft's linear_wipe(), under the MIT license:
+			// https://github.com/storytold/effectcraft/blob/eb5108786b90bf994a6abe4e6c0b2614c6aeaa29/crates/effects/src/misc.rs
+			// See ../THIRD_PARTY_LICENSES.md. Increasing progress reveals the source.
+			float edge = mix(low - uFeatherPixels, high + uFeatherPixels, uProgress);
+			mask = uFeatherPixels > 0.0
+				? clamp((edge - projection) / uFeatherPixels + 0.5, 0.0, 1.0)
+				: step(projection, edge);
+			if (uProgress <= 0.0) mask = 0.0;
+			if (uProgress >= 1.0) mask = 1.0;
+		} else {
+			t = (projection - low) / (high - low);
+			mask = maskValue(t, uProgress, uFeather);
+		}
+	} else {
+		mask = maskValue(t, uProgress, uFeather);
+	}
 	fragColor = vec4(source.rgb * mask, source.a * mask);
 }
 `;
@@ -340,7 +320,11 @@ var setupEvolve = (target) => {
       uSource: gl.getUniformLocation(program, "uSource"),
       uProgress: gl.getUniformLocation(program, "uProgress"),
       uDirection: gl.getUniformLocation(program, "uDirection"),
-      uFeather: gl.getUniformLocation(program, "uFeather")
+      uFeather: gl.getUniformLocation(program, "uFeather"),
+      uResolution: gl.getUniformLocation(program, "uResolution"),
+      uTravelDirection: gl.getUniformLocation(program, "uTravelDirection"),
+      uUsePixelFeather: gl.getUniformLocation(program, "uUsePixelFeather"),
+      uFeatherPixels: gl.getUniformLocation(program, "uFeatherPixels")
     }
   };
 };
@@ -354,53 +338,143 @@ var directionToInt = (direction) => {
       return 2;
     case "bottom":
       return 3;
+    case "angle":
+      return 4;
     default: {
       const exhaustiveCheck = direction;
       return exhaustiveCheck;
     }
   }
 };
+var WEBGPU_SHADER = `
+${WEBGPU_SINGLE_PASS_VERTEX}
+struct Params { resolutionTravel: vec4f, controls: vec4f, featherPixels: 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;
+fn maskValue(t: f32, progress: f32, feather: f32) -> f32 {
+	let p = clamp(progress, 0.0, 1.0);
+	let f = max(feather, 0.0);
+	if (p <= 0.000001) { return 0.0; }
+	if (p >= 0.999999) { return 1.0; }
+	if (f <= 0.0001) { return step(t, p); }
+	return 1.0 - smoothstep(p, min(p + f, 1.0), t);
+}
+@fragment fn fragment(input: VertexOutput) -> @location(0) vec4f {
+	let color = textureSampleLevel(source, sourceSampler, input.uv, 0);
+	let progress = params.controls.x;
+	let direction = params.controls.z;
+	let usePixelFeather = params.controls.w != 0.0;
+	var t = input.uv.x;
+	if (direction == 1.0) { t = 1.0 - input.uv.x; }
+	if (direction == 2.0) { t = input.uv.y; }
+	if (direction == 3.0) { t = 1.0 - input.uv.y; }
+	var mask: f32;
+	if (direction == 4.0 || usePixelFeather) {
+		let extent = params.resolutionTravel.xy * params.resolutionTravel.zw;
+		let low = min(0.0, extent.x) + min(0.0, extent.y);
+		let high = max(0.0, extent.x) + max(0.0, extent.y);
+		let position = input.uv * params.resolutionTravel.xy;
+		let projection = dot(position, params.resolutionTravel.zw);
+		if (usePixelFeather) {
+			let feather = params.featherPixels.x;
+			let edge = mix(low - feather, high + feather, progress);
+			mask = step(projection, edge);
+			if (feather > 0.0) { mask = clamp((edge - projection) / feather + 0.5, 0.0, 1.0); }
+			if (progress <= 0.0) { mask = 0.0; }
+			if (progress >= 1.0) { mask = 1.0; }
+		} else {
+			t = (projection - low) / (high - low);
+			mask = maskValue(t, progress, params.controls.y);
+		}
+	} else { mask = maskValue(t, progress, params.controls.y); }
+	return color * mask;
+}
+`;
 var evolve = createEffect({
   type: "dev.remotion.effects.evolve",
   label: "evolve()",
   documentationLink: "https://www.remotion.dev/docs/effects/evolve",
-  backend: "webgl2",
   calculateKey: (params) => {
     const r = resolve(params);
-    return `evolve-${r.progress}-${r.direction}-${r.feather}`;
+    return `evolve-${r.progress}-${r.direction}-${r.feather}-${r.angle}-${r.featherUnit}-${r.featherPixels}`;
   },
-  setup: (target) => setupEvolve(target),
-  apply: ({ source, width, height, params, state, flipSourceY }) => {
-    const r = 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.uProgress)
-      gl.uniform1f(uniforms.uProgress, r.progress);
-    if (uniforms.uFeather)
-      gl.uniform1f(uniforms.uFeather, r.feather);
-    if (uniforms.uDirection)
-      gl.uniform1i(uniforms.uDirection, directionToInt(r.direction));
-    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, "evolve"),
+      apply: ({ source, width, height, params, state, gpuDevice }) => {
+        if (!gpuDevice) {
+          throw new Error("A WebGPU device is required for the evolve effect");
+        }
+        const r = resolve(params);
+        const radians = r.angle % 360 * Math.PI / 180;
+        const travelDirection = r.direction === "angle" ? [Math.sin(radians), -Math.cos(radians)] : DIRECTION_VECTORS[r.direction];
+        applyWebGpuSinglePass({
+          source,
+          width,
+          height,
+          state,
+          device: gpuDevice,
+          shader: WEBGPU_SHADER,
+          uniformData: new Float32Array([
+            width,
+            height,
+            travelDirection[0],
+            travelDirection[1],
+            r.progress,
+            r.feather,
+            directionToInt(r.direction),
+            r.featherUnit === "pixels" ? 1 : 0,
+            r.featherPixels,
+            0,
+            0,
+            0
+          ])
+        });
+      },
+      cleanup: cleanupWebGpuSinglePass
+    }),
+    webgl2: Internals.createEffectImplementation({
+      setup: (target) => setupEvolve(target),
+      apply: ({ source, width, height, params, state, flipSourceY }) => {
+        const r = 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.uProgress)
+          gl.uniform1f(uniforms.uProgress, r.progress);
+        if (uniforms.uFeather)
+          gl.uniform1f(uniforms.uFeather, r.feather);
+        if (uniforms.uDirection)
+          gl.uniform1i(uniforms.uDirection, directionToInt(r.direction));
+        gl.uniform2f(uniforms.uResolution, width, height);
+        const radians = r.angle % 360 * Math.PI / 180;
+        const travelDirection = r.direction === "angle" ? [Math.sin(radians), -Math.cos(radians)] : DIRECTION_VECTORS[r.direction];
+        gl.uniform2f(uniforms.uTravelDirection, travelDirection[0], travelDirection[1]);
+        gl.uniform1i(uniforms.uUsePixelFeather, r.featherUnit === "pixels" ? 1 : 0);
+        gl.uniform1f(uniforms.uFeatherPixels, r.featherPixels);
+        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: evolveSchema,
   validateParams: validateEvolveParams