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

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

@@ -18,14 +18,17 @@ 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
   vs: PHONG_VS,
   fs: PHONG_FS,
   defines: {
     LIGHTING_FRAGMENT: 1
   },
-  dependencies: [lighting],
   uniformTypes: {
     ambient: 'f32',
     diffuse: 'f32',
@@ -38,8 +41,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/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/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>;

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

@@ -2,11 +2,10 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {glsl} from '../../../lib/glsl-utils/highlight';
 import {ShaderPass} from '../../../lib/shader-module/shader-pass';
 import {random} from '../..//math/random/random';
 
-const fs = glsl`\
+const fs = /* glsl */ `\
 uniform tiltShiftUniforms {
   float blurRadius;
   float gradientRadius;
@@ -69,6 +68,8 @@ export type TiltShiftProps = {
   invert?: number;
 };
 
+export type TiltShiftUniforms = TiltShiftProps;
+
 /**
  * Tilt Shift
  * Simulates the shallow depth of field normally encountered in close-up
@@ -81,6 +82,9 @@ export type TiltShiftProps = {
  * on the line and increases further from the line.
  */
 export const tiltShift = {
+  props: {} as TiltShiftProps,
+  uniforms: {} as TiltShiftUniforms,
+
   name: 'tiltShift',
   dependencies: [random],
   uniformTypes: {

package/src/modules/postprocessing/image-blur-filters/triangleblur.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';
 import {random} from '../..//math/random/random';
 
-const fs = glsl`\
+const fs = /* glsl */ `\
 uniform triangleBlurUniforms {
   float radius;
   vec2 delta;
@@ -55,6 +54,8 @@ export type TriangleBlurProps = {
   delta?: number[];
 };
 
+export type TriangleBlurUniforms = TriangleBlurProps;
+
 /**
  * @filter       Triangle Blur
  * @description  This is the most basic blur filter, which convolves the image with a
@@ -62,6 +63,9 @@ export type TriangleBlurProps = {
  *               perpendicular triangle filters.
  */
 export const triangleBlur = {
+  props: {} as TriangleBlurProps,
+  uniforms: {} as TriangleBlurUniforms,
+
   name: 'triangleBlur',
   uniformTypes: {
     radius: 'f32',

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

@@ -50,11 +50,16 @@ export type ZoomBlurProps = {
   strength?: number;
 };
 
+export type ZoomBlurUniforms = ZoomBlurProps;
+
 /**
  * Zoom Blur
  * Blurs the image away from a certain point, which looks like radial motion blur.
  */
 export const zoomBlur = {
+  props: {} as ZoomBlurProps,
+  uniforms: {} as ZoomBlurUniforms,
+
   name: 'zoomBlur',
   uniformTypes: {
     center: 'vec2<f32>',

package/src/modules/postprocessing/image-fun-filters/colorhalftone.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';
 
 // TODO pass texCoord to angle
-const fs = glsl`\
+const fs = /* glsl */ `\
 uniform colorHalftoneUniforms {
   vec2 center;
   float angle;
@@ -58,6 +57,8 @@ export type ColorHalftoneProps = {
   size?: number;
 };
 
+export type ColorHalftoneUniforms = ColorHalftoneProps;
+
 /**
  * Color Halftone -
  * Simulates a CMYK halftone rendering of the image by multiplying pixel values
@@ -65,6 +66,9 @@ export type ColorHalftoneProps = {
  * and black.
  */
 export const colorHalftone = {
+  props: {} as ColorHalftoneProps,
+  uniforms: {} as ColorHalftoneUniforms,
+
   name: 'colorHalftone',
   uniformTypes: {
     center: 'vec2<f32>',

package/src/modules/postprocessing/image-fun-filters/dotscreen.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 dotScreenUniforms {
   vec2 center;
   float angle;
@@ -44,12 +43,17 @@ export type DotScreenProps = {
   size?: number;
 };
 
+export type DotScreenUniforms = DotScreenProps;
+
 /**
  * Dot Screen -
  * Simulates a black and white halftone rendering of the image by multiplying
  * pixel values with a rotated 2D sine wave pattern.
  */
 export const dotScreen = {
+  props: {} as DotScreenProps,
+  uniforms: {} as DotScreenUniforms,
+
   name: 'dotScreen',
   uniformTypes: {
     center: 'vec2<f32>',

package/src/modules/postprocessing/image-fun-filters/edgework.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';
 import {random} from '../../math/random/random';
 
-const fs = glsl`\
+const fs = /* glsl */ `\
 uniform edgeWorkUniforms {
   float radius;
   vec2 delta;
@@ -75,19 +74,26 @@ export type EdgeWorkProps = {
   delta?: number;
 };
 
+export type EdgeWorkUniforms = EdgeWorkProps;
+
 /**
  * Edge Work -
  * Picks out different frequencies in the image by subtracting two
  * copies of the image blurred with different radii.
  */
 export const edgeWork = {
+  props: {} as EdgeWorkProps,
+  uniforms: {} as EdgeWorkProps,
+
   name: 'edgeWork',
+  dependencies: [random],
+  fs,
+
   uniformPropTypes: {
     radius: {value: 2, min: 1, softMax: 50},
     delta: {value: [1, 0], private: true}
   },
-  fs,
-  dependencies: [random],
+
   passes: [
     {
       // @ts-expect-error

package/src/modules/postprocessing/image-fun-filters/hexagonalpixelate.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 hexagonalPixelateUniforms {
   vec2 center;
   float scale;
@@ -62,12 +61,17 @@ export type HexagonalPixelateProps = {
   scale?: number;
 };
 
+export type HexagonalPixelateUniforms = HexagonalPixelateProps;
+
 /**
  * Hexagonal Pixelate
  * Renders the image using a pattern of hexagonal tiles. Tile colors
  * are nearest-neighbor sampled from the centers of the tiles.
  */
 export const hexagonalPixelate = {
+  props: {} as HexagonalPixelateProps,
+  uniforms: {} as HexagonalPixelateUniforms,
+
   name: 'hexagonalPixelate',
   uniformTypes: {
     center: 'vec2<f32>',

package/src/modules/postprocessing/image-fun-filters/ink.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 inkUniforms {
   float strength;
 } ink;
@@ -49,6 +48,8 @@ export type InkProps = {
   strength?: number;
 };
 
+export type InkUniforms = InkProps;
+
 /**
  * Ink -
  * Simulates outlining the image in ink by darkening edges stronger than a
@@ -56,13 +57,17 @@ export type InkProps = {
  * copies of the image, each blurred using a blur of a different radius.
  */
 export const ink = {
+  props: {} as InkProps,
+  uniforms: {} as InkUniforms,
+
   name: 'ink',
+  fs,
+
   uniformTypes: {
     strength: 'f32'
   },
   uniformPropTypes: {
     strength: {value: 0.25, min: 0, softMax: 1}
   },
-  fs,
   passes: [{sampler: true}]
 } as const satisfies ShaderPass<InkProps, InkProps>;

package/src/modules/postprocessing/image-fun-filters/magnify.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 magnifyUniforms {
   vec2 screenXY;
   float radiusPixels;
@@ -44,6 +43,8 @@ export type MagnifyProps = {
   borderColor?: number[];
 };
 
+export type MagnifyUniforms = MagnifyProps;
+
 /**
  * Magnify - display a circle with magnify effect applied to surrounding the pixels given position
  */

package/src/modules/postprocessing/image-warp-filters/bulgepinch.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';
 import {warp} from './warp';
 
-const fs = glsl`\
+const fs = /* glsl */ `\
 uniform bulgePinchUniforms {
   float radius;
   float strength;
@@ -46,11 +45,16 @@ export type BulgePinchProps = {
   strength?: number;
 };
 
+export type BulgePinchUniforms = BulgePinchProps;
+
 /**
  * Bulge / Pinch -
  * Bulges or pinches the image in a circle.
  */
 export const bulgePinch = {
+  props: {} as BulgePinchProps,
+  uniforms: {} as BulgePinchUniforms,
+
   name: 'bulgePinch',
   dependencies: [warp],
   fs,

package/src/modules/postprocessing/image-warp-filters/swirl.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';
 import {warp} from './warp';
 
-const fs = glsl`\
+const fs = /* glsl */ `\
 uniform swirlUniforms {
   float radius;
   float angle;
@@ -50,13 +49,19 @@ export type SwirlProps = {
   angle?: number;
 };
 
+export type SwirlUniforms = SwirlProps;
+
 /**
  * Warps a circular region of the image in a swirl.
  */
 export const swirl = {
+  props: {} as SwirlProps,
+  uniforms: {} as SwirlProps,
+
   name: 'swirl',
   dependencies: [warp],
   fs,
+
   uniformTypes: {
     center: 'vec2<f32>',
     radius: 'f32',
@@ -67,5 +72,6 @@ export const swirl = {
     radius: {value: 200, min: 1, softMax: 600},
     angle: {value: 3, softMin: -25, softMax: 25}
   },
+
   passes: [{sampler: true}]
 } as const satisfies ShaderPass<SwirlProps, SwirlProps>;