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

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

@@ -0,0 +1,84 @@
+// 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 triangleBlurUniforms {
+  float radius;
+  vec2 delta;
+} triangleBlur;
+
+vec4 triangleBlur_sampleColor(sampler2D source, vec2 texSize, vec2 texCoord) {
+  vec2 adjustedDelta = triangleBlur.delta * triangleBlur.radius / texSize;
+
+  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);
+
+  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 + adjustedDelta * percent);
+
+    /* 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;
+}
+`;
+
+/**
+ * @filter       Triangle Blur
+ * @description  This is the most basic blur filter, which convolves the image with a
+ *               pyramid filter. The pyramid filter is separable and is applied as two
+ *               perpendicular triangle filters.
+ */
+export type TriangleBlurProps = {
+  /** The radius of the pyramid convolved with the image. */
+  radius?: number;
+  /** @deprecated internal property */
+  delta?: [number, number];
+};
+
+export type TriangleBlurUniforms = TriangleBlurProps;
+
+/**
+ * @filter       Triangle Blur
+ * @description  This is the most basic blur filter, which convolves the image with a
+ *               pyramid filter. The pyramid filter is separable and is applied as two
+ *               perpendicular triangle filters.
+ */
+export const triangleBlur = {
+  props: {} as TriangleBlurProps,
+  uniforms: {} as TriangleBlurUniforms,
+
+  name: 'triangleBlur',
+  uniformTypes: {
+    radius: 'f32',
+    delta: 'vec2<f32>'
+  },
+  propTypes: {
+    radius: {value: 20, min: 0, softMax: 100},
+    delta: {value: [1, 0], private: true}
+  },
+  fs,
+  dependencies: [random],
+  passes: [
+    {sampler: true, uniforms: {delta: [1, 0]}},
+    {sampler: true, uniforms: {delta: [0, 1]}}
+  ]
+} as const satisfies ShaderPass<TriangleBlurProps, TriangleBlurProps>;

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

@@ -0,0 +1,75 @@
+// 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 = `
+uniform zoomBlurUniforms {
+  vec2 center;
+  float strength;
+} zoomBlur;
+
+vec4 zoomBlur_sampleColor(sampler2D source, vec2 texSize, vec2 texCoord) {
+  vec4 color = vec4(0.0);
+  float total = 0.0;
+  vec2 toCenter = zoomBlur.center * texSize - texCoord * texSize;
+
+  /* randomize the lookup values to hide the fixed number of samples */
+  float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);
+
+  for (float t = 0.0; t <= 40.0; t++) {
+    float percent = (t + offset) / 40.0;
+    float weight = 4.0 * (percent - percent * percent);
+    vec4 offsetColor = texture(source, texCoord + toCenter * percent * zoomBlur.strength / texSize);
+
+    /* 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;
+}
+`;
+
+/**
+ * Zoom Blur - Blurs the image away from a certain point, which looks like radial motion blur.
+ */
+export type ZoomBlurProps = {
+  /** - The x, y coordinate of the blur origin. */
+  center?: [number, number];
+  /** - The strength of the blur. Values in the range 0 to 1 are usually sufficient, where 0 doesn't change the image and 1 creates a highly blurred image. */
+  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>',
+    strength: 'f32'
+  },
+  propTypes: {
+    center: {value: [0.5, 0.5]},
+    strength: {value: 0.3, min: 0, softMax: 1}
+  },
+  fs,
+  dependencies: [random],
+  passes: [{sampler: true}]
+} as const satisfies ShaderPass<ZoomBlurProps, ZoomBlurProps>;

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

