@remotion/effects 4.0.540 → 4.0.542

package/dist/esm/preview/index-s9mrx750.mjs

@@ -0,0 +1,97 @@
+import {
+  setupSinglePass,
+  prepareSinglePassSource,
+  drawSinglePass,
+  cleanupSinglePass
+} from "./index-8p04sssx.mjs";
+import {
+  WEBGPU_SINGLE_PASS_VERTEX,
+  setupWebGpuSinglePass,
+  cleanupWebGpuSinglePass,
+  applyWebGpuSinglePass
+} from "./index-tvfexb7s.mjs";
+
+// src/rect-transform-runtime.ts
+import { Internals } from "remotion";
+var WEBGL_SHADER = `#version 300 es
+precision highp float;
+in vec2 vUv;
+out vec4 fragColor;
+uniform sampler2D uSource;
+uniform vec2 uResolution;
+uniform vec4 uRect;
+void main() {
+	vec2 p = vec2(gl_FragCoord.x, uResolution.y - gl_FragCoord.y);
+	vec2 coverage = clamp(min(p + 0.5, uRect.xy + uRect.zw) - max(p - 0.5, uRect.xy), 0.0, 1.0);
+	vec2 uv = (p - uRect.xy) / uRect.zw;
+	if (any(lessThanEqual(uv, vec2(0.0))) || any(greaterThan(uv, vec2(1.0)))) { fragColor = vec4(0.0); return; }
+	fragColor = texture(uSource, vec2(uv.x, 1.0 - uv.y)) * min(coverage.x, coverage.y);
+}
+`;
+var WEBGPU_SHADER = `
+${WEBGPU_SINGLE_PASS_VERTEX}
+struct Params {
+	resolution: vec2f,
+	padding: vec2f,
+	rect: 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 p = input.position.xy;
+	let coverage = clamp(min(p + vec2f(0.5), params.rect.xy + params.rect.zw) - max(p - vec2f(0.5), params.rect.xy), vec2f(0), vec2f(1));
+	let uv = (p - params.rect.xy) / params.rect.zw;
+	if (any(uv <= vec2f(0)) || any(uv > vec2f(1))) { return vec4f(0); }
+	return textureSampleLevel(source, sourceSampler, uv, 0) * min(coverage.x, coverage.y);
+}
+`;
+var createRectTransformImplementations = (label, getRect) => ({
+  webgl2: Internals.createEffectImplementation({
+    setup: (target) => setupSinglePass(target, WEBGL_SHADER, label, ["uResolution", "uRect"]),
+    apply: ({ source, width, height, params, state, flipSourceY }) => {
+      const rect = getRect(params, width, height);
+      prepareSinglePassSource({
+        state,
+        source,
+        width,
+        height,
+        flipSourceY
+      });
+      state.gl.uniform2f(state.uniforms.uResolution, width, height);
+      state.gl.uniform4f(state.uniforms.uRect, rect.x, rect.y, rect.width, rect.height);
+      drawSinglePass(state);
+    },
+    cleanup: cleanupSinglePass
+  }),
+  webgpu: Internals.createEffectImplementation({
+    setup: (target) => setupWebGpuSinglePass(target, label),
+    apply: ({ source, width, height, params, state, gpuDevice }) => {
+      if (!gpuDevice) {
+        throw new Error(`A WebGPU device is required for the ${label} effect`);
+      }
+      const rect = getRect(params, width, height);
+      applyWebGpuSinglePass({
+        state,
+        source,
+        width,
+        height,
+        device: gpuDevice,
+        shader: WEBGPU_SHADER,
+        uniformData: new Float32Array([
+          width,
+          height,
+          0,
+          0,
+          rect.x,
+          rect.y,
+          rect.width,
+          rect.height
+        ])
+      });
+    },
+    cleanup: cleanupWebGpuSinglePass
+  })
+});
+
+export { createRectTransformImplementations };

package/dist/esm/preview/index-tvfexb7s.mjs

