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

package/src/shader-modules/blur-filters/tiltshift.js

@@ -1,105 +0,0 @@
-/**
- * @filter               Tilt Shift
- * @description          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.
- * @param startX         The x coordinate of the start of the line segment.
- * @param startY         The y coordinate of the start of the line segment.
- * @param endX           The x coordinate of the end of the line segment.
- * @param endY           The y coordinate of the end of the line segment.
- * @param blurRadius     The maximum radius of the pyramid blur.
- * @param gradientRadius The distance from the line at which the maximum blur radius is reached.
- */
-import random from '../utils/random';
-
-const fs = `\
-uniform float blurRadius;
-uniform float gradientRadius;
-uniform vec2 start;
-uniform vec2 end;
-uniform bool invert;
-
-vec2 tiltShift_getDelta(vec2 texSize) {
-  vec2 vector = normalize((end - start) * texSize);
-  return invert ? vec2(-vector.y, vector.x) : vector;
-}
-
-vec4 tiltShift_sampleColor(sampler2D texture, 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((start.y - end.y) * texSize.y, (end.x - start.x) * texSize.x));
-  float radius = smoothstep(0.0, 1.0,
-    abs(dot(texCoord * texSize - start * texSize, normal)) / gradientRadius) * 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 sample = texture2D(texture, texCoord + tiltShift_getDelta(texSize) / texSize * percent * radius);
-
-    /* switch to pre-multiplied alpha to correctly blur transparent images */
-    sample.rgb *= sample.a;
-
-    color += sample * weight;
-    total += weight;
-  }
-
-  color = color / total;
-
-  /* switch back from pre-multiplied alpha */
-  color.rgb /= color.a + 0.00001;
-
-  return color;
-}
-`;
-
-const uniforms = {
-  blurRadius: {value: 15, min: 0, max: 50},
-  gradientRadius: {value: 200, min: 0, max: 400},
-  start: [0, 0],
-  end: [1, 1],
-  invert: {value: false, private: true}
-};
-
-export default {
-  name: 'tiltShift',
-  uniforms,
-  fs,
-  dependencies: [random],
-
-  passes: [{sampler: true, uniforms: {invert: false}}, {sampler: true, uniforms: {invert: true}}]
-};
-
-/*
-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;
-}
-*/

package/src/shader-modules/blur-filters/triangleblur.js

@@ -1,55 +0,0 @@
-/**
- * @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.
- * @param radius The radius of the pyramid convolved with the image.
- */
-import random from '../utils/random';
-
-const fs = `\
-uniform float radius;
-uniform vec2 delta;
-
-vec4 triangleBlur_sampleColor(sampler2D texture, vec2 texSize, vec2 texCoord) {
-  vec2 adjustedDelta = delta * 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 sample = texture2D(texture, texCoord + adjustedDelta * percent);
-
-    /* switch to pre-multiplied alpha to correctly blur transparent images */
-    sample.rgb *= sample.a;
-
-    color += sample * weight;
-    total += weight;
-  }
-
-  color = color / total;
-
-  /* switch back from pre-multiplied alpha */
-  color.rgb /= color.a + 0.00001;
-
-  return color;
-}
-`;
-
-const uniforms = {
-  radius: {value: 20, min: 0, softMax: 100},
-  delta: {value: [1, 0], private: true}
-};
-
-export default {
-  name: 'triangleBlur',
-  uniforms,
-  fs,
-  dependencies: [random],
-  passes: [{sampler: true, uniforms: {delta: [1, 0]}}, {sampler: true, uniforms: {delta: [0, 1]}}]
-};

package/src/shader-modules/blur-filters/zoomblur.js

