@remotion/effects 4.0.539 → 4.0.540

package/dist/esm/long-shadows.mjs

@@ -1,110 +1,47 @@
+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/long-shadows.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/long-shadows-webgpu-shaders.ts
+var LONG_SHADOWS_EXTEND_WEBGPU_SHADER = `
+${WEBGPU_MULTIPASS_BINDINGS}
+struct Params {offset: vec4f,}
+fn alphaAt(pixel: vec2i) -> f32 {
+ let size=vec2i(textureDimensions(source));
+ if (any(pixel<vec2i(0)) || any(pixel>=size)) {return 0.0;}
+ return textureLoad(source,pixel,0).a;
+}
+@fragment fn fragment(input: VertexOutput) -> @location(0) vec4f {
+ let pixel=(input.uv-params.offset.xy)*vec2f(textureDimensions(source))-0.5;
+ let base=vec2i(floor(pixel));let fraction=fract(pixel);
+ let shifted=mix(mix(alphaAt(base),alphaAt(base+vec2i(1,0)),fraction.x),mix(alphaAt(base+vec2i(0,1)),alphaAt(base+vec2i(1,1)),fraction.x),fraction.y);
+ return vec4f(0,0,0,max(textureSampleLevel(source,sourceSampler,input.uv,0).a,shifted));
+}
+`;
+var LONG_SHADOWS_COMPOSITE_WEBGPU_SHADER = `
+${WEBGPU_MULTIPASS_BINDINGS}
+struct Params {color: vec4f,}
+@fragment fn fragment(input: VertexOutput) -> @location(0) vec4f {
+ let color=textureSampleLevel(source,sourceSampler,input.uv,0);
+ let alpha=textureSampleLevel(secondary,sourceSampler,input.uv,0).a*params.color.a;
+ return color+vec4f(params.color.rgb*alpha,alpha)*(1.0-color.a);
+}`;
 
 // src/long-shadows.ts
 var { createEffect, createWebGL2ContextError } = Internals;
