@remotion/effects 4.0.535 → 4.0.537

package/dist/esm/page-turn.mjs

@@ -0,0 +1,405 @@
+// src/page-turn/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/page-turn/shader.ts
+var PAGE_TURN_SHADER = `
+struct Params {
+  resolution: vec2f,
+  foldPosition: vec2f,
+  geometry: vec4f,
+  paperColor: vec4f,
+  back: 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 samplePage(pixel: vec2f) -> vec4f {
+  if (any(pixel < vec2f(0)) || any(pixel >= params.resolution)) { return vec4f(0); }
+  // The shared projection sampler wraps horizontally; pages must not wrap at the edges.
+  let uv = clamp(pixel, vec2f(0.5), params.resolution - vec2f(0.5)) / params.resolution;
+  return textureSampleLevel(source, sourceSampler, uv, 0);
+}
+
+@fragment fn fragment(@builtin(position) position: vec4f) -> @location(0) vec4f {
+  let radius = params.geometry.x;
+  let direction = params.geometry.y;
+  let normal = vec2f(-sin(direction), cos(direction));
+  let distance = dot(position.xy - params.foldPosition, normal);
+  let coverage = 1.0 - smoothstep(radius - max(fwidth(distance), 0.001), radius, distance);
+  if (distance >= radius) { return vec4f(0); }
+
+  var front = vec4f(0);
+  var back = vec4f(0);
+  var backDistance = 3.14159265359 * radius - distance;
+  var backShade = 0.9;
+  if (distance <= 0.0) {
+    front = samplePage(position.xy);
+  } else {
+    let angle = asin(clamp(distance / radius, 0.0, 1.0));
+    let frontDistance = radius * angle;
+    backDistance = 3.14159265359 * radius - frontDistance;
+    let light = params.geometry.z;
+    let lightDot = normal.x * sin(light) - normal.y * cos(light);
+    let shade = 1.0 - 0.4 * (angle / 1.57079632679) * (0.5 + 0.5 * lightDot);
+    let color = samplePage(position.xy + normal * (frontDistance - distance));
+    front = vec4f(color.rgb * shade, color.a);
+    backShade = 0.6 + 0.4 * cos(angle);
+  }
+  let color = samplePage(position.xy + normal * (backDistance - distance));
+  let tint = (1.0 - params.back.x) * params.paperColor.a;
+  back = vec4f(mix(color.rgb, params.paperColor.rgb * color.a, tint) * backShade, color.a);
+  if (params.geometry.w == 1.0) { return front * coverage; }
+  if (params.geometry.w == 2.0) { return back * coverage; }
+  // Premultiplied source-over: the curled back covers the front, which shows through its alpha.
+  return (back + front * (1.0 - back.a)) * coverage;
+}
+`;
+
+// src/page-turn/index.ts
+var DEFAULT_FOLD_POSITION = [0.7, 0.7];
+var DEFAULT_FOLD_DIRECTION = 315;
+var DEFAULT_FOLD_RADIUS = 60;
+var DEFAULT_LIGHT_DIRECTION = -45;
+var DEFAULT_RENDER = "both";
+var DEFAULT_BACK_PAGE_OPACITY = 0.25;
+var DEFAULT_PAPER_COLOR = "#ffffff";
+var pageTurnSchema = {
+  foldPosition: {
+    type: "uv-coordinate",
+    default: DEFAULT_FOLD_POSITION,
+    description: "Fold position"
+  },
+  foldDirection: {
+    type: "rotation-degrees",
+    default: DEFAULT_FOLD_DIRECTION,
+    description: "Fold direction"
+  },
+  foldRadius: {
+    type: "number",
+    min: 1,
+    max: 500,
+    step: 1,
+    default: DEFAULT_FOLD_RADIUS,
+    description: "Fold radius",
+    hiddenFromList: false
+  },
+  lightDirection: {
+    type: "rotation-degrees",
+    default: DEFAULT_LIGHT_DIRECTION,
+    description: "Light direction"
+  },
+  render: {
+    type: "enum",
+    variants: { both: {}, front: {}, back: {} },
+    default: DEFAULT_RENDER,
+    description: "Faces"
+  },
+  backPageOpacity: {
+    type: "number",
+    min: 0,
+    max: 1,
+    step: 0.01,
+    default: DEFAULT_BACK_PAGE_OPACITY,
+    description: "Back image opacity",
+    hiddenFromList: false
+  },
+  paperColor: {
+    type: "color",
+    default: DEFAULT_PAPER_COLOR,
+    description: "Paper color"
+  }
+};
+var resolve = (params) => ({
+  foldPosition: params.foldPosition ?? DEFAULT_FOLD_POSITION,
+  foldDirection: params.foldDirection ?? DEFAULT_FOLD_DIRECTION,
+  foldRadius: params.foldRadius ?? DEFAULT_FOLD_RADIUS,
+  lightDirection: params.lightDirection ?? DEFAULT_LIGHT_DIRECTION,
+  render: params.render ?? DEFAULT_RENDER,
+  backPageOpacity: params.backPageOpacity ?? DEFAULT_BACK_PAGE_OPACITY,
+  paperColor: params.paperColor ?? DEFAULT_PAPER_COLOR
+});
+var pageTurn = Internals.createEffect({
+  type: "remotion/page-turn",
+  label: "pageTurn()",
+  documentationLink: "https://www.remotion.dev/docs/effects/page-turn",
+  backend: "webgpu",
+  schema: pageTurnSchema,
+  validateParams: (params) => {
+    assertEffectParamsObject(params, "Page turn");
+    for (const key of [
+      "foldDirection",
+      "foldRadius",
+      "lightDirection",
+      "backPageOpacity"
+    ]) {
+      assertOptionalFiniteNumber(params[key], key);
+    }
+    assertOptionalColor(params.paperColor, "paperColor");
+    const r = resolve(params);
+    if (r.foldRadius <= 0)
+      throw new TypeError('"foldRadius" must be greater than 0');
+    validateUnitInterval(r.backPageOpacity, "backPageOpacity");
+    if (params.foldPosition !== undefined && (!Array.isArray(params.foldPosition) || params.foldPosition.length !== 2 || !Number.isFinite(params.foldPosition[0]) || !Number.isFinite(params.foldPosition[1]))) {
+      throw new TypeError('"foldPosition" 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 `page-turn-${r.foldPosition.join(",")}-${r.foldDirection}-${r.foldRadius}-${r.lightDirection}-${r.render}-${r.backPageOpacity}-${r.paperColor}`;
+  },
+  setup: (target) => {
+    const colorCanvas = document.createElement("canvas");
+    colorCanvas.width = 1;
+    colorCanvas.height = 1;
+    const colorCtx = colorCanvas.getContext("2d", { willReadFrequently: true });
+    if (!colorCtx)
+      throw new Error("Could not create the page turn color context");
+    return {
+      ...setupWebGpuProjection(target, "page turn"),
+      colorCtx,
+      cachedColor: null,
+      cachedRgba: [255, 255, 255, 255]
+    };
+  },
+  apply: ({ source, width, height, params, state, gpuDevice }) => {
+    if (!gpuDevice)
+      throw new Error("A WebGPU device is required for the page turn effect");
+    const r = resolve(params);
+    if (state.cachedColor !== r.paperColor) {
+      state.cachedColor = r.paperColor;
+      state.cachedRgba = parseColorRgba(state.colorCtx, r.paperColor);
+    }
+    const radians = Math.PI / 180;
+    applyWebGpuProjection({
+      source,
+      width,
+      height,
+      state,
+      device: gpuDevice,
+      shader: PAGE_TURN_SHADER,
+      uniformData: new Float32Array([
+        width,
+        height,
+        r.foldPosition[0] * width,
+        r.foldPosition[1] * height,
+        r.foldRadius,
+        r.foldDirection % 360 * radians,
+        r.lightDirection % 360 * radians,
+        r.render === "front" ? 1 : r.render === "back" ? 2 : 0,
+        ...state.cachedRgba.map((channel) => channel / 255),
+        r.backPageOpacity,
+        0,
+        0,
+        0
+      ])
+    });
+  },
+  cleanup: cleanupWebGpuProjection
+});
+export {
+  pageTurn
+};