@remotion/effects 4.0.538 → 4.0.540

package/dist/esm/tear.mjs

@@ -1,110 +1,58 @@
+import {
+  setupWebGpuMesh,
+  cleanupWebGpuMesh,
+  applyWebGpuMesh
+} from "./index-4scpn12x.mjs";
+import {
+  assertOptionalFiniteNumber
+} from "./index-wxhvgv2s.mjs";
+import {
+  assertEffectParamsObject
+} from "./index-4fvp93ps.mjs";
+
 // src/tear.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/tear-webgpu-shader.ts
+var TEAR_WEBGPU_SHADER = `
+struct Params {resolution: vec2f, angle: f32, progress: f32, rotation: f32, jaggedness: f32,}
+struct VertexOutput {@builtin(position) position: vec4f, @location(0) uv: vec2f,}
+@group(0) @binding(0) var sourceTexture: texture_2d<f32>;
+@group(0) @binding(1) var sourceSampler: sampler;
+@group(0) @binding(2) var<uniform> params: Params;
+@vertex fn vertex(@builtin(vertex_index) index: u32, @builtin(instance_index) instance: u32) -> VertexOutput {
+ let aPos=vec2f(f32(index%2u),f32(index/2u)/192.0);
+ let side=select(-1.0,1.0,instance!=0u);
+ let direction=radians(params.angle);let dc=cos(direction);let ds=sin(direction);
+ let toCanvas=mat2x2f(vec2f(dc,-ds),vec2f(ds,dc));
+ let extent=vec2f(abs(dc)*params.resolution.x+abs(ds)*params.resolution.y,abs(ds)*params.resolution.x+abs(dc)*params.resolution.y);
+ let outerEdge=select(0.0,extent.x,side>=0.0);
+ let zigzag=1.0-4.0*abs(fract(aPos.y*6.0+0.25)-0.5);
+ let seam=extent.x*0.5+zigzag*min(params.jaggedness,extent.x*0.45);
+ let source=vec2f(mix(outerEdge,seam,aPos.x),aPos.y*extent.y);
+ let sourceCanvas=toCanvas*(source-extent*0.5)+params.resolution*0.5;
+ let tearProgress=min(params.progress,1.0);
+ let tipY=tearProgress*extent.y;
+ let pivot=vec2f(extent.x*0.5,tipY);
+ let fullAngle=radians(params.rotation)*tearProgress;
+ let bendHeight=max(extent.y*0.15,fullAngle*extent.x*1.5);
+ let bend=smoothstep(0.0,bendHeight,tipY-source.y);
+ let angle=side*fullAngle*bend;let c=cos(angle);let s=sin(angle);
+ let delta=source-pivot;
+ var position=pivot+vec2f(c*delta.x-s*delta.y,s*delta.x+c*delta.y);
+ position.x+=side*max(params.progress-1.0,0.0)*extent.x*0.5;
+ position=toCanvas*(position-extent*0.5)+params.resolution*0.5;
+ var output: VertexOutput;
+ // Mesh runtime restores orientation after resolving WebGL-compatible samples.
+ output.position=vec4f(position.x/params.resolution.x*2.0-1.0,position.y/params.resolution.y*2.0-1.0,0,1);
+ output.uv=sourceCanvas/params.resolution;
+ return output;
+}
+@fragment fn fragment(input: VertexOutput) -> @location(0) vec4f {
+ if (any(input.uv<vec2f(0)) || any(input.uv>vec2f(1))) {discard;}
+ return textureSample(sourceTexture,sourceSampler,input.uv);
+}
+`;
 
 // src/tear.ts
 var { createEffect, createWebGL2ContextError } = Internals;
