@luma.gl/effects 9.3.0-alpha.6 → 9.3.0-alpha.8

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,18 +10,16 @@ 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 {
-  var result = color;
-  result.rgb += vec3f(brightnessContrast.brightness);
+  var resultRgb = color.rgb + vec3f(brightnessContrast.brightness);
   if (brightnessContrast.contrast > 0.0) {
-    result.rgb = (result.rgb - vec3f(0.5)) / (1.0 - brightnessContrast.contrast) + vec3f(0.5);
+    resultRgb = (resultRgb - vec3f(0.5)) / (1.0 - brightnessContrast.contrast) + vec3f(0.5);
   } else {
-    result.rgb = (result.rgb - vec3f(0.5)) * (1.0 + brightnessContrast.contrast) + vec3f(0.5);
+    resultRgb = (resultRgb - vec3f(0.5)) * (1.0 + brightnessContrast.contrast) + vec3f(0.5);
   }
-  return result;
+  return vec4f(resultRgb, color.a);
 }
 `;
 

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

@@ -10,7 +10,7 @@ struct denoiseUniforms {
   strength: f32,
 };
 
-@group(0) @binding(1) var<uniform> denoise: denoiseUniforms;
+@group(0) @binding(auto) var<uniform> denoise: denoiseUniforms;
 
 fn denoise_sampleColor(
   sourceTexture: texture_2d<f32>,
@@ -44,12 +44,12 @@ fn denoise_sampleColor(
 `;
 
 const fs = /* glsl */ `\
-uniform dedenoiseUniforms {
+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

@@ -10,7 +10,7 @@ struct hueSaturationUniforms {
   saturation: f32,
 };
 
-@group(0) @binding(1) var<uniform> hueSaturation: hueSaturationUniforms;
+@group(0) @binding(auto) var<uniform> hueSaturation: hueSaturationUniforms;
 
 fn hueSaturation_filterColor(color: vec4f) -> vec4f {
   let angle = hueSaturation.hue * 3.14159265;
@@ -18,21 +18,20 @@ fn hueSaturation_filterColor(color: vec4f) -> vec4f {
   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 result = color;
-  result.rgb = vec3f(
-    dot(result.rgb, weights.xyz),
-    dot(result.rgb, weights.zxy),
-    dot(result.rgb, weights.yzx)
+  var resultRgb = vec3f(
+    dot(color.rgb, weights.xyz),
+    dot(color.rgb, weights.zxy),
+    dot(color.rgb, weights.yzx)
   );
 
-  let average = (result.r + result.g + result.b) / 3.0;
+  let average = (resultRgb.r + resultRgb.g + resultRgb.b) / 3.0;
   if (hueSaturation.saturation > 0.0) {
-    result.rgb += (vec3f(average) - result.rgb) * (1.0 - 1.0 / (1.001 - hueSaturation.saturation));
+    resultRgb += (vec3f(average) - resultRgb) * (1.0 - 1.0 / (1.001 - hueSaturation.saturation));
   } else {
-    result.rgb += (vec3f(average) - result.rgb) * (-hueSaturation.saturation);
+    resultRgb += (vec3f(average) - resultRgb) * (-hueSaturation.saturation);
   }
 
-  return result;
+  return vec4f(resultRgb, color.a);
 }
 
 fn hueSaturation_filterColor_ext(color: vec4f, texSize: vec2f, texCoord: vec2f) -> vec4f {

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

@@ -9,7 +9,7 @@ struct noiseUniforms {
   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);

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

@@ -9,7 +9,7 @@ struct sepiaUniforms {
   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 = color.r;

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

@@ -9,15 +9,14 @@ struct vibranceUniforms {
   amount: f32,
 };
 
-@group(0) @binding(1) var<uniform> vibrance: vibranceUniforms;
+@group(0) @binding(auto) var<uniform> vibrance: vibranceUniforms;
 
 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);
-  var result = color;
-  result.rgb = mix(result.rgb, vec3f(mx), amt);
-  return result;
+  let resultRgb = mix(color.rgb, vec3f(mx), amt);
+  return vec4f(resultRgb, color.a);
 }
 
 fn vibrance_filterColor_ext(color: vec4f, texSize: vec2f, texCoord: vec2f) -> vec4f {

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

@@ -10,7 +10,7 @@ struct vignetteUniforms {
   amount: f32,
 };
 
-@group(0) @binding(1) var<uniform> vignette: vignetteUniforms;
+@group(0) @binding(auto) var<uniform> vignette: vignetteUniforms;
 
 fn vignette_filterColor_ext(color: vec4f, texSize: vec2f, texCoord: vec2f) -> vec4f {
   let dist = distance(texCoord, vec2f(0.5, 0.5));

package/src/passes/postprocessing/image-blur-filters/tiltshift.ts

@@ -14,7 +14,7 @@ struct tiltShiftUniforms {
   invert: u32,
 };
 
-@group(0) @binding(1) var<uniform> tiltShift: tiltShiftUniforms;
+@group(0) @binding(auto) var<uniform> tiltShift: tiltShiftUniforms;
 
 fn tiltShift_getDelta(texSize: vec2f) -> vec2f {
   let vector = normalize((tiltShift.end - tiltShift.start) * texSize);

package/src/passes/postprocessing/image-blur-filters/triangleblur.ts

@@ -11,7 +11,7 @@ struct triangleBlurUniforms {
   delta: vec2f,
 };
 
-@group(0) @binding(1) var<uniform> triangleBlur: triangleBlurUniforms;
+@group(0) @binding(auto) var<uniform> triangleBlur: triangleBlurUniforms;
 
 fn triangleBlur_sampleColor(
   sourceTexture: texture_2d<f32>,
@@ -30,25 +30,25 @@ fn triangleBlur_sampleColor(
   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);
-    var offsetColor = textureSample(
+    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 /= 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);
 }
 `;
 

