@remotion/effects 4.0.539 → 4.0.540

package/dist/esm/cylinder.mjs

@@ -1,201 +1,22 @@
+import {
+  setupWebGlProjection,
+  applyWebGlProjection,
+  cleanupWebGlProjection,
+  cleanupWebGpuProjection,
+  setupWebGpuProjection,
+  applyWebGpuProjection
+} from "./index-vp56k1gj.mjs";
+import {
+  assertOptionalFiniteNumber,
+  validateUnitInterval
+} from "./index-wxhvgv2s.mjs";
+import {
+  assertEffectParamsObject
+} from "./index-4fvp93ps.mjs";
+
 // 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 {
@@ -252,6 +73,50 @@ fn sampleFace(point: vec3f, inverse: mat3x3f, rotation: mat3x3f) -> vec4f {
 }
 `;
 
+// src/cylinder/webgl-shader.ts
+var CYLINDER_WEBGL_SHADER = `#version 300 es
+precision highp float;
+uniform sampler2D uSource;
+uniform vec4 uParams[3];
+out vec4 fragColor;
+vec4 sampleFace(vec3 point, mat3 inverseRotation, mat3 rotation) {
+  vec3 local = inverseRotation * point;
+  vec2 uv = vec2(fract((atan(local.x, local.z) + uParams[1].y) / 6.28318530718 + 0.5), local.y / uParams[0].xy.y + 0.5);
+  vec4 color = textureLod(uSource, vec2(uv.x, 1.0 - uv.y), 0.0);
+  if (uv.y < 0.0 || uv.y > 1.0) { return vec4(0); }
+  vec3 normal = rotation * vec3(local.x / uParams[1].x, 0, local.z / uParams[1].x);
+  float shade = mix(1.0, abs(normal.z), uParams[1].z);
+  return vec4(color.rgb * shade, color.a);
+}
+
+vec4 project(vec2 position) {
+  vec3 s = sin(uParams[2].xyz);
+  vec3 c = cos(uParams[2].xyz);
+  mat3 rx = mat3(vec3(1, 0, 0), vec3(0, c.x, s.x), vec3(0, -s.x, c.x));
+  mat3 ry = mat3(vec3(c.y, 0, -s.y), vec3(0, 1, 0), vec3(s.y, 0, c.y));
+  mat3 rz = mat3(vec3(c.z, s.z, 0), vec3(-s.z, c.z, 0), vec3(0, 0, 1));
+  mat3 rotation = rz * ry * rx;
+  vec3 axis = rotation[1];
+  vec2 p = position - uParams[0].zw;
+  // Orthographic viewing ray intersecting the rotated, open cylinder wall.
+  float a = 1.0 - axis.z * axis.z;
+  float da = dot(p, axis.xy);
+  float b = -da * axis.z;
+  float discriminant = b * b - a * (dot(p, p) - da * da - uParams[1].x * uParams[1].x);
+  if (a < 0.000001 || discriminant <= 0.0) { return vec4(0); }
+  float root = sqrt(discriminant);
+  mat3 inverseRotation = transpose(rotation);
+  vec4 front = sampleFace(vec3(p, (-b + root) / a), inverseRotation, rotation);
+  vec4 back = sampleFace(vec3(p, (-b - root) / a), inverseRotation, rotation);
+  if (uParams[1].w == 1.0) { return front; }
+  if (uParams[1].w == 2.0) { return back; }
+  // Both the texture and output use premultiplied alpha.
+  return front + back * (1.0 - front.a);
+}
+
+void main() { fragColor = project(vec2(gl_FragCoord.x, uParams[0].y - gl_FragCoord.y)); }
+`;
+
 // src/cylinder/index.ts
 var DEFAULT_RADIUS = 250;
 var DEFAULT_ROTATION = 0;
@@ -319,11 +184,28 @@ var resolve = (params) => ({
   render: params.render ?? DEFAULT_RENDER,
   shading: params.shading ?? DEFAULT_SHADING
 });
+var getUniformData = (params, width, height) => {
+  const r = resolve(params);
+  const radians = Math.PI / 180;
+  return 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
+  ]);
+};
 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");
@@ -353,37 +235,38 @@ var cylinder = Internals.createEffect({
     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([
+  implementations: {
+    webgpu: Internals.createEffectImplementation({
+      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");
+        }
+        applyWebGpuProjection({
+          source,
+          width,
+          height,
+          state,
+          device: gpuDevice,
+          shader: CYLINDER_SHADER,
+          uniformData: getUniformData(params, width, height)
+        });
+      },
+      cleanup: cleanupWebGpuProjection
+    }),
+    webgl2: Internals.createEffectImplementation({
+      setup: (target) => setupWebGlProjection(target, CYLINDER_WEBGL_SHADER),
+      apply: ({ source, width, height, params, state, flipSourceY }) => applyWebGlProjection({
+        source,
         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
+        state,
+        flipSourceY,
+        uniformData: getUniformData(params, width, height)
+      }),
+      cleanup: cleanupWebGlProjection
+    })
+  }
 });
 export {
   cylinder