@luma.gl/effects 7.4.0-alpha.2 → 9.1.0-beta.3

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

@@ -0,0 +1,81 @@
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import type {ShaderPass} from '@luma.gl/shadertools';
+
+const source = /* wgsl */ `\
+struct brightnessContrastUniforms {
+  float brightness;
+  float contrast;
+};
+
+// Binding 0:1 is reserved for shader passes
+@binding(1) @group(0) var<uniform> brightnessContrast : brightnessContrastUniforms;
+
+fn brightnessContrast_filterColor_ext(color: vec4<f32>, texSize: vec2<f32>, texCoords: vec2<f32>) -> vec4<f32> {
+  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 color;
+}
+`;
+
+const fs = /* glsl */ `\
+uniform brightnessContrastUniforms {
+  float brightness;
+  float contrast;
+} brightnessContrast;
+
+vec4 brightnessContrast_filterColor(vec4 color) {
+  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 color;
+}
+
+vec4 brightnessContrast_filterColor_ext(vec4 color, vec2 texSize, vec2 texCoord) {
+  return brightnessContrast_filterColor(color);
+}
+`;
+
+export type BrightnessContrastProps = {
+  brightness?: number;
+  contrast?: number;
+};
+
+export type BrightnessContrastUniforms = BrightnessContrastProps;
+
+/**
+ * Brightness / Contrast -
+ * Provides additive brightness and multiplicative contrast control.
+ * @param brightness -1 to 1 (-1 is solid black, 0 is no change, and 1 is solid white)
+ * @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',
+  uniformTypes: {
+    brightness: 'f32',
+    contrast: 'f32'
+  },
+  defaultUniforms: {
+    brightness: 0,
+    contrast: 0
+  },
+  propTypes: {
+    brightness: {format: 'f32', value: 0, min: -1, max: 1},
+    contrast: {format: 'f32', value: 0, min: -1, max: 1}
+  },
+  passes: [{filter: true}],
+
+  source,
+  fs
+} as const satisfies ShaderPass<BrightnessContrastProps>;

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

@@ -0,0 +1,97 @@
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import type {ShaderPass} from '@luma.gl/shadertools';
+
+// Do a 9x9 bilateral box filter
+const source = /* wgsl */ `\
+
+@group(?), @binding(?) var<uniform> denoiseUniforms {		strength: f32 } noise;
+
+fn denoise_sampleColor(source: sampler2D, texSize: vec2<f32>, texCoord: vec2<f32>) -> vec4<f32> {
+	let adjustedExponent: f32 = 3. + 200. * pow(1. - noise.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);
+		}
+
+	}
+
+	return color / total;
+} 
+`;
+
+const fs = /* glsl */ `\
+uniform denoiseUniforms {
+  float strength;
+} noise;
+
+vec4 denoise_sampleColor(sampler2D source, vec2 texSize, vec2 texCoord) {
+  float adjustedExponent = 3. + 200. * pow(1. - noise.strength, 4.);
+
+  vec4 center = texture(source, texCoord);
+  vec4 color = vec4(0.0);
+  float total = 0.0;
+  for (float x = -4.0; x <= 4.0; x += 1.0) {
+    for (float y = -4.0; y <= 4.0; y += 1.0) {
+      vec4 offsetColor = texture(source, texCoord + vec2(x, y) / texSize);
+      float weight = 1.0 - abs(dot(offsetColor.rgb - center.rgb, vec3(0.25)));
+      weight = pow(weight, adjustedExponent);
+      color += offsetColor * weight;
+      total += weight;
+    }
+  }
+
+  return color / total;
+}
+`;
+
+/**
+ * Denoise -
+ * Smooths over grainy noise in dark images using an 9x9 box filter
+ * weighted by color intensity, similar to a bilateral filter.
+ */
+export type DenoiseProps = {
+  /**
+   * The exponent of the color intensity difference, should be greater
+   * than zero. A value of zero just gives an 9x9 box blur and high values
+   * give the original image, but ideal values are usually around 10-20.
+   */
+  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'
+  },
+  propTypes: {
+    strength: {format: 'f32', value: 0.5, min: 0, max: 1}
+    // strength: {..., adjust: (strength: number): number => 0.53 + 200 * Math.pow(1 - strength, 4) // TODO - JS preprocessing
+  },
+
+  source,
+  fs,
+
+  passes: [{sampler: true}, {sampler: true}]
+} as const satisfies ShaderPass<DenoiseProps, DenoiseUniforms>;

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