@@ -1,56 +0,0 @@
-/**
- * @filter         Zoom Blur
- * @description    Blurs the image away from a certain point, which looks like radial motion blur.
- * @param centerX  The x coordinate of the blur origin.
- * @param centerY  The y coordinate of the blur origin.
- * @param strength 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.
- */
-import random from '../utils/random';
-
-const fs = `
-uniform vec2 center;
-uniform float strength;
-
-vec4 zoomBlur_sampleColor(sampler2D texture, vec2 texSize, vec2 texCoord) {
-  vec4 color = vec4(0.0);
-  float total = 0.0;
-  vec2 toCenter = 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 sample = texture2D(texture, texCoord + toCenter * percent * strength / texSize);
-
-    /* switch to pre-multiplied alpha to correctly blur transparent images */
-    sample.rgb *= sample.a;
-
-    color += sample * weight;
-    total += weight;
-  }
-
-  color = color / total;
-
-  /* switch back from pre-multiplied alpha */
-  color.rgb /= color.a + 0.00001;
-
-  return color;
-}
-`;
-
-const uniforms = {
-  center: [0.5, 0.5],
-  strength: {value: 0.3, min: 0, softMax: 1}
-};
-
-export default {
-  name: 'zoomBlur',
-  uniforms,
-  fs,
-  dependencies: [random],
-
-  passes: [{sampler: true}]
-};

package/src/shader-modules/fun-filters/colorhalftone.js

@@ -1,60 +0,0 @@
-/**
- * @filter        Color Halftone
- * @description   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.
- * @param centerX The x coordinate of the pattern origin.
- * @param centerY The y coordinate of the pattern origin.
- * @param angle   The rotation of the pattern in radians.
- * @param size    The diameter of a dot in pixels.
- */
-
-// TODO pass texCoord to angle
-const fs = `\
-uniform vec2 center;
-uniform float angle;
-uniform float size;
-
-float scale = 3.1514 / size;
-
-float pattern(float angle, vec2 texSize, vec2 texCoord) {
-  float s = sin(angle), c = cos(angle);
-  vec2 tex = texCoord * texSize - 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(vec4 color, vec2 texSize, vec2 texCoord) {
-  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(angle + 0.26179, texSize, texCoord),
-	  pattern(angle + 1.30899, texSize, texCoord),
-    pattern(angle, texSize, texCoord)
-  ),
-	0.0,
-	1.0
-  );
-  k = clamp(k * 10.0 - 5.0 + pattern(angle + 0.78539, texSize, texCoord), 0.0, 1.0);
-  return vec4(1.0 - cmy - k, color.a);
-}
-`;
-
-const uniforms = {
-  center: [0.5, 0.5],
-  angle: {value: 1.1, softMin: 0, softMax: Math.PI / 2},
-  size: {value: 4, min: 1, softMin: 3, softMax: 20}
-};
-
-export default {
-  name: 'colorHalftone',
-  uniforms,
-  fs,
-
-  passes: [{filter: true}]
-};

package/src/shader-modules/fun-filters/dotscreen.js

@@ -1,45 +0,0 @@
-/**
- * @filter        Dot Screen
- * @description   Simulates a black and white halftone rendering of the image by multiplying
- *                pixel values with a rotated 2D sine wave pattern.
- * @param centerX The x coordinate of the pattern origin.
- * @param centerY The y coordinate of the pattern origin.
- * @param angle   The rotation of the pattern in radians.
- * @param size    The diameter of a dot in pixels.
- */
-const fs = `\
-uniform vec2 center;
-uniform float angle;
-uniform float size;
-
-float pattern(vec2 texSize, vec2 texCoord) {
-  float scale = 3.1415 / size;
-
-  float s = sin(angle), c = cos(angle);
-  vec2 tex = texCoord * texSize - 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(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);
-}
-`;
-
-const uniforms = {
-  center: [0.5, 0.5],
-  angle: {value: 1.1, softMin: 0, softMax: Math.PI / 2},
-  size: {value: 3, min: 1, softMin: 3, softMax: 20}
-};
-
-export default {
-  name: 'dotScreen',
-  uniforms,
-  fs,
-
-  passes: [{filter: true}]
-};

package/src/shader-modules/fun-filters/edgework.js