@@ -249,158 +186,248 @@ var longShadows = createEffect({
   type: "remotion/long-shadows",
   label: "longShadows()",
   documentationLink: "https://www.remotion.dev/docs/effects/long-shadows",
-  backend: "webgl2",
   calculateKey: (params) => {
     const { length, angle, color, opacity } = resolve(params);
     return `long-shadows-${length}-${angle}-${color}-${opacity}`;
   },
-  setup: (target) => {
-    const gl = target.getContext("webgl2", {
-      premultipliedAlpha: true,
-      alpha: true,
-      preserveDrawingBuffer: true
-    });
-    if (!gl) {
-      throw createWebGL2ContextError("long shadows effect");
-    }
-    gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
-    const extendProgram = createProgram(gl, EXTEND_SHADER);
-    const compositeProgram = createProgram(gl, COMPOSITE_SHADER);
-    const vao = gl.createVertexArray();
-    const vbo = gl.createBuffer();
-    const framebuffer = gl.createFramebuffer();
-    if (!vao || !vbo || !framebuffer) {
-      throw new Error("Failed to create long shadows buffers");
-    }
-    gl.bindVertexArray(vao);
-    gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
-    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 0, 0, 1, -1, 1, 0, -1, 1, 0, 1, 1, 1, 1, 1]), gl.STATIC_DRAW);
-    gl.enableVertexAttribArray(0);
-    gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 16, 0);
-    gl.enableVertexAttribArray(1);
-    gl.vertexAttribPointer(1, 2, gl.FLOAT, false, 16, 8);
-    gl.bindVertexArray(null);
-    const textures = [0, 1, 2].map(() => {
-      const texture = gl.createTexture();
-      if (!texture) {
-        throw new Error("Failed to create long shadows texture");
-      }
-      gl.bindTexture(gl.TEXTURE_2D, texture);
-      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
-      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
-      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-      return texture;
-    });
-    gl.bindTexture(gl.TEXTURE_2D, null);
-    const colorCanvas = document.createElement("canvas");
-    colorCanvas.width = 1;
-    colorCanvas.height = 1;
-    const colorCtx = colorCanvas.getContext("2d", { willReadFrequently: true });
-    if (!colorCtx) {
-      throw new Error("Failed to acquire 2D context for color parsing");
-    }
-    return {
-      gl,
-      extendProgram,
-      compositeProgram,
-      vao,
-      vbo,
-      framebuffer,
-      sourceTexture: textures[0],
-      shadowTextures: [textures[1], textures[2]],
-      extendSource: gl.getUniformLocation(extendProgram, "uSource"),
-      extendOffset: gl.getUniformLocation(extendProgram, "uOffset"),
-      compositeSource: gl.getUniformLocation(compositeProgram, "uSource"),
-      compositeShadow: gl.getUniformLocation(compositeProgram, "uShadow"),
-      compositeColor: gl.getUniformLocation(compositeProgram, "uColor"),
-      colorCtx,
-      cachedColor: "",
-      cachedRgba: [0, 0, 0, 0],
-      width: 0,
-      height: 0
-    };
-  },
-  apply: ({ source, width, height, params, state, flipSourceY }) => {
-    const { length, angle, color, opacity } = resolve(params);
-    const { gl, sourceTexture, shadowTextures, framebuffer } = state;
-    if (state.cachedColor !== color) {
-      state.cachedRgba = parseColorRgba(state.colorCtx, color);
-      state.cachedColor = color;
-    }
-    gl.viewport(0, 0, width, height);
-    gl.activeTexture(gl.TEXTURE0);
-    gl.bindTexture(gl.TEXTURE_2D, sourceTexture);
-    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 texture of shadowTextures) {
-        gl.bindTexture(gl.TEXTURE_2D, texture);
-        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+  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, "long-shadows"),
+          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.color) {
+          state.cachedColor = r.color;
+          state.cachedRgba = parseColorRgba(state.colorCtx, r.color);
+        }
+        const color = state.cachedRgba.map((channel) => channel / 255);
+        const distance = r.opacity === 0 || color[3] === 0 ? 0 : Math.min(r.length, Math.hypot(width, height));
+        const steps = Math.ceil(distance);
+        const angle = r.angle % 360 * Math.PI / 180;
+        const stepLength = steps === 0 ? 0 : distance / steps;
+        const passes = [];
+        let covered = 0;
+        while (covered < steps) {
+          const extension = Math.min(covered + 1, steps - covered);
+          passes.push({
+            shader: LONG_SHADOWS_EXTEND_WEBGPU_SHADER,
+            uniforms: new Float32Array([
+              Math.cos(angle) * extension * stepLength / width,
+              Math.sin(angle) * extension * stepLength / height,
+              0,
+              0
+            ]),
+            source: passes.length - 1,
+            secondary: -1
+          });
+          covered += extension;
+        }
+        passes.push({
+          shader: LONG_SHADOWS_COMPOSITE_WEBGPU_SHADER,
+          uniforms: new Float32Array([
+            color[0],
+            color[1],
+            color[2],
+            r.length === 0 ? 0 : color[3] * r.opacity
+          ]),
+          source: -1,
+          secondary: passes.length - 1
+        });
+        applyWebGpuMultipass({
+          auxiliarySource: null,
+          state,
+          source,
+          width,
+          height,
+          device: gpuDevice,
+          passes
+        });
+      },
+      cleanup: cleanupWebGpuMultipass
+    }),
+    webgl2: Internals.createEffectImplementation({
+      setup: (target) => {
+        const gl = target.getContext("webgl2", {
+          premultipliedAlpha: true,
+          alpha: true,
+          preserveDrawingBuffer: true
+        });
+        if (!gl) {
+          throw createWebGL2ContextError("long shadows effect");
+        }
+        gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
+        const extendProgram = createProgram(gl, EXTEND_SHADER);
+        const compositeProgram = createProgram(gl, COMPOSITE_SHADER);
+        const vao = gl.createVertexArray();
+        const vbo = gl.createBuffer();
+        const framebuffer = gl.createFramebuffer();
+        if (!vao || !vbo || !framebuffer) {
+          throw new Error("Failed to create long shadows buffers");
+        }
+        gl.bindVertexArray(vao);
+        gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
+        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
+          -1,
+          -1,
+          0,
+          0,
+          1,
+          -1,
+          1,
+          0,
+          -1,
+          1,
+          0,
+          1,
+          1,
+          1,
+          1,
+          1
+        ]), gl.STATIC_DRAW);
+        gl.enableVertexAttribArray(0);
+        gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 16, 0);
+        gl.enableVertexAttribArray(1);
+        gl.vertexAttribPointer(1, 2, gl.FLOAT, false, 16, 8);
+        gl.bindVertexArray(null);
+        const textures = [0, 1, 2].map(() => {
+          const texture = gl.createTexture();
+          if (!texture) {
+            throw new Error("Failed to create long shadows texture");
+          }
+          gl.bindTexture(gl.TEXTURE_2D, texture);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+          return texture;
+        });
+        gl.bindTexture(gl.TEXTURE_2D, null);
+        const colorCanvas = document.createElement("canvas");
+        colorCanvas.width = 1;
+        colorCanvas.height = 1;
+        const colorCtx = colorCanvas.getContext("2d", {
+          willReadFrequently: true
+        });
+        if (!colorCtx) {
+          throw new Error("Failed to acquire 2D context for color parsing");
+        }
+        return {
+          gl,
+          extendProgram,
+          compositeProgram,
+          vao,
+          vbo,
+          framebuffer,
+          sourceTexture: textures[0],
+          shadowTextures: [textures[1], textures[2]],
+          extendSource: gl.getUniformLocation(extendProgram, "uSource"),
+          extendOffset: gl.getUniformLocation(extendProgram, "uOffset"),
+          compositeSource: gl.getUniformLocation(compositeProgram, "uSource"),
+          compositeShadow: gl.getUniformLocation(compositeProgram, "uShadow"),
+          compositeColor: gl.getUniformLocation(compositeProgram, "uColor"),
+          colorCtx,
+          cachedColor: "",
+          cachedRgba: [0, 0, 0, 0],
+          width: 0,
+          height: 0
+        };
+      },
+      apply: ({ source, width, height, params, state, flipSourceY }) => {
+        const { length, angle, color, opacity } = resolve(params);
+        const { gl, sourceTexture, shadowTextures, framebuffer } = state;
+        if (state.cachedColor !== color) {
+          state.cachedRgba = parseColorRgba(state.colorCtx, color);
+          state.cachedColor = color;
+        }
+        gl.viewport(0, 0, width, height);
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, sourceTexture);
+        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 texture of shadowTextures) {
+            gl.bindTexture(gl.TEXTURE_2D, texture);
+            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(state.vao);
+        gl.useProgram(state.extendProgram);
+        gl.uniform1i(state.extendSource, 0);
+        const distance = opacity === 0 || state.cachedRgba[3] === 0 ? 0 : Math.min(length, Math.hypot(width, height));
+        const steps = Math.ceil(distance);
+        const radians = angle % 360 * Math.PI / 180;
+        const stepLength = steps === 0 ? 0 : distance / steps;
+        let shadow = sourceTexture;
+        let covered = 0;
+        let pass = 0;
+        while (covered < steps) {
+          const extension = Math.min(covered + 1, steps - covered);
+          const output = shadowTextures[pass % 2];
+          gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
+          gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, output, 0);
+          if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) !== gl.FRAMEBUFFER_COMPLETE) {
+            throw new Error("Long shadows framebuffer incomplete");
+          }
+          gl.bindTexture(gl.TEXTURE_2D, shadow);
+          gl.uniform2f(state.extendOffset, Math.cos(radians) * extension * stepLength / width, -Math.sin(radians) * extension * stepLength / height);
+          gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+          shadow = output;
+          covered += extension;
+          pass++;
+        }
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        gl.useProgram(state.compositeProgram);
+        gl.bindTexture(gl.TEXTURE_2D, sourceTexture);
+        gl.activeTexture(gl.TEXTURE1);
+        gl.bindTexture(gl.TEXTURE_2D, shadow);
+        gl.uniform1i(state.compositeSource, 0);
+        gl.uniform1i(state.compositeShadow, 1);
+        const [r, g, b, a] = state.cachedRgba;
+        gl.uniform4f(state.compositeColor, r / 255, g / 255, b / 255, length === 0 ? 0 : a / 255 * opacity);
+        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: ({
+        gl,
+        extendProgram,
+        compositeProgram,
+        vao,
+        vbo,
+        framebuffer,
+        sourceTexture,
+        shadowTextures
+      }) => {
+        gl.deleteProgram(extendProgram);
+        gl.deleteProgram(compositeProgram);
+        gl.deleteVertexArray(vao);
+        gl.deleteBuffer(vbo);
+        gl.deleteFramebuffer(framebuffer);
+        gl.deleteTexture(sourceTexture);
+        for (const texture of shadowTextures) {
+          gl.deleteTexture(texture);
+        }
       }
