@remotion/effects 4.0.541 → 4.0.543

package/dist/esm/preview/halftone.mjs

@@ -0,0 +1,552 @@
+import {
+  setupWebGpuColors,
+  getWebGpuColors
+} from "./index-8jx11jyn.mjs";
+import {
+  assertOptionalFiniteNumber,
+  parseColorRgba
+} from "./index-wxhvgv2s.mjs";
+import {
+  WEBGPU_SINGLE_PASS_VERTEX,
+  cleanupWebGpuSinglePass,
+  applyWebGpuSinglePass
+} from "./index-tvfexb7s.mjs";
+import {
+  assertEffectParamsObject,
+  assertOptionalColor,
+  assertOptionalBoolean
+} from "./index-4fvp93ps.mjs";
+
+// src/halftone.ts
+import { Internals } from "remotion";
+
+// src/halftone-webgpu-shader.ts
+var HALFTONE_WEBGPU_SHADER = `
+${WEBGPU_SINGLE_PASS_VERTEX}
+@group(0) @binding(0) var sourceTexture: texture_2d<f32>;
+@group(0) @binding(1) var sourceSampler: sampler;
+@group(0) @binding(2) var<uniform> params: Params;
+struct Params {
+ geometry: vec4f,
+ grid: vec4f,
+ flags: vec4f,
+ color: vec4f,
+}
+fn sampleSource(uv: vec2f) -> vec4f {
+ return textureSampleLevel(sourceTexture, sourceSampler, vec2f(uv.x, 1.0 - uv.y), 0);
+}
+
+@fragment fn fragment(input: VertexOutput) -> @location(0) vec4f {
+ let vUv = vec2f(input.uv.x, 1.0 - input.uv.y);
+
+ let center = params.geometry.xy * 0.5;
+ let d = vec2f(input.position.x, params.geometry.y - input.position.y) - center;
+ let cosR = cos(params.grid.x);
+ let sinR = sin(params.grid.x);
+ let gridPos = vec2f(d.x * cosR + d.y * sinR, -d.x * sinR + d.y * cosR);
+ let spacing = max(params.geometry.w, 0.001);
+ let cellIndex = floor((gridPos + params.grid.yz) / spacing + vec2f(0.5));
+ let gridCenter = cellIndex * spacing - params.grid.yz;
+ let canvasPos = center + vec2f(gridCenter.x * cosR - gridCenter.y * sinR, gridCenter.x * sinR + gridCenter.y * cosR);
+ let sampleUv = clamp(canvasPos / params.geometry.xy, vec2f(0), vec2f(1));
+ let texColor = sampleSource(sampleUv);
+ let alpha = texColor.a;
+ var rgb = vec3f(0);
+ if (alpha > 0.001) { rgb = texColor.rgb / alpha; }
+ let lum = dot(rgb, vec3f(0.299, 0.587, 0.114));
+ let lumDefault = lum * alpha + (1.0 - alpha);
+ let dotScale = select(1.0 - lumDefault, lumDefault, params.flags.x != 0.0);
+ if (dotScale <= 0.01) { return vec4f(0); }
+ let diff = gridPos - gridCenter;
+ let halfSize = params.geometry.z * 0.5;
+ var coverage = 0.0;
+ if (params.grid.w == 0.0) {
+  let radius = halfSize * dotScale;
+  coverage = 1.0 - smoothstep(radius - 0.75, radius + 0.75, length(diff));
+ } else if (params.grid.w == 1.0) {
+  let s = params.geometry.z * dotScale * 0.5;
+  coverage = (1.0 - smoothstep(s - 0.5, s + 0.5, abs(diff.x))) * (1.0 - smoothstep(s - 0.5, s + 0.5, abs(diff.y)));
+ } else {
+  let localTexColor = sampleSource(vUv);
+  let localAlpha = localTexColor.a;
+  var localRgb = vec3f(0);
+  if (localAlpha > 0.001) { localRgb = localTexColor.rgb / localAlpha; }
+  let localLum = dot(localRgb, vec3f(0.299, 0.587, 0.114));
+  let localLumDefault = localLum * localAlpha + (1.0 - localAlpha);
+  let localDotScale = select(1.0 - localLumDefault, localLumDefault, params.flags.x != 0.0);
+  if (localDotScale <= 0.12) { return vec4f(0); }
+  let lineHalf = params.geometry.z * dotScale * 0.5;
+  if (lineHalf <= 1.0) { return vec4f(0); }
+  coverage = (1.0 - smoothstep(halfSize - 0.5, halfSize + 0.5, abs(diff.x))) * (1.0 - smoothstep(lineHalf - 0.5, lineHalf + 0.5, abs(diff.y)));
+ }
+ return select(params.color, texColor, params.flags.y != 0.0) * coverage;
+
+}
+`;
+
+// src/halftone.ts
+var { createEffect, createWebGL2ContextError } = Internals;
+var HALFTONE_SHAPES = ["circle", "square", "line"];
+var HALFTONE_SAMPLING = ["bilinear", "nearest"];
+var HALFTONE_COLOR_MODES = ["solid", "source"];
+var halftoneSchema = {
+  dotSize: {
+    type: "number",
+    min: 1,
+    max: 200,
+    step: 1,
+    default: 20,
+    description: "Dot size",
+    hiddenFromList: false
+  },
+  dotSpacing: {
+    type: "number",
+    min: 1,
+    max: 200,
+    step: 1,
+    default: 20,
+    description: "Dot spacing",
+    hiddenFromList: false
+  },
+  rotation: {
+    type: "rotation-degrees",
+    step: 1,
+    default: 0,
+    description: "Rotation"
+  },
+  offsetX: {
+    type: "number",
+    step: 1,
+    default: 0,
+    description: "Offset X",
+    hiddenFromList: false
+  },
+  offsetY: {
+    type: "number",
+    step: 1,
+    default: 0,
+    description: "Offset Y",
+    hiddenFromList: false
+  },
+  shape: {
+    type: "enum",
+    variants: {
+      circle: {},
+      square: {},
+      line: {}
+    },
+    default: "circle",
+    description: "Shape"
+  },
+  invert: {
+    type: "boolean",
+    default: false,
+    description: "Invert"
+  },
+  colorMode: {
+    type: "enum",
+    default: "solid",
+    description: "Color mode",
+    variants: {
+      solid: {
+        dotColor: {
+          type: "color",
+          default: "red",
+          description: "Dot color"
+        }
+      },
+      source: {}
+    }
+  }
+};
+var formatEnum = (variants) => {
+  if (variants.length === 2) {
+    return `"${variants[0]}" or "${variants[1]}"`;
+  }
+  return `${variants.slice(0, -1).map((variant) => `"${variant}"`).join(", ")} or "${variants[variants.length - 1]}"`;
+};
+var assertOptionalEnum = (value, name, variants) => {
+  if (value === undefined) {
+    return;
+  }
+  if (typeof value !== "string" || !variants.includes(value)) {
+    throw new TypeError(`"${name}" must be ${formatEnum(variants)}`);
+  }
+};
+var resolve = (p) => ({
+  shape: p.shape ?? "circle",
+  dotSize: p.dotSize ?? 20,
+  dotSpacing: p.dotSpacing ?? p.dotSize ?? 20,
+  rotation: p.rotation ?? 0,
+  offsetX: p.offsetX ?? 0,
+  offsetY: p.offsetY ?? 0,
+  sampling: p.sampling ?? "bilinear",
+  colorMode: p.colorMode ?? "solid",
+  dotColor: "dotColor" in p ? p.dotColor ?? "red" : "red",
+  invert: p.invert ?? false
+});
+var validateHalftoneParams = (params) => {
+  assertEffectParamsObject(params, "Halftone");
+  assertOptionalFiniteNumber(params.dotSize, "dotSize");
+  assertOptionalFiniteNumber(params.dotSpacing, "dotSpacing");
+  assertOptionalFiniteNumber(params.rotation, "rotation");
+  assertOptionalFiniteNumber(params.offsetX, "offsetX");
+  assertOptionalFiniteNumber(params.offsetY, "offsetY");
+  assertOptionalEnum(params.shape, "shape", HALFTONE_SHAPES);
+  assertOptionalEnum(params.sampling, "sampling", HALFTONE_SAMPLING);
+  assertOptionalEnum(params.colorMode, "colorMode", HALFTONE_COLOR_MODES);
+  if ("color" in params && params.color !== undefined) {
+    throw new TypeError('"color" has been renamed to "dotColor"');
+  }
+  if (params.colorMode === "source" && "dotColor" in params) {
+    throw new TypeError('"dotColor" can only be set when "colorMode" is "solid"');
+  }
+  assertOptionalColor("dotColor" in params ? params.dotColor : undefined, "dotColor");
+  assertOptionalBoolean(params.invert, "invert");
+  if (params.dotSize !== undefined && params.dotSize < 1) {
+    throw new TypeError(`"dotSize" must be >= 1, but got ${JSON.stringify(params.dotSize)}`);
+  }
+  if (params.dotSpacing !== undefined && params.dotSpacing < 1) {
+    throw new TypeError(`"dotSpacing" must be >= 1, but got ${JSON.stringify(params.dotSpacing)}`);
+  }
+};
+var HALFTONE_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 HALFTONE_FS = `#version 300 es
+precision highp float;
+
+in vec2 vUv;
+out vec4 fragColor;
+
+uniform sampler2D uSource;
+uniform vec2 uResolution;
+uniform float uDotSize;
+uniform float uDotSpacing;
+uniform float uRotation;
+uniform vec2 uOffset;
+uniform vec4 uColor;
+uniform int uShape;
+uniform bool uShadeOutside;
+uniform bool uUseSourceColor;
+
+void main() {
+	vec2 fragPos = gl_FragCoord.xy;
+	vec2 center = uResolution * 0.5;
+
+	vec2 d = fragPos - center;
+	float cosR = cos(uRotation);
+	float sinR = sin(uRotation);
+
+	vec2 gridPos = vec2(
+		d.x * cosR + d.y * sinR,
+		-d.x * sinR + d.y * cosR
+	);
+
+	float spacing = max(uDotSpacing, 0.001);
+	vec2 cellIndex = floor((gridPos + uOffset) / spacing + 0.5);
+	vec2 gridCenter = cellIndex * spacing - uOffset;
+
+	vec2 canvasPos = center + vec2(
+		gridCenter.x * cosR - gridCenter.y * sinR,
+		gridCenter.x * sinR + gridCenter.y * cosR
+	);
+
+	vec2 sampleUv = clamp(canvasPos / uResolution, vec2(0.0), vec2(1.0));
+	vec4 texColor = texture(uSource, sampleUv);
+
+	float alpha = texColor.a;
+	vec3 rgb = alpha > 0.001 ? texColor.rgb / alpha : vec3(0.0);
+	float lum = dot(rgb, vec3(0.299, 0.587, 0.114));
+
+	float lumDefault = lum * alpha + (1.0 - alpha);
+	float dotScale = uShadeOutside
+		? lumDefault
+		: 1.0 - lumDefault;
+
+	if (dotScale <= 0.01) {
+		fragColor = vec4(0.0);
+		return;
+	}
+
+	vec2 diff = gridPos - gridCenter;
+	float halfSize = uDotSize * 0.5;
+	float coverage = 0.0;
+
+	if (uShape == 0) {
+		float radius = halfSize * dotScale;
+		float dist = length(diff);
+		coverage = 1.0 - smoothstep(radius - 0.75, radius + 0.75, dist);
+	} else if (uShape == 1) {
+		float s = uDotSize * dotScale * 0.5;
+		coverage = (1.0 - smoothstep(s - 0.5, s + 0.5, abs(diff.x)))
+				 * (1.0 - smoothstep(s - 0.5, s + 0.5, abs(diff.y)));
+	} else {
+		vec4 localTexColor = texture(uSource, vUv);
+		float localAlpha = localTexColor.a;
+		vec3 localRgb = localAlpha > 0.001 ? localTexColor.rgb / localAlpha : vec3(0.0);
+		float localLum = dot(localRgb, vec3(0.299, 0.587, 0.114));
+		float localLumDefault = localLum * localAlpha + (1.0 - localAlpha);
+		float localDotScale = uShadeOutside
+			? localLumDefault
+			: 1.0 - localLumDefault;
+
+		if (localDotScale <= 0.12) {
+			fragColor = vec4(0.0);
+			return;
+		}
+
+		float lineHalf = uDotSize * dotScale * 0.5;
+		if (lineHalf <= 1.0) {
+			fragColor = vec4(0.0);
+			return;
+		}
+
+		coverage = (1.0 - smoothstep(halfSize - 0.5, halfSize + 0.5, abs(diff.x)))
+				 * (1.0 - smoothstep(lineHalf - 0.5, lineHalf + 0.5, abs(diff.y)));
+	}
+
+	fragColor = (uUseSourceColor ? texColor : uColor) * coverage;
+}
+`;
+var SHAPE_INDEX = {
+  circle: 0,
+  square: 1,
+  line: 2
+};
+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(`Halftone 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(`Halftone program link failed: ${log ?? "(no log)"}`);
+  }
+  return program;
+};
+var halftone = createEffect({
+  type: "dev.remotion.effects.halftone",
+  label: "halftone()",
+  documentationLink: "https://www.remotion.dev/docs/effects/halftone",
+  calculateKey: (params) => {
+    const r = resolve(params);
+    return `halftone-${r.shape}-${r.dotSize}-${r.dotSpacing}-${r.rotation}-${r.offsetX}-${r.offsetY}-${r.sampling}-${r.colorMode}-${r.dotColor}-${r.invert ? 1 : 0}`;
+  },
+  implementations: {
+    webgpu: Internals.createEffectImplementation({
+      setup: (target) => setupWebGpuColors(target, "halftone"),
+      apply: ({ source, width, height, params, state, gpuDevice }) => {
+        if (!gpuDevice)
+          throw new Error("A WebGPU device is required for the halftone effect");
+        const r = resolve(params);
+        const colors = getWebGpuColors(state, [r.dotColor]);
+        const uniformData = new Float32Array([
+          width,
+          height,
+          r.dotSize,
+          r.dotSpacing,
+          r.rotation * Math.PI / 180,
+          r.offsetX,
+          r.offsetY,
+          SHAPE_INDEX[r.shape],
+          r.invert ? 1 : 0,
+          r.colorMode === "source" ? 1 : 0,
+          0,
+          0,
+          colors[0] / 255 * (colors[3] / 255),
+          colors[1] / 255 * (colors[3] / 255),
+          colors[2] / 255 * (colors[3] / 255),
+          colors[3] / 255
+        ]);
+        applyWebGpuSinglePass({
+          state,
+          source,
+          width,
+          height,
+          device: gpuDevice,
+          shader: HALFTONE_WEBGPU_SHADER,
+          uniformData
+        }, {
+          sourceFilter: r.sampling === "nearest" ? "nearest" : "linear",
+          auxiliaryTexture: null
+        });
+      },
+      cleanup: cleanupWebGpuSinglePass
+    }),
+    webgl2: Internals.createEffectImplementation({
+      setup: (target) => {
+        const gl = target.getContext("webgl2", {
+          premultipliedAlpha: true,
+          alpha: true,
+          preserveDrawingBuffer: true
+        });
+        if (!gl) {
+          throw createWebGL2ContextError("halftone effect");
+        }
+        gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
+        const vs = compileShader(gl, gl.VERTEX_SHADER, HALFTONE_VS);
+        const fs = compileShader(gl, gl.FRAGMENT_SHADER, HALFTONE_FS);
+        const program = linkProgram(gl, vs, fs);
+        gl.deleteShader(vs);
+        gl.deleteShader(fs);
+        const vao = gl.createVertexArray();
+        if (!vao) {
+          throw new Error("Failed to create WebGL vertex array");
+        }
+        gl.bindVertexArray(vao);
+        const data = new Float32Array([
+          -1,
+          -1,
+          0,
+          0,
+          1,
+          -1,
+          1,
+          0,
+          -1,
+          1,
+          0,
+          1,
+          1,
+          1,
+          1,
+          1
+        ]);
+        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, data, 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 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_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);
+        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,
+          program,
+          vao,
+          vbo,
+          texture,
+          uSource: gl.getUniformLocation(program, "uSource"),
+          uResolution: gl.getUniformLocation(program, "uResolution"),
+          uDotSize: gl.getUniformLocation(program, "uDotSize"),
+          uDotSpacing: gl.getUniformLocation(program, "uDotSpacing"),
+          uRotation: gl.getUniformLocation(program, "uRotation"),
+          uOffset: gl.getUniformLocation(program, "uOffset"),
+          uColor: gl.getUniformLocation(program, "uColor"),
+          uShape: gl.getUniformLocation(program, "uShape"),
+          uShadeOutside: gl.getUniformLocation(program, "uShadeOutside"),
+          uUseSourceColor: gl.getUniformLocation(program, "uUseSourceColor"),
+          colorCtx,
+          cachedColorStr: "",
+          cachedColorRgba: [0, 0, 0, 255]
+        };
+      },
+      apply: ({ source, width, height, params, state, flipSourceY }) => {
+        const r = resolve(params);
+        const { gl, program, vao, texture } = state;
+        if (state.cachedColorStr !== r.dotColor) {
+          state.cachedColorStr = r.dotColor;
+          state.cachedColorRgba = parseColorRgba(state.colorCtx, r.dotColor);
+        }
+        const [cr, cg, cb, ca] = state.cachedColorRgba;
+        const caNormalized = ca / 255;
+        const filter = r.sampling === "nearest" ? gl.NEAREST : gl.LINEAR;
+        gl.viewport(0, 0, width, height);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        gl.clearColor(0, 0, 0, 0);
+        gl.clear(gl.COLOR_BUFFER_BIT);
+        gl.useProgram(program);
+        gl.bindVertexArray(vao);
+        gl.activeTexture(gl.TEXTURE0);
+        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.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipSourceY);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
+        if (state.uSource)
+          gl.uniform1i(state.uSource, 0);
+        if (state.uResolution)
+          gl.uniform2f(state.uResolution, width, height);
+        if (state.uDotSize)
+          gl.uniform1f(state.uDotSize, r.dotSize);
+        if (state.uDotSpacing)
+          gl.uniform1f(state.uDotSpacing, r.dotSpacing);
+        if (state.uRotation)
+          gl.uniform1f(state.uRotation, r.rotation * Math.PI / 180);
+        if (state.uOffset)
+          gl.uniform2f(state.uOffset, r.offsetX, r.offsetY);
+        if (state.uColor)
+          gl.uniform4f(state.uColor, cr / 255 * caNormalized, cg / 255 * caNormalized, cb / 255 * caNormalized, caNormalized);
+        if (state.uShape)
+          gl.uniform1i(state.uShape, SHAPE_INDEX[r.shape]);
+        if (state.uShadeOutside)
+          gl.uniform1i(state.uShadeOutside, r.invert ? 1 : 0);
+        if (state.uUseSourceColor)
+          gl.uniform1i(state.uUseSourceColor, r.colorMode === "source" ? 1 : 0);
+        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+        gl.bindVertexArray(null);
+        gl.bindTexture(gl.TEXTURE_2D, null);
+        gl.useProgram(null);
+      },
+      cleanup: ({ gl, program, vao, vbo, texture }) => {
+        gl.deleteBuffer(vbo);
+        gl.deleteProgram(program);
+        gl.deleteVertexArray(vao);
+        gl.deleteTexture(texture);
+      }
+    })
+  },
+  schema: halftoneSchema,
+  validateParams: validateHalftoneParams
+});
+export {
+  halftone,
+  halftoneSchema
+};

package/dist/esm/preview/hue.mjs

@@ -0,0 +1,83 @@
+import"./index-8p04sssx.mjs";
+import {
+  createColorMatrixImplementations
+} from "./index-cdp7tr8x.mjs";
+import {
+  DEFAULT_HUE_DEGREES,
+  hueDegreesSchema,
+  assertOptionalFiniteNumber
+} from "./index-wxhvgv2s.mjs";
+import {
+  assertEffectParamsObject
+} from "./index-4fvp93ps.mjs";
+
+// src/hue.ts
+import { Internals } from "remotion";
+var { createEffect } = Internals;
+var hueSchema = {
+  degrees: hueDegreesSchema
+};
+var resolve = (p) => ({
+  degrees: p.degrees ?? DEFAULT_HUE_DEGREES
+});
+var validateHueParams = (params) => {
+  assertEffectParamsObject(params, "Hue");
+  assertOptionalFiniteNumber(params.degrees, "degrees");
+};
+var hue = createEffect({
+  type: "dev.remotion.effects.hue",
+  label: "hue()",
+  documentationLink: "https://www.remotion.dev/docs/effects/hue",
+  calculateKey: (params) => {
+    const r = resolve(params);
+    return `hue-${r.degrees}`;
+  },
+  implementations: {
+    ...createColorMatrixImplementations("hue", (params) => {
+      const { degrees } = resolve(params);
+      const radians = degrees % 360 * Math.PI / 180;
+      const cosine = Math.cos(radians);
+      const sine = Math.sin(radians);
+      return new Float32Array([
+        0.213 + 0.787 * cosine - 0.213 * sine,
+        0.715 - 0.715 * cosine - 0.715 * sine,
+        0.072 - 0.072 * cosine + 0.928 * sine,
+        0,
+        0.213 - 0.213 * cosine + 0.143 * sine,
+        0.715 + 0.285 * cosine + 0.14 * sine,
+        0.072 - 0.072 * cosine - 0.283 * sine,
+        0,
+        0.213 - 0.213 * cosine - 0.787 * sine,
+        0.715 - 0.715 * cosine + 0.715 * sine,
+        0.072 + 0.928 * cosine + 0.072 * sine,
+        0,
+        0,
+        0,
+        degrees % 360 === 0 ? 1 : 0,
+        0
+      ]);
+    }),
+    "2d": Internals.createEffectImplementation({
+      setup: () => null,
+      apply: ({ source, target, width, height, params }) => {
+        const ctx = target.getContext("2d");
+        if (!ctx) {
+          throw new Error("Failed to acquire 2D context for hue effect. The canvas may have been assigned a different context type.");
+        }
+        const r = resolve(params);
+        ctx.clearRect(0, 0, width, height);
+        ctx.filter = `hue-rotate(${r.degrees}deg)`;
+        ctx.drawImage(source, 0, 0, width, height);
+        ctx.filter = "none";
+      },
+      cleanup: () => {
+        return;
+      }
+    })
+  },
+  schema: hueSchema,
+  validateParams: validateHueParams
+});
+export {
+  hue
+};