@@ -1,84 +0,0 @@
-/**
- * @filter       Edge Work
- * @description  Picks out different frequencies in the image by subtracting two
- *               copies of the image blurred with different radii.
- * @param radius The radius of the effect in pixels.
- */
-import random from '../utils/random';
-
-const fs = `\
-uniform float radius;
-uniform vec2 delta;
-
-vec4 edgeWork_sampleColor1(sampler2D source, vec2 texSize, vec2 texCoord) {
-  vec2 relativeDelta = 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 = texture2D(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_sampleColor2(sampler2D source, vec2 texSize, vec2 texCoord) {
-  vec2 relativeDelta = 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 = texture2D(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);
-}
-`;
-
-const uniforms = {
-  radius: {value: 2, min: 1, softMax: 50},
-  delta: {value: [1, 0], private: true}
-};
-
-export default {
-  name: 'edgeWork',
-  uniforms,
-  fs,
-  dependencies: [random],
-  passes: [
-    {
-      sampler: 'edgeWork_sampleColor1',
-      uniforms: {delta: [1, 0]}
-    },
-    {
-      sampler: 'edgeWork_sampleColor2',
-      uniforms: {delta: [0, 1]}
-    }
-  ]
-};

package/src/shader-modules/fun-filters/hexagonalpixelate.js

@@ -1,63 +0,0 @@
-/**
- * @filter        Hexagonal Pixelate
- * @description   Renders the image using a pattern of hexagonal tiles. Tile colors
- *                are nearest-neighbor sampled from the centers of the tiles.
- * @param centerX The x coordinate of the pattern center.
- * @param centerY The y coordinate of the pattern center.
- * @param scale   The width of an individual tile, in pixels.
- */
-const fs = `\
-uniform vec2 center;
-uniform float scale;
-
-vec4 hexagonalPixelate_sampleColor(sampler2D texture, vec2 texSize, vec2 texCoord) {
-  vec2 tex = (texCoord * texSize - center * texSize) / 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 *= scale / texSize;
-
-  return texture2D(texture, choice + center);
-}
-`;
-
-const uniforms = {
-  center: {value: [0.5, 0.5], hint: 'screenspace'},
-  scale: {value: 10, min: 1, softMin: 5, softMax: 50}
-};
-
-export default {
-  name: 'hexagonalPixelate',
-  uniforms,
-  fs,
-
-  passes: [{sampler: true}]
-};

package/src/shader-modules/fun-filters/ink.js

@@ -1,49 +0,0 @@
-/**
- * @filter         Ink
- * @description    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.
- * @param strength 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.
- */
-const fs = `\
-uniform float strength;
-
-vec4 ink_sampleColor(sampler2D texture, vec2 texSize, vec2 texCoord) {
-  vec2 dx = vec2(1.0 / texSize.x, 0.0);
-  vec2 dy = vec2(0.0, 1.0 / texSize.y);
-  vec4 color = texture2D(texture, 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 sample = texture2D(texture, texCoord + dx * x + dy * y).rgb;
-      bigAverage += sample;
-      bigTotal += 1.0;
-      if (abs(x) + abs(y) < 2.0) {
-        smallAverage += sample;
-        smallTotal += 1.0;
-      }
-    }
-  }
-  vec3 edge = max(vec3(0.0), bigAverage / bigTotal - smallAverage / smallTotal);
-  float power = strength * strength * strength * strength * strength;
-  return vec4(color.rgb - dot(edge, edge) * power * 100000.0, color.a);
-}
-`;
-
-const uniforms = {
-  strength: {value: 0.25, min: 0, softMax: 1}
-};
-
-export default {
-  name: 'ink',
-  uniforms,
-  fs,
-
-  passes: [{sampler: true}]
-};

package/src/shader-modules/utils/random.js

@@ -1,12 +0,0 @@
-// Quick random generator for fragment shaders
-const fs = `\
-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);
-}
-`;
-
-export default {
-  name: 'random',
-  fs
-};

package/src/shader-modules/warp-filters/bulgepinch.js