-      state.width = width;
-      state.height = height;
-    }
-    gl.bindVertexArray(state.vao);
-    gl.useProgram(state.extendProgram);
-    gl.uniform1i(state.extendSource, 0);
-    const distance = opacity === 0 || state.cachedRgba[3] === 0 ? 0 : Math.min(length, Math.hypot(width, height));
-    const steps = Math.ceil(distance);
-    const radians = angle % 360 * Math.PI / 180;
-    const stepLength = steps === 0 ? 0 : distance / steps;
-    let shadow = sourceTexture;
-    let covered = 0;
-    let pass = 0;
-    while (covered < steps) {
-      const extension = Math.min(covered + 1, steps - covered);
-      const output = shadowTextures[pass % 2];
-      gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
-      gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, output, 0);
-      if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) !== gl.FRAMEBUFFER_COMPLETE) {
-        throw new Error("Long shadows framebuffer incomplete");
-      }
-      gl.bindTexture(gl.TEXTURE_2D, shadow);
-      gl.uniform2f(state.extendOffset, Math.cos(radians) * extension * stepLength / width, -Math.sin(radians) * extension * stepLength / height);
-      gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
-      shadow = output;
-      covered += extension;
-      pass++;
-    }
-    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
-    gl.useProgram(state.compositeProgram);
-    gl.bindTexture(gl.TEXTURE_2D, sourceTexture);
-    gl.activeTexture(gl.TEXTURE1);
-    gl.bindTexture(gl.TEXTURE_2D, shadow);
-    gl.uniform1i(state.compositeSource, 0);
-    gl.uniform1i(state.compositeShadow, 1);
-    const [r, g, b, a] = state.cachedRgba;
-    gl.uniform4f(state.compositeColor, r / 255, g / 255, b / 255, length === 0 ? 0 : a / 255 * opacity);
-    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: ({
-    gl,
-    extendProgram,
-    compositeProgram,
-    vao,
-    vbo,
-    framebuffer,
-    sourceTexture,
-    shadowTextures
-  }) => {
-    gl.deleteProgram(extendProgram);
-    gl.deleteProgram(compositeProgram);
-    gl.deleteVertexArray(vao);
-    gl.deleteBuffer(vbo);
-    gl.deleteFramebuffer(framebuffer);
-    gl.deleteTexture(sourceTexture);
-    for (const texture of shadowTextures) {
-      gl.deleteTexture(texture);
-    }
+    })
   },
   schema: longShadowsSchema,
   validateParams: validateLongShadowsParams