@remotion/effects 4.0.538 → 4.0.539

package/dist/esm/shatter.mjs

@@ -0,0 +1,888 @@
+// src/shatter/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/shatter/geometry.ts
+var signedTriangleArea = (a, b, c) => (b[0] - a[0]) * (c[1] - a[1]) - (b[1] - a[1]) * (c[0] - a[0]);
+var hash = (x, y, seed) => {
+  let h = Math.imul(x, 2376512323) ^ Math.imul(y, 3625334849) ^ Math.imul(seed, 3407524639);
+  h ^= h >>> 13;
+  h = Math.imul(h, 1540483477);
+  h ^= h >>> 15;
+  return (h & 16777215) / 16777216;
+};
+function* patternCells(pattern, cell, x0, y0, x1, y1, seed) {
+  const i0 = Math.floor(x0 / cell) - 1;
+  const i1 = Math.ceil(x1 / cell) + 1;
+  const j0 = Math.floor(y0 / cell) - 1;
+  const j1 = Math.ceil(y1 / cell) + 1;
+  if (pattern === "bricks") {
+    const brickHeight = cell / 2;
+    const row0 = Math.floor(y0 / brickHeight) - 1;
+    const row1 = Math.ceil(y1 / brickHeight) + 1;
+    for (let row = row0;row <= row1; row++) {
+      const shift = Math.abs(row % 2) * cell * 0.5;
+      for (let i = i0;i <= i1; i++) {
+        const x = i * cell + shift;
+        const y = row * brickHeight;
+        yield [
+          [x, y],
+          [x + cell * 0.5, y],
+          [x + cell, y],
+          [x + cell, y + brickHeight],
+          [x + cell * 0.5, y + brickHeight],
+          [x, y + brickHeight]
+        ];
+      }
+    }
+    return;
+  }
+  if (pattern === "hexagons") {
+    const radius = cell / Math.sqrt(3);
+    const dx = 1.5 * radius;
+    const col0 = Math.floor(x0 / dx) - 1;
+    const col1 = Math.ceil(x1 / dx) + 1;
+    for (let col = col0;col <= col1; col++) {
+      for (let row = j0;row <= j1; row++) {
+        const cx = col * dx;
+        const cy = (row + Math.abs(col % 2) * 0.5) * cell;
+        yield Array.from({ length: 6 }, (_, k) => {
+          const angle = k * Math.PI / 3;
+          return [cx + radius * Math.cos(angle), cy + radius * Math.sin(angle)];
+        });
+      }
+    }
+    return;
+  }
+  const jitter = (i, j) => [
+    i * cell + (hash(i, j + 17, seed) * 2 - 1) * cell * 0.35,
+    j * cell + (hash(i, j + 91, seed) * 2 - 1) * cell * 0.35
+  ];
+  for (let j = j0;j <= j1; j++) {
+    for (let i = i0;i <= i1; i++) {
+      const x = i * cell;
+      const y = j * cell;
+      const a = pattern === "glass" ? jitter(i, j) : [x, y];
+      const b = pattern === "glass" ? jitter(i + 1, j) : [x + cell, y];
+      const c = pattern === "glass" ? jitter(i + 1, j + 1) : [x + cell, y + cell];
+      const d = pattern === "glass" ? jitter(i, j + 1) : [x, y + cell];
+      const acValid = signedTriangleArea(a, b, c) > 0 && signedTriangleArea(a, c, d) > 0;
+      const bdValid = signedTriangleArea(a, b, d) > 0 && signedTriangleArea(b, c, d) > 0;
+      if (pattern === "squares") {
+        yield [a, b, c, d];
+      } else if (pattern === "glass" ? acValid && (!bdValid || hash(i, j, seed ^ 85) < 0.5) : Math.abs((i + j) % 2) === 1) {
+        yield [a, b, c];
+        yield [a, c, d];
+      } else {
+        yield [a, b, d];
+        yield [b, c, d];
+      }
+    }
+  }
+}
+var clipPolygon = (input, width, height) => {
+  let polygon = input;
+  for (let boundary = 0;boundary < 4; boundary++) {
+    const axis = boundary < 2 ? 0 : 1;
+    const limit = boundary % 2 === 0 ? 0 : axis === 0 ? width : height;
+    const sign = boundary % 2 === 0 ? 1 : -1;
+    const output = [];
+    for (let i = 0;i < polygon.length; i++) {
+      const a = polygon[i];
+      const b = polygon[(i + 1) % polygon.length];
+      const aInside = (a[axis] - limit) * sign >= 0;
+      const bInside = (b[axis] - limit) * sign >= 0;
+      if (aInside) {
+        output.push(a);
+      }
+      if (aInside !== bInside) {
+        const fraction = (limit - a[axis]) / (b[axis] - a[axis]);
+        const intersection = [
+          a[0] + (b[0] - a[0]) * fraction,
+          a[1] + (b[1] - a[1]) * fraction
+        ];
+        intersection[axis] = limit;
+        output.push(intersection);
+      }
+    }
+    polygon = output;
+  }
+  return polygon;
+};
+var createShatterGeometry = (width, height, params) => {
+  const identity = new Float32Array([
+    0,
+    0,
+    0,
+    0,
+    0,
+    1,
+    0,
+    width,
+    0,
+    0,
+    1,
+    0,
+    1,
+    0,
+    width,
+    height,
+    0,
+    1,
+    1,
+    1,
+    0,
+    0,
+    0,
+    0,
+    0,
+    0,
+    1,
+    0,
+    width,
+    height,
+    0,
+    1,
+    1,
+    1,
+    0,
+    0,
+    height,
+    0,
+    0,
+    1,
+    1,
+    0
+  ]);
+  if (params.time === 0 || params.radius <= Math.abs(params.depth) || params.strength === 0 && params.randomness === 0 && params.gravity === 0) {
+    return identity;
+  }
+  const direction = params.direction % 360 * Math.PI / 180;
+  const sin = Math.sin(direction);
+  const cos = Math.cos(direction);
+  const originX = (Math.abs(params.origin[0]) > 1e6 ? params.origin[0] % 1 : params.origin[0]) * width;
+  const originY = (Math.abs(params.origin[1]) > 1e6 ? params.origin[1] % 1 : params.origin[1]) * height;
+  const corners = [
+    [0, 0],
+    [width, 0],
+    [width, height],
+    [0, height]
+  ].map(([x, y]) => [
+    (x - originX) * cos + (y - originY) * sin,
+    -(x - originX) * sin + (y - originY) * cos
+  ]);
+  const x0 = Math.min(...corners.map((point) => point[0]));
+  const x1 = Math.max(...corners.map((point) => point[0]));
+  const y0 = Math.min(...corners.map((point) => point[1]));
+  const y1 = Math.max(...corners.map((point) => point[1]));
+  let cell = Math.max(width / params.repetitions, Math.sqrt((x1 - x0) * (y1 - y0) / 20000), Math.max(x1 - x0, y1 - y0) / 1e4);
+  while (2 * (Math.ceil((x1 - x0) / cell) + 5) * (Math.ceil((y1 - y0) / cell) + 5) > 50000) {
+    cell *= 1.1;
+  }
+  const seed = Math.imul(params.seed, 2654435761);
+  const unit = width * 0.1;
+  const drag = params.viscosity * 5;
+  const { time } = params;
+  const velocityFactor = drag < 0.000001 ? time : -Math.expm1(-drag * time) / drag;
+  const gravityFactor = drag < 0.000001 ? time * time / 2 : drag * time < 0.001 ? time * time * (0.5 - drag * time / 6 + (drag * time) ** 2 / 24) : (time - velocityFactor) / drag;
+  const radius = params.radius * width;
+  const depth = params.depth * width;
+  const centerX = params.center[0] * width;
+  const centerY = params.center[1] * height;
+  const extrusion = params.extrusionDepth * cell;
+  const cameraDistance = Math.max(width, height) * 2;
+  const faces = [];
+  let key = 0;
+  let anyMoving = false;
+  for (const patternPolygon of patternCells(params.pattern, cell, x0, y0, x1, y1, seed)) {
+    const index = key++;
+    const sourcePolygon = patternPolygon.map(([x, y]) => [
+      originX + x * cos - y * sin,
+      originY + x * sin + y * cos
+    ]);
+    const polygon = clipPolygon(sourcePolygon, width, height);
+    if (polygon.length < 3) {
+      continue;
+    }
+    const cx = sourcePolygon.reduce((sum, point) => sum + point[0], 0) / sourcePolygon.length;
+    const cy = sourcePolygon.reduce((sum, point) => sum + point[1], 0) / sourcePolygon.length;
+    const dx = cx - centerX;
+    const dy = cy - centerY;
+    const distance = Math.hypot(dx, dy, depth);
+    const broken = distance < radius;
+    let px = cx;
+    let py = cy;
+    let pz = 0;
+    let rotation = [1, 0, 0, 0, 1, 0, 0, 0, 1];
+    if (broken) {
+      const force = params.strength * (1 - distance / radius) * unit / Math.max(distance, 0.000001);
+      const mass = Math.max(0.001, 1 + params.massVariance * (hash(index, 1, seed) * 2 - 1));
+      const vx = dx * force / mass + params.randomness * unit * (hash(index, 2, seed) * 2 - 1) * 2;
+      const vy = dy * force / mass + params.randomness * unit * (hash(index, 3, seed) * 2 - 1) * 2;
+      const vz = depth * force / mass + params.randomness * unit * (hash(index, 4, seed) * 2 - 1) * 2;
+      px += vx * velocityFactor;
+      py += vy * velocityFactor + params.gravity * unit * gravityFactor;
+      pz += vz * velocityFactor;
+      const axis = [
+        hash(index, 6, seed) * 2 - 1,
+        hash(index, 7, seed) * 2 - 1,
+        hash(index, 8, seed) * 2 - 1
+      ];
+      const axisLength = Math.hypot(...axis);
+      const speed = Math.min(10, Math.hypot(vx, vy, vz) / unit);
+      const angle = params.rotationSpeed * Math.PI * 2 * (0.5 + hash(index, 9, seed)) * speed * velocityFactor;
+      if (axisLength > 0.000000000001 && angle !== 0) {
+        const [x, y, z] = axis.map((value) => value / axisLength);
+        const s = Math.sin(angle);
+        const c = Math.cos(angle);
+        const t = 1 - c;
+        rotation = [
+          t * x * x + c,
+          t * x * y - s * z,
+          t * x * z + s * y,
+          t * x * y + s * z,
+          t * y * y + c,
+          t * y * z - s * x,
+          t * x * z - s * y,
+          t * y * z + s * x,
+          t * z * z + c
+        ];
+      }
+    }
+    const moving = px !== cx || py !== cy || pz !== 0 || rotation.some((value, axisIndex) => value !== (axisIndex % 4 === 0 ? 1 : 0));
+    anyMoving ||= moving;
+    const shade = moving ? 0.25 + 0.75 * Math.abs(rotation[8]) : 1;
+    const vertices = polygon.map(([x, y]) => [
+      px + rotation[0] * (x - cx) + rotation[1] * (y - cy),
+      py + rotation[3] * (x - cx) + rotation[4] * (y - cy),
+      pz + rotation[6] * (x - cx) + rotation[7] * (y - cy),
+      x / width,
+      y / height,
+      shade,
+      0
+    ]);
+    if (vertices.some((vertex) => vertex.some((value) => !Number.isFinite(value) || Math.abs(value) > 1000000000000000000000000000000))) {
+      continue;
+    }
+    faces.push({
+      depth: vertices.reduce((sum, vertex) => sum + vertex[2], 0) / vertices.length,
+      vertices
+    });
+    if (!moving || extrusion === 0) {
+      continue;
+    }
+    for (let edge = 0;edge < polygon.length; edge++) {
+      const a = polygon[edge];
+      const b = polygon[(edge + 1) % polygon.length];
+      const edgeX = b[0] - a[0];
+      const edgeY = b[1] - a[1];
+      const length = Math.hypot(edgeX, edgeY);
+      if (length < 0.000001) {
+        continue;
+      }
+      const nx = (rotation[0] * edgeY - rotation[1] * edgeX) / length;
+      const ny = (rotation[3] * edgeY - rotation[4] * edgeX) / length;
+      const nz = (rotation[6] * edgeY - rotation[7] * edgeX) / length;
+      const frontA = vertices[edge];
+      const frontB = vertices[(edge + 1) % vertices.length];
+      const mx = (frontA[0] + frontB[0] + rotation[2] * extrusion) / 2;
+      const my = (frontA[1] + frontB[1] + rotation[5] * extrusion) / 2;
+      const mz = (frontA[2] + frontB[2] + rotation[8] * extrusion) / 2;
+      if (nx * (width / 2 - mx) + ny * (height / 2 - my) + nz * (-cameraDistance - mz) <= 0) {
+        continue;
+      }
+      const au = a[0] / width;
+      const av = a[1] / height;
+      const bu = b[0] / width;
+      const bv = b[1] / height;
+      const sideShade = 0.25 + 0.75 * Math.abs(nz);
+      const sideVertices = [
+        [frontA[0], frontA[1], frontA[2], au, av, sideShade, 1],
+        [frontB[0], frontB[1], frontB[2], bu, bv, sideShade, 1],
+        [
+          frontB[0] + rotation[2] * extrusion,
+          frontB[1] + rotation[5] * extrusion,
+          frontB[2] + rotation[8] * extrusion,
+          bu,
+          bv,
+          sideShade,
+          1
+        ],
+        [
+          frontA[0] + rotation[2] * extrusion,
+          frontA[1] + rotation[5] * extrusion,
+          frontA[2] + rotation[8] * extrusion,
+          au,
+          av,
+          sideShade,
+          1
+        ]
+      ];
+      if (sideVertices.every((vertex) => vertex.every((value) => Number.isFinite(value) && Math.abs(value) < 1000000000000000000000000000000))) {
+        faces.push({ depth: mz, vertices: sideVertices });
+      }
+    }
+  }
+  if (!anyMoving) {
+    return identity;
+  }
+  faces.sort((a, b) => b.depth - a.depth);
+  const floatCount = faces.reduce((sum, face) => {
+    const centered = params.pattern === "bricks" && face.vertices[0][6] === 0;
+    return sum + (face.vertices.length - (centered ? 0 : 2)) * 3 * 7;
+  }, 0);
+  const output = new Float32Array(floatCount);
+  let offset = 0;
+  for (const face of faces) {
+    const centered = params.pattern === "bricks" && face.vertices[0][6] === 0;
+    const center = centered ? face.vertices[0].map((_, component) => face.vertices.reduce((sum, vertex) => sum + vertex[component], 0) / face.vertices.length) : face.vertices[0];
+    const triangleCount = face.vertices.length - (centered ? 0 : 2);
+    for (let i = 0;i < triangleCount; i++) {
+      const start = centered ? i : i + 1;
+      for (const vertex of [
+        center,
+        face.vertices[start],
+        face.vertices[(start + 1) % face.vertices.length]
+      ]) {
+        output.set(vertex, offset);
+        offset += 7;
+      }
+    }
+  }
+  return output;
+};
+
+// src/shatter/runtime.ts
+var VERTEX_SHADER = `#version 300 es
+layout(location = 0) in vec3 aPosition;
+layout(location = 1) in vec2 aUv;
+layout(location = 2) in float aShade;
+layout(location = 3) in float aSide;
+
+uniform vec2 uResolution;
+
+out vec2 vUv;
+out float vShade;
+out float vSide;
+
+void main() {
+	float distance = max(uResolution.x, uResolution.y) * 2.0;
+	float near = distance * 0.05;
+	float w = distance + aPosition.z;
+	vec2 position = vec2(
+		(aPosition.x - uResolution.x * 0.5) * 2.0 / uResolution.x,
+		(uResolution.y * 0.5 - aPosition.y) * 2.0 / uResolution.y
+	);
+	// Keep homogeneous coordinates so WebGL clips shards at the near plane
+	// and interpolates their texture coordinates with perspective correction.
+	gl_Position = vec4(position * distance, w - 2.0 * near, w);
+	vUv = vec2(aUv.x, 1.0 - aUv.y);
+	vShade = aShade;
+	vSide = aSide;
+}
+`;
+var FRAGMENT_SHADER = `#version 300 es
+precision highp float;
+
+uniform sampler2D uSource;
+
+in vec2 vUv;
+in float vShade;
+in float vSide;
+out vec4 fragColor;
+
+void main() {
+	vec4 source = texture(uSource, vUv);
+	// The sides inherit the source alpha at the shard edge. A transparent
+	// image must not acquire opaque geometry when extrusion is enabled.
+	vec3 color = mix(source.rgb, vec3(source.a), vSide);
+	fragColor = vec4(color * vShade, source.a);
+}
+`;
+var compileShader = (gl, type, source) => {
+  const shader = gl.createShader(type);
+  if (!shader) {
+    throw new Error("Failed to create Shatter 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(`Shatter shader compile failed: ${log ?? "(no log)"}`);
+  }
+  return shader;
+};
+var setupShatter = (gl) => {
+  const program = gl.createProgram();
+  const vao = gl.createVertexArray();
+  const vbo = gl.createBuffer();
+  const texture = gl.createTexture();
+  const shaders = [];
+  try {
+    if (!program || !vao || !vbo || !texture) {
+      throw new Error("Failed to create Shatter WebGL resources");
+    }
+    shaders.push(compileShader(gl, gl.VERTEX_SHADER, VERTEX_SHADER));
+    shaders.push(compileShader(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER));
+    for (const shader of shaders) {
+      gl.attachShader(program, shader);
+    }
+    gl.linkProgram(program);
+    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+      throw new Error(`Shatter program link failed: ${gl.getProgramInfoLog(program) ?? "(no log)"}`);
+    }
+    gl.bindVertexArray(vao);
+    gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
+    gl.enableVertexAttribArray(0);
+    gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 28, 0);
+    gl.enableVertexAttribArray(1);
+    gl.vertexAttribPointer(1, 2, gl.FLOAT, false, 28, 12);
+    gl.enableVertexAttribArray(2);
+    gl.vertexAttribPointer(2, 1, gl.FLOAT, false, 28, 20);
+    gl.enableVertexAttribArray(3);
+    gl.vertexAttribPointer(3, 1, gl.FLOAT, false, 28, 24);
+    gl.bindVertexArray(null);
+    gl.bindBuffer(gl.ARRAY_BUFFER, null);
+    gl.bindTexture(gl.TEXTURE_2D, texture);
+    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);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+    gl.bindTexture(gl.TEXTURE_2D, null);
+    return {
+      gl,
+      program,
+      vao,
+      vbo,
+      texture,
+      uSource: gl.getUniformLocation(program, "uSource"),
+      uResolution: gl.getUniformLocation(program, "uResolution")
+    };
+  } catch (error) {
+    gl.deleteTexture(texture);
+    gl.deleteBuffer(vbo);
+    gl.deleteVertexArray(vao);
+    gl.deleteProgram(program);
+    throw error;
+  } finally {
+    for (const shader of shaders) {
+      gl.deleteShader(shader);
+    }
+  }
+};
+var drawShatter = ({
+  state,
+  source,
+  width,
+  height,
+  flipSourceY,
+  vertices
+}) => {
+  const { gl, program, vao, vbo, texture, uSource, uResolution } = state;
+  gl.viewport(0, 0, width, height);
+  gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+  gl.disable(gl.DEPTH_TEST);
+  gl.disable(gl.CULL_FACE);
+  gl.clearColor(0, 0, 0, 0);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+  gl.enable(gl.BLEND);
+  gl.blendEquation(gl.FUNC_ADD);
+  gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+  gl.useProgram(program);
+  gl.bindVertexArray(vao);
+  gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
+  gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.DYNAMIC_DRAW);
+  gl.activeTexture(gl.TEXTURE0);
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+  gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
+  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipSourceY);
+  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
+  gl.uniform1i(uSource, 0);
+  gl.uniform2f(uResolution, width, height);
+  gl.drawArrays(gl.TRIANGLES, 0, vertices.length / 7);
+  gl.bindVertexArray(null);
+  gl.bindBuffer(gl.ARRAY_BUFFER, null);
+  gl.bindTexture(gl.TEXTURE_2D, null);
+  gl.useProgram(null);
+  gl.disable(gl.BLEND);
+};
+var cleanupShatter = ({
+  gl,
+  program,
+  vao,
+  vbo,
+  texture
+}) => {
+  gl.deleteTexture(texture);
+  gl.deleteBuffer(vbo);
+  gl.deleteVertexArray(vao);
+  gl.deleteProgram(program);
+};
+
+// src/shatter/index.ts
+var { createEffect, createWebGL2ContextError } = Internals;
+var DEFAULT_TIME = 0.5;
+var DEFAULT_PATTERN = "bricks";
+var DEFAULT_REPETITIONS = 10;
+var DEFAULT_DIRECTION = 0;
+var DEFAULT_ORIGIN = [0.5, 0.5];
+var DEFAULT_CENTER = [0.5, 0.5];
+var DEFAULT_RADIUS = 0.4;
+var DEFAULT_DEPTH = 0.1;
+var DEFAULT_STRENGTH = 5;
+var DEFAULT_ROTATION_SPEED = 0.2;
+var DEFAULT_RANDOMNESS = 0.1;
+var DEFAULT_VISCOSITY = 0.1;
+var DEFAULT_MASS_VARIANCE = 0.3;
+var DEFAULT_GRAVITY = 3;
+var DEFAULT_SEED = 0;
+var DEFAULT_EXTRUSION_DEPTH = 0.05;
+var shatterSchema = {
+  time: {
+    type: "number",
+    min: 0,
+    max: 5,
+    step: 0.01,
+    default: DEFAULT_TIME,
+    description: "Time",
+    hiddenFromList: false
+  },
+  pattern: {
+    type: "enum",
+    variants: { bricks: {}, glass: {}, hexagons: {}, squares: {}, triangles: {} },
+    default: DEFAULT_PATTERN,
+    description: "Pattern"
+  },
+  repetitions: {
+    type: "number",
+    min: 1,
+    max: 100,
+    step: 1,
+    default: DEFAULT_REPETITIONS,
+    description: "Repetitions",
+    hiddenFromList: false
+  },
+  direction: {
+    type: "rotation-degrees",
+    step: 1,
+    default: DEFAULT_DIRECTION,
+    description: "Pattern direction"
+  },
+  origin: {
+    type: "uv-coordinate",
+    step: 0.01,
+    default: DEFAULT_ORIGIN,
+    description: "Pattern origin"
+  },
+  center: {
+    type: "uv-coordinate",
+    step: 0.01,
+    default: DEFAULT_CENTER,
+    description: "Force center"
+  },
+  radius: {
+    type: "number",
+    min: 0,
+    max: 2,
+    step: 0.01,
+    default: DEFAULT_RADIUS,
+    description: "Force radius",
+    hiddenFromList: false
+  },
+  depth: {
+    type: "number",
+    min: -1,
+    max: 1,
+    step: 0.01,
+    default: DEFAULT_DEPTH,
+    description: "Force depth",
+    hiddenFromList: false
+  },
+  strength: {
+    type: "number",
+    min: -20,
+    max: 20,
+    step: 0.1,
+    default: DEFAULT_STRENGTH,
+    description: "Force strength",
+    hiddenFromList: false
+  },
+  rotationSpeed: {
+    type: "number",
+    min: 0,
+    max: 5,
+    step: 0.01,
+    default: DEFAULT_ROTATION_SPEED,
+    description: "Rotation speed",
+    hiddenFromList: false
+  },
+  randomness: {
+    type: "number",
+    min: 0,
+    max: 1,
+    step: 0.01,
+    default: DEFAULT_RANDOMNESS,
+    description: "Randomness",
+    hiddenFromList: false
+  },
+  viscosity: {
+    type: "number",
+    min: 0,
+    max: 1,
+    step: 0.01,
+    default: DEFAULT_VISCOSITY,
+    description: "Viscosity",
+    hiddenFromList: false
+  },
+  massVariance: {
+    type: "number",
+    min: 0,
+    max: 1,
+    step: 0.01,
+    default: DEFAULT_MASS_VARIANCE,
+    description: "Mass variance",
+    hiddenFromList: false
+  },
+  gravity: {
+    type: "number",
+    min: 0,
+    max: 10,
+    step: 0.1,
+    default: DEFAULT_GRAVITY,
+    description: "Gravity",
+    hiddenFromList: false
+  },
+  seed: {
+    type: "number",
+    integer: true,
+    min: 0,
+    max: 4294967295,
+    step: 1,
+    default: DEFAULT_SEED,
+    description: "Random seed",
+    hiddenFromList: false
+  },
+  extrusionDepth: {
+    type: "number",
+    min: 0,
+    max: 1,
+    step: 0.01,
+    default: DEFAULT_EXTRUSION_DEPTH,
+    description: "Extrusion depth",
+    hiddenFromList: false
+  }
+};
+var resolve = (params) => ({
+  time: params.time ?? DEFAULT_TIME,
+  pattern: params.pattern ?? DEFAULT_PATTERN,
+  repetitions: params.repetitions ?? DEFAULT_REPETITIONS,
+  direction: params.direction ?? DEFAULT_DIRECTION,
+  origin: params.origin ?? DEFAULT_ORIGIN,
+  center: params.center ?? DEFAULT_CENTER,
+  radius: params.radius ?? DEFAULT_RADIUS,
+  depth: params.depth ?? DEFAULT_DEPTH,
+  strength: params.strength ?? DEFAULT_STRENGTH,
+  rotationSpeed: params.rotationSpeed ?? DEFAULT_ROTATION_SPEED,
+  randomness: params.randomness ?? DEFAULT_RANDOMNESS,
+  viscosity: params.viscosity ?? DEFAULT_VISCOSITY,
+  massVariance: params.massVariance ?? DEFAULT_MASS_VARIANCE,
+  gravity: params.gravity ?? DEFAULT_GRAVITY,
+  seed: params.seed ?? DEFAULT_SEED,
+  extrusionDepth: params.extrusionDepth ?? DEFAULT_EXTRUSION_DEPTH
+});
+var shatter = createEffect({
+  type: "remotion/shatter",
+  label: "shatter()",
+  documentationLink: "https://www.remotion.dev/docs/effects/shatter",
+  backend: "webgl2",
+  schema: shatterSchema,
+  validateParams: (params) => {
+    assertEffectParamsObject(params, "Shatter");
+    for (const name of [
+      "time",
+      "repetitions",
+      "direction",
+      "radius",
+      "depth",
+      "strength",
+      "rotationSpeed",
+      "randomness",
+      "viscosity",
+      "massVariance",
+      "gravity",
+      "seed",
+      "extrusionDepth"
+    ]) {
+      assertOptionalFiniteNumber(params[name], name);
+    }
+    for (const name of ["origin", "center"]) {
+      const value = params[name];
+      if (value !== undefined && (!Array.isArray(value) || value.length !== 2 || !Number.isFinite(value[0]) || !Number.isFinite(value[1]))) {
+        throw new TypeError(`"${name}" must contain two finite numbers`);
+      }
+    }
+    const r = resolve(params);
+    if (params.pattern !== undefined && (typeof params.pattern !== "string" || !Object.hasOwn(shatterSchema.pattern.variants, params.pattern))) {
+      throw new TypeError('"pattern" must be "bricks", "glass", "hexagons", "squares", or "triangles"');
+    }
+    if (r.repetitions < 1 || r.repetitions > 100) {
+      throw new TypeError('"repetitions" must be between 1 and 100');
+    }
+    for (const name of [
+      "time",
+      "radius",
+      "rotationSpeed",
+      "gravity"
+    ]) {
+      validateNonNegative(r[name], name);
+    }
+    for (const name of [
+      "randomness",
+      "viscosity",
+      "massVariance",
+      "extrusionDepth"
+    ]) {
+      validateUnitInterval(r[name], name);
+    }
+    if (!Number.isInteger(r.seed) || r.seed < 0 || r.seed > 4294967295) {
+      throw new TypeError('"seed" must be an integer from 0 to 4294967295');
+    }
+  },
+  calculateKey: (params) => `shatter-${JSON.stringify(resolve(params))}`,
+  setup: (target) => {
+    const gl = target.getContext("webgl2", {
+      premultipliedAlpha: true,
+      alpha: true,
+      preserveDrawingBuffer: true
+    });
+    if (!gl) {
+      throw createWebGL2ContextError("shatter effect");
+    }
+    return { ...setupShatter(gl), geometryKey: null, vertices: null };
+  },
+  apply: ({ source, width, height, params, state, flipSourceY }) => {
+    const r = resolve(params);
+    const geometryKey = `${width}:${height}:${JSON.stringify(r)}`;
+    if (state.geometryKey !== geometryKey || state.vertices === null) {
+      state.vertices = createShatterGeometry(width, height, r);
+      state.geometryKey = geometryKey;
+    }
+    drawShatter({
+      state,
+      source,
+      width,
+      height,
+      flipSourceY,
+      vertices: state.vertices
+    });
+  },
+  cleanup: cleanupShatter
+});
+export {
+  shatter
+};