chore(shadertools): Port more shader modules to WGSL (#2264)

modules/effects/src/passes/postprocessing/image-adjust-filters/brightnesscontrast.ts

@@ -11,16 +11,16 @@ struct brightnessContrastUniforms {
 };
 
 // Binding 0:1 is reserved for shader passes
-@binding(1) @group(0) var<uniform> brightnessContrast : brightnessContrastUniforms;
+@group(0) @binding(1) var<uniform> brightnessContrast : brightnessContrastUniforms;
 
-fn brightnessContrast_filterColor_ext(color: vec4<f32>, texSize: vec2<f32>, texCoords: vec2<f32>) -> vec4<f32> {
+fn brightnessContrast_filterColor_ext(color: vec4f, texSize: vec2<f32>, texCoords: vec2<f32>) -> vec4f {
   color.rgb += brightnessContrast.brightness;
   if (brightnessContrast.contrast > 0.0) {
     color.rgb = (color.rgb - 0.5) / (1.0 - brightnessContrast.contrast) + 0.5;
   } else {
     color.rgb = (color.rgb - 0.5) * (1.0 + brightnessContrast.contrast) + 0.5;
   }
-  return vec4<f32>(1.0, 0.0, 0.0, 1.0);
+  return vec4f(1.0, 0.0, 0.0, 1.0);
 }
 `;
 
@@ -59,9 +59,11 @@ export type BrightnessContrastUniforms = BrightnessContrastProps;
  * @param contrast   -1 to 1 (-1 is solid gray, 0 is no change, and 1 is maximum contrast)
  */
 export const brightnessContrast = {
-  props: {} as BrightnessContrastProps,
-
   name: 'brightnessContrast',
+  source,
+  fs,
+
+  props: {} as BrightnessContrastProps,
   uniformTypes: {
     brightness: 'f32',
     contrast: 'f32'
@@ -74,8 +76,6 @@ export const brightnessContrast = {
     brightness: {format: 'f32', value: 0, min: -1, max: 1},
     contrast: {format: 'f32', value: 0, min: -1, max: 1}
   },
-  passes: [{filter: true}],
 
-  source,
-  fs
+  passes: [{filter: true}]
 } as const satisfies ShaderPass<BrightnessContrastProps>;

modules/effects/src/passes/postprocessing/image-adjust-filters/denoise.ts

@@ -7,10 +7,14 @@ import type {ShaderPass} from '@luma.gl/shadertools';
 // Do a 9x9 bilateral box filter
 const source = /* wgsl */ `\
 
-@group(?), @binding(?) var<uniform> denoiseUniforms {		strength: f32 } noise;
+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. - noise.strength, 4.);
+	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.;
@@ -32,11 +36,11 @@ fn denoise_sampleColor(source: sampler2D, texSize: vec2<f32>, texCoord: vec2<f32
 `;
 
 const fs = /* glsl */ `\
-uniform denoiseUniforms {
+uniform dedenoiseUniforms {
   float strength;
-} noise;
+} denoise;
 
-vec4 denoise_sampleColor(sampler2D source, vec2 texSize, vec2 texCoord) {
+vec4 dedenoise_sampleColor(sampler2D source, vec2 texSize, vec2 texCoord) {
   float adjustedExponent = 3. + 200. * pow(1. - noise.strength, 4.);
 
   vec4 center = texture(source, texCoord);

modules/effects/src/passes/postprocessing/image-adjust-filters/huesaturation.ts

@@ -5,12 +5,13 @@
 import type {ShaderPass} from '@luma.gl/shadertools';
 
 const source = /* wgsl */ `\
-@group(?), @binding(?)
-var<uniform> hueSaturationUniforms {		hue: f32,
 
-		saturation: f32,
+struct hueSaturationUniforms {
+  hue: f32,
+  saturation: f32,
+};
 
-}hueSaturation;
+@group(0), @binding(1) var<uniform> hueSaturation: hueSaturationUniforms;
 
 fn hueSaturation_filterColor(color: vec4<f32>) -> vec4<f32> {
 	let angle: f32 = hueSaturation.hue * 3.1415927;

modules/effects/src/passes/postprocessing/image-adjust-filters/noise.ts

@@ -9,13 +9,13 @@ struct noiseUniforms {
   amount: f32
 };
 
-@group(0), @binding(0) var<uniform> noise: NoiseUniforms;
+@group(0) @binding(1) var<uniform> noise: noiseUniforms;
 
-fn rand(co: vec2<f32>) -> f32 {
-	return fract(sin(dot(co.xy, vec2<f32>(12.9898, 78.233))) * 43758.547);
+fn rand(co: vec2f) -> f32 {
+	return fract(sin(dot(co.xy, vec2f(12.9898, 78.233))) * 43758.547);
 } 
 
-fn noise_filterColor_ext(color: vec4<f32>, texSize: vec2<f32>, texCoord: vec2<f32>) -> vec4<f32> {
+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);
@@ -57,17 +57,18 @@ export type NoiseUniforms = NoiseProps;
  * Adds black and white noise to the image.
  */
 export const noise = {
+  name: 'noise',
+  fs,
+  source,
+
   props: {} as NoiseProps,
   uniforms: {} as NoiseUniforms,
-
-  name: 'noise',
   uniformTypes: {
     amount: 'f32'
   },
   propTypes: {
     amount: {value: 0.5, min: 0, max: 1}
   },
-  fs,
-  source,
+
   passes: [{filter: true}]
 } as const satisfies ShaderPass<NoiseProps, NoiseProps>;

modules/effects/src/passes/postprocessing/image-adjust-filters/sepia.ts

@@ -4,6 +4,31 @@
 
 import type {ShaderPass} from '@luma.gl/shadertools';
 
+const source = /* wgsl */ `\
+struct sepiaUniforms {
+  amount: f32
+};
+
+@group(0) @binding(1) 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;
+
+  color.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))));
+
+  return color;
+}
+
+vec4 sepia_filterColor_ext(vec4 color, vec2 texSize, vec2 texCoord) {
+  return sepia_filterColor(color);
+}
+`;
+
 const fs = /* glsl */ `\
 uniform sepiaUniforms {
   float amount;
@@ -50,5 +75,6 @@ export const sepia = {
     amount: {value: 0.5, min: 0, max: 1}
   },
   fs,
+  source,
   passes: [{filter: true}]
 } as const satisfies ShaderPass<SepiaProps, SepiaProps>;