@@ -0,0 +1,120 @@
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import type {ShaderPass} from '@luma.gl/shadertools';
+
+const source = /* wgsl */ `\
+@group(?), @binding(?)
+var<uniform> hueSaturationUniforms {		hue: f32,
+
+		saturation: f32,
+
+}hueSaturation;
+
+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);
+} 
+`;
+
+const fs = /* glsl */ `\
+uniform hueSaturationUniforms {
+  float hue;
+  float saturation;
+} hueSaturation;
+
+vec4 hueSaturation_filterColor(vec4 color) {
+  // hue adjustment, wolfram alpha: RotationTransform[angle, {1, 1, 1}][{x, y, z}]
+  float angle = hueSaturation.hue * 3.14159265;
+  float s = sin(angle), c = cos(angle);
+  vec3 weights = (vec3(2.0 * c, -sqrt(3.0) * s - c, sqrt(3.0) * s - c) + 1.0) / 3.0;
+  float len = length(color.rgb);
+  color.rgb = vec3(
+    dot(color.rgb, weights.xyz),
+    dot(color.rgb, weights.zxy),
+    dot(color.rgb, weights.yzx)
+  );
+
+  // saturation adjustment
+  float average = (color.r + color.g + color.b) / 3.0;
+  if (hueSaturation.saturation > 0.0) {
+    color.rgb += (average - color.rgb) * (1.0 - 1.0 / (1.001 - hueSaturation.saturation));
+  } else {
+    color.rgb += (average - color.rgb) * (-hueSaturation.saturation);
+  }
+
+  return color;
+}
+
+vec4 hueSaturation_filterColor_ext(vec4 color, vec2 texSize, vec2 texCoord) {
+  return hueSaturation_filterColor(color);
+}
+`;
+
+/**
+ * Hue / Saturation
+ */
+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;
+  /** -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
+ * can be imagined as a cube where the axes are the red, green, and blue color
+ * values. Hue changing works by rotating the color vector around the grayscale
+ * line, which is the straight line from black (0, 0, 0) to white (1, 1, 1).
+ * Saturation is implemented by scaling all color channel values either toward
+ * or away from the average color channel value.
+ */
+export const hueSaturation = {
+  props: {} as HueSaturationProps,
+
+  name: 'hueSaturation',
+  source,
+  fs,
+
+  uniformTypes: {
+    hue: 'f32',
+    saturation: 'f32'
+  },
+  propTypes: {
+    hue: {value: 0, min: -1, max: 1},
+    saturation: {value: 0, min: -1, max: 1}
+  },
+  passes: [{filter: true}]
+} as const satisfies ShaderPass<HueSaturationProps>;

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

@@ -0,0 +1,73 @@
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import type {ShaderPass} from '@luma.gl/shadertools';
+
+const source = /* wgsl */ `\
+struct noiseUniforms {
+  amount: f32
+};
+
+@group(0), @binding(0) 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 noise_filterColor_ext(color: vec4<f32>, texSize: vec2<f32>, texCoord: vec2<f32>) -> vec4<f32> {
+	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;
+} 
+`;
+
+const fs = /* glsl */ `\
+uniform noiseUniforms {
+  float amount;
+} noise;
+
+float rand(vec2 co) {
+  return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);
+}
+
+vec4 noise_filterColor_ext(vec4 color, vec2 texSize, vec2 texCoord) {
+  float diff = (rand(texCoord) - 0.5) * noise.amount;
+  color.r += diff;
+  color.g += diff;
+  color.b += diff;
+  return color;
+}
+`;
+
+/**
+ * Noise - Adds black and white noise to the image.
+ */
+export type NoiseProps = {
+  /**  0 to 1 (0 for no effect, 1 for maximum noise) */
+  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'
+  },
+  propTypes: {
+    amount: {value: 0.5, min: 0, max: 1}
+  },
+  fs,
+  source,
+  passes: [{filter: true}]
+} as const satisfies ShaderPass<NoiseProps, NoiseProps>;

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

@@ -0,0 +1,54 @@
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import type {ShaderPass} from '@luma.gl/shadertools';
+
+const fs = /* glsl */ `\
+uniform sepiaUniforms {
+  float amount;
+} sepia;
+
+vec4 sepia_filterColor(vec4 color) {
+  float r = color.r;
+  float g = color.g;
+  float b = 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);
+}
+`;
+
+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'
+  },
+  propTypes: {
+    amount: {value: 0.5, min: 0, max: 1}
+  },
+  fs,
+  passes: [{filter: true}]
+} as const satisfies ShaderPass<SepiaProps, SepiaProps>;

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

