@remotion/effects 4.0.540 → 4.0.542

package/dist/esm/preview/long-shadows.mjs

@@ -0,0 +1,437 @@
+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/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;
+var DEFAULT_LENGTH = 240;
+var DEFAULT_ANGLE = 45;
+var DEFAULT_COLOR = "#777777";
+var DEFAULT_OPACITY = 1;
+var longShadowsSchema = {
+  length: {
+    type: "number",
+    min: 0,
+    max: 1000,
+    step: 1,
+    default: DEFAULT_LENGTH,
+    description: "Length",
+    hiddenFromList: false
+  },
+  angle: {
+    type: "rotation-degrees",
+    step: 1,
+    default: DEFAULT_ANGLE,
+    description: "Angle"
+  },
+  color: {
+    type: "color",
+    default: DEFAULT_COLOR,
+    description: "Color"
+  },
+  opacity: {
+    type: "number",
+    min: 0,
+    max: 1,
+    step: 0.01,
+    default: DEFAULT_OPACITY,
+    description: "Opacity",
+    hiddenFromList: false
+  }
+};
+var resolve = (params) => ({
+  length: params.length ?? DEFAULT_LENGTH,
+  angle: params.angle ?? DEFAULT_ANGLE,
+  color: params.color ?? DEFAULT_COLOR,
+  opacity: params.opacity ?? DEFAULT_OPACITY
+});
+var validateLongShadowsParams = (params) => {
+  assertEffectParamsObject(params, "Long shadows");
+  assertOptionalFiniteNumber(params.length, "length");
+  assertOptionalFiniteNumber(params.angle, "angle");
+  assertOptionalFiniteNumber(params.opacity, "opacity");
+  assertOptionalColor(params.color, "color");
+  const resolved = resolve(params);
+  validateNonNegative(resolved.length, "length");
+  validateUnitInterval(resolved.opacity, "opacity");
+};
+var VERTEX_SHADER = `#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 EXTEND_SHADER = `#version 300 es
+precision highp float;
+in vec2 vUv;
+out vec4 fragColor;
+uniform sampler2D uSource;
+uniform vec2 uOffset;
+
+float alphaAt(ivec2 pixel) {
+	ivec2 size = textureSize(uSource, 0);
+	if (any(lessThan(pixel, ivec2(0))) || any(greaterThanEqual(pixel, size))) {
+		return 0.0;
+	}
+	return texelFetch(uSource, pixel, 0).a;
+}
+
+void main() {
+	// Interpolate with transparent pixels outside the canvas instead of
+	// clamping the border, which would stretch edge pixels into the shadow.
+	vec2 pixel = (vUv - uOffset) * vec2(textureSize(uSource, 0)) - 0.5;
+	ivec2 base = ivec2(floor(pixel));
+	vec2 fraction = fract(pixel);
+	float shifted = mix(
+		mix(alphaAt(base), alphaAt(base + ivec2(1, 0)), fraction.x),
+		mix(alphaAt(base + ivec2(0, 1)), alphaAt(base + ivec2(1, 1)), fraction.x),
+		fraction.y
+	);
+	fragColor = vec4(0.0, 0.0, 0.0, max(texture(uSource, vUv).a, shifted));
+}
+`;
+var COMPOSITE_SHADER = `#version 300 es
+precision highp float;
+in vec2 vUv;
+out vec4 fragColor;
+uniform sampler2D uSource;
+uniform sampler2D uShadow;
+uniform vec4 uColor;
+
+void main() {
+	vec4 source = texture(uSource, vUv);
+	float alpha = texture(uShadow, vUv).a * uColor.a;
+	fragColor = source + vec4(uColor.rgb * alpha, alpha) * (1.0 - source.a);
+}
+`;
+var createProgram = (gl, fragmentSource) => {
+  const program = gl.createProgram();
+  if (!program) {
+    throw new Error("Failed to create long shadows program");
+  }
+  for (const [type, source] of [
+    [gl.VERTEX_SHADER, VERTEX_SHADER],
+    [gl.FRAGMENT_SHADER, fragmentSource]
+  ]) {
+    const shader = gl.createShader(type);
+    if (!shader) {
+      gl.deleteProgram(program);
+      throw new Error("Failed to create long shadows shader");
+    }
+    gl.shaderSource(shader, source);
+    gl.compileShader(shader);
+    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+      const log = gl.getShaderInfoLog(shader);
+      gl.deleteShader(shader);
+      gl.deleteProgram(program);
+      throw new Error(`Long shadows shader compile failed: ${log ?? "(no log)"}`);
+    }
+    gl.attachShader(program, shader);
+    gl.deleteShader(shader);
+  }
+  gl.linkProgram(program);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    const log = gl.getProgramInfoLog(program);
+    gl.deleteProgram(program);
+    throw new Error(`Long shadows program link failed: ${log ?? "(no log)"}`);
+  }
+  return program;
+};
+var longShadows = createEffect({
+  type: "remotion/long-shadows",
+  label: "longShadows()",
+  documentationLink: "https://www.remotion.dev/docs/effects/long-shadows",
+  calculateKey: (params) => {
+    const { length, angle, color, opacity } = resolve(params);
+    return `long-shadows-${length}-${angle}-${color}-${opacity}`;
+  },
+  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);
+        }
+      }
+    })
+  },
+  schema: longShadowsSchema,
+  validateParams: validateLongShadowsParams
+});
+export {
+  longShadows
+};