@@ -1,52 +0,0 @@
-/**
- * @filter         Bulge / Pinch
- * @description    Bulges or pinches the image in a circle.
- * @param centerX  The x coordinate of the center of the circle of effect.
- * @param centerY  The y coordinate of the center of the circle of effect.
- * @param radius   The radius of the circle of effect.
- * @param strength -1 to 1 (-1 is strong pinch, 0 is no effect, 1 is strong bulge)
- */
-import warp from './warp';
-
-const fs = `\
-uniform float radius;
-uniform float strength;
-uniform vec2 center;
-
-vec2 bulgePinch_warp(vec2 coord, vec2 texCenter) {
-  coord -= texCenter;
-  float distance = length(coord);
-  if (distance < radius) {
-    float percent = distance / radius;
-    if (strength > 0.0) {
-      coord *= mix(1.0, smoothstep(0.0, radius / distance, percent), strength * 0.75);
-    } else {
-      coord *= mix(1.0, pow(percent, 1.0 + strength * 0.75) * radius / distance, 1.0 - percent);
-    }
-  }
-  coord += texCenter;
-  return coord;
-}
-
-vec4 bulgePinch_sampleColor(sampler2D texture, vec2 texSize, vec2 texCoord) {
-  vec2 coord = texCoord * texSize;
-  coord = bulgePinch_warp(coord, center * texSize);
-
-  return warp_sampleColor(texture, texSize, coord);
-}
-`;
-
-const uniforms = {
-  center: [0.5, 0.5],
-  radius: {value: 200, min: 1, softMax: 600},
-  strength: {value: 0.5, min: -1, max: 1}
-};
-
-export default {
-  name: 'bulgePinch',
-  fs,
-  uniforms,
-  dependencies: [warp],
-
-  passes: [{sampler: true}]
-};

package/src/shader-modules/warp-filters/swirl.js

@@ -1,55 +0,0 @@
-/**
- * @filter        Swirl
- * @description   Warps a circular region of the image in a swirl.
- * @param centerX The x coordinate of the center of the circular region.
- * @param centerY The y coordinate of the center of the circular region.
- * @param radius  The radius of the circular region.
- * @param angle   The angle in radians that the pixels in the center of
- *                the circular region will be rotated by.
- */
-import warp from './warp';
-
-const fs = `\
-uniform float radius;
-uniform float angle;
-uniform vec2 center;
-
-vec2 swirl_warp(vec2 coord, vec2 texCenter) {
-  coord -= texCenter;
-  float distance = length(coord);
-  if (distance < radius) {
-    float percent = (radius - distance) / radius;
-    float theta = percent * percent * angle;
-    float s = sin(theta);
-    float c = cos(theta);
-    coord = vec2(
-      coord.x * c - coord.y * s,
-      coord.x * s + coord.y * c
-    );
-  }
-  coord += texCenter;
-  return coord;
-}
-
-vec4 swirl_sampleColor(sampler2D texture, vec2 texSize, vec2 texCoord) {
-  vec2 coord = texCoord * texSize;
-  coord = swirl_warp(coord, center * texSize);
-
-  return warp_sampleColor(texture, texSize, coord);
-}
-`;
-
-const uniforms = {
-  center: [0.5, 0.5],
-  radius: {value: 200, min: 1, softMax: 600},
-  angle: {value: 3, softMin: -25, softMax: 25}
-};
-
-export default {
-  name: 'swirl',
-  uniforms,
-  fs,
-  dependencies: [warp],
-
-  passes: [{sampler: true}]
-};

package/src/shader-modules/warp-filters/warp.js

@@ -1,19 +0,0 @@
-// TODO: FIXME
-/* eslint-disable */
-const fs = `\
-vec4 warp_sampleColor(sampler2D texture, vec2 texSize, vec2 coord) {
-  vec4 color = texture2D(texture, coord / texSize);
-  vec2 clampedCoord = clamp(coord, vec2(0.0), texSize);
-  if (coord != clampedCoord) {
-    /* fade to transparent if we are outside the image */
-    color.a *= max(0.0, 1.0 - length(coord - clampedCoord));
-  }
-
-  return color;
-}
-`;
-
-export default {
-  name: 'warp',
-  fs
-};