@@ -328,61 +276,96 @@ var tear = createEffect({
   type: "dev.remotion.effects.tear",
   label: "tear()",
   documentationLink: "https://www.remotion.dev/docs/effects/tear",
-  backend: "webgl2",
   calculateKey: (params) => {
     const r = resolve(params);
     return `tear-${r.progress}-${r.rotation}-${r.jaggedness}-${r.angle}`;
   },
-  setup: (target) => {
-    const gl = target.getContext("webgl2", {
-      premultipliedAlpha: true,
-      alpha: true,
-      preserveDrawingBuffer: true
-    });
-    if (!gl) {
-      throw createWebGL2ContextError("tear effect");
-    }
-    return createTearState(gl);
-  },
-  apply: ({ source, width, height, params, state, flipSourceY }) => {
-    const r = resolve(params);
-    state.gl.viewport(0, 0, width, height);
-    state.gl.bindFramebuffer(state.gl.FRAMEBUFFER, null);
-    state.gl.clearColor(0, 0, 0, 0);
-    state.gl.clear(state.gl.COLOR_BUFFER_BIT);
-    state.gl.useProgram(state.program);
-    state.gl.bindVertexArray(state.vao);
-    state.gl.activeTexture(state.gl.TEXTURE0);
-    state.gl.bindTexture(state.gl.TEXTURE_2D, state.texture);
-    state.gl.pixelStorei(state.gl.UNPACK_FLIP_Y_WEBGL, flipSourceY);
-    state.gl.pixelStorei(state.gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
-    state.gl.texImage2D(state.gl.TEXTURE_2D, 0, state.gl.RGBA, state.gl.RGBA, state.gl.UNSIGNED_BYTE, source);
-    if (state.uSource)
-      state.gl.uniform1i(state.uSource, 0);
-    if (state.uAngle)
-      state.gl.uniform1f(state.uAngle, r.angle % 360);
-    if (state.uProgress)
-      state.gl.uniform1f(state.uProgress, r.progress);
-    if (state.uRotation)
-      state.gl.uniform1f(state.uRotation, r.rotation);
-    if (state.uJaggedness)
-      state.gl.uniform1f(state.uJaggedness, r.jaggedness);
-    if (state.uResolution)
-      state.gl.uniform2f(state.uResolution, width, height);
-    for (const side of [-1, 1]) {
-      if (state.uSide)
-        state.gl.uniform1f(state.uSide, side);
-      state.gl.drawArrays(state.gl.TRIANGLE_STRIP, 0, (MESH_ROWS + 1) * 2);
-    }
-    state.gl.bindVertexArray(null);
-    state.gl.bindTexture(state.gl.TEXTURE_2D, null);
-    state.gl.useProgram(null);
-  },
-  cleanup: ({ gl, program, vao, vbo, texture }) => {
-    gl.deleteTexture(texture);
-    gl.deleteBuffer(vbo);
-    gl.deleteProgram(program);
-    gl.deleteVertexArray(vao);
+  implementations: {
+    webgpu: Internals.createEffectImplementation({
+      setup: (target) => setupWebGpuMesh(target, "tear"),
+      apply: ({ source, width, height, params, state, gpuDevice }) => {
+        if (!gpuDevice)
+          throw new Error("A WebGPU device is required for tear");
+        const r = resolve(params);
+        applyWebGpuMesh({
+          state,
+          source,
+          width,
+          height,
+          device: gpuDevice,
+          shader: TEAR_WEBGPU_SHADER,
+          uniformData: new Float32Array([
+            width,
+            height,
+            r.angle % 360,
+            r.progress,
+            r.rotation,
+            r.jaggedness,
+            0,
+            0
+          ]),
+          vertices: null,
+          topology: "triangle-strip",
+          blend: false,
+          vertexCount: (MESH_ROWS + 1) * 2,
+          instanceCount: 2
+        });
+      },
+      cleanup: cleanupWebGpuMesh
+    }),
+    webgl2: Internals.createEffectImplementation({
+      setup: (target) => {
+        const gl = target.getContext("webgl2", {
+          premultipliedAlpha: true,
+          alpha: true,
+          preserveDrawingBuffer: true
+        });
+        if (!gl) {
+          throw createWebGL2ContextError("tear effect");
+        }
+        return createTearState(gl);
+      },
+      apply: ({ source, width, height, params, state, flipSourceY }) => {
+        const r = resolve(params);
+        state.gl.viewport(0, 0, width, height);
+        state.gl.bindFramebuffer(state.gl.FRAMEBUFFER, null);
+        state.gl.clearColor(0, 0, 0, 0);
+        state.gl.clear(state.gl.COLOR_BUFFER_BIT);
+        state.gl.useProgram(state.program);
+        state.gl.bindVertexArray(state.vao);
+        state.gl.activeTexture(state.gl.TEXTURE0);
+        state.gl.bindTexture(state.gl.TEXTURE_2D, state.texture);
+        state.gl.pixelStorei(state.gl.UNPACK_FLIP_Y_WEBGL, flipSourceY);
+        state.gl.pixelStorei(state.gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
+        state.gl.texImage2D(state.gl.TEXTURE_2D, 0, state.gl.RGBA, state.gl.RGBA, state.gl.UNSIGNED_BYTE, source);
+        if (state.uSource)
+          state.gl.uniform1i(state.uSource, 0);
+        if (state.uAngle)
+          state.gl.uniform1f(state.uAngle, r.angle % 360);
+        if (state.uProgress)
+          state.gl.uniform1f(state.uProgress, r.progress);
+        if (state.uRotation)
+          state.gl.uniform1f(state.uRotation, r.rotation);
+        if (state.uJaggedness)
+          state.gl.uniform1f(state.uJaggedness, r.jaggedness);
+        if (state.uResolution)
+          state.gl.uniform2f(state.uResolution, width, height);
+        for (const side of [-1, 1]) {
+          if (state.uSide)
+            state.gl.uniform1f(state.uSide, side);
+          state.gl.drawArrays(state.gl.TRIANGLE_STRIP, 0, (MESH_ROWS + 1) * 2);
+        }
+        state.gl.bindVertexArray(null);
+        state.gl.bindTexture(state.gl.TEXTURE_2D, null);
+        state.gl.useProgram(null);
+      },
+      cleanup: ({ gl, program, vao, vbo, texture }) => {
+        gl.deleteTexture(texture);
+        gl.deleteBuffer(vbo);
+        gl.deleteProgram(program);
+        gl.deleteVertexArray(vao);
+      }
+    })
   },
   schema: tearSchema,
   validateParams: validateTearParams

package/dist/esm/thermal-vision.mjs

@@ -1,114 +1,50 @@
+import {
+  colorAmountSchema,
+  assertOptionalFiniteNumber,
+  validateUnitInterval,
+  parseColorRgba
+} from "./index-wxhvgv2s.mjs";
+import {
+  WEBGPU_SINGLE_PASS_VERTEX,
+  setupWebGpuSinglePass,
+  cleanupWebGpuSinglePass,
+  applyWebGpuSinglePass
+} from "./index-tvfexb7s.mjs";
+import {
+  assertEffectParamsObject,
+  assertRequiredColor
+} from "./index-4fvp93ps.mjs";
+
 // src/thermal-vision.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/thermal-vision-webgpu-shader.ts
+var THERMAL_VISION_WEBGPU_SHADER = `
+${WEBGPU_SINGLE_PASS_VERTEX}
+@group(0) @binding(0) var source: texture_2d<f32>;
+@group(0) @binding(1) var sourceSampler: sampler;
+@group(0) @binding(2) var<uniform> params: Params;
 
-// 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]];
-};
+struct Params { amount: f32, paletteLength: f32, }
+@group(0) @binding(3) var palette: texture_2d<f32>;
+@fragment fn fragment(input: VertexOutput) -> @location(0) vec4f {
+  let color=textureSampleLevel(source,sourceSampler,input.uv,0);
+  if(color.a<=0.001) { return vec4f(0); }
+  let rgb=color.rgb/color.a;
+  let luminance=dot(rgb,vec3f(0.299,0.587,0.114));
+  let position=clamp(luminance,0.0,1.0)*(max(params.paletteLength,2.0)-1.0);
+  let index=i32(floor(position));
+  let first=textureLoad(palette,vec2i(index,0),0).rgb;
+  let last=textureLoad(palette,vec2i(min(index+1,i32(params.paletteLength)-1),0),0).rgb;
+  let thermal=mix(first,last,fract(position));
+  return vec4f(mix(rgb,thermal,clamp(params.amount,0.0,1.0))*color.a,color.a);
+}
+
+`;
 
 // src/thermal-vision.ts
 var { createEffect, createWebGL2ContextError } = Internals;
-var DEFAULT_AMOUNT2 = 1;
+var DEFAULT_AMOUNT = 1;
 var DEFAULT_PALETTE = [
   "#020617",
   "#1238ff",
@@ -134,7 +70,7 @@ var thermalVisionSchema = {
   }
 };
 var resolve = (p) => ({
-  amount: p.amount ?? DEFAULT_AMOUNT2,
+  amount: p.amount ?? DEFAULT_AMOUNT,
   palette: p.palette ?? DEFAULT_PALETTE
 });
 var validatePalette = (palette) => {
@@ -329,9 +265,7 @@ var updatePalette = (state, palette) => {
   }
   state.cachedPaletteKey = paletteKey;
   const len = palette.length * 4;
-  if (state.palettePixelData.length !== len) {
-    state.palettePixelData = new Uint8Array(len);
-  }
+  state.palettePixelData = new Uint8Array(len);
   const { palettePixelData } = state;
   for (let i = 0;i < palette.length; i++) {
     const color = parseColorRgba(state.colorCtx, palette[i]);
@@ -346,54 +280,103 @@ var thermalVision = createEffect({
   type: "remotion/thermal-vision",
   label: "thermalVision()",
   documentationLink: "https://www.remotion.dev/docs/effects/thermal-vision",
-  backend: "webgl2",
   calculateKey: (params) => {
     const r = resolve(params);
     return `thermal-vision-${r.amount}-${r.palette.join("|")}`;
   },
-  setup: (target) => setupThermalVision(target),
-  apply: ({ source, width, height, params, state, flipSourceY }) => {
-    const r = resolve(params);
-    const paletteDirty = updatePalette(state, r.palette);
-    const { gl, program, sourceTexture, paletteTexture, uniforms, vao } = 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, sourceTexture);
-    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.activeTexture(gl.TEXTURE1);
-    gl.bindTexture(gl.TEXTURE_2D, paletteTexture);
-    if (paletteDirty) {
-      gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
-      gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
-      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, r.palette.length, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, state.palettePixelData);
-      gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
-    }
-    gl.useProgram(program);
-    if (uniforms.uSource)
-      gl.uniform1i(uniforms.uSource, 0);
-    if (uniforms.uPalette)
-      gl.uniform1i(uniforms.uPalette, 1);
-    if (uniforms.uPaletteLength)
-      gl.uniform1f(uniforms.uPaletteLength, r.palette.length);
-    if (uniforms.uAmount)
-      gl.uniform1f(uniforms.uAmount, r.amount);
-    gl.bindVertexArray(vao);
-    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
-    gl.bindVertexArray(null);
-    gl.bindTexture(gl.TEXTURE_2D, null);
-    gl.useProgram(null);
-  },
-  cleanup: ({ gl, program, vao, vbo, sourceTexture, paletteTexture }) => {
-    gl.deleteTexture(sourceTexture);
-    gl.deleteTexture(paletteTexture);
-    gl.deleteBuffer(vbo);
-    gl.deleteProgram(program);
-    gl.deleteVertexArray(vao);
+  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("Failed to acquire 2D context for color parsing");
+        return {
+          ...setupWebGpuSinglePass(target, "thermal-vision"),
+          colorCtx,
+          cachedPaletteKey: "",
+          palettePixelData: new Uint8Array(0)
+        };
+      },
+      apply: ({ source, width, height, params, state, gpuDevice }) => {
+        if (!gpuDevice)
+          throw new Error("A WebGPU device is required for the thermal-vision effect");
+        const r = resolve(params);
+        const uniformData = new Float32Array([
+          r.amount,
+          r.palette.length,
+          0,
+          0
+        ]);
+        updatePalette(state, r.palette);
+        applyWebGpuSinglePass({
+          state,
+          source,
+          width,
+          height,
+          device: gpuDevice,
+          shader: THERMAL_VISION_WEBGPU_SHADER,
+          uniformData
+        }, {
+          sourceFilter: null,
+          auxiliaryTexture: {
+            data: state.palettePixelData,
+            width: r.palette.length,
+            height: 1,
+            format: "rgba8unorm"
+          }
+        });
+      },
+      cleanup: cleanupWebGpuSinglePass
+    }),
+    webgl2: Internals.createEffectImplementation({
+      setup: (target) => setupThermalVision(target),
+      apply: ({ source, width, height, params, state, flipSourceY }) => {
+        const r = resolve(params);
+        const paletteDirty = updatePalette(state, r.palette);
+        const { gl, program, sourceTexture, paletteTexture, uniforms, vao } = 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, sourceTexture);
+        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.activeTexture(gl.TEXTURE1);
+        gl.bindTexture(gl.TEXTURE_2D, paletteTexture);
+        if (paletteDirty) {
+          gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+          gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
+          gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, r.palette.length, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, state.palettePixelData);
+          gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
+        }
+        gl.useProgram(program);
+        if (uniforms.uSource)
+          gl.uniform1i(uniforms.uSource, 0);
+        if (uniforms.uPalette)
+          gl.uniform1i(uniforms.uPalette, 1);
+        if (uniforms.uPaletteLength)
+          gl.uniform1f(uniforms.uPaletteLength, r.palette.length);
+        if (uniforms.uAmount)
+          gl.uniform1f(uniforms.uAmount, r.amount);
+        gl.bindVertexArray(vao);
+        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+        gl.bindVertexArray(null);
+        gl.bindTexture(gl.TEXTURE_2D, null);
+        gl.useProgram(null);
+      },
+      cleanup: ({ gl, program, vao, vbo, sourceTexture, paletteTexture }) => {
+        gl.deleteTexture(sourceTexture);
+        gl.deleteTexture(paletteTexture);
+        gl.deleteBuffer(vbo);
+        gl.deleteProgram(program);
+        gl.deleteVertexArray(vao);
+      }
+    })
   },
   schema: thermalVisionSchema,
   validateParams: validateThermalVisionParams