@remotion/effects 4.0.539 → 4.0.540

package/dist/esm/page-turn.mjs

@@ -1,201 +1,24 @@
+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/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 {
@@ -256,6 +79,58 @@ fn samplePage(pixel: vec2f) -> vec4f {
 }
 `;
 
+// 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;
@@ -310,6 +185,15 @@ var pageTurnSchema = {
     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,
@@ -319,11 +203,33 @@ var resolve = (params) => ({
   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",
-  backend: "webgpu",
   schema: pageTurnSchema,
   validateParams: (params) => {
     assertEffectParamsObject(params, "Page turn");
@@ -351,54 +257,45 @@ var pageTurn = Internals.createEffect({
     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
+  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