@@ -0,0 +1,48 @@
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import type {ShaderPass} from '@luma.gl/shadertools';
+
+const fs = /* glsl */ `\
+uniform vibranceUniforms {
+  float amount;
+} vibrance;
+
+vec4 vibrance_filterColor(vec4 color) {
+  float average = (color.r + color.g + color.b) / 3.0;
+  float mx = max(color.r, max(color.g, color.b));
+  float amt = (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);
+}
+`;
+
+/**
+ * Vibrance - Modifies the saturation of desaturated colors, leaving saturated colors unmodified.
+ */
+export type VibranceProps = {
+  /** -1 to 1 (-1 is minimum vibrance, 0 is no change, and 1 is maximum vibrance) */
+  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',
+  uniformTypes: {
+    amount: 'f32'
+  },
+  propTypes: {
+    amount: {value: 0, min: -1, max: 1}
+  },
+  fs,
+  passes: [{filter: true}]
+} as const satisfies ShaderPass<VibranceProps, VibranceProps>;

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

@@ -0,0 +1,58 @@
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+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);
+}
+`;
+
+/**
+ * Vignette - Adds a simulated lens edge darkening effect.
+ */
+export type VignetteProps = {
+  /** 0 to 1 (0 for center of frame, 1 for edge of frame) */
+  radius?: number;
+  /** 0 to 1 (0 for no effect, 1 for maximum lens darkening) */
+  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',
+
+  uniformTypes: {
+    radius: 'f32',
+    amount: 'f32'
+  },
+  defaultUniforms: {
+    radius: 0.5,
+    amount: 0.5
+  },
+  propTypes: {
+    radius: {value: 0.5, min: 0, max: 1},
+    amount: {value: 0.5, min: 0, max: 1}
+  },
+
+  passes: [{filter: true}],
+
+  fs
+} as const satisfies ShaderPass<VignetteProps, VignetteProps>;

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

@@ -0,0 +1,135 @@
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import type {ShaderPass} from '@luma.gl/shadertools';
+import {random} from '@luma.gl/shadertools';
+
+const fs = /* glsl */ `\
+uniform tiltShiftUniforms {
+  float blurRadius;
+  float gradientRadius;
+  vec2 start;
+  vec2 end;
+  bool invert;
+} tiltShift;
+
+vec2 tiltShift_getDelta(vec2 texSize) {
+  vec2 vector = normalize((tiltShift.end - tiltShift.start) * texSize);
+  return tiltShift.invert ? vec2(-vector.y, vector.x) : vector;
+}
+
+vec4 tiltShift_sampleColor(sampler2D source, vec2 texSize, vec2 texCoord) {
+  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;
+}
+`;
+
+/**
+ * Tilt Shift
+ * Simulates the shallow depth of field normally encountered in close-up photography
+ */
+export type TiltShiftProps = {
+  /** The x,y coordinate of the start of the line segment. */
+  start?: [number, number];
+  /** The xm y coordinate of the end of the line segment. */
+  end?: [number, number];
+  /** The maximum radius of the pyramid blur. */
+  blurRadius?: number;
+  /** The distance from the line at which the maximum blur radius is reached. */
+  gradientRadius?: number;
+  /** @deprecated internal shaderpass use */
+  invert?: number;
+};
+
+export type TiltShiftUniforms = TiltShiftProps;
+
+/**
+ * Tilt Shift
+ * Simulates the shallow depth of field normally encountered in close-up
+ * photography, which makes the scene seem much smaller than it actually
+ * is. This filter assumes the scene is relatively planar, in which case
+ * the part of the scene that is completely in focus can be described by
+ * a line (the intersection of the focal plane and the scene). An example
+ * of a planar scene might be looking at a road from above at a downward
+ * angle. The image is then blurred with a blur radius that starts at zero
+ * on the line and increases further from the line.
+ */
+export const tiltShift = {
+  props: {} as TiltShiftProps,
+  uniforms: {} as TiltShiftUniforms,
+
+  name: 'tiltShift',
+  dependencies: [random],
+  uniformTypes: {
+    blurRadius: 'f32',
+    gradientRadius: 'f32',
+    start: 'vec2<f32>',
+    end: 'vec2<f32>',
+    invert: 'i32'
+  },
+  propTypes: {
+    blurRadius: {value: 15, min: 0, max: 50},
+    gradientRadius: {value: 200, min: 0, max: 400},
+    start: {value: [0, 0]},
+    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>;
+
+/*
+function tiltShift(startX, startY, endX, endY, blurRadius, gradientRadius) {
+  var dx = endX - startX;
+  var dy = endY - startY;
+  var d = Math.sqrt(dx * dx + dy * dy);
+  simpleShader.call(this, gl.tiltShift, {
+    blurRadius: blurRadius,
+    gradientRadius: gradientRadius,
+    start: [startX, startY],
+    end: [endX, endY],
+    delta: [dx / d, dy / d],
+    texSize: [this.width, this.height]
+  });
+  simpleShader.call(this, gl.tiltShift, {
+    blurRadius: blurRadius,
+    gradientRadius: gradientRadius,
+    start: [startX, startY],
+    end: [endX, endY],
+    delta: [-dy / d, dx / d],
+    texSize: [this.width, this.height]
+  });
+
+  return this;
+}
+*/