@@ -0,0 +1,85 @@
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import type {ShaderPass} from '@luma.gl/shadertools';
+
+// TODO pass texCoord to angle
+const fs = /* glsl */ `\
+uniform colorHalftoneUniforms {
+  vec2 center;
+  float angle;
+  float size;
+} colorHalftone;
+
+float pattern(float angle, float scale, vec2 texSize, vec2 texCoord) {
+  float s = sin(angle), c = cos(angle);
+  vec2 tex = texCoord * texSize - colorHalftone.center * texSize;
+  vec2 point = vec2(
+	c * tex.x - s * tex.y,
+	s * tex.x + c * tex.y
+  ) * scale;
+  return (sin(point.x) * sin(point.y)) * 4.0;
+}
+
+vec4 colorHalftone_filterColor_ext(vec4 color, vec2 texSize, vec2 texCoord) {
+  float scale = 3.1514 / colorHalftone.size;
+  vec3 cmy = 1.0 - color.rgb;
+  float k = min(cmy.x, min(cmy.y, cmy.z));
+
+  cmy = (cmy - k) / (1.0 - k);
+  cmy = clamp(
+	  cmy * 10.0 - 3.0 + vec3(
+      pattern(colorHalftone.angle + 0.26179, scale, texSize, texCoord),
+	    pattern(colorHalftone.angle + 1.30899, scale, texSize, texCoord),
+      pattern(colorHalftone.angle, scale, texSize, texCoord)
+    ),
+	  0.0,
+	  1.0
+  );
+  k = clamp(k * 10.0 - 5.0 + pattern(colorHalftone.angle + 0.78539, scale, texSize, texCoord), 0.0, 1.0);
+  return vec4(1.0 - cmy - k, color.a);
+}
+`;
+
+/**
+ * Color Halftone -
+ * Simulates a CMYK halftone rendering of the image by multiplying pixel values
+ * with a four rotated 2D sine wave patterns, one each for cyan, magenta, yellow,
+ * and black.
+ */
+export type ColorHalftoneProps = {
+  /** The x,y coordinate of the pattern origin. */
+  center?: [number, number];
+  /** The rotation of the pattern in radians. */
+  angle?: number;
+  /** The diameter of a dot in pixels. */
+  size?: number;
+};
+
+export type ColorHalftoneUniforms = ColorHalftoneProps;
+
+/**
+ * Color Halftone -
+ * Simulates a CMYK halftone rendering of the image by multiplying pixel values
+ * with a four rotated 2D sine wave patterns, one each for cyan, magenta, yellow,
+ * and black.
+ */
+export const colorHalftone = {
+  props: {} as ColorHalftoneProps,
+  uniforms: {} as ColorHalftoneUniforms,
+
+  name: 'colorHalftone',
+  uniformTypes: {
+    center: 'vec2<f32>',
+    angle: 'f32',
+    size: 'f32'
+  },
+  propTypes: {
+    center: {value: [0.5, 0.5]},
+    angle: {value: 1.1, softMin: 0, softMax: Math.PI / 2},
+    size: {value: 4, min: 1, softMin: 3, softMax: 20}
+  },
+  fs,
+  passes: [{filter: true}]
+} as const satisfies ShaderPass<ColorHalftoneProps, ColorHalftoneProps>;

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

@@ -0,0 +1,70 @@
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import type {ShaderPass} from '@luma.gl/shadertools';
+
+const fs = /* glsl */ `\
+uniform dotScreenUniforms {
+  vec2 center;
+  float angle;
+  float size;
+} dotScreen;
+
+float pattern(vec2 texSize, vec2 texCoord) {
+  float scale = 3.1415 / dotScreen.size;
+
+  float s = sin(dotScreen.angle), c = cos(dotScreen.angle);
+  vec2 tex = texCoord * texSize - dotScreen.center * texSize;
+  vec2 point = vec2(
+    c * tex.x - s * tex.y,
+    s * tex.x + c * tex.y
+  ) * scale;
+  return (sin(point.x) * sin(point.y)) * 4.0;
+}
+
+vec4 dotScreen_filterColor_ext(vec4 color, vec2 texSize, vec2 texCoord) {
+  float average = (color.r + color.g + color.b) / 3.0;
+  return vec4(vec3(average * 10.0 - 5.0 + pattern(texSize, texCoord)), color.a);
+}
+`;
+
+/**
+ * Dot Screen -
+ * Simulates a black and white halftone rendering of the image by multiplying
+ * pixel values with a rotated 2D sine wave pattern.
+ */
+export type DotScreenProps = {
+  /** The x, y coordinate of the pattern origin. */
+  center?: [number, number];
+  /** The rotation of the pattern in radians. */
+  angle?: number;
+  /** The diameter of a dot in pixels. */
+  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>',
+    angle: 'f32',
+    size: 'f32'
+  },
+  propTypes: {
+    center: {value: [0.5, 0.5]},
+    angle: {value: 1.1, softMin: 0, softMax: Math.PI / 2},
+    size: {value: 3, min: 1, softMin: 3, softMax: 20}
+  },
+  fs,
+  passes: [{filter: true}]
+} as const satisfies ShaderPass<DotScreenProps, DotScreenProps>;

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

