@luma.gl/shadertools 9.1.0-alpha.1 → 9.1.0-alpha.12

package/src/modules/lighting/pbr-material/pbr-material.ts

@@ -15,35 +15,35 @@ import {vs} from './pbr-vertex-glsl';
 import {fs} from './pbr-fragment-glsl';
 
 export type PBRMaterialProps = PBRMaterialBindings & {
-  unlit: boolean;
+  unlit?: boolean;
 
   // Base color map
-  baseColorMapEnabled: boolean;
-  baseColorFactor: Readonly<Vector4 | NumberArray>;
+  baseColorMapEnabled?: boolean;
+  baseColorFactor?: Readonly<Vector4 | NumberArray>;
 
-  normalMapEnabled: boolean;
-  normalScale: number; // #ifdef HAS_NORMALMAP
+  normalMapEnabled?: boolean;
+  normalScale?: number; // #ifdef HAS_NORMALMAP
 
-  emissiveMapEnabled: boolean;
-  emissiveFactor: Readonly<Vector3 | NumberArray>; // #ifdef HAS_EMISSIVEMAP
+  emissiveMapEnabled?: boolean;
+  emissiveFactor?: Readonly<Vector3 | NumberArray>; // #ifdef HAS_EMISSIVEMAP
 
-  metallicRoughnessValues: Readonly<Vector2 | NumberArray>;
-  metallicRoughnessMapEnabled: boolean;
+  metallicRoughnessValues?: Readonly<Vector2 | NumberArray>;
+  metallicRoughnessMapEnabled?: boolean;
 
-  occlusionMapEnabled: boolean;
-  occlusionStrength: number; // #ifdef HAS_OCCLUSIONMAP
+  occlusionMapEnabled?: boolean;
+  occlusionStrength?: number; // #ifdef HAS_OCCLUSIONMAP
 
-  alphaCutoffEnabled: boolean;
-  alphaCutoff: number; // #ifdef ALPHA_CUTOFF
+  alphaCutoffEnabled?: boolean;
+  alphaCutoff?: number; // #ifdef ALPHA_CUTOFF
 
   // IBL
-  IBLenabled: boolean;
-  scaleIBLAmbient: Readonly<Vector2 | NumberArray>; // #ifdef USE_IBL
+  IBLenabled?: boolean;
+  scaleIBLAmbient?: Readonly<Vector2 | NumberArray>; // #ifdef USE_IBL
 
   // debugging flags used for shader output of intermediate PBR variables
   // #ifdef PBR_DEBUG
-  scaleDiffBaseMR: Readonly<Vector4 | NumberArray>;
-  scaleFGDSpec: Readonly<Vector4 | NumberArray>;
+  scaleDiffBaseMR?: Readonly<Vector4 | NumberArray>;
+  scaleFGDSpec?: Readonly<Vector4 | NumberArray>;
 };
 
 /** Non-uniform block bindings for pbr module */