modules/effects/src/passes/postprocessing/image-adjust-filters/vibrance.ts

@@ -4,6 +4,26 @@
 
 import type {ShaderPass} from '@luma.gl/shadertools';
 
+const source = /* wgsl */ `\
+struct vibranceUniforms {
+  amount: f32
+};
+
+@group(0) @binding(1) 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;
+}
+
+vec4 vibrance_filterColor_ext(vec4 color, vec2 texSize, vec2 texCoord) {
+  return vibrance_filterColor(color);
+}
+`;
+
 const fs = /* glsl */ `\
 uniform vibranceUniforms {
   float amount;
@@ -43,6 +63,7 @@ export const vibrance = {
   propTypes: {
     amount: {value: 0, min: -1, max: 1}
   },
+  source,
   fs,
   passes: [{filter: true}]
 } as const satisfies ShaderPass<VibranceProps, VibranceProps>;

modules/effects/src/passes/postprocessing/image-adjust-filters/vignette.ts

@@ -4,16 +4,26 @@
 
 import type {ShaderPass} from '@luma.gl/shadertools';
 
-const fs = /* glsl */ `\
-uniform vignetteUniforms {
-  float radius;
-  float amount;
-} vignette;
-
-vec4 vignette_filterColor_ext(vec4 color, vec2 texSize, vec2 texCoord) {
-  float dist = distance(texCoord, vec2(0.5, 0.5));
-  float ratio = smoothstep(0.8, vignette.radius * 0.799, dist * (vignette.amount + vignette.radius));
-  return color.rgba * ratio + (1.0 - ratio)*vec4(0.0, 0.0, 0.0, 1.0);
+const fs = /* wgsl */ `\
+struct vignetteUniforms {
+  radius: 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;
+}
+
+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);
 }
 `;
 

modules/effects/src/passes/postprocessing/image-blur-filters/tiltshift.ts

@@ -5,6 +5,54 @@
 import type {ShaderPass} from '@luma.gl/shadertools';
 import {random} from '@luma.gl/shadertools';
 
+const source = /* wgsl */ `\
+uniform tiltShiftUniforms {
+  blurRadius: f32,
+  gradientRadius: f32,
+  start: vec2f,
+  end: vec2f,
+  invert: u32,
+};
+
+@group(0) @binding(1) 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_sampleColor(sampler2D source, vec2 texSize, vec2 texCoord) -> vec4f {
+  vec4 color = vec4(0.0);
+  float 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);
+
+  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);
+
+    /* switch to pre-multiplied alpha to correctly blur transparent images */
+    offsetColor.rgb *= offsetColor.a;
+
+    color += offsetColor * weight;
+    total += weight;
+  }
+
+  color = color / total;
+
+  /* switch back from pre-multiplied alpha */
+  color.rgb /= color.a + 0.00001;
+
+  return color;
+}
+`;
+
 const fs = /* glsl */ `\
 uniform tiltShiftUniforms {
   float blurRadius;
@@ -82,11 +130,13 @@ export type TiltShiftUniforms = TiltShiftProps;
  * on the line and increases further from the line.
  */
 export const tiltShift = {
-  props: {} as TiltShiftProps,
-  uniforms: {} as TiltShiftUniforms,
-
   name: 'tiltShift',
   dependencies: [random],
+  source,
+  fs,
+
+  props: {} as TiltShiftProps,
+  uniforms: {} as TiltShiftUniforms,
   uniformTypes: {
     blurRadius: 'f32',
     gradientRadius: 'f32',
@@ -101,11 +151,11 @@ export const tiltShift = {
     end: {value: [1, 1]},
     invert: {value: 0, private: true}
   },
+
   passes: [
     {sampler: true, uniforms: {invert: 0}},
     {sampler: true, uniforms: {invert: 1}}
-  ],
-  fs
+  ]
 } as const satisfies ShaderPass<TiltShiftProps, TiltShiftProps>;
 
 /*