@@ -0,0 +1,164 @@
+// src/webgpu-single-pass-runtime.ts
+var WEBGPU_SINGLE_PASS_VERTEX = `
+struct VertexOutput {
+	@builtin(position) position: vec4f,
+	@location(0) uv: vec2f,
+}
+
+@vertex fn vertex(@builtin(vertex_index) index: u32) -> VertexOutput {
+	let positions = array<vec2f, 3>(vec2f(-1, -1), vec2f(3, -1), vec2f(-1, 3));
+	let position = positions[index];
+	var output: VertexOutput;
+	output.position = vec4f(position, 0, 1);
+	output.uv = vec2f(position.x * 0.5 + 0.5, 0.5 - position.y * 0.5);
+	return output;
+}
+`;
+var setupWebGpuSinglePass = (target, label) => {
+  const context = target.getContext("webgpu");
+  if (!context) {
+    throw new Error(`WebGPU is not available for the ${label} effect`);
+  }
+  return { context, label, resources: null };
+};
+var cleanupWebGpuSinglePass = (state) => {
+  state.resources?.source?.texture.destroy();
+  state.resources?.uniforms.destroy();
+  state.resources?.auxiliary?.texture.destroy();
+  state.resources = null;
+  state.context.unconfigure();
+};
+var applyWebGpuSinglePass = ({
+  state,
+  source,
+  device,
+  shader,
+  uniformData
+}, options = null) => {
+  const sourceFilter = options?.sourceFilter ?? "linear";
+  const auxiliaryTexture = options?.auxiliaryTexture ?? null;
+  const width = "displayWidth" in source ? source.displayWidth : ("videoWidth" in source) ? source.videoWidth : ("naturalWidth" in source) ? source.naturalWidth : typeof source.width === "number" ? source.width : source.width.baseVal.value;
+  const height = "displayHeight" in source ? source.displayHeight : ("videoHeight" in source) ? source.videoHeight : ("naturalHeight" in source) ? source.naturalHeight : typeof source.height === "number" ? source.height : source.height.baseVal.value;
+  const uniformBufferSize = Math.max(16, Math.ceil(uniformData.byteLength / 16) * 16);
+  if (state.resources && (state.resources.device !== device || state.resources.shader !== shader || state.resources.uniformBufferSize !== uniformBufferSize || state.resources.sourceFilter !== sourceFilter || (state.resources.auxiliary?.width ?? null) !== (auxiliaryTexture?.width ?? null) || (state.resources.auxiliary?.height ?? null) !== (auxiliaryTexture?.height ?? null) || (state.resources.auxiliary?.format ?? null) !== (auxiliaryTexture?.format ?? null))) {
+    cleanupWebGpuSinglePass(state);
+  }
+  if (!state.resources) {
+    const format = navigator.gpu.getPreferredCanvasFormat();
+    state.context.configure({ device, format, alphaMode: "premultiplied" });
+    const module = device.createShaderModule({
+      code: shader,
+      label: state.label
+    });
+    const bindGroupLayout = device.createBindGroupLayout({
+      entries: [
+        ...auxiliaryTexture ? [
+          {
+            binding: 3,
+            visibility: GPUShaderStage.FRAGMENT,
+            texture: {
+              sampleType: auxiliaryTexture.format === "rgba32float" ? "unfilterable-float" : "float"
+            }
+          }
+        ] : [],
+        { binding: 0, visibility: GPUShaderStage.FRAGMENT, texture: {} },
+        { binding: 1, visibility: GPUShaderStage.FRAGMENT, sampler: {} },
+        {
+          binding: 2,
+          visibility: GPUShaderStage.FRAGMENT,
+          buffer: { type: "uniform" }
+        }
+      ]
+    });
+    const pipeline = device.createRenderPipeline({
+      label: state.label,
+      layout: device.createPipelineLayout({
+        bindGroupLayouts: [bindGroupLayout]
+      }),
+      vertex: { module, entryPoint: "vertex" },
+      fragment: { module, entryPoint: "fragment", targets: [{ format }] },
+      primitive: { topology: "triangle-list" }
+    });
+    const uniforms = device.createBuffer({
+      size: uniformBufferSize,
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+    });
+    const sampler = device.createSampler({
+      addressModeU: "clamp-to-edge",
+      addressModeV: "clamp-to-edge",
+      magFilter: sourceFilter,
+      minFilter: sourceFilter
+    });
+    const auxiliary = auxiliaryTexture ? {
+      texture: device.createTexture({
+        size: [auxiliaryTexture.width, auxiliaryTexture.height],
+        format: auxiliaryTexture.format,
+        usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST
+      }),
+      width: auxiliaryTexture.width,
+      height: auxiliaryTexture.height,
+      format: auxiliaryTexture.format,
+      uploadedData: null
+    } : null;
+    state.resources = {
+      device,
+      shader,
+      uniformBufferSize,
+      sourceFilter,
+      auxiliary,
+      pipeline,
+      uniforms,
+      sampler,
+      bindGroupLayout,
+      source: null
+    };
+  }
+  const { resources } = state;
+  if (resources.source && (resources.source.width !== width || resources.source.height !== height)) {
+    resources.source.texture.destroy();
+    resources.source = null;
+  }
+  if (!resources.source) {
+    const texture = device.createTexture({
+      size: [width, height],
+      format: "rgba8unorm",
+      usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT
+    });
+    const bindGroup = device.createBindGroup({
+      layout: resources.bindGroupLayout,
+      entries: [
+        ...resources.auxiliary ? [{ binding: 3, resource: resources.auxiliary.texture.createView() }] : [],
+        { binding: 0, resource: texture.createView() },
+        { binding: 1, resource: resources.sampler },
+        { binding: 2, resource: { buffer: resources.uniforms } }
+      ]
+    });
+    resources.source = { texture, bindGroup, width, height };
+  }
+  if (auxiliaryTexture && resources.auxiliary && resources.auxiliary.uploadedData !== auxiliaryTexture.data) {
+    device.queue.writeTexture({ texture: resources.auxiliary.texture }, auxiliaryTexture.data, {
+      bytesPerRow: auxiliaryTexture.width * 4 * auxiliaryTexture.data.BYTES_PER_ELEMENT
+    }, [auxiliaryTexture.width, auxiliaryTexture.height]);
+    resources.auxiliary.uploadedData = auxiliaryTexture.data;
+  }
+  device.queue.copyExternalImageToTexture({ source }, { texture: resources.source.texture, premultipliedAlpha: true }, [width, height]);
+  device.queue.writeBuffer(resources.uniforms, 0, uniformData);
+  const encoder = device.createCommandEncoder();
+  const pass = encoder.beginRenderPass({
+    colorAttachments: [
+      {
+        view: state.context.getCurrentTexture().createView(),
+        clearValue: { r: 0, g: 0, b: 0, a: 0 },
+        loadOp: "clear",
+        storeOp: "store"
+      }
+    ]
+  });
+  pass.setPipeline(resources.pipeline);
+  pass.setBindGroup(0, resources.source.bindGroup);
+  pass.draw(3);
+  pass.end();
+  device.queue.submit([encoder.finish()]);
+};
+
+export { WEBGPU_SINGLE_PASS_VERTEX, setupWebGpuSinglePass, cleanupWebGpuSinglePass, applyWebGpuSinglePass };

