@luma.gl/effects 9.2.6 → 9.3.0-alpha.11

package/src/passes/postprocessing/fxaa/fxaa.ts

@@ -97,6 +97,293 @@ import type {ShaderPass} from '@luma.gl/shadertools';
 // _  = the highest digit is directly related to style
 //
 
+const source = /* 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
+  );
+}
+`;
+
 const fs = /* glsl */ `
 #define FXAA_QUALITY_PRESET 29
 
@@ -688,6 +975,7 @@ export type FXAAUniforms = {};
 export const fxaa = {
   name: 'fxaa',
   propTypes: {},
+  source,
   fs,
   passes: [{sampler: true}],
   getUniforms: props => props

package/src/passes/postprocessing/image-adjust-filters/brightnesscontrast.ts

@@ -10,22 +10,21 @@ struct brightnessContrastUniforms {
   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);
 }
 `;
 
 const fs = /* glsl */ `\
-uniform brightnessContrastUniforms {
+layout(std140) uniform brightnessContrastUniforms {
   float brightness;
   float contrast;
 } brightnessContrast;

package/src/passes/postprocessing/image-adjust-filters/denoise.ts

@@ -6,42 +6,50 @@ import type {ShaderPass} from '@luma.gl/shadertools';
 
 // Do a 9x9 bilateral box filter
 const source = /* wgsl */ `\
-
 struct denoiseUniforms {
-  strength: f32
+  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;
+}
 `;
 
 const fs = /* 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);

package/src/passes/postprocessing/image-adjust-filters/huesaturation.ts

@@ -5,49 +5,42 @@
 import type {ShaderPass} from '@luma.gl/shadertools';
 
 const source = /* wgsl */ `\
-
 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;
-} 
-
-fn hueSaturation_filterColor_ext(color: vec4<f32>, texSize: vec2<f32>, texCoord: vec2<f32>) -> vec4<f32> {
-	return hueSaturation_filterColor(color);
-} 
+@group(0) @binding(auto) var<uniform> hueSaturation: hueSaturationUniforms;
+
+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);
+}
 `;
 
 const fs = /* glsl */ `\
-uniform hueSaturationUniforms {
+layout(std140) uniform hueSaturationUniforms {
   float hue;
   float saturation;
 } hueSaturation;

package/src/passes/postprocessing/image-adjust-filters/noise.ts

@@ -6,26 +6,27 @@ import type {ShaderPass} from '@luma.gl/shadertools';
 
 const source = /* 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;
+}
 `;
 
 const fs = /* glsl */ `\
-uniform noiseUniforms {
+layout(std140) uniform noiseUniforms {
   float amount;
 } noise;
 

package/src/passes/postprocessing/image-adjust-filters/sepia.ts

@@ -6,31 +6,32 @@ import type {ShaderPass} from '@luma.gl/shadertools';
 
 const source = /* 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);
 }
 `;
 
 const fs = /* glsl */ `\
-uniform sepiaUniforms {
+layout(std140) uniform sepiaUniforms {
   float amount;
 } sepia;
 

package/src/passes/postprocessing/image-adjust-filters/vibrance.ts

@@ -6,26 +6,26 @@ import type {ShaderPass} from '@luma.gl/shadertools';
 
 const source = /* 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);
 }
 `;
 
 const fs = /* glsl */ `\
-uniform vibranceUniforms {
+layout(std140) uniform vibranceUniforms {
   float amount;
 } vibrance;
 

package/src/passes/postprocessing/image-adjust-filters/vignette.ts

@@ -7,28 +7,24 @@ import type {ShaderPass} from '@luma.gl/shadertools';
 const source = /* wgsl */ `\
 struct vignetteUniforms {
   radius: f32,
-  amount: f32
+  amount: f32,
 };
 
-@group(0) @binding(1) var<uniform> vignette: vignetteUniforms;
+@group(0) @binding(auto) 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;
-}
-
-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);
 }
 `;
 
 const fs = /* glsl */ `\
-uniform vignetteUniforms {
+layout(std140) uniform vignetteUniforms {
   float radius;
   float amount;
 } vignette;