@@ -56,41 +56,41 @@ type PBRMaterialBindings = {
   occlusionSampler?: Texture | null; // #ifdef HAS_OCCLUSIONMAP
 
   // IBL Samplers
-  diffuseEnvSampler: Texture | null; // #ifdef USE_IBL (samplerCube)
-  specularEnvSampler: Texture | null; // #ifdef USE_IBL (samplerCube)
+  diffuseEnvSampler?: Texture | null; // #ifdef USE_IBL (samplerCube)
+  specularEnvSampler?: Texture | null; // #ifdef USE_IBL (samplerCube)
   brdfLUT?: Texture | null; // #ifdef USE_IBL
 };
 
 export type PBRMaterialUniforms = {
-  unlit: boolean;
+  unlit?: boolean;
 
   // Base color map
-  baseColorMapEnabled: boolean;
-  baseColorFactor: Readonly<Vector4 | NumberArray>;
+  baseColorMapEnabled?: boolean;
+  baseColorFactor?: Readonly<Vector4 | NumberArray>;
 
-  normalMapEnabled: boolean;
-  normalScale: number; // #ifdef HAS_NORMALMAP
+  normalMapEnabled?: boolean;
+  normalScale?: number; // #ifdef HAS_NORMALMAP
 
-  emissiveMapEnabled: boolean;
-  emissiveFactor: Readonly<Vector3 | NumberArray>; // #ifdef HAS_EMISSIVEMAP
+  emissiveMapEnabled?: boolean;
+  emissiveFactor?: Readonly<Vector3 | NumberArray>; // #ifdef HAS_EMISSIVEMAP
 
-  metallicRoughnessValues: Readonly<Vector2 | NumberArray>;
-  metallicRoughnessMapEnabled: boolean;
+  metallicRoughnessValues?: Readonly<Vector2 | NumberArray>;
+  metallicRoughnessMapEnabled?: boolean;
 
-  occlusionMapEnabled: boolean;
-  occlusionStrength: number; // #ifdef HAS_OCCLUSIONMAP
+  occlusionMapEnabled?: boolean;
+  occlusionStrength?: number; // #ifdef HAS_OCCLUSIONMAP
 
-  alphaCutoffEnabled: boolean;
-  alphaCutoff: number; // #ifdef ALPHA_CUTOFF
+  alphaCutoffEnabled?: boolean;
+  alphaCutoff?: number; // #ifdef ALPHA_CUTOFF
 
   // IBL
-  IBLenabled: boolean;
-  scaleIBLAmbient: Readonly<Vector2 | NumberArray>; // #ifdef USE_IBL
+  IBLenabled?: boolean;
+  scaleIBLAmbient?: Readonly<Vector2 | NumberArray>; // #ifdef USE_IBL
 
   // debugging flags used for shader output of intermediate PBR variables
   // #ifdef PBR_DEBUG
-  scaleDiffBaseMR: Readonly<Vector4 | NumberArray>;
-  scaleFGDSpec: Readonly<Vector4 | NumberArray>;
+  scaleDiffBaseMR?: Readonly<Vector4 | NumberArray>;
+  scaleFGDSpec?: Readonly<Vector4 | NumberArray>;
 };
 
 /**
@@ -98,9 +98,14 @@ export type PBRMaterialUniforms = {
  * Physically Based Shading of a microfacet surface defined by a glTF material.
  */
 export const pbrMaterial = {
+  props: {} as PBRMaterialProps,
+  uniforms: {} as PBRMaterialUniforms,
+
   name: 'pbr',
+  dependencies: [lighting],
   vs,
   fs,
+
   defines: {
     LIGHTING_FRAGMENT: 1,
     HAS_NORMALMAP: 0,
@@ -112,6 +117,7 @@ export const pbrMaterial = {
     USE_IBL: 0,
     PBR_DEBUG: 0
   },
+
   uniformTypes: {
     // Material is unlit
     unlit: 'i32',
@@ -144,6 +150,7 @@ export const pbrMaterial = {
     scaleDiffBaseMR: 'vec4<f32>',
     scaleFGDSpec: 'vec4<f32>'
   },
+
   bindings: {
     baseColorSampler: {type: 'texture', location: 8}, // #ifdef HAS_BASECOLORMAP
     normalSampler: {type: 'texture', location: 9}, // #ifdef HAS_NORMALMAP
@@ -154,6 +161,5 @@ export const pbrMaterial = {
     diffuseEnvSampler: {type: 'texture', location: 13}, // #ifdef USE_IBL (samplerCube)
     specularEnvSampler: {type: 'texture', location: 14}, // #ifdef USE_IBL (samplerCube)
     brdfLUT: {type: 'texture', location: 15} // #ifdef USE_IBL
-  },
-  dependencies: [lighting]
+  }
 } as const satisfies ShaderModule<PBRMaterialProps, PBRMaterialUniforms>;

package/src/modules/lighting/pbr-material/pbr-uniforms-glsl.ts

@@ -2,9 +2,7 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {glsl} from '../../../lib/glsl-utils/highlight';
-
-export const pbrMaterialUniforms = glsl`\
+export const pbrMaterialUniforms = /* glsl */ `\
 uniform Projection {
   // Projection
   vec3 u_Camera;

package/src/modules/lighting/pbr-material/pbr-vertex-glsl.ts

@@ -2,9 +2,7 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {glsl} from '../../../lib/glsl-utils/highlight';
-
-export const vs = glsl`\
+export const vs = /* glsl */ `\
 uniform projection {
   mat4 u_MVPMatrix;
   mat4 u_ModelMatrix;

package/src/modules/lighting/phong-material/phong-material.ts

@@ -4,6 +4,7 @@
 
 import {ShaderModule} from '../../../lib/shader-module/shader-module';
 import {lighting} from '../lights/lighting';
+import {PHONG_WGSL} from './phong-shaders-wgsl';
 import {PHONG_VS, PHONG_FS} from './phong-shaders-glsl';
 
 export type PhongMaterialProps = PhongMaterialUniforms;
@@ -18,14 +19,18 @@ export type PhongMaterialUniforms = {
 
 /** In Phong shading, the normal vector is linearly interpolated across the surface of the polygon from the polygon's vertex normals. */
 export const phongMaterial = {
+  props: {} as PhongMaterialProps,
+  uniforms: {} as PhongMaterialUniforms,
+
   name: 'phong-lighting',
+  dependencies: [lighting],
   // Note these are switched between phong and gouraud
+  source: PHONG_WGSL,
   vs: PHONG_VS,
   fs: PHONG_FS,
   defines: {
     LIGHTING_FRAGMENT: 1
   },
-  dependencies: [lighting],
   uniformTypes: {
     ambient: 'f32',
     diffuse: 'f32',
@@ -38,8 +43,6 @@ export const phongMaterial = {
     shininess: 32,
     specularColor: [0.15, 0.15, 0.15]
   },
-  props: {} as Required<PhongMaterialProps>,
-  uniforms: {} as PhongMaterialUniforms,
   getUniforms(props?: PhongMaterialProps): PhongMaterialUniforms {
     return {...phongMaterial.defaultUniforms, ...props};
   }

package/src/modules/lighting/phong-material/phong-shaders-glsl.ts

@@ -2,9 +2,7 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {glsl} from '../../../lib/glsl-utils/highlight';
-
-export const PHONG_VS = glsl`\
+export const PHONG_VS = /* glsl */ `\
 uniform phongMaterialUniforms {
   uniform float ambient;
   uniform float diffuse;
@@ -13,7 +11,7 @@ uniform phongMaterialUniforms {
 } material;
 `;
 
-export const PHONG_FS = glsl`\
+export const PHONG_FS = /* glsl */ `\
 uniform phongMaterialUniforms {
   uniform float ambient;
   uniform float diffuse;

package/src/modules/lighting/phong-material/phong-shaders-wgsl.ts

@@ -0,0 +1,132 @@
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+export const PHONG_WGSL = /* wgsl */ `\
+struct phongMaterialUniforms {
+  ambient: f32,
+  diffuse: f32,
+  shininess: f32,
+  specularColor: vec3<f32>,
+};
+
+@binding(2) @group(0) var<uniform> material : phongMaterialUniforms;
+
+fn lighting_getLightColor(surfaceColor: vec3<f32>, light_direction: vec3<f32>, view_direction: vec3<f32>, normal_worldspace: vec3<f32>, color: vec3<f32>) -> vec3<f32> {
+  let halfway_direction: vec3<f32> = normalize(light_direction + view_direction);
+  var lambertian: f32 = dot(light_direction, normal_worldspace);
+  var specular: f32 = 0.0;
+  if (lambertian > 0.0) {
+    let specular_angle = max(dot(normal_worldspace, halfway_direction), 0.0);
+    specular = pow(specular_angle, material.shininess);
+  }
+  lambertian = max(lambertian, 0.0);
+  return (lambertian * material.diffuse * surfaceColor + specular * material.specularColor) * color;
+}
+
+fn lighting_getLightColor2(surfaceColor: vec3<f32>, cameraPosition: vec3<f32>, position_worldspace: vec3<f32>, normal_worldspace: vec3<f32>) -> vec3<f32> {
+  var lightColor: vec3<f32> = surfaceColor;
+
+  if (lighting.enabled == 0) {
+    return lightColor;
+  }
+
+  let view_direction: vec3<f32> = normalize(cameraPosition - position_worldspace);
+  lightColor = material.ambient * surfaceColor * lighting.ambientColor;
+
+  if (lighting.lightType == 0) {
+    let pointLight: PointLight  = lighting_getPointLight(0);
+    let light_position_worldspace: vec3<f32> = pointLight.position;
+    let light_direction: vec3<f32> = normalize(light_position_worldspace - position_worldspace);
+    lightColor += lighting_getLightColor(surfaceColor, light_direction, view_direction, normal_worldspace, pointLight.color);
+  } else if (lighting.lightType == 1) {
+    var directionalLight: DirectionalLight = lighting_getDirectionalLight(0);
+    lightColor += lighting_getLightColor(surfaceColor, -directionalLight.direction, view_direction, normal_worldspace, directionalLight.color);
+  }
+  
+  return lightColor;
+  /*
+  for (int i = 0; i < MAX_LIGHTS; i++) {
+    if (i >= lighting.pointLightCount) {
+      break;
+    }
+    PointLight pointLight = lighting.pointLight[i];
+    vec3 light_position_worldspace = pointLight.position;
+    vec3 light_direction = normalize(light_position_worldspace - position_worldspace);
+    lightColor += lighting_getLightColor(surfaceColor, light_direction, view_direction, normal_worldspace, pointLight.color);
+  }
+
+  for (int i = 0; i < MAX_LIGHTS; i++) {
+    if (i >= lighting.directionalLightCount) {
+      break;
+    }
+    DirectionalLight directionalLight = lighting.directionalLight[i];
+    lightColor += lighting_getLightColor(surfaceColor, -directionalLight.direction, view_direction, normal_worldspace, directionalLight.color);
+  }
+  */
+}
+
+fn lighting_getSpecularLightColor(cameraPosition: vec3<f32>, position_worldspace: vec3<f32>, normal_worldspace: vec3<f32>) -> vec3<f32>{
+  var lightColor = vec3<f32>(0, 0, 0);
+  let surfaceColor = vec3<f32>(0, 0, 0);
+
+  if (lighting.enabled == 0) {
+    let view_direction = normalize(cameraPosition - position_worldspace);
+
+    switch (lighting.lightType) {
+      case 0, default: {
+        let pointLight: PointLight = lighting_getPointLight(0);
+        let light_position_worldspace: vec3<f32> = pointLight.position;
+        let light_direction: vec3<f32> = normalize(light_position_worldspace - position_worldspace);
+        lightColor += lighting_getLightColor(surfaceColor, light_direction, view_direction, normal_worldspace, pointLight.color);
+      }
+      case 1: {
+        let directionalLight: DirectionalLight = lighting_getDirectionalLight(0);
+        lightColor += lighting_getLightColor(surfaceColor, -directionalLight.direction, view_direction, normal_worldspace, directionalLight.color);
+      }
+    }
+  }
+  return lightColor;
+}
+`;
+
+// TODO - handle multiple lights
+/**
+    for (int i = 0; i < MAX_LIGHTS; i++) {
+      if (i >= lighting.pointLightCount) {
+        break;
+      }
+      PointLight pointLight = lighting_getPointLight(i);
+      vec3 light_position_worldspace = pointLight.position;
+      vec3 light_direction = normalize(light_position_worldspace - position_worldspace);
+      lightColor += lighting_getLightColor(surfaceColor, light_direction, view_direction, normal_worldspace, pointLight.color);
+    }
+
+    for (int i = 0; i < MAX_LIGHTS; i++) {
+      if (i >= lighting.directionalLightCount) {
+        break;
+      }
+      PointLight pointLight = lighting_getDirectionalLight(i);
+      lightColor += lighting_getLightColor(surfaceColor, -directionalLight.direction, view_direction, normal_worldspace, directionalLight.color);
+    }
+  }
+    /**
+    for (int i = 0; i < MAX_LIGHTS; i++) {
+      if (i >= lighting.pointLightCount) {
+        break;
+      }
+      PointLight pointLight = lighting_getPointLight(i);
+      vec3 light_position_worldspace = pointLight.position;
+      vec3 light_direction = normalize(light_position_worldspace - position_worldspace);
+      lightColor += lighting_getLightColor(surfaceColor, light_direction, view_direction, normal_worldspace, pointLight.color);
+    }
+
+    for (int i = 0; i < MAX_LIGHTS; i++) {
+      if (i >= lighting.directionalLightCount) {
+        break;
+      }
+      PointLight pointLight = lighting_getDirectionalLight(i);
+      lightColor += lighting_getLightColor(surfaceColor, -directionalLight.direction, view_direction, normal_worldspace, directionalLight.color);
+    }
+  }
+  */

package/src/modules/math/fp32/fp32.ts

@@ -2,10 +2,9 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {glsl} from '../../../lib/glsl-utils/highlight';
 // import {ShaderModule} from '../../types';
 
-const fp32shader = glsl`\
+const fp32shader = /* glsl */ `\
 #ifdef LUMA_FP32_TAN_PRECISION_WORKAROUND
 
 // All these functions are for substituting tan() function from Intel GPU only

package/src/modules/math/fp64/fp64-utils.ts

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import type {NumberArray} from '@math.gl/types';
+import type {NumericArray} from '@math.gl/types';
 
 /**
  * Calculate WebGL 64 bit float
@@ -11,7 +11,7 @@ import type {NumberArray} from '@math.gl/types';
  * @param startIndex - the index in the output array to fill from. Default 0.
  * @returns - the fp64 representation of the input number
  */
-export function fp64ify(a: number, out: NumberArray = [], startIndex: number = 0): NumberArray {
+export function fp64ify(a: number, out: NumericArray = [], startIndex: number = 0): NumericArray {
   const hiPart = Math.fround(a);
   const loPart = a - hiPart;
   out[startIndex] = hiPart;
@@ -33,7 +33,7 @@ export function fp64LowPart(a: number): number {
  * @param matrix  the input matrix
  * @returns the fp64 representation of the input matrix
  */
-export function fp64ifyMatrix4(matrix: NumberArray): Float32Array {
+export function fp64ifyMatrix4(matrix: NumericArray): Float32Array {
   // Transpose the projection matrix to column major for GLSL.
   const matrixFP64 = new Float32Array(32);
   for (let i = 0; i < 4; ++i) {

package/src/modules/math/random/random.ts

@@ -2,10 +2,9 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {glsl} from '../../../lib/glsl-utils/highlight';
 import {ShaderModule} from '../../../lib/shader-module/shader-module';
 
-const fs = glsl`\
+const fs = /* glsl */ `\
 float random(vec3 scale, float seed) {
   /* use the fragment position for a different seed per-pixel */
   return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);

package/src/modules/module-injectors.ts

@@ -2,15 +2,13 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {glsl} from '../lib/glsl-utils/highlight';
-
-export const MODULE_INJECTORS_VS = glsl`\
+export const MODULE_INJECTORS_VS = /* glsl */ `\
 #ifdef MODULE_LOGDEPTH
   logdepth_adjustPosition(gl_Position);
 #endif
 `;
 
-export const MODULE_INJECTORS_FS = glsl`\
+export const MODULE_INJECTORS_FS = /* glsl */ `\
 #ifdef MODULE_MATERIAL
   gl_FragColor = material_filterColor(gl_FragColor);
 #endif

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

@@ -3,9 +3,8 @@
 // Copyright (c) vis.gl contributors
 
 import {ShaderPass} from '../../../lib/shader-module/shader-pass';
-import {glsl} from '../../../lib/glsl-utils/highlight';
 
-const fs = glsl`\
+const fs = /* glsl */ `\
 
 uniform brightnessContrastUniforms {
   float brightness;
@@ -32,6 +31,8 @@ export type BrightnessContrastProps = {
   contrast?: number;
 };
 
+export type BrightnessContrastUniforms = BrightnessContrastProps;
+
 /**
  * Brightness / Contrast -
  * Provides additive brightness and multiplicative contrast control.
@@ -39,6 +40,9 @@ export type 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,
+  uniforms: {} as BrightnessContrastUniforms,
+
   name: 'brightnessContrast',
   uniformTypes: {
     brightness: 'f32',

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

@@ -3,10 +3,9 @@
 // Copyright (c) vis.gl contributors
 
 import {ShaderPass} from '../../../lib/shader-module/shader-pass';
-import {glsl} from '../../../lib/glsl-utils/highlight';
 
 // Do a 9x9 bilateral box filter
-const fs = glsl`\
+const fs = /* glsl */ `\
 uniform denoiseUniforms {
   float strength;
 } noise;
@@ -45,12 +44,17 @@ export type DenoiseProps = {
   strength?: number;
 };
 
+export type DenoiseUniforms = DenoiseProps;
+
 /**
  * Denoise -
  * Smooths over grainy noise in dark images using an 9x9 box filter
  * weighted by color intensity, similar to a bilateral filter.
  */
 export const denoise = {
+  props: {} as DenoiseProps,
+  uniforms: {} as DenoiseUniforms,
+
   name: 'denoise',
   uniformTypes: {
     strength: 'f32'
@@ -61,4 +65,4 @@ export const denoise = {
   },
   fs,
   passes: [{sampler: true}, {sampler: true}]
-} as const satisfies ShaderPass<DenoiseProps>;
+} as const satisfies ShaderPass<DenoiseProps, DenoiseUniforms>;

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

@@ -3,9 +3,8 @@
 // Copyright (c) vis.gl contributors
 
 import {ShaderPass} from '../../../lib/shader-module/shader-pass';
-import {glsl} from '../../../lib/glsl-utils/highlight';
 
-const fs = glsl`\
+const fs = /* glsl */ `\
 uniform hueSaturationUniforms {
   float hue;
   float saturation;
@@ -46,10 +45,12 @@ export type HueSaturationProps = {
   /** -1 to 1 (-1 is 180 degree rotation in the negative direction, 0 is no change,
    * and 1 is 180 degree rotation in the positive direction) */
   hue?: number;
-  /** @param saturation -1 to 1 (-1 is solid gray, 0 is no change, and 1 is maximum contrast) */
+  /** -1 to 1 (-1 is solid gray, 0 is no change, and 1 is maximum contrast) */
   saturation?: number;
 };
 
+export type HueSaturationUniforms = HueSaturationProps;
+
 /**
  * Hue / Saturation
  * Provides rotational hue and multiplicative saturation control. RGB color space
@@ -60,7 +61,12 @@ export type HueSaturationProps = {
  * or away from the average color channel value.
  */
 export const hueSaturation = {
+  props: {} as HueSaturationProps,
+  uniforms: {} as HueSaturationUniforms,
+
   name: 'hueSaturation',
+  fs,
+
   uniformTypes: {
     hue: 'f32',
     saturation: 'f32'
@@ -69,6 +75,5 @@ export const hueSaturation = {
     hue: {value: 0, min: -1, max: 1},
     saturation: {value: 0, min: -1, max: 1}
   },
-  fs,
   passes: [{filter: true}]
 } as const satisfies ShaderPass<HueSaturationProps>;

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

@@ -3,9 +3,8 @@
 // Copyright (c) vis.gl contributors
 
 import {ShaderPass} from '../../../lib/shader-module/shader-pass';
-import {glsl} from '../../../lib/glsl-utils/highlight';
 
-const fs = glsl`\
+const fs = /* glsl */ `\
 uniform noiseUniforms {
   float amount;
 } noise;
@@ -35,11 +34,16 @@ export type NoiseProps = {
   amount?: number;
 };
 
+export type NoiseUniforms = NoiseProps;
+
 /**
  * Noise
  * Adds black and white noise to the image.
  */
 export const noise = {
+  props: {} as NoiseProps,
+  uniforms: {} as NoiseUniforms,
+
   name: 'noise',
   uniformTypes: {
     amount: 'f32'

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

@@ -3,9 +3,8 @@
 // Copyright (c) vis.gl contributors
 
 import {ShaderPass} from '../../../lib/shader-module/shader-pass';
-import {glsl} from '../../../lib/glsl-utils/highlight';
 
-const fs = glsl`\
+const fs = /* glsl */ `\
 uniform sepiaUniforms {
   float amount;
 } sepia;
@@ -32,12 +31,17 @@ export type SepiaProps = {
   amount?: number;
 };
 
+export type SepiaUniforms = SepiaProps;
+
 /**
  * @filter         Sepia
  * @description    Gives the image a reddish-brown monochrome tint that imitates an old photograph.
  * @param amount   0 to 1 (0 for no effect, 1 for full sepia coloring)
  */
 export const sepia = {
+  props: {} as SepiaProps,
+  uniforms: {} as SepiaUniforms,
+
   name: 'sepia',
   uniformTypes: {
     amount: 'f32'

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

@@ -3,9 +3,8 @@
 // Copyright (c) vis.gl contributors
 
 import {ShaderPass} from '../../../lib/shader-module/shader-pass';
-import {glsl} from '../../../lib/glsl-utils/highlight';
 
-const fs = glsl`\
+const fs = /* glsl */ `\
 uniform vibranceUniforms {
   float amount;
 } vibrance;
@@ -31,8 +30,12 @@ export type VibranceProps = {
   amount?: number;
 };
 
+export type VibranceUniforms = VibranceProps;
+
 /** Vibrance - Modifies the saturation of desaturated colors, leaving saturated colors unmodified. */
 export const vibrance = {
+  props: {} as VibranceProps,
+  uniforms: {} as VibranceUniforms,
   name: 'vibrance',
   uniformPropTypes: {
     amount: {value: 0, min: -1, max: 1}

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

@@ -3,9 +3,8 @@
 // Copyright (c) vis.gl contributors
 
 import {ShaderPass} from '../../../lib/shader-module/shader-pass';
-import {glsl} from '../../../lib/glsl-utils/highlight';
 
-const fs = glsl`\
+const fs = /* glsl */ `\
 uniform vignetteUniforms {
   float radius;
   float amount;
@@ -32,13 +31,18 @@ export type VignetteProps = {
   amount?: number;
 };
 
+export type VignetteUniforms = VignetteProps;
+
 /**
  * Vignette -
  * Adds a simulated lens edge darkening effect.
  */
 export const vignette = {
+  props: {} as VignetteProps,
+  uniforms: {} as VignetteUniforms,
+
   name: 'vignette',
-  fs,
+
   uniformTypes: {
     radius: 'f32',
     amount: 'f32'
@@ -47,5 +51,8 @@ export const vignette = {
     radius: {value: 0.5, min: 0, max: 1},
     amount: {value: 0.5, min: 0, max: 1}
   },
-  passes: [{filter: true}]
+
+  passes: [{filter: true}],
+
+  fs
 } as const satisfies ShaderPass<VignetteProps, VignetteProps>;