@remotion/effects 4.0.541 → 4.0.543

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

@@ -0,0 +1,122 @@
+import {
+  setupSinglePass,
+  prepareSinglePassSource,
+  drawSinglePass,
+  cleanupSinglePass
+} from "./index-8p04sssx.mjs";
+import {
+  WEBGPU_SINGLE_PASS_VERTEX,
+  setupWebGpuSinglePass,
+  cleanupWebGpuSinglePass,
+  applyWebGpuSinglePass
+} from "./index-tvfexb7s.mjs";
+
+// src/color-matrix-runtime.ts
+import { Internals } from "remotion";
+var FRAGMENT_SHADER = `#version 300 es
+precision highp float;
+in vec2 vUv;
+out vec4 fragColor;
+uniform sampler2D uSource;
+uniform vec4 uRed;
+uniform vec4 uGreen;
+uniform vec4 uBlue;
+uniform vec4 uFlags;
+void main() {
+	vec4 source = texture(uSource, vUv);
+	if (uFlags.z > 0.0 || source.a == 0.0) { fragColor = source; return; }
+	vec3 rgb = source.rgb / source.a;
+	if (uFlags.x > 0.0) {
+		vec3 bytes = floor(rgb * 255.0 + 0.5);
+		bytes = uFlags.x == 1.0 ? bytes + uRed.w : (bytes - 128.0) * uRed.x + 128.0;
+		rgb = roundEven(clamp(bytes, 0.0, 255.0)) / 255.0;
+	} else {
+		vec4 color = vec4(rgb, 1.0);
+		rgb = clamp(vec3(dot(uRed, color), dot(uGreen, color), dot(uBlue, color)), 0.0, 1.0);
+	}
+	fragColor = vec4(rgb * source.a, source.a);
+}
+`;
+var WEBGPU_SHADER = `
+${WEBGPU_SINGLE_PASS_VERTEX}
+struct Params {
+	red: vec4f,
+	green: vec4f,
+	blue: vec4f,
+	flags: 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 sampled = textureSample(source, sourceSampler, input.uv);
+	if (params.flags.z > 0.0 || sampled.a == 0.0) { return sampled; }
+	var rgb = sampled.rgb / sampled.a;
+	if (params.flags.x > 0.0) {
+		var bytes = floor(rgb * 255.0 + vec3f(0.5));
+		if (params.flags.x == 1.0) {
+			bytes += vec3f(params.red.w);
+		} else {
+			bytes = (bytes - vec3f(128.0)) * params.red.x + vec3f(128.0);
+		}
+		bytes = clamp(bytes, vec3f(0.0), vec3f(255.0));
+		let lower = floor(bytes);
+		let fraction = bytes - lower;
+		let odd = lower - floor(lower * 0.5) * 2.0 == vec3f(1.0);
+		let aboveHalf = fraction > vec3f(0.5);
+		let halfway = fraction == vec3f(0.5);
+		rgb = (lower + select(vec3f(0.0), vec3f(1.0), aboveHalf | (halfway & odd))) / 255.0;
+	} else {
+		let color = vec4f(rgb, 1.0);
+		rgb = clamp(vec3f(dot(params.red, color), dot(params.green, color), dot(params.blue, color)), vec3f(0.0), vec3f(1.0));
+	}
+	return vec4f(rgb * sampled.a, sampled.a);
+}
+`;
+var createColorMatrixImplementations = (label, getUniformData) => ({
+  webgl2: Internals.createEffectImplementation({
+    setup: (target) => setupSinglePass(target, FRAGMENT_SHADER, label, [
+      "uRed",
+      "uGreen",
+      "uBlue",
+      "uFlags"
+    ]),
+    apply: ({ source, width, height, params, state, flipSourceY }) => {
+      prepareSinglePassSource({
+        state,
+        source,
+        width,
+        height,
+        flipSourceY
+      });
+      const data = getUniformData(params);
+      const { gl, uniforms } = state;
+      gl.uniform4fv(uniforms.uRed, data.subarray(0, 4));
+      gl.uniform4fv(uniforms.uGreen, data.subarray(4, 8));
+      gl.uniform4fv(uniforms.uBlue, data.subarray(8, 12));
+      gl.uniform4fv(uniforms.uFlags, data.subarray(12, 16));
+      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`);
+      }
+      applyWebGpuSinglePass({
+        state,
+        source,
+        width,
+        height,
+        device: gpuDevice,
+        shader: WEBGPU_SHADER,
+        uniformData: getUniformData(params)
+      });
+    },
+    cleanup: cleanupWebGpuSinglePass
+  })
+});
+
+export { createColorMatrixImplementations };

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

@@ -0,0 +1,55 @@
+// 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;
+}
+`;
+};
+
+export { buildGaussianBlurFs };

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

@@ -0,0 +1,6 @@
+// src/uv-coordinate.ts
+var publicUvToShaderUv = (uv) => {
+  return [uv[0], 1 - uv[1]];
+};
+
+export { publicUvToShaderUv };

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

@@ -0,0 +1,199 @@
+import {
+  WEBGPU_SINGLE_PASS_VERTEX
+} from "./index-tvfexb7s.mjs";
+
+// src/webgpu-multipass-runtime.ts
+var WEBGPU_MULTIPASS_BINDINGS = `
+${WEBGPU_SINGLE_PASS_VERTEX}
+@group(0) @binding(0) var source: texture_2d<f32>;
+@group(0) @binding(1) var sourceSampler: sampler;
+@group(0) @binding(2) var<uniform> params: Params;
+@group(0) @binding(3) var secondary: texture_2d<f32>;
+`;
+var setupWebGpuMultipass = (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 cleanupWebGpuMultipass = (state) => {
+  state.resources?.source?.texture.destroy();
+  state.resources?.auxiliary?.texture.destroy();
+  state.resources?.textures.forEach((texture) => texture.destroy());
+  state.resources?.passes.forEach((pass) => pass.uniforms.destroy());
+  state.resources = null;
+  state.context.unconfigure();
+};
+var applyWebGpuMultipass = ({
+  state,
+  source,
+  width,
+  height,
+  device,
+  passes,
+  auxiliarySource
+}) => {
+  if (state.resources && state.resources.device !== device)
+    cleanupWebGpuMultipass(state);
+  if (!state.resources) {
+    const format = navigator.gpu.getPreferredCanvasFormat();
+    state.context.configure({ device, format, alphaMode: "premultiplied" });
+    const layout = device.createBindGroupLayout({
+      entries: [
+        { binding: 0, visibility: GPUShaderStage.FRAGMENT, texture: {} },
+        { binding: 1, visibility: GPUShaderStage.FRAGMENT, sampler: {} },
+        {
+          binding: 2,
+          visibility: GPUShaderStage.FRAGMENT,
+          buffer: { type: "uniform" }
+        },
+        { binding: 3, visibility: GPUShaderStage.FRAGMENT, texture: {} }
+      ]
+    });
+    state.resources = {
+      device,
+      format,
+      layout,
+      sampler: device.createSampler({ magFilter: "linear", minFilter: "linear" }),
+      passes: [],
+      textures: [],
+      source: null,
+      auxiliary: null,
+      width,
+      height
+    };
+  }
+  const r = state.resources;
+  const sourceWidth = "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 sourceHeight = "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;
+  if (r.source && (r.source.width !== sourceWidth || r.source.height !== sourceHeight)) {
+    r.source.texture.destroy();
+    r.source = null;
+  }
+  if (!r.source) {
+    r.source = {
+      width: sourceWidth,
+      height: sourceHeight,
+      texture: device.createTexture({
+        size: [sourceWidth, sourceHeight],
+        format: "rgba8unorm",
+        usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT
+      })
+    };
+  }
+  device.queue.copyExternalImageToTexture({ source }, { texture: r.source.texture, premultipliedAlpha: true }, [sourceWidth, sourceHeight]);
+  if (r.auxiliary && (!auxiliarySource || r.auxiliary.width !== auxiliarySource.width || r.auxiliary.height !== auxiliarySource.height)) {
+    r.auxiliary.texture.destroy();
+    r.auxiliary = null;
+  }
+  if (auxiliarySource) {
+    if (!r.auxiliary)
+      r.auxiliary = {
+        width: auxiliarySource.width,
+        height: auxiliarySource.height,
+        texture: device.createTexture({
+          size: [auxiliarySource.width, auxiliarySource.height],
+          format: "rgba8unorm",
+          usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT
+        })
+      };
+    device.queue.copyExternalImageToTexture({ source: auxiliarySource }, { texture: r.auxiliary.texture, premultipliedAlpha: true }, [auxiliarySource.width, auxiliarySource.height]);
+  }
+  if (r.width !== width || r.height !== height) {
+    r.textures.forEach((texture) => texture.destroy());
+    r.textures.length = 0;
+    r.width = width;
+    r.height = height;
+  }
+  const lastReaders = passes.map((_, index) => index);
+  for (let index = 0;index < passes.length; index++) {
+    for (const input of [passes[index].source, passes[index].secondary]) {
+      if (input >= 0)
+        lastReaders[input] = index;
+    }
+  }
+  const outputSlots = [];
+  const freeAfter = [];
+  for (let index = 0;index < passes.length - 1; index++) {
+    let slot = freeAfter.findIndex((lastReader) => lastReader < index);
+    if (slot === -1)
+      slot = freeAfter.length;
+    freeAfter[slot] = lastReaders[index];
+    outputSlots.push(slot);
+  }
+  while (r.textures.length < freeAfter.length) {
+    r.textures.push(device.createTexture({
+      size: [width, height],
+      format: "rgba8unorm",
+      usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.RENDER_ATTACHMENT
+    }));
+  }
+  while (r.textures.length > freeAfter.length)
+    r.textures.pop()?.destroy();
+  while (r.passes.length > passes.length)
+    r.passes.pop()?.uniforms.destroy();
+  const encoder = device.createCommandEncoder();
+  for (let index = 0;index < passes.length; index++) {
+    const pass = passes[index];
+    const format = index === passes.length - 1 ? r.format : "rgba8unorm";
+    const size = Math.max(16, Math.ceil(pass.uniforms.byteLength / 16) * 16);
+    let resources = r.passes[index];
+    if (!resources || resources.shader !== pass.shader || resources.size !== size || resources.format !== format) {
+      resources?.uniforms.destroy();
+      const module = device.createShaderModule({
+        code: pass.shader,
+        label: state.label
+      });
+      resources = {
+        shader: pass.shader,
+        size,
+        format,
+        pipeline: device.createRenderPipeline({
+          label: state.label,
+          layout: device.createPipelineLayout({ bindGroupLayouts: [r.layout] }),
+          vertex: { module, entryPoint: "vertex" },
+          fragment: { module, entryPoint: "fragment", targets: [{ format }] },
+          primitive: { topology: "triangle-list" }
+        }),
+        uniforms: device.createBuffer({
+          size,
+          usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+        })
+      };
+      r.passes[index] = resources;
+    }
+    device.queue.writeBuffer(resources.uniforms, 0, pass.uniforms);
+    const bindGroup = device.createBindGroup({
+      layout: r.layout,
+      entries: [
+        {
+          binding: 0,
+          resource: (pass.source === -1 ? r.source.texture : r.textures[outputSlots[pass.source]]).createView()
+        },
+        { binding: 1, resource: r.sampler },
+        { binding: 2, resource: { buffer: resources.uniforms } },
+        {
+          binding: 3,
+          resource: (pass.secondary === -2 && r.auxiliary ? r.auxiliary.texture : pass.secondary === -1 ? r.source.texture : r.textures[outputSlots[pass.secondary]]).createView()
+        }
+      ]
+    });
+    const renderPass = encoder.beginRenderPass({
+      colorAttachments: [
+        {
+          view: (index === passes.length - 1 ? state.context.getCurrentTexture() : r.textures[outputSlots[index]]).createView(),
+          clearValue: { r: 0, g: 0, b: 0, a: 0 },
+          loadOp: "clear",
+          storeOp: "store"
+        }
+      ]
+    });
+    renderPass.setPipeline(resources.pipeline);
+    renderPass.setBindGroup(0, bindGroup);
+    renderPass.draw(3);
+    renderPass.end();
+  }
+  device.queue.submit([encoder.finish()]);
+};
+
+export { WEBGPU_MULTIPASS_BINDINGS, setupWebGpuMultipass, cleanupWebGpuMultipass, applyWebGpuMultipass };