@@ -0,0 +1,120 @@
+// 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 edgeWorkUniforms {
+  float radius;
+  int mode;
+} edgeWork;
+
+vec4 edgeWork_sampleColorRGB(sampler2D source, vec2 texSize, vec2 texCoord, vec2 delta) {
+  vec2 relativeDelta = edgeWork.radius * delta / texSize;
+
+  vec2 color = vec2(0.0);
+  vec2 total = vec2(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);
+
+  for (float t = -30.0; t <= 30.0; t++) {
+    float percent = (t + offset - 0.5) / 30.0;
+    float weight = 1.0 - abs(percent);
+    vec3 sampleColor = texture(source, texCoord + relativeDelta * percent).rgb;
+    float average = (sampleColor.r + sampleColor.g + sampleColor.b) / 3.0;
+    color.x += average * weight;
+    total.x += weight;
+    if (abs(t) < 15.0) {
+      weight = weight * 2.0 - 1.0;
+      color.y += average * weight;
+      total.y += weight;
+    }
+  }
+  return vec4(color / total, 0.0, 1.0);
+}
+
+vec4 edgeWork_sampleColorXY(sampler2D source, vec2 texSize, vec2 texCoord, vec2 delta) {
+  vec2 relativeDelta = edgeWork.radius * delta / texSize;
+
+  vec2 color = vec2(0.0);
+  vec2 total = vec2(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);
+
+  for (float t = -30.0; t <= 30.0; t++) {
+    float percent = (t + offset - 0.5) / 30.0;
+    float weight = 1.0 - abs(percent);
+    vec2 sampleColor = texture(source, texCoord + relativeDelta * percent).xy;
+    color.x += sampleColor.x * weight;
+    total.x += weight;
+    if (abs(t) < 15.0) {
+      weight = weight * 2.0 - 1.0;
+      color.y += sampleColor.y * weight;
+      total.y += weight;
+    }
+  }
+  float c = clamp(10000.0 * (color.y / total.y - color.x / total.x) + 0.5, 0.0, 1.0);
+  return vec4(c, c, c, 1.0);
+}
+
+vec4 edgeWork_sampleColor(sampler2D source, vec2 texSize, vec2 texCoord) {
+  switch (edgeWork.mode) {
+    case 0: 
+    return edgeWork_sampleColorRGB(source, texSize, texCoord, vec2(1., 0.));
+    case 1: 
+    default:
+      return edgeWork_sampleColorXY(source, texSize, texCoord, vec2(0., 1.));
+  }
+}
+`;
+
+/**
+ * Edge Work -
+ * Picks out different frequencies in the image by subtracting two
+ * copies of the image blurred with different radii.
+ */
+export type EdgeWorkProps = {
+  /** radius The radius of the effect in pixels. */
+  radius?: number;
+  /** @deprecated xy or RGB */
+  mode?: 0 | 1;
+};
+
+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,
+  uniformTypes: {
+    radius: 'f32',
+    mode: 'i32'
+  },
+  propTypes: {
+    radius: {value: 2, min: 1, softMax: 50},
+    mode: {value: 0, private: true}
+  },
+
+  passes: [
+    {
+      sampler: true,
+      uniforms: {mode: 0}
+    },
+    {
+      sampler: true,
+      uniforms: {mode: 1}
+    }
+  ]
+} as const satisfies ShaderPass<EdgeWorkProps, EdgeWorkProps>;

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

@@ -0,0 +1,86 @@
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import type {ShaderPass} from '@luma.gl/shadertools';
+
+const fs = /* glsl */ `\
+uniform hexagonalPixelateUniforms {
+  vec2 center;
+  float scale;
+} hexagonalPixelate;
+
+vec4 hexagonalPixelate_sampleColor(sampler2D source, vec2 texSize, vec2 texCoord) {
+  vec2 tex = (texCoord * texSize - hexagonalPixelate.center * texSize) / hexagonalPixelate.scale;
+  tex.y /= 0.866025404;
+  tex.x -= tex.y * 0.5;
+
+  vec2 a;
+  if (tex.x + tex.y - floor(tex.x) - floor(tex.y) < 1.0) {
+    a = vec2(floor(tex.x), floor(tex.y));
+  }
+  else a = vec2(ceil(tex.x), ceil(tex.y));
+  vec2 b = vec2(ceil(tex.x), floor(tex.y));
+  vec2 c = vec2(floor(tex.x), ceil(tex.y));
+
+  vec3 TEX = vec3(tex.x, tex.y, 1.0 - tex.x - tex.y);
+  vec3 A = vec3(a.x, a.y, 1.0 - a.x - a.y);
+  vec3 B = vec3(b.x, b.y, 1.0 - b.x - b.y);
+  vec3 C = vec3(c.x, c.y, 1.0 - c.x - c.y);
+
+  float alen = length(TEX - A);
+  float blen = length(TEX - B);
+  float clen = length(TEX - C);
+
+  vec2 choice;
+  if (alen < blen) {
+    if (alen < clen) choice = a;
+    else choice = c;
+  } else {
+    if (blen < clen) choice = b;
+    else choice = c;
+  }
+
+  choice.x += choice.y * 0.5;
+  choice.y *= 0.866025404;
+  choice *= hexagonalPixelate.scale / texSize;
+
+  return texture(source, choice + hexagonalPixelate.center);
+}
+`;
+
+/**
+ * Hexagonal Pixelate
+ * Renders the image using a pattern of hexagonal tiles.
+ * Tile colors are nearest-neighbor sampled from the centers of the tiles.
+ */
+export type HexagonalPixelateProps = {
+  /** The [x, y] coordinates of the pattern center. */
+  center?: [number, number];
+  /** The width of an individual tile, in pixels. */
+  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>',
+    scale: 'f32'
+  },
+  propTypes: {
+    center: {value: [0.5, 0.5], hint: 'screenspace'},
+    scale: {value: 10, min: 1, softMin: 5, softMax: 50}
+  },
+  fs,
+  passes: [{sampler: true}]
+} as const satisfies ShaderPass<HexagonalPixelateProps, HexagonalPixelateProps>;

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

@@ -0,0 +1,73 @@
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import type {ShaderPass} from '@luma.gl/shadertools';
+
+const fs = /* glsl */ `\
+uniform inkUniforms {
+  float strength;
+} ink;
+
+vec4 ink_sampleColor(sampler2D source, vec2 texSize, vec2 texCoord) {
+  vec2 dx = vec2(1.0 / texSize.x, 0.0);
+  vec2 dy = vec2(0.0, 1.0 / texSize.y);
+  vec4 color = texture(source, texCoord);
+  float bigTotal = 0.0;
+  float smallTotal = 0.0;
+  vec3 bigAverage = vec3(0.0);
+  vec3 smallAverage = vec3(0.0);
+  for (float x = -2.0; x <= 2.0; x += 1.0) {
+    for (float y = -2.0; y <= 2.0; y += 1.0) {
+      vec3 offsetColor = texture(source, texCoord + dx * x + dy * y).rgb;
+      bigAverage += offsetColor;
+      bigTotal += 1.0;
+      if (abs(x) + abs(y) < 2.0) {
+        smallAverage += offsetColor;
+        smallTotal += 1.0;
+      }
+    }
+  }
+  vec3 edge = max(vec3(0.0), bigAverage / bigTotal - smallAverage / smallTotal);
+  float power = ink.strength * ink.strength * ink.strength * ink.strength * ink.strength;
+  return vec4(color.rgb - dot(edge, edge) * power * 100000.0, color.a);
+}
+`;
+
+/**
+ * Ink -
+ * Simulates outlining the image in ink by darkening edges stronger than a
+ * certain threshold. The edge detection value is the difference of two
+ * copies of the image, each blurred using a blur of a different radius.
+ */
+export type InkProps = {
+  /** The multiplicative scale of the ink edges.
+   * Values in the range 0 to 1 are usually sufficient, where 0 doesn't change the image and 1 adds lots of black edges.
+   * Negative strength values will create white ink edges instead of black ones.
+   */
+  strength?: number;
+};
+
+export type InkUniforms = InkProps;
+
+/**
+ * Ink -
+ * Simulates outlining the image in ink by darkening edges stronger than a
+ * certain threshold. The edge detection value is the difference of two
+ * 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'
+  },
+  propTypes: {
+    strength: {value: 0.25, min: 0, softMax: 1}
+  },
+  passes: [{sampler: true}]
+} as const satisfies ShaderPass<InkProps, InkProps>;

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

@@ -0,0 +1,70 @@
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import type {ShaderPass} from '@luma.gl/shadertools';
+
+const fs = /* glsl */ `\
+uniform magnifyUniforms {
+  vec2 screenXY;
+  float radiusPixels;
+  float zoom;
+  float borderWidthPixels;
+  vec4 borderColor;
+} magnify;
+
+vec4 magnify_sampleColor(sampler2D source, vec2 texSize, vec2 texCoord) {
+  vec2 pos = vec2(magnify.screenXY.x, 1.0 - magnify.screenXY.y);
+  float dist = distance(texCoord * texSize, pos * texSize);
+  if (dist < magnify.radiusPixels) {
+    return texture(source, (texCoord - pos) / magnify.zoom + pos);
+  }
+
+  if (dist <= magnify.radiusPixels + magnify.borderWidthPixels) {
+    return magnify.borderColor;
+  }
+  return texture(source, texCoord);
+}
+`;
+
+/**
+ * Magnify - display a circle with magnify effect applied to surrounding the pixels given position
+ */
+export type MagnifyProps = {
+  /** x, y position in screen coords, both x and y is normalized and in range `[0, 1]`. `[0, 0]` is the up left corner, `[1, 1]` is the bottom right corner. Default value is `[0, 0]`. */
+  screenXY?: [number, number];
+  /** effect radius in pixels. Default value is `100`. */
+  radiusPixels?: number;
+  /** magnify level. Default value is `2`. */
+  zoom?: number;
+  /** border width of the effect circle, will not show border if value <= 0.0. Default value is `0`. */
+  borderWidthPixels?: number;
+  /** border color of the effect circle. Default value is `[255, 255, 255, 255]`. */
+  borderColor?: [number, number, number, number];
+};
+
+export type MagnifyUniforms = MagnifyProps;
+
+/**
+ * Magnify - display a circle with magnify effect applied to surrounding the pixels given position
+ */
+export const magnify = {
+  name: 'magnify',
+  uniformTypes: {
+    screenXY: 'vec2<f32>',
+    radiusPixels: 'f32',
+    zoom: 'f32',
+    borderWidthPixels: 'f32',
+    borderColor: 'vec4<f32>'
+  },
+  propTypes: {
+    // range 0 to 1
+    screenXY: {value: [0, 0]},
+    radiusPixels: 200,
+    zoom: 2.0,
+    borderWidthPixels: 0.0,
+    borderColor: {value: [255, 255, 255, 255]}
+  },
+  fs,
+  passes: [{sampler: true}]
+} as const satisfies ShaderPass<MagnifyProps, MagnifyProps>;