package/src/passes/postprocessing/image-blur-filters/zoomblur.ts

@@ -11,7 +11,7 @@ struct zoomBlurUniforms {
   strength: f32,
 };
 
-@group(0) @binding(1) var<uniform> zoomBlur : zoomBlurUniforms;
+@group(0) @binding(auto) var<uniform> zoomBlur : zoomBlurUniforms;
 
 
 fn zoomBlur_sampleColor(

package/src/passes/postprocessing/image-fun-filters/colorhalftone.ts

@@ -11,7 +11,7 @@ struct colorHalftoneUniforms {
   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 = sin(angle);

package/src/passes/postprocessing/image-fun-filters/dotscreen.ts

@@ -11,7 +11,7 @@ struct dotScreenUniforms {
   size: f32,
 };
 
-@group(0) @binding(1) var<uniform> dotScreen: dotScreenUniforms;
+@group(0) @binding(auto) var<uniform> dotScreen: dotScreenUniforms;
 
 fn pattern(texSize: vec2f, texCoord: vec2f) -> f32 {
   let scale = 3.1415 / dotScreen.size;

package/src/passes/postprocessing/image-fun-filters/edgework.ts

@@ -11,7 +11,7 @@ struct edgeWorkUniforms {
   mode: u32,
 };
 
-@group(0) @binding(1) var<uniform> edgeWork: edgeWorkUniforms;
+@group(0) @binding(auto) var<uniform> edgeWork: edgeWorkUniforms;
 
 fn edgeWork_sampleColorRGB(
   sourceTexture: texture_2d<f32>,

package/src/passes/postprocessing/image-fun-filters/hexagonalpixelate.ts

@@ -10,7 +10,7 @@ struct hexagonalPixelateUniforms {
   scale: f32,
 };
 
-@group(0) @binding(1) var<uniform> hexagonalPixelate: hexagonalPixelateUniforms;
+@group(0) @binding(auto) var<uniform> hexagonalPixelate: hexagonalPixelateUniforms;
 
 fn hexagonalPixelate_sampleColor(
   sourceTexture: texture_2d<f32>,

package/src/passes/postprocessing/image-fun-filters/ink.ts

@@ -9,7 +9,7 @@ struct inkUniforms {
   strength: f32,
 };
 
-@group(0) @binding(1) var<uniform> ink: inkUniforms;
+@group(0) @binding(auto) var<uniform> ink: inkUniforms;
 
 fn ink_sampleColor(
   sourceTexture: texture_2d<f32>,

package/src/passes/postprocessing/image-fun-filters/magnify.ts

@@ -13,7 +13,7 @@ struct magnifyUniforms {
   borderColor: vec4f,
 };
 
-@group(0) @binding(1) var<uniform> magnify: magnifyUniforms;
+@group(0) @binding(auto) var<uniform> magnify: magnifyUniforms;
 
 fn magnify_sampleColor(
   sourceTexture: texture_2d<f32>,
@@ -24,13 +24,18 @@ fn magnify_sampleColor(
   let pos = vec2f(magnify.screenXY.x, 1.0 - magnify.screenXY.y);
   let dist = distance(texCoord * texSize, pos * texSize);
   if (dist < magnify.radiusPixels) {
-    return textureSample(sourceTexture, sourceTextureSampler, (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 textureSample(sourceTexture, sourceTextureSampler, texCoord);
+  return textureSampleLevel(sourceTexture, sourceTextureSampler, texCoord, 0.0);
 }
 `;
 

package/src/passes/postprocessing/image-warp-filters/bulgepinch.ts

@@ -7,12 +7,12 @@ import {warp} from './warp';
 
 const source = /* wgsl */ `\
 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(coordIn: vec2f, texCenter: vec2f) -> vec2f {
   var coord = coordIn - texCenter;
@@ -52,9 +52,9 @@ fn bulgePinch_sampleColor(
 
 const fs = /* glsl */ `\
 uniform bulgePinchUniforms {
+  vec2 center;
   float radius;
   float strength;
-  vec2 center;
 } bulgePinch;
 
 vec2 bulgePinch_warp(vec2 coord, vec2 texCenter) {

package/src/passes/postprocessing/image-warp-filters/swirl.ts

@@ -7,12 +7,12 @@ import {warp} from './warp';
 
 const source = /* wgsl */ `\
 struct swirlUniforms {
+  center: vec2f,
   radius: f32,
   angle: f32,
-  center: vec2f,
 };
 
-@group(0) @binding(1) var<uniform> swirl: swirlUniforms;
+@group(0) @binding(auto) var<uniform> swirl: swirlUniforms;
 
 fn swirl_warp(coordIn: vec2f, texCenter: vec2f) -> vec2f {
   var coord = coordIn - texCenter;
@@ -45,9 +45,9 @@ fn swirl_sampleColor(
 
 const fs = /* glsl */ `\
 uniform swirlUniforms {
+  vec2 center;
   float radius;
   float angle;
-  vec2 center;
 } swirl;
 
 vec2 swirl_warp(vec2 coord, vec2 texCenter) {