@remotion/effects 4.0.536 → 4.0.538

package/dist/esm/cylinder.mjs

@@ -0,0 +1,390 @@
+// src/cylinder/index.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/webgpu-projection-runtime.ts
+var cleanupWebGpuProjection = (state) => {
+  state.resources?.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,
+  width,
+  height,
+  device,
+  shader,
+  uniformData
+}) => {
+  if (state.resources && (state.resources.device !== device || state.resources.width !== width || state.resources.height !== height)) {
+    cleanupWebGpuProjection(state);
+  }
+  if (!state.resources) {
+    const format = navigator.gpu.getPreferredCanvasFormat();
+    state.context.configure({ device, format, alphaMode: "premultiplied" });
+    const module = device.createShaderModule({ code: shader });
+    const pipeline = device.createRenderPipeline({
+      layout: "auto",
+      vertex: { module, entryPoint: "vertex" },
+      fragment: { module, entryPoint: "fragment", targets: [{ format }] },
+      primitive: { topology: "triangle-list" }
+    });
+    const uniforms = device.createBuffer({
+      size: uniformData.byteLength,
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+    });
+    const sampler = device.createSampler({
+      addressModeU: "repeat",
+      magFilter: "linear",
+      minFilter: "linear"
+    });
+    const texture = device.createTexture({
+      size: [width, height],
+      format: "rgba8unorm",
+      usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT
+    });
+    const bindGroup = device.createBindGroup({
+      layout: pipeline.getBindGroupLayout(0),
+      entries: [
+        { binding: 0, resource: texture.createView() },
+        { binding: 1, resource: sampler },
+        { binding: 2, resource: { buffer: uniforms } }
+      ]
+    });
+    state.resources = {
+      device,
+      pipeline,
+      uniforms,
+      sampler,
+      texture,
+      bindGroup,
+      width,
+      height
+    };
+  }
+  const { resources } = state;
+  device.queue.copyExternalImageToTexture({ source }, { texture: resources.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.bindGroup);
+  pass.draw(3);
+  pass.end();
+  device.queue.submit([encoder.finish()]);
+};
+
+// src/cylinder/shader.ts
+var CYLINDER_SHADER = `
+struct Params {
+  resolution: vec2f,
+  center: vec2f,
+  radius: f32,
+  spin: f32,
+  shading: f32,
+  faces: f32,
+  rotation: 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;
+
+@vertex fn vertex(@builtin(vertex_index) index: u32) -> @builtin(position) vec4f {
+  let positions = array<vec2f, 3>(vec2f(-1, -1), vec2f(3, -1), vec2f(-1, 3));
+  return vec4f(positions[index], 0, 1);
+}
+
+fn sampleFace(point: vec3f, inverse: mat3x3f, rotation: mat3x3f) -> vec4f {
+  let local = inverse * point;
+  let uv = vec2f(fract((atan2(local.x, local.z) + params.spin) / 6.28318530718 + 0.5), local.y / params.resolution.y + 0.5);
+  let color = textureSampleLevel(source, sourceSampler, uv, 0);
+  if (uv.y < 0 || uv.y > 1) { return vec4f(0); }
+  let normal = rotation * vec3f(local.x / params.radius, 0, local.z / params.radius);
+  let shade = mix(1.0, abs(normal.z), params.shading);
+  return vec4f(color.rgb * shade, color.a);
+}
+
+@fragment fn fragment(@builtin(position) position: vec4f) -> @location(0) vec4f {
+  let s = sin(params.rotation.xyz);
+  let c = cos(params.rotation.xyz);
+  let rx = mat3x3f(vec3f(1, 0, 0), vec3f(0, c.x, s.x), vec3f(0, -s.x, c.x));
+  let ry = mat3x3f(vec3f(c.y, 0, -s.y), vec3f(0, 1, 0), vec3f(s.y, 0, c.y));
+  let rz = mat3x3f(vec3f(c.z, s.z, 0), vec3f(-s.z, c.z, 0), vec3f(0, 0, 1));
+  let rotation = rz * ry * rx;
+  let axis = rotation[1];
+  let p = position.xy - params.center;
+  // Orthographic viewing ray intersecting the rotated, open cylinder wall.
+  let a = 1.0 - axis.z * axis.z;
+  let da = dot(p, axis.xy);
+  let b = -da * axis.z;
+  let discriminant = b * b - a * (dot(p, p) - da * da - params.radius * params.radius);
+  if (a < 0.000001 || discriminant <= 0) { return vec4f(0); }
+  let root = sqrt(discriminant);
+  let inverse = transpose(rotation);
+  let front = sampleFace(vec3f(p, (-b + root) / a), inverse, rotation);
+  let back = sampleFace(vec3f(p, (-b - root) / a), inverse, rotation);
+  if (params.faces == 1) { return front; }
+  if (params.faces == 2) { return back; }
+  // Both the texture and output use premultiplied alpha.
+  return front + back * (1.0 - front.a);
+}
+`;
+
+// src/cylinder/index.ts
+var DEFAULT_RADIUS = 250;
+var DEFAULT_ROTATION = 0;
+var DEFAULT_POSITION = [0.5, 0.5];
+var DEFAULT_RENDER = "both";
+var DEFAULT_SHADING = 0.35;
+var cylinderSchema = {
+  radius: {
+    type: "number",
+    min: 1,
+    max: 1000,
+    step: 1,
+    default: DEFAULT_RADIUS,
+    description: "Radius",
+    hiddenFromList: false
+  },
+  rotation: {
+    type: "rotation-degrees",
+    default: DEFAULT_ROTATION,
+    description: "Texture rotation"
+  },
+  rotationX: {
+    type: "rotation-degrees",
+    default: DEFAULT_ROTATION,
+    description: "X rotation"
+  },
+  rotationY: {
+    type: "rotation-degrees",
+    default: DEFAULT_ROTATION,
+    description: "Y rotation"
+  },
+  rotationZ: {
+    type: "rotation-degrees",
+    default: DEFAULT_ROTATION,
+    description: "Z rotation"
+  },
+  position: {
+    type: "uv-coordinate",
+    default: DEFAULT_POSITION,
+    description: "Position"
+  },
+  render: {
+    type: "enum",
+    variants: { both: {}, front: {}, back: {} },
+    default: DEFAULT_RENDER,
+    description: "Faces"
+  },
+  shading: {
+    type: "number",
+    min: 0,
+    max: 1,
+    step: 0.01,
+    default: DEFAULT_SHADING,
+    description: "Shading",
+    hiddenFromList: false
+  }
+};
+var resolve = (params) => ({
+  radius: params.radius ?? DEFAULT_RADIUS,
+  rotation: params.rotation ?? DEFAULT_ROTATION,
+  rotationX: params.rotationX ?? DEFAULT_ROTATION,
+  rotationY: params.rotationY ?? DEFAULT_ROTATION,
+  rotationZ: params.rotationZ ?? DEFAULT_ROTATION,
+  position: params.position ?? DEFAULT_POSITION,
+  render: params.render ?? DEFAULT_RENDER,
+  shading: params.shading ?? DEFAULT_SHADING
+});
+var cylinder = Internals.createEffect({
+  type: "remotion/cylinder",
+  label: "cylinder()",
+  documentationLink: "https://www.remotion.dev/docs/effects/cylinder",
+  backend: "webgpu",
+  schema: cylinderSchema,
+  validateParams: (params) => {
+    assertEffectParamsObject(params, "Cylinder");
+    for (const key of [
+      "radius",
+      "rotation",
+      "rotationX",
+      "rotationY",
+      "rotationZ",
+      "shading"
+    ]) {
+      assertOptionalFiniteNumber(params[key], key);
+    }
+    const r = resolve(params);
+    if (r.radius <= 0) {
+      throw new TypeError('"radius" must be greater than 0');
+    }
+    validateUnitInterval(r.shading, "shading");
+    if (params.position !== undefined && (!Array.isArray(params.position) || params.position.length !== 2 || !Number.isFinite(params.position[0]) || !Number.isFinite(params.position[1]))) {
+      throw new TypeError('"position" must contain two finite numbers');
+    }
+    if (params.render !== undefined && params.render !== "both" && params.render !== "front" && params.render !== "back") {
+      throw new TypeError('"render" must be "both", "front", or "back"');
+    }
+  },
+  calculateKey: (params) => {
+    const r = resolve(params);
+    return `cylinder-${r.radius}-${r.rotation}-${r.rotationX}-${r.rotationY}-${r.rotationZ}-${r.position.join(",")}-${r.render}-${r.shading}`;
+  },
+  setup: (target) => setupWebGpuProjection(target, "cylinder"),
+  apply: ({ source, width, height, params, state, gpuDevice }) => {
+    if (!gpuDevice) {
+      throw new Error("A WebGPU device is required for the cylinder effect");
+    }
+    const r = resolve(params);
+    const radians = Math.PI / 180;
+    applyWebGpuProjection({
+      source,
+      width,
+      height,
+      state,
+      device: gpuDevice,
+      shader: CYLINDER_SHADER,
+      uniformData: new Float32Array([
+        width,
+        height,
+        r.position[0] * width,
+        r.position[1] * height,
+        r.radius,
+        r.rotation % 360 * radians,
+        r.shading,
+        r.render === "front" ? 1 : r.render === "back" ? 2 : 0,
+        r.rotationX % 360 * radians,
+        r.rotationY % 360 * radians,
+        r.rotationZ % 360 * radians,
+        0
+      ])
+    });
+  },
+  cleanup: cleanupWebGpuProjection
+});
+export {
+  cylinder
+};