@remotion/effects 4.0.541 → 4.0.543

package/dist/esm/preview/page-turn.mjs

@@ -0,0 +1,302 @@
+import {
+  setupWebGlProjection,
+  applyWebGlProjection,
+  cleanupWebGlProjection,
+  cleanupWebGpuProjection,
+  setupWebGpuProjection,
+  applyWebGpuProjection
+} from "./index-vp56k1gj.mjs";
+import {
+  assertOptionalFiniteNumber,
+  validateUnitInterval,
+  parseColorRgba
+} from "./index-wxhvgv2s.mjs";
+import {
+  assertEffectParamsObject,
+  assertOptionalColor
+} from "./index-4fvp93ps.mjs";
+
+// src/page-turn/index.ts
+import { Internals } from "remotion";
+
+// 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/webgl-shader.ts
+var PAGE_TURN_WEBGL_SHADER = `#version 300 es
+precision highp float;
+uniform sampler2D uSource;
+uniform vec4 uParams[4];
+out vec4 fragColor;
+
+vec4 samplePage(vec2 pixel) {
+  vec2 resolution = uParams[0].xy;
+  if (any(lessThan(pixel, vec2(0))) || any(greaterThanEqual(pixel, resolution))) { return vec4(0); }
+  // The shared projection sampler wraps horizontally; pages must not wrap at the edges.
+  vec2 uv = clamp(pixel, vec2(0.5), resolution - vec2(0.5)) / resolution;
+  return textureLod(uSource, vec2(uv.x, 1.0 - uv.y), 0.0);
+}
+
+vec4 project(vec2 position) {
+  float radius = uParams[1].x;
+  float direction = uParams[1].y;
+  vec2 normal = vec2(-sin(direction), cos(direction));
+  float distance = dot(position - uParams[0].zw, normal);
+  float coverage = 1.0 - smoothstep(radius - max(fwidth(distance), 0.001), radius, distance);
+  if (distance >= radius) { return vec4(0); }
+
+  vec4 front = vec4(0);
+  vec4 back = vec4(0);
+  float backDistance = 3.14159265359 * radius - distance;
+  float backShade = 0.9;
+  if (distance <= 0.0) {
+    front = samplePage(position);
+  } else {
+    float angle = asin(clamp(distance / radius, 0.0, 1.0));
+    float frontDistance = radius * angle;
+    backDistance = 3.14159265359 * radius - frontDistance;
+    float light = uParams[1].z;
+    float lightDot = normal.x * sin(light) - normal.y * cos(light);
+    float shade = 1.0 - 0.4 * (angle / 1.57079632679) * (0.5 + 0.5 * lightDot);
+    vec4 color = samplePage(position + normal * (frontDistance - distance));
+    front = vec4(color.rgb * shade, color.a);
+    backShade = 0.6 + 0.4 * cos(angle);
+  }
+  vec4 color = samplePage(position + normal * (backDistance - distance));
+  float tint = (1.0 - uParams[3].x) * uParams[2].a;
+  back = vec4(mix(color.rgb, uParams[2].rgb * color.a, tint) * backShade, color.a);
+  if (uParams[1].w == 1.0) { return front * coverage; }
+  if (uParams[1].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;
+}
+
+void main() { fragColor = project(vec2(gl_FragCoord.x, uParams[0].y - gl_FragCoord.y)); }
+`;
+
+// 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 setupPageTurnColor = () => {
+  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 { colorCtx, cachedColor: null, cachedRgba: [255, 255, 255, 255] };
+};
+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 getUniformData = (params, state, width, height) => {
+  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;
+  return 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
+  ]);
+};
+var pageTurn = Internals.createEffect({
+  type: "remotion/page-turn",
+  label: "pageTurn()",
+  documentationLink: "https://www.remotion.dev/docs/effects/page-turn",
+  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}`;
+  },
+  implementations: {
+    webgpu: Internals.createEffectImplementation({
+      setup: (target) => ({
+        ...setupPageTurnColor(),
+        ...setupWebGpuProjection(target, "page turn")
+      }),
+      apply: ({ source, width, height, params, state, gpuDevice }) => {
+        if (!gpuDevice)
+          throw new Error("A WebGPU device is required for the page turn effect");
+        applyWebGpuProjection({
+          source,
+          width,
+          height,
+          state,
+          device: gpuDevice,
+          shader: PAGE_TURN_SHADER,
+          uniformData: getUniformData(params, state, width, height)
+        });
+      },
+      cleanup: cleanupWebGpuProjection
+    }),
+    webgl2: Internals.createEffectImplementation({
+      setup: (target) => ({
+        ...setupPageTurnColor(),
+        ...setupWebGlProjection(target, PAGE_TURN_WEBGL_SHADER)
+      }),
+      apply: ({ source, width, height, params, state, flipSourceY }) => {
+        applyWebGlProjection({
+          source,
+          width,
+          height,
+          state,
+          flipSourceY,
+          uniformData: getUniformData(params, state, width, height)
+        });
+      },
+      cleanup: cleanupWebGlProjection
+    })
+  }
+});
+export {
+  pageTurn
+};