package/dist/esm/preview/index-vp56k1gj.mjs

@@ -0,0 +1,215 @@
+// src/webgl-projection-runtime.ts
+import { Internals } from "remotion";
+var setupWebGlProjection = (target, shader) => {
+  const gl = target.getContext("webgl2");
+  if (!gl)
+    throw Internals.createWebGL2ContextError("projection effect");
+  const program = gl.createProgram();
+  const shaders = [];
+  try {
+    for (const [type, code] of [
+      [
+        gl.VERTEX_SHADER,
+        `#version 300 es
+void main() {
+ vec2 positions[3] = vec2[3](vec2(-1, -1), vec2(3, -1), vec2(-1, 3));
+ gl_Position = vec4(positions[gl_VertexID], 0, 1);
+}`
+      ],
+      [gl.FRAGMENT_SHADER, shader]
+    ]) {
+      const compiled = gl.createShader(type);
+      shaders.push(compiled);
+      gl.shaderSource(compiled, code);
+      gl.compileShader(compiled);
+      if (!gl.getShaderParameter(compiled, gl.COMPILE_STATUS))
+        throw new Error(gl.getShaderInfoLog(compiled) ?? "Projection shader compilation failed");
+      gl.attachShader(program, compiled);
+    }
+    gl.linkProgram(program);
+    if (!gl.getProgramParameter(program, gl.LINK_STATUS))
+      throw new Error(gl.getProgramInfoLog(program) ?? "Projection program linking failed");
+  } catch (err) {
+    gl.deleteProgram(program);
+    throw err;
+  } finally {
+    for (const compiled of shaders)
+      gl.deleteShader(compiled);
+  }
+  const texture = gl.createTexture();
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+  return {
+    gl,
+    program,
+    texture,
+    vao: gl.createVertexArray(),
+    uniforms: gl.getUniformLocation(program, "uParams"),
+    source: gl.getUniformLocation(program, "uSource")
+  };
+};
+var applyWebGlProjection = ({
+  state,
+  source,
+  width,
+  height,
+  flipSourceY,
+  uniformData
+}) => {
+  const { gl } = state;
+  gl.viewport(0, 0, width, height);
+  gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+  gl.disable(gl.BLEND);
+  gl.disable(gl.DEPTH_TEST);
+  gl.disable(gl.SCISSOR_TEST);
+  gl.useProgram(state.program);
+  gl.bindVertexArray(state.vao);
+  gl.activeTexture(gl.TEXTURE0);
+  gl.bindTexture(gl.TEXTURE_2D, state.texture);
+  gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
+  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipSourceY);
+  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
+  gl.uniform1i(state.source, 0);
+  gl.uniform4fv(state.uniforms, uniformData);
+  gl.drawArrays(gl.TRIANGLES, 0, 3);
+};
+var cleanupWebGlProjection = ({
+  gl,
+  program,
+  texture,
+  vao
+}) => {
+  gl.deleteTexture(texture);
+  gl.deleteProgram(program);
+  gl.deleteVertexArray(vao);
+};
+
+// src/webgpu-projection-runtime.ts
+var deviceResources = new WeakMap;
+var lostDevices = new WeakSet;
+var cleanupWebGpuProjection = (state) => {
+  state.resources?.source?.texture.destroy();
+  state.resources?.uniforms.destroy();
+  state.resources = null;
+  state.context.unconfigure();
+};
+var setupWebGpuProjection = (target, label) => {
+  const context = target.getContext("webgpu");
+  if (!context) {
+    throw new Error(`WebGPU is not available for the ${label} effect`);
+  }
+  return { context, resources: null };
+};
+var applyWebGpuProjection = ({
+  state,
+  source,
+  device,
+  shader,
+  uniformData
+}) => {
+  if (lostDevices.has(device)) {
+    throw new Error("Cannot apply a WebGPU projection with a lost device");
+  }
+  const width = "displayWidth" in source ? source.displayWidth : ("videoWidth" in source) ? source.videoWidth : ("naturalWidth" in source) ? source.naturalWidth : typeof source.width === "number" ? source.width : source.width.baseVal.value;
+  const height = "displayHeight" in source ? source.displayHeight : ("videoHeight" in source) ? source.videoHeight : ("naturalHeight" in source) ? source.naturalHeight : typeof source.height === "number" ? source.height : source.height.baseVal.value;
+  const format = navigator.gpu.getPreferredCanvasFormat();
+  if (state.resources && (state.resources.device !== device || state.resources.shader !== shader || state.resources.format !== format || state.resources.uniforms.size !== uniformData.byteLength)) {
+    cleanupWebGpuProjection(state);
+  }
+  if (!state.resources) {
+    let shared = deviceResources.get(device);
+    if (!shared) {
+      const pipelines = new Map;
+      shared = {
+        pipelines,
+        sampler: device.createSampler({
+          addressModeU: "repeat",
+          magFilter: "linear",
+          minFilter: "linear"
+        })
+      };
+      deviceResources.set(device, shared);
+      device.lost.then(() => {
+        lostDevices.add(device);
+        pipelines.clear();
+        deviceResources.delete(device);
+      });
+    }
+    let pipelinesByFormat = shared.pipelines.get(shader);
+    if (!pipelinesByFormat) {
+      pipelinesByFormat = new Map;
+      shared.pipelines.set(shader, pipelinesByFormat);
+    }
+    let pipeline = pipelinesByFormat.get(format);
+    if (!pipeline) {
+      const module = device.createShaderModule({ code: shader });
+      pipeline = device.createRenderPipeline({
+        layout: "auto",
+        vertex: { module, entryPoint: "vertex" },
+        fragment: { module, entryPoint: "fragment", targets: [{ format }] },
+        primitive: { topology: "triangle-list" }
+      });
+      pipelinesByFormat.set(format, pipeline);
+    }
+    state.context.configure({ device, format, alphaMode: "premultiplied" });
+    const uniforms = device.createBuffer({
+      size: uniformData.byteLength,
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+    });
+    state.resources = {
+      device,
+      shader,
+      format,
+      pipeline,
+      uniforms,
+      sampler: shared.sampler,
+      source: null
+    };
+  }
+  const { resources } = state;
+  if (!resources.source || resources.source.width !== width || resources.source.height !== height) {
+    const texture = device.createTexture({
+      size: [width, height],
+      format: "rgba8unorm",
+      usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT
+    });
+    try {
+      const bindGroup = device.createBindGroup({
+        layout: resources.pipeline.getBindGroupLayout(0),
+        entries: [
+          { binding: 0, resource: texture.createView() },
+          { binding: 1, resource: resources.sampler },
+          { binding: 2, resource: { buffer: resources.uniforms } }
+        ]
+      });
+      resources.source?.texture.destroy();
+      resources.source = { texture, bindGroup, width, height };
+    } catch (err) {
+      texture.destroy();
+      throw err;
+    }
+  }
+  device.queue.copyExternalImageToTexture({ source }, { texture: resources.source.texture, premultipliedAlpha: true }, [width, height]);
+  device.queue.writeBuffer(resources.uniforms, 0, uniformData);
+  const encoder = device.createCommandEncoder();
+  const pass = encoder.beginRenderPass({
+    colorAttachments: [
+      {
+        view: state.context.getCurrentTexture().createView(),
+        clearValue: { r: 0, g: 0, b: 0, a: 0 },
+        loadOp: "clear",
+        storeOp: "store"
+      }
+    ]
+  });
+  pass.setPipeline(resources.pipeline);
+  pass.setBindGroup(0, resources.source.bindGroup);
+  pass.draw(3);
+  pass.end();
+  device.queue.submit([encoder.finish()]);
+};
+
+export { setupWebGlProjection, applyWebGlProjection, cleanupWebGlProjection, cleanupWebGpuProjection, setupWebGpuProjection, applyWebGpuProjection };

package/dist/esm/preview/index-wxhvgv2s.mjs

@@ -0,0 +1,79 @@
+import {
+  assertRequiredFiniteNumber
+} from "./index-4fvp93ps.mjs";
+
+// 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]];
+};
+
+export { DEFAULT_AMOUNT, DEFAULT_BRIGHTNESS_AMOUNT, DEFAULT_HUE_DEGREES, colorAmountSchema, colorMultiplierSchema, brightnessAmountSchema, hueDegreesSchema, assertOptionalFiniteNumber, validateUnitInterval, validateNonNegative, validateSignedUnitInterval, clampColorChannel, parseColorRgba };