@remotion/effects 4.0.513 → 4.0.515

package/dist/effect-internals.d.ts

@@ -0,0 +1,8 @@
+export declare const EffectInternals: {
+    readonly halftone: (params?: (import("./halftone.js").HalftoneParams & {
+        readonly disabled?: boolean | undefined;
+    }) | undefined) => import("remotion").EffectDescriptor<unknown>;
+    readonly tint: (params: import("./tint.js").TintParams & {
+        readonly disabled?: boolean | undefined;
+    }) => import("remotion").EffectDescriptor<unknown>;
+};

package/dist/entrypoints/blur.d.ts

@@ -0,0 +1,6 @@
+import * as blurExports from '../blur/index.js';
+export type { BlurParams } from '../blur/index.js';
+declare const blur: (params: blurExports.BlurParams & {
+    readonly disabled?: boolean | undefined;
+}) => import("remotion").EffectDescriptor<unknown>;
+export { blur };

package/dist/esm/outline.mjs

@@ -0,0 +1,703 @@
+// src/outline.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/outline/polygonize-alpha.ts
+var pointKey = ([x, y]) => `${x},${y}`;
+var edgeKey = (a, b) => a < b ? `${a}|${b}` : `${b}|${a}`;
+var squaredDistance = (a, b) => {
+  const dx = a[0] - b[0];
+  const dy = a[1] - b[1];
+  return dx * dx + dy * dy;
+};
+var squaredSegmentDistance = (point, start, end) => {
+  let x = start[0];
+  let y = start[1];
+  let dx = end[0] - x;
+  let dy = end[1] - y;
+  if (dx !== 0 || dy !== 0) {
+    const progress = ((point[0] - x) * dx + (point[1] - y) * dy) / (dx * dx + dy * dy);
+    if (progress > 1) {
+      x = end[0];
+      y = end[1];
+    } else if (progress > 0) {
+      x += dx * progress;
+      y += dy * progress;
+    }
+  }
+  dx = point[0] - x;
+  dy = point[1] - y;
+  return dx * dx + dy * dy;
+};
+var simplifyOpenContour = (points, toleranceSquared) => {
+  if (points.length <= 2) {
+    return [...points];
+  }
+  const keep = new Uint8Array(points.length);
+  keep[0] = 1;
+  keep[points.length - 1] = 1;
+  const stack = [[0, points.length - 1]];
+  while (stack.length > 0) {
+    const range = stack.pop();
+    if (!range) {
+      break;
+    }
+    const [startIndex, endIndex] = range;
+    let furthestIndex = -1;
+    let furthestDistance = toleranceSquared;
+    for (let index = startIndex + 1;index < endIndex; index++) {
+      const distance = squaredSegmentDistance(points[index], points[startIndex], points[endIndex]);
+      if (distance > furthestDistance) {
+        furthestDistance = distance;
+        furthestIndex = index;
+      }
+    }
+    if (furthestIndex !== -1) {
+      keep[furthestIndex] = 1;
+      stack.push([startIndex, furthestIndex], [furthestIndex, endIndex]);
+    }
+  }
+  return points.filter((_, index) => keep[index] === 1);
+};
+var simplifyClosedContour = (points, tolerance) => {
+  if (points.length <= 3 || tolerance <= 0) {
+    return [...points];
+  }
+  let oppositeIndex = 1;
+  let oppositeDistance = 0;
+  for (let index = 1;index < points.length; index++) {
+    const distance = squaredDistance(points[0], points[index]);
+    if (distance > oppositeDistance) {
+      oppositeDistance = distance;
+      oppositeIndex = index;
+    }
+  }
+  const firstHalf = points.slice(0, oppositeIndex + 1);
+  const secondHalf = [...points.slice(oppositeIndex), points[0]];
+  const toleranceSquared = tolerance * tolerance;
+  const simplified = [
+    ...simplifyOpenContour(firstHalf, toleranceSquared).slice(0, -1),
+    ...simplifyOpenContour(secondHalf, toleranceSquared).slice(0, -1)
+  ];
+  return simplified.length >= 3 ? simplified : [...points];
+};
+var polygonizeAlpha = ({
+  data,
+  width,
+  height,
+  simplification
+}) => {
+  const adjacency = new Map;
+  const points = new Map;
+  const addSegment = (a, b) => {
+    const aKey = pointKey(a);
+    const bKey = pointKey(b);
+    points.set(aKey, a);
+    points.set(bKey, b);
+    const aNeighbors = adjacency.get(aKey);
+    if (aNeighbors) {
+      aNeighbors.push(bKey);
+    } else {
+      adjacency.set(aKey, [bKey]);
+    }
+    const bNeighbors = adjacency.get(bKey);
+    if (bNeighbors) {
+      bNeighbors.push(aKey);
+    } else {
+      adjacency.set(bKey, [aKey]);
+    }
+  };
+  const isFilled = (x, y) => x >= 0 && y >= 0 && x < width && y < height && data[(y * width + x) * 4 + 3] > 0;
+  for (let y = -1;y < height; y++) {
+    for (let x = -1;x < width; x++) {
+      const configuration = (isFilled(x, y) ? 1 : 0) | (isFilled(x + 1, y) ? 2 : 0) | (isFilled(x + 1, y + 1) ? 4 : 0) | (isFilled(x, y + 1) ? 8 : 0);
+      if (configuration === 0 || configuration === 15) {
+        continue;
+      }
+      const top = [x * 2 + 2, y * 2 + 1];
+      const right = [x * 2 + 3, y * 2 + 2];
+      const bottom = [x * 2 + 2, y * 2 + 3];
+      const left = [x * 2 + 1, y * 2 + 2];
+      switch (configuration) {
+        case 1:
+        case 14:
+          addSegment(top, left);
+          break;
+        case 2:
+        case 13:
+          addSegment(top, right);
+          break;
+        case 3:
+        case 12:
+          addSegment(left, right);
+          break;
+        case 4:
+        case 11:
+          addSegment(right, bottom);
+          break;
+        case 5:
+          addSegment(top, left);
+          addSegment(right, bottom);
+          break;
+        case 6:
+        case 9:
+          addSegment(top, bottom);
+          break;
+        case 7:
+        case 8:
+          addSegment(bottom, left);
+          break;
+        case 10:
+          addSegment(top, right);
+          addSegment(bottom, left);
+          break;
+        default:
+          throw new Error(`Unexpected marching squares case: ${configuration}`);
+      }
+    }
+  }
+  const visitedEdges = new Set;
+  const contours = [];
+  for (const [start, neighbors] of adjacency) {
+    for (const firstNeighbor of neighbors) {
+      if (visitedEdges.has(edgeKey(start, firstNeighbor))) {
+        continue;
+      }
+      const contour = [start];
+      let previous = start;
+      let current = firstNeighbor;
+      visitedEdges.add(edgeKey(previous, current));
+      while (current !== start) {
+        contour.push(current);
+        const candidates = adjacency.get(current) ?? [];
+        const next = candidates.find((candidate) => candidate !== previous && !visitedEdges.has(edgeKey(current, candidate)));
+        if (!next) {
+          break;
+        }
+        previous = current;
+        current = next;
+        visitedEdges.add(edgeKey(previous, current));
+      }
+      if (current !== start || contour.length < 3) {
+        continue;
+      }
+      const decoded = contour.map((key) => {
+        const point = points.get(key);
+        if (!point) {
+          throw new Error(`Missing outline point: ${key}`);
+        }
+        return [point[0] / 2, point[1] / 2];
+      });
+      contours.push(simplifyClosedContour(decoded, simplification));
+    }
+  }
+  return contours;
+};
+
+// src/outline.ts
+var { createEffect, createWebGL2ContextError } = Internals;
+var DEFAULT_WIDTH = 8;
+var DEFAULT_EDGE_SIMPLIFICATION = 0;
+var DEFAULT_COLOR = "#ffffff";
+var DEFAULT_OPACITY = 1;
+var DEFAULT_OUTLINE_ONLY = false;
+var outlineSchema = {
+  width: {
+    type: "number",
+    min: 0,
+    max: 100,
+    step: 1,
+    default: DEFAULT_WIDTH,
+    description: "Width",
+    hiddenFromList: false
+  },
+  edgeSimplification: {
+    type: "number",
+    min: 0,
+    max: 100,
+    step: 1,
+    default: DEFAULT_EDGE_SIMPLIFICATION,
+    description: "Edge simplification",
+    hiddenFromList: false
+  },
+  color: {
+    type: "color",
+    default: DEFAULT_COLOR,
+    description: "Color"
+  },
+  opacity: {
+    type: "number",
+    min: 0,
+    max: 1,
+    step: 0.01,
+    default: DEFAULT_OPACITY,
+    description: "Opacity",
+    hiddenFromList: false
+  },
+  outlineOnly: {
+    type: "boolean",
+    default: DEFAULT_OUTLINE_ONLY,
+    description: "Outline only"
+  }
+};
+var resolve = (params) => ({
+  width: params.width ?? DEFAULT_WIDTH,
+  edgeSimplification: params.edgeSimplification ?? DEFAULT_EDGE_SIMPLIFICATION,
+  color: params.color ?? DEFAULT_COLOR,
+  opacity: params.opacity ?? DEFAULT_OPACITY,
+  outlineOnly: params.outlineOnly ?? DEFAULT_OUTLINE_ONLY
+});
+var validateOutlineParams = (params) => {
+  assertEffectParamsObject(params, "Outline");
+  assertOptionalFiniteNumber(params.width, "width");
+  assertOptionalFiniteNumber(params.edgeSimplification, "edgeSimplification");
+  assertOptionalColor(params.color, "color");
+  assertOptionalFiniteNumber(params.opacity, "opacity");
+  assertOptionalBoolean(params.outlineOnly, "outlineOnly");
+  const resolved = resolve(params);
+  validateNonNegative(resolved.width, "width");
+  validateNonNegative(resolved.edgeSimplification, "edgeSimplification");
+  validateUnitInterval(resolved.opacity, "opacity");
+};
+var OUTLINE_VS = `#version 300 es
+in vec2 aPos;
+in vec2 aUv;
+out vec2 vUv;
+
+void main() {
+	vUv = aUv;
+	gl_Position = vec4(aPos, 0.0, 1.0);
+}
+`;
+var OUTLINE_FS = `#version 300 es
+precision highp float;
+
+in vec2 vUv;
+out vec4 fragColor;
+
+uniform sampler2D uSource;
+uniform sampler2D uPolygonMask;
+uniform bool uUsePolygonMask;
+uniform float uWidth;
+uniform vec4 uColor;
+uniform float uOpacity;
+uniform bool uOutlineOnly;
+
+const float TAU = 6.283185307179586;
+const float MIN_ALPHA = 0.5 / 255.0;
+const int SAMPLE_DIRECTIONS = 32;
+const int SAMPLE_RINGS = 3;
+
+void main() {
+	vec4 source = texture(uSource, vUv);
+
+	if (uOpacity <= 0.0 || uColor.a <= 0.0) {
+		fragColor = uOutlineOnly ? vec4(0.0) : source;
+		return;
+	}
+
+	if (uWidth <= 0.0 && !uOutlineOnly) {
+		fragColor = source;
+		return;
+	}
+
+	float outlineMaskAlpha = 0.0;
+	if (uUsePolygonMask) {
+		outlineMaskAlpha = step(MIN_ALPHA, texture(uPolygonMask, vUv).a);
+	} else if (uWidth > 0.0) {
+		ivec2 sourceSize = textureSize(uSource, 0);
+		ivec2 sourcePosition = clamp(
+			ivec2(vUv * vec2(sourceSize)),
+			ivec2(0),
+			sourceSize - ivec2(1)
+		);
+		for (int ring = 1; ring <= SAMPLE_RINGS; ring++) {
+			float distancePx = uWidth * float(ring) / float(SAMPLE_RINGS);
+			for (int direction = 0; direction < SAMPLE_DIRECTIONS; direction++) {
+				float angle = TAU * float(direction) / float(SAMPLE_DIRECTIONS);
+				ivec2 offset = ivec2(round(
+					vec2(cos(angle), sin(angle)) * distancePx
+				));
+				ivec2 samplePosition = clamp(
+					sourcePosition + offset,
+					ivec2(0),
+					sourceSize - ivec2(1)
+				);
+				outlineMaskAlpha = max(
+					outlineMaskAlpha,
+					step(MIN_ALPHA, texelFetch(uSource, samplePosition, 0).a)
+				);
+			}
+		}
+	}
+
+	if (uOutlineOnly) {
+		float filledAlpha = (
+			uUsePolygonMask
+				? outlineMaskAlpha
+				: max(step(MIN_ALPHA, source.a), outlineMaskAlpha)
+		) * uColor.a * uOpacity;
+		fragColor = vec4(uColor.rgb * filledAlpha, filledAlpha);
+		return;
+	}
+
+	float outlineAlpha = outlineMaskAlpha * uColor.a * uOpacity * (1.0 - source.a);
+	vec3 outlineRgb = uColor.rgb * outlineAlpha;
+	fragColor = vec4(source.rgb + outlineRgb, source.a + outlineAlpha);
+}
+`;
+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(`Outline shader compile failed: ${log ?? "(no log)"}`);
+  }
+  return shader;
+};
+var createProgram = (gl) => {
+  const vertexShader = compileShader(gl, gl.VERTEX_SHADER, OUTLINE_VS);
+  const fragmentShader = compileShader(gl, gl.FRAGMENT_SHADER, OUTLINE_FS);
+  const program = gl.createProgram();
+  if (!program) {
+    throw new Error("Failed to create WebGL program");
+  }
+  gl.attachShader(program, vertexShader);
+  gl.attachShader(program, fragmentShader);
+  gl.linkProgram(program);
+  gl.deleteShader(vertexShader);
+  gl.deleteShader(fragmentShader);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    const log = gl.getProgramInfoLog(program);
+    gl.deleteProgram(program);
+    throw new Error(`Outline program link failed: ${log ?? "(no log)"}`);
+  }
+  return program;
+};
+var createTexture = (gl) => {
+  const texture = gl.createTexture();
+  if (!texture) {
+    throw new Error("Failed to create WebGL texture");
+  }
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+  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.bindTexture(gl.TEXTURE_2D, null);
+  return texture;
+};
+var updatePolygonMask = ({
+  source,
+  width,
+  height,
+  simplification,
+  outlineWidth,
+  state
+}) => {
+  if (state.alphaCanvas.width !== width || state.alphaCanvas.height !== height || state.polygonMaskCanvas.width !== width || state.polygonMaskCanvas.height !== height) {
+    state.alphaCanvas.width = width;
+    state.alphaCanvas.height = height;
+    state.polygonMaskCanvas.width = width;
+    state.polygonMaskCanvas.height = height;
+  }
+  state.alphaCtx.clearRect(0, 0, width, height);
+  state.alphaCtx.drawImage(source, 0, 0, width, height);
+  const imageData = state.alphaCtx.getImageData(0, 0, width, height);
+  const contours = polygonizeAlpha({
+    data: imageData.data,
+    width,
+    height,
+    simplification
+  });
+  const { polygonMaskCtx: context } = state;
+  context.clearRect(0, 0, width, height);
+  context.beginPath();
+  for (const contour of contours) {
+    if (contour.length < 3) {
+      continue;
+    }
+    context.moveTo(contour[0][0], contour[0][1]);
+    for (let index = 1;index < contour.length; index++) {
+      context.lineTo(contour[index][0], contour[index][1]);
+    }
+    context.closePath();
+  }
+  context.fillStyle = "white";
+  context.fill("evenodd");
+  if (outlineWidth > 0) {
+    context.strokeStyle = "white";
+    context.lineWidth = outlineWidth * 2;
+    context.lineJoin = "miter";
+    context.miterLimit = 4;
+    context.stroke();
+  }
+};
+var setupOutline = (target) => {
+  const gl = target.getContext("webgl2", {
+    premultipliedAlpha: true,
+    alpha: true,
+    preserveDrawingBuffer: true
+  });
+  if (!gl) {
+    throw createWebGL2ContextError("outline effect");
+  }
+  gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
+  const program = createProgram(gl);
+  const vao = gl.createVertexArray();
+  if (!vao) {
+    throw new Error("Failed to create WebGL vertex array");
+  }
+  gl.bindVertexArray(vao);
+  const vbo = gl.createBuffer();
+  if (!vbo) {
+    throw new Error("Failed to create WebGL buffer");
+  }
+  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);
+  const aPos = gl.getAttribLocation(program, "aPos");
+  const aUv = gl.getAttribLocation(program, "aUv");
+  gl.enableVertexAttribArray(aPos);
+  gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 16, 0);
+  gl.enableVertexAttribArray(aUv);
+  gl.vertexAttribPointer(aUv, 2, gl.FLOAT, false, 16, 8);
+  gl.bindVertexArray(null);
+  const textureSource = createTexture(gl);
+  const texturePolygonMask = createTexture(gl);
+  gl.bindTexture(gl.TEXTURE_2D, texturePolygonMask);
+  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array([0, 0, 0, 0]));
+  gl.bindTexture(gl.TEXTURE_2D, null);
+  const colorCanvas = target.ownerDocument.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");
+  }
+  const alphaCanvas = target.ownerDocument.createElement("canvas");
+  const alphaCtx = alphaCanvas.getContext("2d", { willReadFrequently: true });
+  if (!alphaCtx) {
+    throw new Error("Failed to acquire 2D context for outline extraction");
+  }
+  const polygonMaskCanvas = target.ownerDocument.createElement("canvas");
+  polygonMaskCanvas.width = 1;
+  polygonMaskCanvas.height = 1;
+  const polygonMaskCtx = polygonMaskCanvas.getContext("2d");
+  if (!polygonMaskCtx) {
+    throw new Error("Failed to acquire 2D context for outline mask");
+  }
+  return {
+    gl,
+    program,
+    vao,
+    vbo,
+    textureSource,
+    texturePolygonMask,
+    uniforms: {
+      uSource: gl.getUniformLocation(program, "uSource"),
+      uPolygonMask: gl.getUniformLocation(program, "uPolygonMask"),
+      uUsePolygonMask: gl.getUniformLocation(program, "uUsePolygonMask"),
+      uWidth: gl.getUniformLocation(program, "uWidth"),
+      uColor: gl.getUniformLocation(program, "uColor"),
+      uOpacity: gl.getUniformLocation(program, "uOpacity"),
+      uOutlineOnly: gl.getUniformLocation(program, "uOutlineOnly")
+    },
+    alphaCanvas,
+    alphaCtx,
+    polygonMaskCanvas,
+    polygonMaskCtx,
+    colorCtx,
+    cachedColor: "",
+    cachedColorRgba: [255, 255, 255, 255]
+  };
+};
+var outline = createEffect({
+  type: "remotion/outline",
+  label: "outline()",
+  documentationLink: "https://www.remotion.dev/docs/effects/outline",
+  backend: "webgl2",
+  calculateKey: (params) => {
+    const resolved = resolve(params);
+    return `outline-${resolved.width}-${resolved.edgeSimplification}-${resolved.color}-${resolved.opacity}-${resolved.outlineOnly}`;
+  },
+  setup: setupOutline,
+  apply: ({ source, width, height, params, state, flipSourceY }) => {
+    const resolved = resolve(params);
+    if (state.cachedColor !== resolved.color) {
+      state.cachedColor = resolved.color;
+      state.cachedColorRgba = parseColorRgba(state.colorCtx, resolved.color);
+    }
+    const { gl, program, textureSource, texturePolygonMask, uniforms, vao } = state;
+    const [red, green, blue, alpha] = state.cachedColorRgba;
+    const usePolygonMask = resolved.edgeSimplification > 0 && resolved.opacity > 0 && alpha > 0 && (resolved.width > 0 || resolved.outlineOnly);
+    if (usePolygonMask) {
+      updatePolygonMask({
+        source,
+        width,
+        height,
+        simplification: resolved.edgeSimplification,
+        outlineWidth: resolved.width,
+        state
+      });
+    }
+    gl.viewport(0, 0, width, height);
+    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    gl.clearColor(0, 0, 0, 0);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, textureSource);
+    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipSourceY);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
+    gl.activeTexture(gl.TEXTURE1);
+    gl.bindTexture(gl.TEXTURE_2D, texturePolygonMask);
+    if (usePolygonMask) {
+      gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
+      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, state.polygonMaskCanvas);
+    }
+    gl.useProgram(program);
+    if (uniforms.uSource)
+      gl.uniform1i(uniforms.uSource, 0);
+    if (uniforms.uPolygonMask)
+      gl.uniform1i(uniforms.uPolygonMask, 1);
+    if (uniforms.uUsePolygonMask)
+      gl.uniform1i(uniforms.uUsePolygonMask, usePolygonMask ? 1 : 0);
+    if (uniforms.uWidth)
+      gl.uniform1f(uniforms.uWidth, resolved.width);
+    if (uniforms.uColor)
+      gl.uniform4f(uniforms.uColor, red / 255, green / 255, blue / 255, alpha / 255);
+    if (uniforms.uOpacity)
+      gl.uniform1f(uniforms.uOpacity, resolved.opacity);
+    if (uniforms.uOutlineOnly)
+      gl.uniform1i(uniforms.uOutlineOnly, resolved.outlineOnly ? 1 : 0);
+    gl.bindVertexArray(vao);
+    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+    gl.bindVertexArray(null);
+    gl.activeTexture(gl.TEXTURE1);
+    gl.bindTexture(gl.TEXTURE_2D, null);
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, null);
+    gl.useProgram(null);
+  },
+  cleanup: ({ gl, program, vao, vbo, textureSource, texturePolygonMask }) => {
+    gl.deleteTexture(textureSource);
+    gl.deleteTexture(texturePolygonMask);
+    gl.deleteBuffer(vbo);
+    gl.deleteProgram(program);
+    gl.deleteVertexArray(vao);
+  },
+  schema: outlineSchema,
+  validateParams: validateOutlineParams
+});
+export {
+  outlineSchema,
+  outline
+};