@luma.gl/effects 9.2.5 → 9.3.0-alpha.10

package/dist/index.cjs

@@ -51,23 +51,22 @@ var source = (
   contrast: f32
 };
 
-// Binding 0:1 is reserved for shader passes
-@group(0) @binding(1) var<uniform> brightnessContrast : brightnessContrastUniforms;
+@group(0) @binding(auto) var<uniform> brightnessContrast : brightnessContrastUniforms;
 
 fn brightnessContrast_filterColor_ext(color: vec4f, texSize: vec2<f32>, texCoords: vec2<f32>) -> vec4f {
-  color.rgb += brightnessContrast.brightness;
+  var resultRgb = color.rgb + vec3f(brightnessContrast.brightness);
   if (brightnessContrast.contrast > 0.0) {
-    color.rgb = (color.rgb - 0.5) / (1.0 - brightnessContrast.contrast) + 0.5;
+    resultRgb = (resultRgb - vec3f(0.5)) / (1.0 - brightnessContrast.contrast) + vec3f(0.5);
   } else {
-    color.rgb = (color.rgb - 0.5) * (1.0 + brightnessContrast.contrast) + 0.5;
+    resultRgb = (resultRgb - vec3f(0.5)) * (1.0 + brightnessContrast.contrast) + vec3f(0.5);
   }
-  return vec4f(1.0, 0.0, 0.0, 1.0);
+  return vec4f(resultRgb, color.a);
 }
 `
 );
 var fs = (
   /* glsl */
-  `uniform brightnessContrastUniforms {
+  `layout(std140) uniform brightnessContrastUniforms {
   float brightness;
   float contrast;
 } brightnessContrast;
@@ -110,43 +109,51 @@ var brightnessContrast = {
 // dist/passes/postprocessing/image-adjust-filters/denoise.js
 var source2 = (
   /* wgsl */
-  `
-struct denoiseUniforms {
-  strength: f32
+  `struct denoiseUniforms {
+  strength: f32,
 };
 
-@group(0), @binding(1) var<uniform> denoise: denoiseUniforms;
-
-fn denoise_sampleColor(source: sampler2D, texSize: vec2<f32>, texCoord: vec2<f32>) -> vec4<f32> {
-	let adjustedExponent: f32 = 3. + 200. * pow(1. - denoise.strength, 4.);
-	let center: vec4<f32> = sample_texture(BUFFER_source, texCoord);
-	var color: vec4<f32> = vec4<f32>(0.);
-	var total: f32 = 0.;
-
-	for (var x: f32 = -4.; x <= 4.; x = x + (1.)) {
-
-		for (var y: f32 = -4.; y <= 4.; y = y + (1.)) {
-			let offsetColor: vec4<f32> = sample_texture(BUFFER_source, texCoord + vec2<f32>(x, y) / texSize);
-			var weight: f32 = 1. - abs(dot(offsetColor.rgb - center.rgb, vec3<f32>(0.25)));
-			weight = pow(weight, adjustedExponent);
-			color = color + (offsetColor * weight);
-			total = total + (weight);
-		}
-
-	}
+@group(0) @binding(auto) var<uniform> denoise: denoiseUniforms;
+
+fn denoise_sampleColor(
+  sourceTexture: texture_2d<f32>,
+  sourceTextureSampler: sampler,
+  texSize: vec2f,
+  texCoord: vec2f
+) -> vec4f {
+  let adjustedExponent = 3.0 + 200.0 * pow(1.0 - denoise.strength, 4.0);
+  let center = textureSample(sourceTexture, sourceTextureSampler, texCoord);
+  var color = vec4f(0.0);
+  var total = 0.0;
+
+  for (var x = -4.0; x <= 4.0; x += 1.0) {
+    for (var y = -4.0; y <= 4.0; y += 1.0) {
+      let offsetColor = textureSample(
+        sourceTexture,
+        sourceTextureSampler,
+        texCoord + vec2f(x, y) / texSize
+      );
+      let weight = pow(
+        1.0 - abs(dot(offsetColor.rgb - center.rgb, vec3f(0.25))),
+        adjustedExponent
+      );
+      color += offsetColor * weight;
+      total += weight;
+    }
+  }
 
-	return color / total;
-} 
+  return color / total;
+}
 `
 );
 var fs2 = (
   /* glsl */
-  `uniform dedenoiseUniforms {
+  `layout(std140) uniform denoiseUniforms {
   float strength;
 } denoise;
 
-vec4 dedenoise_sampleColor(sampler2D source, vec2 texSize, vec2 texCoord) {
-  float adjustedExponent = 3. + 200. * pow(1. - noise.strength, 4.);
+vec4 denoise_sampleColor(sampler2D source, vec2 texSize, vec2 texCoord) {
+  float adjustedExponent = 3. + 200. * pow(1. - denoise.strength, 4.);
 
   vec4 center = texture(source, texCoord);
   vec4 color = vec4(0.0);
@@ -184,50 +191,43 @@ var denoise = {
 // dist/passes/postprocessing/image-adjust-filters/huesaturation.js
 var source3 = (
   /* wgsl */
-  `
-struct hueSaturationUniforms {
+  `struct hueSaturationUniforms {
   hue: f32,
   saturation: f32,
 };
 
-@group(0), @binding(1) var<uniform> hueSaturation: hueSaturationUniforms;
-
-fn hueSaturation_filterColor(color: vec4<f32>) -> vec4<f32> {
-	let angle: f32 = hueSaturation.hue * 3.1415927;
-	let s: f32 = sin(angle);
-	let c: f32 = cos(angle);
-	let weights: vec3<f32> = (vec3<f32>(2. * c, -sqrt(3.) * s - c, sqrt(3.) * s - c) + 1.) / 3.;
-	let len: f32 = length(color.rgb);
-	var colorrgb = color.rgb;
-	colorrgb = vec3<f32>(dot(color.rgb, weights.xyz), dot(color.rgb, weights.zxy), dot(color.rgb, weights.yzx));
-	color.r = colorrgb.x;
-	color.g = colorrgb.y;
-	color.b = colorrgb.z;
-	let average: f32 = (color.r + color.g + color.b) / 3.;
-	if (hueSaturation.saturation > 0.) {
-		var colorrgb = color.rgb;
-	colorrgb = color.rgb + ((average - color.rgb) * (1. - 1. / (1.001 - hueSaturation.saturation)));
-	color.r = colorrgb.x;
-	color.g = colorrgb.y;
-	color.b = colorrgb.z;
-	} else { 
-		var colorrgb = color.rgb;
-	colorrgb = color.rgb + ((average - color.rgb) * -hueSaturation.saturation);
-	color.r = colorrgb.x;
-	color.g = colorrgb.y;
-	color.b = colorrgb.z;
-	}
-	return color;
-} 
+@group(0) @binding(auto) var<uniform> hueSaturation: hueSaturationUniforms;
 
-fn hueSaturation_filterColor_ext(color: vec4<f32>, texSize: vec2<f32>, texCoord: vec2<f32>) -> vec4<f32> {
-	return hueSaturation_filterColor(color);
-} 
+fn hueSaturation_filterColor(color: vec4f) -> vec4f {
+  let angle = hueSaturation.hue * 3.14159265;
+  let s = sin(angle);
+  let c = cos(angle);
+  let weights = (vec3f(2.0 * c, -sqrt(3.0) * s - c, sqrt(3.0) * s - c) + vec3f(1.0)) / 3.0;
+
+  var resultRgb = vec3f(
+    dot(color.rgb, weights.xyz),
+    dot(color.rgb, weights.zxy),
+    dot(color.rgb, weights.yzx)
+  );
+
+  let average = (resultRgb.r + resultRgb.g + resultRgb.b) / 3.0;
+  if (hueSaturation.saturation > 0.0) {
+    resultRgb += (vec3f(average) - resultRgb) * (1.0 - 1.0 / (1.001 - hueSaturation.saturation));
+  } else {
+    resultRgb += (vec3f(average) - resultRgb) * (-hueSaturation.saturation);
+  }
+
+  return vec4f(resultRgb, color.a);
+}
+
+fn hueSaturation_filterColor_ext(color: vec4f, texSize: vec2f, texCoord: vec2f) -> vec4f {
+  return hueSaturation_filterColor(color);
+}
 `
 );
 var fs3 = (
   /* glsl */
-  `uniform hueSaturationUniforms {
+  `layout(std140) uniform hueSaturationUniforms {
   float hue;
   float saturation;
 } hueSaturation;
@@ -280,27 +280,28 @@ var hueSaturation = {
 var source4 = (
   /* wgsl */
   `struct noiseUniforms {
-  amount: f32
+  amount: f32,
 };
 
-@group(0) @binding(1) var<uniform> noise: noiseUniforms;
+@group(0) @binding(auto) var<uniform> noise: noiseUniforms;
 
 fn rand(co: vec2f) -> f32 {
 	return fract(sin(dot(co.xy, vec2f(12.9898, 78.233))) * 43758.547);
 } 
 
 fn noise_filterColor_ext(color: vec4f, texSize: vec2f, texCoord: vec2f) -> vec4f {
-	let diff: f32 = (rand(texCoord) - 0.5) * noise.amount;
-	color.r = color.r + (diff);
-	color.g = color.g + (diff);
-	color.b = color.b + (diff);
-	return color;
-} 
+  let diff = (rand(texCoord) - 0.5) * noise.amount;
+  var result = color;
+  result.r += diff;
+  result.g += diff;
+  result.b += diff;
+  return result;
+}
 `
 );
 var fs4 = (
   /* glsl */
-  `uniform noiseUniforms {
+  `layout(std140) uniform noiseUniforms {
   float amount;
 } noise;
 
@@ -336,32 +337,33 @@ var noise = {
 var source5 = (
   /* wgsl */
   `struct sepiaUniforms {
-  amount: f32
+  amount: f32,
 };
 
-@group(0) @binding(1) var<uniform> sepia: sepiaUniforms;
+@group(0) @binding(auto) var<uniform> sepia: sepiaUniforms;
 
 fn sepia_filterColor(color: vec4f) -> vec4f {
-  let r: f32 = color.r;
-  let g: f32 = color.g;
-  let b: f32 = color.b;
+  let r = color.r;
+  let g = color.g;
+  let b = color.b;
 
-  color.r =
+  var result = color;
+  result.r =
     min(1.0, (r * (1.0 - (0.607 * sepia.amount))) + (g * (0.769 * sepia.amount)) + (b * (0.189 * sepia.amount)));
-  color.g = min(1.0, (r * 0.349 * sepia.amount) + (g * (1.0 - (0.314 * sepia.amount))) + (b * 0.168 * sepia.amount));
-  color.b = min(1.0, (r * 0.272 * sepia.amount) + (g * 0.534 * sepia.amount) + (b * (1.0 - (0.869 * sepia.amount))));
+  result.g = min(1.0, (r * 0.349 * sepia.amount) + (g * (1.0 - (0.314 * sepia.amount))) + (b * 0.168 * sepia.amount));
+  result.b = min(1.0, (r * 0.272 * sepia.amount) + (g * 0.534 * sepia.amount) + (b * (1.0 - (0.869 * sepia.amount))));
 
-  return color;
+  return result;
 }
 
-vec4 sepia_filterColor_ext(vec4 color, vec2 texSize, vec2 texCoord) {
+fn sepia_filterColor_ext(color: vec4f, texSize: vec2f, texCoord: vec2f) -> vec4f {
   return sepia_filterColor(color);
 }
 `
 );
 var fs5 = (
   /* glsl */
-  `uniform sepiaUniforms {
+  `layout(std140) uniform sepiaUniforms {
   float amount;
 } sepia;
 
@@ -402,27 +404,27 @@ var sepia = {
 var source6 = (
   /* wgsl */
   `struct vibranceUniforms {
-  amount: f32
+  amount: f32,
 };
 
-@group(0) @binding(1) var<uniform> vibrance: vibranceUniforms;
+@group(0) @binding(auto) var<uniform> vibrance: vibranceUniforms;
 
-fn vibrance_filterColor(vec4f color) -> vec4f {
-  let average: f32 = (color.r + color.g + color.b) / 3.0;
-  let mx: f32 = max(color.r, max(color.g, color.b));
-  let amt: f32 = (mx - average) * (-vibrance.amount * 3.0);
-  color.rgb = mix(color.rgb, vec3(mx), amt);
-  return color;
+fn vibrance_filterColor(color: vec4f) -> vec4f {
+  let average = (color.r + color.g + color.b) / 3.0;
+  let mx = max(color.r, max(color.g, color.b));
+  let amt = (mx - average) * (-vibrance.amount * 3.0);
+  let resultRgb = mix(color.rgb, vec3f(mx), amt);
+  return vec4f(resultRgb, color.a);
 }
 
-vec4 vibrance_filterColor_ext(vec4 color, vec2 texSize, vec2 texCoord) {
+fn vibrance_filterColor_ext(color: vec4f, texSize: vec2f, texCoord: vec2f) -> vec4f {
   return vibrance_filterColor(color);
 }
 `
 );
 var fs6 = (
   /* glsl */
-  `uniform vibranceUniforms {
+  `layout(std140) uniform vibranceUniforms {
   float amount;
 } vibrance;
 
@@ -459,29 +461,25 @@ var source7 = (
   /* wgsl */
   `struct vignetteUniforms {
   radius: f32,
-  amount: f32
+  amount: f32,
 };
 
-@group(0) @binding(1) var<uniform> vignette: vignetteUniforms;
-
-fn vibrance_filterColor(color: vec4f) -> vec4f {
-  let average: f32 = (color.r + color.g + color.b) / 3.0;
-  let mx: f32 = max(color.r, max(color.g, color.b));
-  let amt: f32 = (mx - average) * (-vibrance.amount * 3.0);
-  color.rgb = mix(color.rgb, vec3f(mx), amt);
-  return color;
-}
+@group(0) @binding(auto) var<uniform> vignette: vignetteUniforms;
 
-fn vignette_filterColor_ext(color: vec4f, texSize: vec2f, texCoord: vec2f) ->vec4f {
-  let dist: f32 = distance(texCoord, vec2f(0.5, 0.5));
-  let ratio: f32 = smoothstep(0.8, vignette.radius * 0.799, dist * (vignette.amount + vignette.radius));
-  return color.rgba * ratio + (1.0 - ratio)*vec4f(0.0, 0.0, 0.0, 1.0);
+fn vignette_filterColor_ext(color: vec4f, texSize: vec2f, texCoord: vec2f) -> vec4f {
+  let dist = distance(texCoord, vec2f(0.5, 0.5));
+  let ratio = smoothstep(
+    0.8,
+    vignette.radius * 0.799,
+    dist * (vignette.amount + vignette.radius)
+  );
+  return color * ratio + vec4f(0.0, 0.0, 0.0, 1.0) * (1.0 - ratio);
 }
 `
 );
 var fs7 = (
   /* glsl */
-  `uniform vignetteUniforms {
+  `layout(std140) uniform vignetteUniforms {
   float radius;
   float amount;
 } vignette;
@@ -518,7 +516,7 @@ var vignette = {
 var import_shadertools = require("@luma.gl/shadertools");
 var source8 = (
   /* wgsl */
-  `uniform tiltShiftUniforms {
+  `struct tiltShiftUniforms {
   blurRadius: f32,
   gradientRadius: f32,
   start: vec2f,
@@ -526,41 +524,59 @@ var source8 = (
   invert: u32,
 };
 
-@group(0) @binding(1) var<uniform> tiltShift: tiltShiftUniforms;
+@group(0) @binding(auto) var<uniform> tiltShift: tiltShiftUniforms;
 
-fn tiltShift_getDelta(vec2 texSize) -> vec2f {
-  vec2 vector = normalize((tiltShift.end - tiltShift.start) * texSize);
-  return tiltShift.invert ? vec2(-vector.y, vector.x) : vector;
+fn tiltShift_getDelta(texSize: vec2f) -> vec2f {
+  let vector = normalize((tiltShift.end - tiltShift.start) * texSize);
+  return select(vector, vec2f(-vector.y, vector.x), tiltShift.invert != 0u);
 }
 
-fn tiltShift_sampleColor(sampler2D source, vec2 texSize, vec2 texCoord) -> vec4f {
-  vec4 color = vec4(0.0);
-  float total = 0.0;
+fn tiltShift_sampleColor(
+  sourceTexture: texture_2d<f32>,
+  sourceTextureSampler: sampler,
+  texSize: vec2f,
+  texCoord: vec2f
+) -> vec4f {
+  var color = vec4f(0.0);
+  var total = 0.0;
 
   /* randomize the lookup values to hide the fixed number of samples */
-  float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);
+  let offset = random(vec3f(12.9898, 78.233, 151.7182), 0.0);
 
-  vec2 normal = normalize(vec2((tiltShift.start.y - tiltShift.end.y) * texSize.y, (tiltShift.end.x - tiltShift.start.x) * texSize.x));
-  float radius = smoothstep(0.0, 1.0,
-    abs(dot(texCoord * texSize - tiltShift.start * texSize, normal)) / tiltShift.gradientRadius) * tiltShift.blurRadius;
-
-  for (float t = -30.0; t <= 30.0; t++) {
-    float percent = (t + offset - 0.5) / 30.0;
-    float weight = 1.0 - abs(percent);
-    vec4 offsetColor = texture(source, texCoord + tiltShift_getDelta(texSize) / texSize * percent * radius);
+  let normal = normalize(
+    vec2f(
+      (tiltShift.start.y - tiltShift.end.y) * texSize.y,
+      (tiltShift.end.x - tiltShift.start.x) * texSize.x
+    )
+  );
+  let radius =
+    smoothstep(
+      0.0,
+      1.0,
+      abs(dot(texCoord * texSize - tiltShift.start * texSize, normal)) / tiltShift.gradientRadius
+    ) * tiltShift.blurRadius;
+
+  for (var t = -30.0; t <= 30.0; t += 1.0) {
+    let percent = (t + offset - 0.5) / 30.0;
+    let weight = 1.0 - abs(percent);
+    let offsetColor = textureSample(
+      sourceTexture,
+      sourceTextureSampler,
+      texCoord + tiltShift_getDelta(texSize) / texSize * percent * radius
+    );
 
     color += offsetColor * weight;
     total += weight;
   }
 
-  color = color / total;
+  color /= total;
   return color;
 }
 `
 );
 var fs8 = (
   /* glsl */
-  `uniform tiltShiftUniforms {
+  `layout(std140) uniform tiltShiftUniforms {
   float blurRadius;
   float gradientRadius;
   vec2 start;
@@ -628,46 +644,55 @@ var tiltShift = {
 var import_shadertools2 = require("@luma.gl/shadertools");
 var source9 = (
   /* wgsl */
-  `uniform triangleBlurUniforms {
+  `struct triangleBlurUniforms {
   radius: f32,
   delta: vec2f,
-}
+};
 
-@group(0) @binding(1) var<uniform> triangleBlur: triangleBlurUniforms;
+@group(0) @binding(auto) var<uniform> triangleBlur: triangleBlurUniforms;
 
-vec4 triangleBlur_sampleColor(sampler2D source, vec2 texSize, vec2 texCoord) {
-  vec2 adjustedDelta = triangleBlur.delta * triangleBlur.radius / texSize;
+fn triangleBlur_sampleColor(
+  sourceTexture: texture_2d<f32>,
+  sourceTextureSampler: sampler,
+  texSize: vec2f,
+  texCoord: vec2f
+) -> vec4f {
+  let adjustedDelta = triangleBlur.delta * triangleBlur.radius / texSize;
 
-  vec4 color = vec4(0.0);
-  float total = 0.0;
+  var color = vec4f(0.0);
+  var total = 0.0;
 
   /* randomize the lookup values to hide the fixed number of samples */
-  float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);
-
-  for (float t = -30.0; t <= 30.0; t++) {
-    float percent = (t + offset - 0.5) / 30.0;
-    float weight = 1.0 - abs(percent);
-    vec4 offsetColor = texture(source, texCoord + adjustedDelta * percent);
+  let offset = random(vec3f(12.9898, 78.233, 151.7182), 0.0);
+
+  for (var t = -30.0; t <= 30.0; t += 1.0) {
+    let percent = (t + offset - 0.5) / 30.0;
+    let weight = 1.0 - abs(percent);
+    let offsetColor = textureSample(
+      sourceTexture,
+      sourceTextureSampler,
+      texCoord + adjustedDelta * percent
+    );
 
     /* switch to pre-multiplied alpha to correctly blur transparent images */
-    offsetColor.rgb *= offsetColor.a;
+    let premultipliedOffsetColor = vec4f(offsetColor.rgb * vec3f(offsetColor.a), offsetColor.a);
 
-    color += offsetColor * weight;
+    color += premultipliedOffsetColor * weight;
     total += weight;
   }
 
-  color = color / total;
+  color /= total;
 
   /* switch back from pre-multiplied alpha */
-  color.rgb /= color.a + 0.00001;
+  let unpremultipliedRgb = color.rgb / vec3f(color.a + 0.00001);
 
-  return color;
+  return vec4f(unpremultipliedRgb, color.a);
 }
 `
 );
 var fs9 = (
   /* glsl */
-  `uniform triangleBlurUniforms {
+  `layout(std140) uniform triangleBlurUniforms {
   float radius;
   vec2 delta;
 } triangleBlur;
@@ -728,31 +753,40 @@ var import_shadertools3 = require("@luma.gl/shadertools");
 var source10 = (
   /* wgsl */
   `
-uniform zoomBlurUniforms {
+struct zoomBlurUniforms {
   center: vec2f,
   strength: f32,
 };
 
-@group(0) @binding(1) var<uniform> zoomBlur : zoomBlurUniforms;
+@group(0) @binding(auto) var<uniform> zoomBlur : zoomBlurUniforms;
 
 
-fn zoomBlur_sampleColor(sampler2D source, vec2 texSize, vec2 texCoord) -> vec4f {
-  vec4 color = vec4(0.0);
-  float total = 0.0;
-  vec2 toCenter = zoomBlur.center * texSize - texCoord * texSize;
+fn zoomBlur_sampleColor(
+  sourceTexture: texture_2d<f32>,
+  sourceTextureSampler: sampler,
+  texSize: vec2f,
+  texCoord: vec2f
+) -> vec4f {
+  var color = vec4f(0.0);
+  var total = 0.0;
+  let toCenter = zoomBlur.center * texSize - texCoord * texSize;
 
   /* randomize the lookup values to hide the fixed number of samples */
-  float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);
-
-  for (float t = 0.0; t <= 40.0; t++) {
-    float percent = (t + offset) / 40.0;
-    float weight = 4.0 * (percent - percent * percent);
-    vec4 offsetColor = texture(source, texCoord + toCenter * percent * zoomBlur.strength / texSize);
+  let offset = random(vec3f(12.9898, 78.233, 151.7182), 0.0);
+
+  for (var t = 0.0; t <= 40.0; t += 1.0) {
+    let percent = (t + offset) / 40.0;
+    let weight = 4.0 * (percent - percent * percent);
+    let offsetColor = textureSample(
+      sourceTexture,
+      sourceTextureSampler,
+      texCoord + toCenter * percent * zoomBlur.strength / texSize
+    );
     color += offsetColor * weight;
     total += weight;
   }
 
-  color = color / total;
+  color /= total;
   return color;
 }
 `
@@ -760,7 +794,7 @@ fn zoomBlur_sampleColor(sampler2D source, vec2 texSize, vec2 texCoord) -> vec4f
 var fs10 = (
   /* glsl */
   `
-uniform zoomBlurUniforms {
+layout(std140) uniform zoomBlurUniforms {
   vec2 center;
   float strength;
 } zoomBlur;
@@ -810,44 +844,46 @@ var source11 = (
   `struct colorHalftoneUniforms {
   center: vec2f,
   angle: f32,
-  size: f32.
+  size: f32,
 };
 
-@group(0) @binding(1) var<uniform> colorHalftone: colorHalftoneUniforms;
+@group(0) @binding(auto) var<uniform> colorHalftone: colorHalftoneUniforms;
 
 fn pattern(angle: f32, scale: f32, texSize: vec2f, texCoord: vec2f) -> f32 {
-  let s: f32 = sin(angle), c = cos(angle);
-  let tex: vec2f = texCoord * texSize - colorHalftone.center * texSize;
-  let point: vec2f = vec2(
-	  c * tex.x - s * tex.y,
-	  s * tex.x + c * tex.y
+  let s = sin(angle);
+  let c = cos(angle);
+  let tex = texCoord * texSize - colorHalftone.center * texSize;
+  let point = vec2f(
+    c * tex.x - s * tex.y,
+    s * tex.x + c * tex.y
   ) * scale;
   return (sin(point.x) * sin(point.y)) * 4.0;
 }
 
-fn colorHalftone_filterColor_ext(vec4f color, vec2f texSize, vec2f texCoord) -> vec4f {
-  let scale: f32 = 3.1514 / colorHalftone.size;
-  let cmy: vec3f = 1.0 - color.rgb;
-  let k: f32 = min(cmy.x, min(cmy.y, cmy.z));
+fn colorHalftone_filterColor_ext(color: vec4f, texSize: vec2f, texCoord: vec2f) -> vec4f {
+  let scale = 3.1514 / colorHalftone.size;
+  var cmy = vec3f(1.0) - color.rgb;
+  var k = min(cmy.x, min(cmy.y, cmy.z));
+  let safeDenominator = max(1.0 - k, 0.00001);
 
-  cmy = (cmy - k) / (1.0 - k);
+  cmy = (cmy - vec3f(k)) / safeDenominator;
   cmy = clamp(
-	  cmy * 10.0 - 3.0 + vec3(
+    cmy * 10.0 - vec3f(3.0) + vec3f(
       pattern(colorHalftone.angle + 0.26179, scale, texSize, texCoord),
-	    pattern(colorHalftone.angle + 1.30899, scale, texSize, texCoord),
+      pattern(colorHalftone.angle + 1.30899, scale, texSize, texCoord),
       pattern(colorHalftone.angle, scale, texSize, texCoord)
     ),
-	  0.0,
-	  1.0
+    vec3f(0.0),
+    vec3f(1.0)
   );
   k = clamp(k * 10.0 - 5.0 + pattern(colorHalftone.angle + 0.78539, scale, texSize, texCoord), 0.0, 1.0);
-  return vec4(1.0 - cmy - k, color.a);
+  return vec4f(vec3f(1.0) - cmy - vec3f(k), color.a);
 }
 `
 );
 var fs11 = (
   /* glsl */
-  `uniform colorHalftoneUniforms {
+  `layout(std140) uniform colorHalftoneUniforms {
   vec2 center;
   float angle;
   float size;
@@ -905,35 +941,35 @@ var colorHalftone = {
 // dist/passes/postprocessing/image-fun-filters/dotscreen.js
 var source12 = (
   /* wgsl */
-  `uniform dotScreenUniforms {
+  `struct dotScreenUniforms {
   center: vec2f,
   angle: f32,
   size: f32,
 };
 
-@group(0) @binding(1) dotScreen: dotScreenUniforms;
+@group(0) @binding(auto) var<uniform> dotScreen: dotScreenUniforms;
 
 fn pattern(texSize: vec2f, texCoord: vec2f) -> f32 {
-  let scale: f32 = 3.1415 / dotScreen.size;
-
-  let s: f32 = sin(dotScreen.angle), c = cos(dotScreen.angle);
-  tex: vec2f = texCoord * texSize - dotScreen.center * texSize;
-  point = vec2f( 
-    c: * tex.x - s * tex.y,
+  let scale = 3.1415 / dotScreen.size;
+  let s = sin(dotScreen.angle);
+  let c = cos(dotScreen.angle);
+  let tex = texCoord * texSize - dotScreen.center * texSize;
+  let point = vec2f(
+    c * tex.x - s * tex.y,
     s * tex.x + c * tex.y
   ) * scale;
   return (sin(point.x) * sin(point.y)) * 4.0;
 }
 
-fn dotScreen_filterColor_ext(vec4 color, texSize: vec2f, texCoord: vec2f) -> vec4f {
-  let average: f32 = (color.r + color.g + color.b) / 3.0;
-  return vec4(vec3(average * 10.0 - 5.0 + pattern(texSize, texCoord)), color.a);
+fn dotScreen_filterColor_ext(color: vec4f, texSize: vec2f, texCoord: vec2f) -> vec4f {
+  let average = (color.r + color.g + color.b) / 3.0;
+  return vec4f(vec3f(average * 10.0 - 5.0 + pattern(texSize, texCoord)), color.a);
 }
 `
 );
 var fs12 = (
   /* glsl */
-  `uniform dotScreenUniforms {
+  `layout(std140) uniform dotScreenUniforms {
   vec2 center;
   float angle;
   float size;
@@ -982,25 +1018,35 @@ var source13 = (
   /* wgsl */
   `struct edgeWorkUniforms {
   radius: f32,
-  int mode: uint32,
+  mode: u32,
 };
 
-@group(0) @binding(1) var<uniform> edgeWork: edgeWorkUniforms;
+@group(0) @binding(auto) var<uniform> edgeWork: edgeWorkUniforms;
 
-fn edgeWork_sampleColorRGB(sampler2D source, vec2 texSize, vec2 texCoord, vec2 delta) -> vec4f {
-  vec2 relativeDelta = edgeWork.radius * delta / texSize;
+fn edgeWork_sampleColorRGB(
+  sourceTexture: texture_2d<f32>,
+  sourceTextureSampler: sampler,
+  texSize: vec2f,
+  texCoord: vec2f,
+  delta: vec2f
+) -> vec4f {
+  let relativeDelta = edgeWork.radius * delta / texSize;
 
-  vec2 color = vec2(0.0);
-  vec2 total = vec2(0.0);
+  var color = vec2f(0.0);
+  var total = vec2f(0.0);
 
   /* randomize the lookup values to hide the fixed number of samples */
-  float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);
-
-  for (float t = -30.0; t <= 30.0; t++) {
-    float percent = (t + offset - 0.5) / 30.0;
-    float weight = 1.0 - abs(percent);
-    vec3 sampleColor = texture(source, texCoord + relativeDelta * percent).rgb;
-    float average = (sampleColor.r + sampleColor.g + sampleColor.b) / 3.0;
+  let offset = random(vec3f(12.9898, 78.233, 151.7182), 0.0);
+
+  for (var t = -30.0; t <= 30.0; t += 1.0) {
+    let percent = (t + offset - 0.5) / 30.0;
+    var weight = 1.0 - abs(percent);
+    let sampleColor = textureSample(
+      sourceTexture,
+      sourceTextureSampler,
+      texCoord + relativeDelta * percent
+    ).rgb;
+    let average = (sampleColor.r + sampleColor.g + sampleColor.b) / 3.0;
     color.x += average * weight;
     total.x += weight;
     if (abs(t) < 15.0) {
@@ -1009,13 +1055,74 @@ fn edgeWork_sampleColorRGB(sampler2D source, vec2 texSize, vec2 texCoord, vec2 d
       total.y += weight;
     }
   }
-  return vec4(color / total, 0.0, 1.0);
+  return vec4f(color / total, 0.0, 1.0);
+}
+
+fn edgeWork_sampleColorXY(
+  sourceTexture: texture_2d<f32>,
+  sourceTextureSampler: sampler,
+  texSize: vec2f,
+  texCoord: vec2f,
+  delta: vec2f
+) -> vec4f {
+  let relativeDelta = edgeWork.radius * delta / texSize;
+
+  var color = vec2f(0.0);
+  var total = vec2f(0.0);
+
+  /* randomize the lookup values to hide the fixed number of samples */
+  let offset = random(vec3f(12.9898, 78.233, 151.7182), 0.0);
+
+  for (var t = -30.0; t <= 30.0; t += 1.0) {
+    let percent = (t + offset - 0.5) / 30.0;
+    var weight = 1.0 - abs(percent);
+    let sampleColor = textureSample(
+      sourceTexture,
+      sourceTextureSampler,
+      texCoord + relativeDelta * percent
+    ).xy;
+    color.x += sampleColor.x * weight;
+    total.x += weight;
+    if (abs(t) < 15.0) {
+      weight = weight * 2.0 - 1.0;
+      color.y += sampleColor.y * weight;
+      total.y += weight;
+    }
+  }
+
+  let c = clamp(10000.0 * (color.y / total.y - color.x / total.x) + 0.5, 0.0, 1.0);
+  return vec4f(c, c, c, 1.0);
+}
+
+fn edgeWork_sampleColor(
+  sourceTexture: texture_2d<f32>,
+  sourceTextureSampler: sampler,
+  texSize: vec2f,
+  texCoord: vec2f
+) -> vec4f {
+  if (edgeWork.mode == 0u) {
+    return edgeWork_sampleColorRGB(
+      sourceTexture,
+      sourceTextureSampler,
+      texSize,
+      texCoord,
+      vec2f(1.0, 0.0)
+    );
+  }
+
+  return edgeWork_sampleColorXY(
+    sourceTexture,
+    sourceTextureSampler,
+    texSize,
+    texCoord,
+    vec2f(0.0, 1.0)
+  );
 }
 `
 );
 var fs13 = (
   /* glsl */
-  `uniform edgeWorkUniforms {
+  `layout(std140) uniform edgeWorkUniforms {
   float radius;
   int mode;
 } edgeWork;
@@ -1116,50 +1223,62 @@ var source14 = (
   scale: f32,
 };
 
-@group(0) @binding(1) var<uniform> hexagonalPixelate: hexagonalPixelateUniforms;
+@group(0) @binding(auto) var<uniform> hexagonalPixelate: hexagonalPixelateUniforms;
 
-fn hexagonalPixelate_sampleColor(sampler2D source, vec2 texSize, vec2 texCoord) -> vec4f {
-  vec2 tex = (texCoord * texSize - hexagonalPixelate.center * texSize) / hexagonalPixelate.scale;
+fn hexagonalPixelate_sampleColor(
+  sourceTexture: texture_2d<f32>,
+  sourceTextureSampler: sampler,
+  texSize: vec2f,
+  texCoord: vec2f
+) -> vec4f {
+  var tex = (texCoord * texSize - hexagonalPixelate.center * texSize) / hexagonalPixelate.scale;
   tex.y /= 0.866025404;
   tex.x -= tex.y * 0.5;
 
-  vec2 a;
+  var a = vec2f(0.0);
   if (tex.x + tex.y - floor(tex.x) - floor(tex.y) < 1.0) {
-    a = vec2(floor(tex.x), floor(tex.y));
+    a = vec2f(floor(tex.x), floor(tex.y));
+  } else {
+    a = vec2f(ceil(tex.x), ceil(tex.y));
   }
-  else a = vec2(ceil(tex.x), ceil(tex.y));
-  vec2 b = vec2(ceil(tex.x), floor(tex.y));
-  vec2 c = vec2(floor(tex.x), ceil(tex.y));
-
-  vec3 TEX = vec3(tex.x, tex.y, 1.0 - tex.x - tex.y);
-  vec3 A = vec3(a.x, a.y, 1.0 - a.x - a.y);
-  vec3 B = vec3(b.x, b.y, 1.0 - b.x - b.y);
-  vec3 C = vec3(c.x, c.y, 1.0 - c.x - c.y);
-
-  float alen = length(TEX - A);
-  float blen = length(TEX - B);
-  float clen = length(TEX - C);
-
-  vec2 choice;
-  if (alen < blen) {
-    if (alen < clen) choice = a;
-    else choice = c;
+  let b = vec2f(ceil(tex.x), floor(tex.y));
+  let c = vec2f(floor(tex.x), ceil(tex.y));
+
+  let texBarycentric = vec3f(tex.x, tex.y, 1.0 - tex.x - tex.y);
+  let aBarycentric = vec3f(a.x, a.y, 1.0 - a.x - a.y);
+  let bBarycentric = vec3f(b.x, b.y, 1.0 - b.x - b.y);
+  let cBarycentric = vec3f(c.x, c.y, 1.0 - c.x - c.y);
+
+  let aLength = length(texBarycentric - aBarycentric);
+  let bLength = length(texBarycentric - bBarycentric);
+  let cLength = length(texBarycentric - cBarycentric);
+
+  var choice = vec2f(0.0);
+  if (aLength < bLength) {
+    if (aLength < cLength) {
+      choice = a;
+    } else {
+      choice = c;
+    }
   } else {
-    if (blen < clen) choice = b;
-    else choice = c;
+    if (bLength < cLength) {
+      choice = b;
+    } else {
+      choice = c;
+    }
   }
 
   choice.x += choice.y * 0.5;
   choice.y *= 0.866025404;
   choice *= hexagonalPixelate.scale / texSize;
 
-  return texture(source, choice + hexagonalPixelate.center);
+  return textureSample(sourceTexture, sourceTextureSampler, choice + hexagonalPixelate.center);
 }
 `
 );
 var fs14 = (
   /* glsl */
-  `uniform hexagonalPixelateUniforms {
+  `layout(std140) uniform hexagonalPixelateUniforms {
   vec2 center;
   float scale;
 } hexagonalPixelate;
@@ -1223,23 +1342,32 @@ var hexagonalPixelate = {
 // dist/passes/postprocessing/image-fun-filters/ink.js
 var source15 = (
   /* wgsl */
-  `uniform inkUniforms {
+  `struct inkUniforms {
   strength: f32,
 };
 
-@group(0) @binding(1) var<uniform> ink: inkUniforms;
-
-fn ink_sampleColor(sampler2D source, vec2 texSize, vec2 texCoord) -> vec4f {
-  vec2 dx = vec2(1.0 / texSize.x, 0.0);
-  vec2 dy = vec2(0.0, 1.0 / texSize.y);
-  vec4 color = texture(source, texCoord);
-  float bigTotal = 0.0;
-  float smallTotal = 0.0;
-  vec3 bigAverage = vec3(0.0);
-  vec3 smallAverage = vec3(0.0);
-  for (float x = -2.0; x <= 2.0; x += 1.0) {
-    for (float y = -2.0; y <= 2.0; y += 1.0) {
-      vec3 offsetColor = texture(source, texCoord + dx * x + dy * y).rgb;
+@group(0) @binding(auto) var<uniform> ink: inkUniforms;
+
+fn ink_sampleColor(
+  sourceTexture: texture_2d<f32>,
+  sourceTextureSampler: sampler,
+  texSize: vec2f,
+  texCoord: vec2f
+) -> vec4f {
+  let dx = vec2f(1.0 / texSize.x, 0.0);
+  let dy = vec2f(0.0, 1.0 / texSize.y);
+  let color = textureSample(sourceTexture, sourceTextureSampler, texCoord);
+  var bigTotal = 0.0;
+  var smallTotal = 0.0;
+  var bigAverage = vec3f(0.0);
+  var smallAverage = vec3f(0.0);
+  for (var x = -2.0; x <= 2.0; x += 1.0) {
+    for (var y = -2.0; y <= 2.0; y += 1.0) {
+      let offsetColor = textureSample(
+        sourceTexture,
+        sourceTextureSampler,
+        texCoord + dx * x + dy * y
+      ).rgb;
       bigAverage += offsetColor;
       bigTotal += 1.0;
       if (abs(x) + abs(y) < 2.0) {
@@ -1248,15 +1376,15 @@ fn ink_sampleColor(sampler2D source, vec2 texSize, vec2 texCoord) -> vec4f {
       }
     }
   }
-  vec3 edge = max(vec3(0.0), bigAverage / bigTotal - smallAverage / smallTotal);
-  float power = ink.strength * ink.strength * ink.strength * ink.strength * ink.strength;
-  return vec4(color.rgb - dot(edge, edge) * power * 100000.0, color.a);
+  let edge = max(vec3f(0.0), bigAverage / bigTotal - smallAverage / smallTotal);
+  let power = ink.strength * ink.strength * ink.strength * ink.strength * ink.strength;
+  return vec4f(color.rgb - vec3f(dot(edge, edge) * power * 100000.0), color.a);
 }
 `
 );
 var fs15 = (
   /* glsl */
-  `uniform inkUniforms {
+  `layout(std140) uniform inkUniforms {
   float strength;
 } ink;
 
@@ -1303,33 +1431,43 @@ var ink = {
 // dist/passes/postprocessing/image-fun-filters/magnify.js
 var source16 = (
   /* wgsl */
-  `uniform magnifyUniforms {
-  screenXY: vec2f;
-  radiusPixels: f32;
-  zoom: f32;
-  borderWidthPixels: f32;
-  borderColor: vec4f;
+  `struct magnifyUniforms {
+  screenXY: vec2f,
+  radiusPixels: f32,
+  zoom: f32,
+  borderWidthPixels: f32,
+  borderColor: vec4f,
 };
 
-@group(0) @binding(1) var<uniform> magnify: magnifyUniforms;
+@group(0) @binding(auto) var<uniform> magnify: magnifyUniforms;
 
-fn magnify_sampleColor(sampler2D source, vec2 texSize, vec2 texCoord) -> vec4f {
-  vec2 pos = vec2(magnify.screenXY.x, 1.0 - magnify.screenXY.y);
-  float dist = distance(texCoord * texSize, pos * texSize);
+fn magnify_sampleColor(
+  sourceTexture: texture_2d<f32>,
+  sourceTextureSampler: sampler,
+  texSize: vec2f,
+  texCoord: vec2f
+) -> vec4f {
+  let pos = vec2f(magnify.screenXY.x, 1.0 - magnify.screenXY.y);
+  let dist = distance(texCoord * texSize, pos * texSize);
   if (dist < magnify.radiusPixels) {
-    return texture(source, (texCoord - pos) / magnify.zoom + pos);
+    return textureSampleLevel(
+      sourceTexture,
+      sourceTextureSampler,
+      (texCoord - pos) / magnify.zoom + pos,
+      0.0
+    );
   }
 
   if (dist <= magnify.radiusPixels + magnify.borderWidthPixels) {
     return magnify.borderColor;
   }
-  return texture(source, texCoord);
+  return textureSampleLevel(sourceTexture, sourceTextureSampler, texCoord, 0.0);
 }
 `
 );
 var fs16 = (
   /* glsl */
-  `uniform magnifyUniforms {
+  `layout(std140) uniform magnifyUniforms {
   vec2 screenXY;
   float radiusPixels;
   float zoom;
@@ -1376,10 +1514,15 @@ var magnify = {
 // dist/passes/postprocessing/image-warp-filters/warp.js
 var source17 = (
   /* wgsl */
-  `vec4 warp_sampleColor(sampler2D source, vec2 texSize, vec2 coord) {
-  vec4 color = texture(source, coord / texSize);
-  vec2 clampedCoord = clamp(coord, vec2(0.0), texSize);
-  if (coord != clampedCoord) {
+  `fn warp_sampleColor(
+  sourceTexture: texture_2d<f32>,
+  sourceTextureSampler: sampler,
+  texSize: vec2f,
+  coord: vec2f
+) -> vec4f {
+  var color = textureSample(sourceTexture, sourceTextureSampler, coord / texSize);
+  let clampedCoord = clamp(coord, vec2f(0.0), texSize);
+  if (any(coord != clampedCoord)) {
     /* fade to transparent if we are outside the image */
     color.a *= max(0.0, 1.0 - length(coord - clampedCoord));
   }
@@ -1410,42 +1553,56 @@ var warp = {
 // dist/passes/postprocessing/image-warp-filters/bulgepinch.js
 var source18 = (
   /* wgsl */
-  `uniform bulgePinchUniforms {
+  `struct bulgePinchUniforms {
+  center: vec2f,
   radius: f32,
   strength: f32,
-  center: vec2f,
 };
 
-@group(0) @binding(1) var<uniform> bulgePinch: bulgePinchUniforms;
+@group(0) @binding(auto) var<uniform> bulgePinch: bulgePinchUniforms;
 
-fn bulgePinch_warp(vec2 coord, vec2 texCenter) -> vec2f {
-  coord -= texCenter;
-  float distance = length(coord);
+fn bulgePinch_warp(coordIn: vec2f, texCenter: vec2f) -> vec2f {
+  var coord = coordIn - texCenter;
+  let distance = length(coord);
   if (distance < bulgePinch.radius) {
-    float percent = distance / bulgePinch.radius;
+    let percent = distance / bulgePinch.radius;
+    let safeDistance = max(distance, 0.00001);
     if (bulgePinch.strength > 0.0) {
-      coord *= mix(1.0, smoothstep(0.0, bulgePinch.radius / distance, percent), bulgePinch.strength * 0.75);
+      coord *= mix(
+        1.0,
+        smoothstep(0.0, bulgePinch.radius / safeDistance, percent),
+        bulgePinch.strength * 0.75
+      );
     } else {
-      coord *= mix(1.0, pow(percent, 1.0 + bulgePinch.strength * 0.75) * bulgePinch.radius / distance, 1.0 - percent);
+      coord *= mix(
+        1.0,
+        pow(percent, 1.0 + bulgePinch.strength * 0.75) * bulgePinch.radius / safeDistance,
+        1.0 - percent
+      );
     }
   }
   coord += texCenter;
   return coord;
 }
 
-fn bulgePinch_sampleColor(sampler2D source, vec2 texSize, vec2 texCoord) -> vec4f {
-  vec2 coord = texCoord * texSize;
+fn bulgePinch_sampleColor(
+  sourceTexture: texture_2d<f32>,
+  sourceTextureSampler: sampler,
+  texSize: vec2f,
+  texCoord: vec2f
+) -> vec4f {
+  var coord = texCoord * texSize;
   coord = bulgePinch_warp(coord, bulgePinch.center * texSize);
-  return warp_sampleColor(source, texSize, coord);
+  return warp_sampleColor(sourceTexture, sourceTextureSampler, texSize, coord);
 }
 `
 );
 var fs18 = (
   /* glsl */
-  `uniform bulgePinchUniforms {
+  `layout(std140) uniform bulgePinchUniforms {
+  vec2 center;
   float radius;
   float strength;
-  vec2 center;
 } bulgePinch;
 
 vec2 bulgePinch_warp(vec2 coord, vec2 texCenter) {
@@ -1494,23 +1651,23 @@ var bulgePinch = {
 // dist/passes/postprocessing/image-warp-filters/swirl.js
 var source19 = (
   /* wgsl */
-  `uniform swirlUniforms {
+  `struct swirlUniforms {
+  center: vec2f,
   radius: f32,
   angle: f32,
-  center: vec2f,
 };
 
-@group(0) @binding(1) swirl: swirlUniforms;
+@group(0) @binding(auto) var<uniform> swirl: swirlUniforms;
 
-fn swirl_warp(vec2 coord, vec2 texCenter) -> vec2f {
-  coord -= texCenter;
-  float distance = length(coord);
+fn swirl_warp(coordIn: vec2f, texCenter: vec2f) -> vec2f {
+  var coord = coordIn - texCenter;
+  let distance = length(coord);
   if (distance < swirl.radius) {
-    float percent = (swirl.radius - distance) / swirl.radius;
-    float theta = percent * percent * swirl.angle;
-    float s = sin(theta);
-    float c = cos(theta);
-    coord = vec2(
+    let percent = (swirl.radius - distance) / swirl.radius;
+    let theta = percent * percent * swirl.angle;
+    let s = sin(theta);
+    let c = cos(theta);
+    coord = vec2f(
       coord.x * c - coord.y * s,
       coord.x * s + coord.y * c
     );
@@ -1519,19 +1676,24 @@ fn swirl_warp(vec2 coord, vec2 texCenter) -> vec2f {
   return coord;
 }
 
-fn swirl_sampleColor(sampler2D source, vec2 texSize, vec2 texCoord) -> vec4f {
-  vec2 coord = texCoord * texSize;
+fn swirl_sampleColor(
+  sourceTexture: texture_2d<f32>,
+  sourceTextureSampler: sampler,
+  texSize: vec2f,
+  texCoord: vec2f
+) -> vec4f {
+  var coord = texCoord * texSize;
   coord = swirl_warp(coord, swirl.center * texSize);
-  return warp_sampleColor(source, texSize, coord);
+  return warp_sampleColor(sourceTexture, sourceTextureSampler, texSize, coord);
 }
 `
 );
 var fs19 = (
   /* glsl */
-  `uniform swirlUniforms {
+  `layout(std140) uniform swirlUniforms {
+  vec2 center;
   float radius;
   float angle;
-  vec2 center;
 } swirl;
 
 vec2 swirl_warp(vec2 coord, vec2 texCenter) {
@@ -1580,6 +1742,294 @@ var swirl = {
 };
 
 // dist/passes/postprocessing/fxaa/fxaa.js
+var source20 = (
+  /* wgsl */
+  `fn fxaaSat(value: f32) -> f32 {
+  return clamp(value, 0.0, 1.0);
+}
+
+fn fxaaTexTop(
+  sourceTexture: texture_2d<f32>,
+  sourceTextureSampler: sampler,
+  texCoord: vec2f
+) -> vec4f {
+  return textureSampleLevel(sourceTexture, sourceTextureSampler, texCoord, 0.0);
+}
+
+fn fxaaTexOff(
+  sourceTexture: texture_2d<f32>,
+  sourceTextureSampler: sampler,
+  texCoord: vec2f,
+  offset: vec2f,
+  reciprocalFrame: vec2f
+) -> vec4f {
+  return textureSampleLevel(
+    sourceTexture,
+    sourceTextureSampler,
+    texCoord + offset * reciprocalFrame,
+    0.0
+  );
+}
+
+fn fxaaLuma(color: vec4f) -> f32 {
+  return dot(color.rgb, vec3f(0.2126, 0.7152, 0.0722));
+}
+
+fn fxaaGetQualityStep(stepIndex: u32) -> f32 {
+  switch (stepIndex) {
+    case 0u: {
+      return 1.0;
+    }
+    case 1u: {
+      return 1.5;
+    }
+    case 2u: {
+      return 2.0;
+    }
+    case 3u: {
+      return 2.0;
+    }
+    case 4u: {
+      return 2.0;
+    }
+    case 5u: {
+      return 2.0;
+    }
+    case 6u: {
+      return 2.0;
+    }
+    case 7u: {
+      return 2.0;
+    }
+    case 8u: {
+      return 2.0;
+    }
+    case 9u: {
+      return 2.0;
+    }
+    case 10u: {
+      return 4.0;
+    }
+    default: {
+      return 8.0;
+    }
+  }
+}
+
+fn fxaaPixelShader(
+  texCoord: vec2f,
+  sourceTexture: texture_2d<f32>,
+  sourceTextureSampler: sampler,
+  reciprocalFrame: vec2f,
+  qualitySubpix: f32,
+  qualityEdgeThreshold: f32,
+  qualityEdgeThresholdMin: f32
+) -> vec4f {
+  var posM = texCoord;
+  let rgbyM = fxaaTexTop(sourceTexture, sourceTextureSampler, posM);
+  let lumaM = rgbyM.g;
+  var lumaS = fxaaLuma(
+    fxaaTexOff(sourceTexture, sourceTextureSampler, posM, vec2f(0.0, 1.0), reciprocalFrame)
+  );
+  let lumaE = fxaaLuma(
+    fxaaTexOff(sourceTexture, sourceTextureSampler, posM, vec2f(1.0, 0.0), reciprocalFrame)
+  );
+  var lumaN = fxaaLuma(
+    fxaaTexOff(sourceTexture, sourceTextureSampler, posM, vec2f(0.0, -1.0), reciprocalFrame)
+  );
+  let lumaW = fxaaLuma(
+    fxaaTexOff(sourceTexture, sourceTextureSampler, posM, vec2f(-1.0, 0.0), reciprocalFrame)
+  );
+
+  let maxSM = max(lumaS, lumaM);
+  let minSM = min(lumaS, lumaM);
+  let maxESM = max(lumaE, maxSM);
+  let minESM = min(lumaE, minSM);
+  let maxWN = max(lumaN, lumaW);
+  let minWN = min(lumaN, lumaW);
+  let rangeMax = max(maxWN, maxESM);
+  let rangeMin = min(minWN, minESM);
+  let rangeMaxScaled = rangeMax * qualityEdgeThreshold;
+  let range = rangeMax - rangeMin;
+  let rangeMaxClamped = max(qualityEdgeThresholdMin, rangeMaxScaled);
+  if (range < rangeMaxClamped) {
+    return rgbyM;
+  }
+
+  let lumaNW = fxaaLuma(
+    fxaaTexOff(sourceTexture, sourceTextureSampler, posM, vec2f(-1.0, -1.0), reciprocalFrame)
+  );
+  let lumaSE = fxaaLuma(
+    fxaaTexOff(sourceTexture, sourceTextureSampler, posM, vec2f(1.0, 1.0), reciprocalFrame)
+  );
+  let lumaNE = fxaaLuma(
+    fxaaTexOff(sourceTexture, sourceTextureSampler, posM, vec2f(1.0, -1.0), reciprocalFrame)
+  );
+  let lumaSW = fxaaLuma(
+    fxaaTexOff(sourceTexture, sourceTextureSampler, posM, vec2f(-1.0, 1.0), reciprocalFrame)
+  );
+
+  let lumaNS = lumaN + lumaS;
+  let lumaWE = lumaW + lumaE;
+  let subpixReciprocalRange = 1.0 / range;
+  let subpixNSWE = lumaNS + lumaWE;
+  let edgeHorizontal1 = -2.0 * lumaM + lumaNS;
+  let edgeVertical1 = -2.0 * lumaM + lumaWE;
+
+  let lumaNESE = lumaNE + lumaSE;
+  let lumaNWNE = lumaNW + lumaNE;
+  let edgeHorizontal2 = -2.0 * lumaE + lumaNESE;
+  let edgeVertical2 = -2.0 * lumaN + lumaNWNE;
+
+  let lumaNWSW = lumaNW + lumaSW;
+  let lumaSWSE = lumaSW + lumaSE;
+  let edgeHorizontal4 = abs(edgeHorizontal1) * 2.0 + abs(edgeHorizontal2);
+  let edgeVertical4 = abs(edgeVertical1) * 2.0 + abs(edgeVertical2);
+  let edgeHorizontal3 = -2.0 * lumaW + lumaNWSW;
+  let edgeVertical3 = -2.0 * lumaS + lumaSWSE;
+  let edgeHorizontal = abs(edgeHorizontal3) + edgeHorizontal4;
+  let edgeVertical = abs(edgeVertical3) + edgeVertical4;
+
+  let subpixNWSWNESE = lumaNWSW + lumaNESE;
+  let horizontalSpan = edgeHorizontal >= edgeVertical;
+  var lengthSign = reciprocalFrame.x;
+  let subpixA = subpixNSWE * 2.0 + subpixNWSWNESE;
+  if (!horizontalSpan) {
+    lumaN = lumaW;
+    lumaS = lumaE;
+  }
+  if (horizontalSpan) {
+    lengthSign = reciprocalFrame.y;
+  }
+  let subpixB = subpixA * (1.0 / 12.0) - lumaM;
+
+  let gradientN = lumaN - lumaM;
+  let gradientS = lumaS - lumaM;
+  var lumaNN = lumaN + lumaM;
+  let lumaSS = lumaS + lumaM;
+  let pairN = abs(gradientN) >= abs(gradientS);
+  let gradient = max(abs(gradientN), abs(gradientS));
+  if (pairN) {
+    lengthSign = -lengthSign;
+  }
+  let subpixC = fxaaSat(abs(subpixB) * subpixReciprocalRange);
+
+  var posB = posM;
+  var offNP = vec2f(0.0);
+  if (horizontalSpan) {
+    offNP = vec2f(reciprocalFrame.x, 0.0);
+    posB.y += lengthSign * 0.5;
+  } else {
+    offNP = vec2f(0.0, reciprocalFrame.y);
+    posB.x += lengthSign * 0.5;
+  }
+
+  var posN = posB - offNP * fxaaGetQualityStep(0u);
+  var posP = posB + offNP * fxaaGetQualityStep(0u);
+  let subpixD = -2.0 * subpixC + 3.0;
+  var lumaEndN = fxaaLuma(fxaaTexTop(sourceTexture, sourceTextureSampler, posN));
+  let subpixE = subpixC * subpixC;
+  var lumaEndP = fxaaLuma(fxaaTexTop(sourceTexture, sourceTextureSampler, posP));
+
+  if (!pairN) {
+    lumaNN = lumaSS;
+  }
+  let gradientScaled = gradient * 0.25;
+  let lumaMM = lumaM - lumaNN * 0.5;
+  let subpixF = subpixD * subpixE;
+  let lumaMoreThanZero = lumaMM < 0.0;
+
+  lumaEndN -= lumaNN * 0.5;
+  lumaEndP -= lumaNN * 0.5;
+  var doneN = abs(lumaEndN) >= gradientScaled;
+  var doneP = abs(lumaEndP) >= gradientScaled;
+  var doneNP = !doneN || !doneP;
+  var qualityStepIndex = 1u;
+  loop {
+    if (!(doneNP && qualityStepIndex < 12u)) {
+      break;
+    }
+
+    let qualityStep = fxaaGetQualityStep(qualityStepIndex);
+    if (!doneN) {
+      posN -= offNP * qualityStep;
+    }
+    if (!doneP) {
+      posP += offNP * qualityStep;
+    }
+
+    qualityStepIndex += 1u;
+    if (qualityStepIndex >= 12u) {
+      break;
+    }
+
+    if (!doneN) {
+      lumaEndN = fxaaLuma(fxaaTexTop(sourceTexture, sourceTextureSampler, posN));
+      lumaEndN -= lumaNN * 0.5;
+      doneN = abs(lumaEndN) >= gradientScaled;
+    }
+    if (!doneP) {
+      lumaEndP = fxaaLuma(fxaaTexTop(sourceTexture, sourceTextureSampler, posP));
+      lumaEndP -= lumaNN * 0.5;
+      doneP = abs(lumaEndP) >= gradientScaled;
+    }
+
+    doneNP = !doneN || !doneP;
+  }
+
+  var dstN = posM.x - posN.x;
+  var dstP = posP.x - posM.x;
+  if (!horizontalSpan) {
+    dstN = posM.y - posN.y;
+    dstP = posP.y - posM.y;
+  }
+
+  let goodSpanN = (lumaEndN < 0.0) != lumaMoreThanZero;
+  let spanLength = dstP + dstN;
+  let goodSpanP = (lumaEndP < 0.0) != lumaMoreThanZero;
+  let spanLengthReciprocal = 1.0 / spanLength;
+
+  let directionN = dstN < dstP;
+  let dst = min(dstN, dstP);
+  let goodSpan = select(goodSpanP, goodSpanN, directionN);
+  let subpixG = subpixF * subpixF;
+  let pixelOffset = dst * -spanLengthReciprocal + 0.5;
+  let subpixH = subpixG * qualitySubpix;
+
+  let pixelOffsetGood = select(0.0, pixelOffset, goodSpan);
+  let pixelOffsetSubpix = max(pixelOffsetGood, subpixH);
+  if (!horizontalSpan) {
+    posM.x += pixelOffsetSubpix * lengthSign;
+  }
+  if (horizontalSpan) {
+    posM.y += pixelOffsetSubpix * lengthSign;
+  }
+
+  return fxaaTexTop(sourceTexture, sourceTextureSampler, posM);
+}
+
+fn fxaa_sampleColor(
+  sourceTexture: texture_2d<f32>,
+  sourceTextureSampler: sampler,
+  texSize: vec2f,
+  texCoord: vec2f
+) -> vec4f {
+  let qualitySubpix = 0.5;
+  let qualityEdgeThreshold = 0.125;
+  let qualityEdgeThresholdMin = 0.0833;
+
+  return fxaaPixelShader(
+    texCoord,
+    sourceTexture,
+    sourceTextureSampler,
+    vec2f(1.0) / texSize,
+    qualitySubpix,
+    qualityEdgeThreshold,
+    qualityEdgeThresholdMin
+  );
+}
+`
+);
 var fs20 = (
   /* glsl */
   `
@@ -2167,6 +2617,7 @@ vec4 fxaa_sampleColor(sampler2D source, vec2 texSize, vec2 texCoord) {
 var fxaa = {
   name: "fxaa",
   propTypes: {},
+  source: source20,
   fs: fs20,
   passes: [{ sampler: true }],
   getUniforms: (props) => props