@remotion/effects 4.0.536 → 4.0.538

package/dist/esm/bevel-alpha.mjs

@@ -0,0 +1,474 @@
+// src/bevel-alpha/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/bevel-alpha/shaders.ts
+var BEVEL_ALPHA_VERTEX_SHADER = `#version 300 es
+layout(location = 0) in vec2 aPos;
+layout(location = 1) in vec2 aUv;
+out vec2 vUv;
+void main() {
+	vUv = aUv;
+	gl_Position = vec4(aPos, 0.0, 1.0);
+}
+`;
+var HEIGHT_ENCODING = `
+// Store a 16-bit height in two 8-bit channels. This avoids banded normals
+// without requiring floating-point render targets or WebGL extensions.
+vec4 encodeHeight(float height) {
+	float value = floor(clamp(height, 0.0, 1.0) * 65535.0 + 0.5);
+	return vec4(floor(value / 256.0), mod(value, 256.0), 0.0, 255.0) / 255.0;
+}
+float decodeHeight(vec4 value) {
+	return dot(value.rg, vec2(65280.0, 255.0)) / 65535.0;
+}
+`;
+var buildBevelAlphaBlurShader = (direction) => `#version 300 es
+precision highp float;
+in vec2 vUv;
+out vec4 fragColor;
+uniform sampler2D uSource;
+uniform vec2 uResolution;
+uniform float uRadius;
+${HEIGHT_ENCODING}
+float readHeight(vec2 uv) {
+	${direction === "horizontal" ? "return texture(uSource, uv).a;" : `
+	// Decode before interpolating: packed channel values cannot be filtered.
+	vec2 pixel = uv * uResolution - 0.5;
+	ivec2 lower = ivec2(int(gl_FragCoord.x), int(floor(pixel.y)));
+	ivec2 maximum = ivec2(uResolution) - 1;
+	float a = decodeHeight(texelFetch(uSource, clamp(lower, ivec2(0), maximum), 0));
+	float b = decodeHeight(texelFetch(uSource, clamp(lower + ivec2(0, 1), ivec2(0), maximum), 0));
+	return mix(a, b, fract(pixel.y));`}
+}
+void main() {
+	float radius = max(uRadius, 0.0001);
+	int halfKernel = int(clamp(ceil(radius), 4.0, 64.0));
+	float sigma = radius / 3.0;
+	float sum = 0.0;
+	float total = 0.0;
+	for (int i = -64; i <= 64; i++) {
+		if (abs(i) > halfKernel) continue;
+		float offset = float(i) * radius / float(halfKernel);
+		float weight = exp(-0.5 * offset * offset / (sigma * sigma));
+		vec2 uv = vUv + ${direction === "horizontal" ? "vec2(offset, 0.0)" : "vec2(0.0, offset)"} / uResolution;
+		sum += readHeight(uv) * weight;
+		total += weight;
+	}
+	fragColor = encodeHeight(sum / total);
+}
+`;
+var BEVEL_ALPHA_SHADE_SHADER = `#version 300 es
+precision highp float;
+in vec2 vUv;
+out vec4 fragColor;
+uniform sampler2D uSource;
+uniform sampler2D uHeight;
+uniform vec2 uResolution;
+uniform float uEdgeThickness;
+uniform vec3 uLightDirection;
+uniform vec3 uLightColor;
+uniform float uLightIntensity;
+${HEIGHT_ENCODING}
+float heightAt(ivec2 pixel) {
+	return decodeHeight(texelFetch(uHeight, clamp(pixel, ivec2(0), ivec2(uResolution) - 1), 0));
+}
+void main() {
+	vec4 source = texelFetch(uSource, ivec2(gl_FragCoord.xy), 0);
+	if (uEdgeThickness == 0.0 || uLightIntensity == 0.0 || source.a == 0.0) {
+		fragColor = source;
+		return;
+	}
+	ivec2 pixel = ivec2(gl_FragCoord.xy);
+	float dx = (heightAt(pixel + ivec2(1, 0)) - heightAt(pixel - ivec2(1, 0))) * 0.5;
+	// Screen-space Y points down; texture-space Y points up.
+	float dy = (heightAt(pixel - ivec2(0, 1)) - heightAt(pixel + ivec2(0, 1))) * 0.5;
+	vec3 normal = normalize(vec3(-dx * uEdgeThickness * 1.25, -dy * uEdgeThickness * 1.25, 1.0));
+	float shade = (dot(normal, uLightDirection) - uLightDirection.z) * uLightIntensity * 2.0;
+	vec3 color = source.rgb;
+	if (shade > 0.0) {
+		color += uLightColor * shade * source.a;
+	} else {
+		color *= max(1.0 + shade, 0.0);
+	}
+	fragColor = vec4(clamp(color, vec3(0.0), vec3(source.a)), source.a);
+}
+`;
+
+// src/bevel-alpha/index.ts
+var { createEffect, createWebGL2ContextError } = Internals;
+var DEFAULT_EDGE_THICKNESS = 2;
+var DEFAULT_LIGHT_ANGLE = -60;
+var DEFAULT_LIGHT_COLOR = "white";
+var DEFAULT_LIGHT_INTENSITY = 0.4;
+var bevelAlphaSchema = {
+  edgeThickness: {
+    type: "number",
+    min: 0,
+    max: 200,
+    step: 0.1,
+    default: DEFAULT_EDGE_THICKNESS,
+    description: "Edge thickness",
+    hiddenFromList: false
+  },
+  lightAngle: {
+    type: "rotation-degrees",
+    step: 1,
+    default: DEFAULT_LIGHT_ANGLE,
+    description: "Light angle"
+  },
+  lightColor: {
+    type: "color",
+    default: DEFAULT_LIGHT_COLOR,
+    description: "Light color"
+  },
+  lightIntensity: {
+    type: "number",
+    min: 0,
+    max: 1,
+    step: 0.01,
+    default: DEFAULT_LIGHT_INTENSITY,
+    description: "Light intensity",
+    hiddenFromList: false
+  }
+};
+var resolve = (p) => ({
+  edgeThickness: p.edgeThickness ?? DEFAULT_EDGE_THICKNESS,
+  lightAngle: p.lightAngle ?? DEFAULT_LIGHT_ANGLE,
+  lightColor: p.lightColor ?? DEFAULT_LIGHT_COLOR,
+  lightIntensity: p.lightIntensity ?? DEFAULT_LIGHT_INTENSITY
+});
+var validateBevelAlphaParams = (params) => {
+  assertEffectParamsObject(params, "Bevel alpha");
+  assertOptionalFiniteNumber(params.edgeThickness, "edgeThickness");
+  assertOptionalFiniteNumber(params.lightAngle, "lightAngle");
+  assertOptionalColor(params.lightColor, "lightColor");
+  assertOptionalFiniteNumber(params.lightIntensity, "lightIntensity");
+  const r = resolve(params);
+  validateNonNegative(r.edgeThickness, "edgeThickness");
+  if (r.edgeThickness > 200)
+    throw new TypeError('"edgeThickness" must be at most 200');
+  validateUnitInterval(r.lightIntensity, "lightIntensity");
+};
+var compileShader = (gl, type, source) => {
+  const shader = gl.createShader(type);
+  if (!shader) {
+    throw new Error("Failed to create WebGL shader");
+  }
+  gl.shaderSource(shader, source);
+  gl.compileShader(shader);
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    const log = gl.getShaderInfoLog(shader);
+    gl.deleteShader(shader);
+    throw new Error(`BevelAlpha shader compile failed: ${log ?? "(no log)"}`);
+  }
+  return shader;
+};
+var linkProgram = (gl, vs, fs) => {
+  const program = gl.createProgram();
+  if (!program) {
+    throw new Error("Failed to create WebGL program");
+  }
+  gl.attachShader(program, vs);
+  gl.attachShader(program, fs);
+  gl.linkProgram(program);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    const log = gl.getProgramInfoLog(program);
+    gl.deleteProgram(program);
+    throw new Error(`BevelAlpha program link failed: ${log ?? "(no log)"}`);
+  }
+  return program;
+};
+var setupBevelAlpha = (target) => {
+  const gl = target.getContext("webgl2", {
+    premultipliedAlpha: true,
+    alpha: true,
+    preserveDrawingBuffer: true
+  });
+  if (!gl)
+    throw createWebGL2ContextError("bevel alpha effect");
+  gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
+  const vs = compileShader(gl, gl.VERTEX_SHADER, BEVEL_ALPHA_VERTEX_SHADER);
+  const programs = [
+    buildBevelAlphaBlurShader("horizontal"),
+    buildBevelAlphaBlurShader("vertical"),
+    BEVEL_ALPHA_SHADE_SHADER
+  ].map((source) => {
+    const fs = compileShader(gl, gl.FRAGMENT_SHADER, source);
+    const shaderProgram = linkProgram(gl, vs, fs);
+    gl.deleteShader(fs);
+    return shaderProgram;
+  });
+  gl.deleteShader(vs);
+  const [horizontalProgram, verticalProgram, program] = programs;
+  const passes = [horizontalProgram, verticalProgram].map((p) => ({
+    program: p,
+    uSource: gl.getUniformLocation(p, "uSource"),
+    uResolution: gl.getUniformLocation(p, "uResolution"),
+    uRadius: gl.getUniformLocation(p, "uRadius")
+  }));
+  const vao = gl.createVertexArray();
+  const vbo = gl.createBuffer();
+  const framebuffer = gl.createFramebuffer();
+  if (!vao || !vbo || !framebuffer)
+    throw new Error("Could not allocate bevel alpha WebGL resources");
+  gl.bindVertexArray(vao);
+  gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 0, 0, 1, -1, 1, 0, -1, 1, 0, 1, 1, 1, 1, 1]), gl.STATIC_DRAW);
+  gl.enableVertexAttribArray(0);
+  gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 16, 0);
+  gl.enableVertexAttribArray(1);
+  gl.vertexAttribPointer(1, 2, gl.FLOAT, false, 16, 8);
+  gl.bindVertexArray(null);
+  const textures = [gl.LINEAR, gl.NEAREST, gl.NEAREST].map((filter) => {
+    const texture = gl.createTexture();
+    if (!texture)
+      throw new Error("Could not allocate bevel alpha texture");
+    gl.bindTexture(gl.TEXTURE_2D, texture);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, filter);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, filter);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    return texture;
+  });
+  gl.bindTexture(gl.TEXTURE_2D, null);
+  const colorCanvas = document.createElement("canvas");
+  colorCanvas.width = 1;
+  colorCanvas.height = 1;
+  const colorCtx = colorCanvas.getContext("2d", { willReadFrequently: true });
+  if (!colorCtx)
+    throw new Error("Failed to acquire 2D context for color parsing");
+  return {
+    gl,
+    horizontal: passes[0],
+    vertical: passes[1],
+    program,
+    vao,
+    vbo,
+    framebuffer,
+    texture: textures[0],
+    intermediate: textures[1],
+    heightTexture: textures[2],
+    uSource: gl.getUniformLocation(program, "uSource"),
+    uHeight: gl.getUniformLocation(program, "uHeight"),
+    uResolution: gl.getUniformLocation(program, "uResolution"),
+    uEdgeThickness: gl.getUniformLocation(program, "uEdgeThickness"),
+    uLightDirection: gl.getUniformLocation(program, "uLightDirection"),
+    uLightColor: gl.getUniformLocation(program, "uLightColor"),
+    uLightIntensity: gl.getUniformLocation(program, "uLightIntensity"),
+    colorCtx,
+    cachedColor: "",
+    cachedColorRgba: [255, 255, 255, 255],
+    width: 0,
+    height: 0
+  };
+};
+var bevelAlpha = createEffect({
+  type: "remotion/bevel-alpha",
+  label: "bevelAlpha()",
+  documentationLink: "https://www.remotion.dev/docs/effects/bevel-alpha",
+  backend: "webgl2",
+  calculateKey: (params) => `bevel-alpha-${JSON.stringify(resolve(params))}`,
+  setup: setupBevelAlpha,
+  apply: ({ source, width, height, params, state, flipSourceY }) => {
+    const r = resolve(params);
+    const {
+      gl,
+      texture,
+      intermediate,
+      heightTexture,
+      program,
+      vao,
+      framebuffer
+    } = state;
+    if (state.cachedColor !== r.lightColor) {
+      state.cachedColor = r.lightColor;
+      state.cachedColorRgba = parseColorRgba(state.colorCtx, r.lightColor);
+    }
+    gl.viewport(0, 0, width, height);
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, texture);
+    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipSourceY);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
+    if (state.width !== width || state.height !== height) {
+      for (const output of [intermediate, heightTexture]) {
+        gl.bindTexture(gl.TEXTURE_2D, output);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+      }
+      state.width = width;
+      state.height = height;
+    }
+    gl.bindVertexArray(vao);
+    if (r.edgeThickness > 0 && r.lightIntensity > 0) {
+      gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
+      const ditherEnabled = gl.isEnabled(gl.DITHER);
+      gl.disable(gl.DITHER);
+      try {
+        for (const [pass, input, output] of [
+          [state.horizontal, texture, intermediate],
+          [state.vertical, intermediate, heightTexture]
+        ]) {
+          gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, output, 0);
+          if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) !== gl.FRAMEBUFFER_COMPLETE)
+            throw new Error("Bevel alpha framebuffer is incomplete");
+          gl.bindTexture(gl.TEXTURE_2D, input);
+          gl.useProgram(pass.program);
+          gl.uniform1i(pass.uSource, 0);
+          gl.uniform2f(pass.uResolution, width, height);
+          gl.uniform1f(pass.uRadius, r.edgeThickness * 1.5);
+          gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+        }
+      } finally {
+        if (ditherEnabled)
+          gl.enable(gl.DITHER);
+      }
+    }
+    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    gl.bindTexture(gl.TEXTURE_2D, texture);
+    gl.activeTexture(gl.TEXTURE1);
+    gl.bindTexture(gl.TEXTURE_2D, heightTexture);
+    gl.useProgram(program);
+    gl.uniform1i(state.uSource, 0);
+    gl.uniform1i(state.uHeight, 1);
+    gl.uniform2f(state.uResolution, width, height);
+    gl.uniform1f(state.uEdgeThickness, r.edgeThickness);
+    const angle = r.lightAngle % 360 * Math.PI / 180;
+    gl.uniform3f(state.uLightDirection, Math.sin(angle) * Math.SQRT1_2, -Math.cos(angle) * Math.SQRT1_2, Math.SQRT1_2);
+    const [red, green, blue, alpha] = state.cachedColorRgba;
+    gl.uniform3f(state.uLightColor, red / 255 * alpha / 255, green / 255 * alpha / 255, blue / 255 * alpha / 255);
+    gl.uniform1f(state.uLightIntensity, r.lightIntensity);
+    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+    gl.bindVertexArray(null);
+    gl.bindTexture(gl.TEXTURE_2D, null);
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, null);
+    gl.useProgram(null);
+  },
+  cleanup: (state) => {
+    const { gl } = state;
+    for (const texture of [
+      state.texture,
+      state.intermediate,
+      state.heightTexture
+    ])
+      gl.deleteTexture(texture);
+    for (const program of [
+      state.horizontal.program,
+      state.vertical.program,
+      state.program
+    ])
+      gl.deleteProgram(program);
+    gl.deleteFramebuffer(state.framebuffer);
+    gl.deleteBuffer(state.vbo);
+    gl.deleteVertexArray(state.vao);
+  },
+  schema: bevelAlphaSchema,
+  validateParams: validateBevelAlphaParams
+});
+export {
+  bevelAlpha
+};