@remotion/effects 4.0.541 → 4.0.543

package/dist/esm/preview/outline.mjs

@@ -0,0 +1,725 @@
+import {
+  WEBGPU_MULTIPASS_BINDINGS,
+  setupWebGpuMultipass,
+  cleanupWebGpuMultipass,
+  applyWebGpuMultipass
+} from "./index-kkvzt8b7.mjs";
+import {
+  assertOptionalFiniteNumber,
+  validateUnitInterval,
+  validateNonNegative,
+  parseColorRgba
+} from "./index-wxhvgv2s.mjs";
+import {
+  assertEffectParamsObject,
+  assertOptionalColor,
+  assertOptionalBoolean
+} from "./index-4fvp93ps.mjs";
+
+// src/outline.ts
+import { Internals } from "remotion";
+
+// 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/webgpu-shader.ts
+var OUTLINE_WEBGPU_SHADER = `
+${WEBGPU_MULTIPASS_BINDINGS}
+struct Params {color: vec4f, width: f32, opacity: f32, outlineOnly: f32, polygon: f32,}
+const MIN_ALPHA=0.5/255.0;
+@fragment fn fragment(input: VertexOutput) -> @location(0) vec4f {
+ let color=textureSampleLevel(source,sourceSampler,input.uv,0);
+ let only=params.outlineOnly!=0.0;
+ if (params.opacity<=0.0 || params.color.a<=0.0) {return select(color,vec4f(0),only);}
+ if (params.width<=0.0 && !only) {return color;}
+ var mask=0.0;
+ if (params.polygon!=0.0) {
+  mask=step(MIN_ALPHA,textureSampleLevel(secondary,sourceSampler,input.uv,0).a);
+ } else if (params.width>0.0) {
+  let size=vec2i(textureDimensions(source));
+  let position=clamp(vec2i(input.uv*vec2f(size)),vec2i(0),size-1);
+  for (var ring=1;ring<=3;ring++) {
+   let distance=params.width*f32(ring)/3.0;
+   for (var direction=0;direction<32;direction++) {
+    let angle=6.283185307179586*f32(direction)/32.0;
+    let offset=vec2i(round(vec2f(cos(angle),-sin(angle))*distance));
+    let samplePosition=clamp(position+offset,vec2i(0),size-1);
+    mask=max(mask,step(MIN_ALPHA,textureLoad(source,samplePosition,0).a));
+   }
+  }
+ }
+ if (only) {
+  let alpha=select(max(step(MIN_ALPHA,color.a),mask),mask,params.polygon!=0.0)*params.color.a*params.opacity;
+  return vec4f(params.color.rgb*alpha,alpha);
+ }
+ let alpha=mask*params.color.a*params.opacity*(1.0-color.a);
+ return vec4f(color.rgb+params.color.rgb*alpha,color.a+alpha);
+}
+`;
+
+// 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",
+  calculateKey: (params) => {
+    const resolved = resolve(params);
+    return `outline-${resolved.width}-${resolved.edgeSimplification}-${resolved.color}-${resolved.opacity}-${resolved.outlineOnly}`;
+  },
+  implementations: {
+    webgpu: Internals.createEffectImplementation({
+      setup: (target) => {
+        const canvas = document.createElement("canvas");
+        canvas.width = 1;
+        canvas.height = 1;
+        const colorCtx = canvas.getContext("2d", { willReadFrequently: true });
+        if (!colorCtx)
+          throw new Error("Could not create color parser");
+        const alphaCanvas = document.createElement("canvas");
+        const alphaCtx = alphaCanvas.getContext("2d", {
+          willReadFrequently: true
+        });
+        const polygonMaskCanvas = document.createElement("canvas");
+        const polygonMaskCtx = polygonMaskCanvas.getContext("2d");
+        if (!alphaCtx || !polygonMaskCtx)
+          throw new Error("Could not create outline mask");
+        return {
+          alphaCanvas,
+          alphaCtx,
+          polygonMaskCanvas,
+          polygonMaskCtx,
+          ...setupWebGpuMultipass(target, "outline"),
+          colorCtx,
+          cachedColor: null,
+          cachedRgba: [0, 0, 0, 0]
+        };
+      },
+      apply: ({ source, width, height, params, state, gpuDevice }) => {
+        if (!gpuDevice)
+          throw new Error("A WebGPU device is required for this effect");
+        const r = resolve(params);
+        if (state.cachedColor !== r.color) {
+          state.cachedColor = r.color;
+          state.cachedRgba = parseColorRgba(state.colorCtx, r.color);
+        }
+        const color = state.cachedRgba.map((channel) => channel / 255);
+        const usePolygonMask = r.edgeSimplification > 0 && r.opacity > 0 && color[3] > 0 && (r.width > 0 || r.outlineOnly);
+        if (usePolygonMask)
+          updatePolygonMask({
+            source,
+            width,
+            height,
+            simplification: r.edgeSimplification,
+            outlineWidth: r.width,
+            state
+          });
+        applyWebGpuMultipass({
+          state,
+          source,
+          width,
+          height,
+          device: gpuDevice,
+          auxiliarySource: usePolygonMask ? state.polygonMaskCanvas : null,
+          passes: [
+            {
+              shader: OUTLINE_WEBGPU_SHADER,
+              uniforms: new Float32Array([
+                ...color,
+                r.width,
+                r.opacity,
+                r.outlineOnly ? 1 : 0,
+                usePolygonMask ? 1 : 0
+              ]),
+              source: -1,
+              secondary: usePolygonMask ? -2 : -1
+            }
+          ]
+        });
+      },
+      cleanup: cleanupWebGpuMultipass
+    }),
+    webgl2: Internals.createEffectImplementation({
+      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 {
+  outline,
+  outlineSchema
+};