@luma.gl/effects 9.3.0-alpha.4 → 9.3.0-alpha.8

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

@@ -8,25 +8,35 @@ import {random} from '@luma.gl/shadertools';
 const source = /* wgsl */ `\
 struct edgeWorkUniforms {
   radius: f32,
-  int mode: uint32,
+  mode: u32,
 };
 
-@group(0) @binding(1) var<uniform> edgeWork: edgeWorkUniforms;
+@group(0) @binding(auto) var<uniform> edgeWork: edgeWorkUniforms;
 
-fn edgeWork_sampleColorRGB(sampler2D source, vec2 texSize, vec2 texCoord, vec2 delta) -> vec4f {
-  vec2 relativeDelta = edgeWork.radius * delta / texSize;
+fn edgeWork_sampleColorRGB(
+  sourceTexture: texture_2d<f32>,
+  sourceTextureSampler: sampler,
+  texSize: vec2f,
+  texCoord: vec2f,
+  delta: vec2f
+) -> vec4f {
+  let relativeDelta = edgeWork.radius * delta / texSize;
 
-  vec2 color = vec2(0.0);
-  vec2 total = vec2(0.0);
+  var color = vec2f(0.0);
+  var total = vec2f(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;
+  let offset = random(vec3f(12.9898, 78.233, 151.7182), 0.0);
+
+  for (var t = -30.0; t <= 30.0; t += 1.0) {
+    let percent = (t + offset - 0.5) / 30.0;
+    var weight = 1.0 - abs(percent);
+    let sampleColor = textureSample(
+      sourceTexture,
+      sourceTextureSampler,
+      texCoord + relativeDelta * percent
+    ).rgb;
+    let average = (sampleColor.r + sampleColor.g + sampleColor.b) / 3.0;
     color.x += average * weight;
     total.x += weight;
     if (abs(t) < 15.0) {
@@ -35,7 +45,68 @@ fn edgeWork_sampleColorRGB(sampler2D source, vec2 texSize, vec2 texCoord, vec2 d
       total.y += weight;
     }
   }
-  return vec4(color / total, 0.0, 1.0);
+  return vec4f(color / total, 0.0, 1.0);
+}
+
+fn edgeWork_sampleColorXY(
+  sourceTexture: texture_2d<f32>,
+  sourceTextureSampler: sampler,
+  texSize: vec2f,
+  texCoord: vec2f,
+  delta: vec2f
+) -> vec4f {
+  let relativeDelta = edgeWork.radius * delta / texSize;
+
+  var color = vec2f(0.0);
+  var total = vec2f(0.0);
+
+  /* randomize the lookup values to hide the fixed number of samples */
+  let offset = random(vec3f(12.9898, 78.233, 151.7182), 0.0);
+
+  for (var t = -30.0; t <= 30.0; t += 1.0) {
+    let percent = (t + offset - 0.5) / 30.0;
+    var weight = 1.0 - abs(percent);
+    let sampleColor = textureSample(
+      sourceTexture,
+      sourceTextureSampler,
+      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;
+    }
+  }
+
+  let c = clamp(10000.0 * (color.y / total.y - color.x / total.x) + 0.5, 0.0, 1.0);
+  return vec4f(c, c, c, 1.0);
+}
+
+fn edgeWork_sampleColor(
+  sourceTexture: texture_2d<f32>,
+  sourceTextureSampler: sampler,
+  texSize: vec2f,
+  texCoord: vec2f
+) -> vec4f {
+  if (edgeWork.mode == 0u) {
+    return edgeWork_sampleColorRGB(
+      sourceTexture,
+      sourceTextureSampler,
+      texSize,
+      texCoord,
+      vec2f(1.0, 0.0)
+    );
+  }
+
+  return edgeWork_sampleColorXY(
+    sourceTexture,
+    sourceTextureSampler,
+    texSize,
+    texCoord,
+    vec2f(0.0, 1.0)
+  );
 }
 `;
 

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

@@ -10,44 +10,56 @@ struct hexagonalPixelateUniforms {
   scale: f32,
 };
 
-@group(0) @binding(1) var<uniform> hexagonalPixelate: hexagonalPixelateUniforms;
-
-fn hexagonalPixelate_sampleColor(sampler2D source, vec2 texSize, vec2 texCoord) -> vec4f {
-  vec2 tex = (texCoord * texSize - hexagonalPixelate.center * texSize) / hexagonalPixelate.scale;
+@group(0) @binding(auto) var<uniform> hexagonalPixelate: hexagonalPixelateUniforms;
+
+fn hexagonalPixelate_sampleColor(
+  sourceTexture: texture_2d<f32>,
+  sourceTextureSampler: sampler,
+  texSize: vec2f,
+  texCoord: vec2f
+) -> vec4f {
+  var tex = (texCoord * texSize - hexagonalPixelate.center * texSize) / hexagonalPixelate.scale;
   tex.y /= 0.866025404;
   tex.x -= tex.y * 0.5;
 
-  vec2 a;
+  var a = vec2f(0.0);
   if (tex.x + tex.y - floor(tex.x) - floor(tex.y) < 1.0) {
-    a = vec2(floor(tex.x), floor(tex.y));
+    a = vec2f(floor(tex.x), floor(tex.y));
+  } else {
+    a = vec2f(ceil(tex.x), ceil(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;
+  let b = vec2f(ceil(tex.x), floor(tex.y));
+  let c = vec2f(floor(tex.x), ceil(tex.y));
+
+  let texBarycentric = vec3f(tex.x, tex.y, 1.0 - tex.x - tex.y);
+  let aBarycentric = vec3f(a.x, a.y, 1.0 - a.x - a.y);
+  let bBarycentric = vec3f(b.x, b.y, 1.0 - b.x - b.y);
+  let cBarycentric = vec3f(c.x, c.y, 1.0 - c.x - c.y);
+
+  let aLength = length(texBarycentric - aBarycentric);
+  let bLength = length(texBarycentric - bBarycentric);
+  let cLength = length(texBarycentric - cBarycentric);
+
+  var choice = vec2f(0.0);
+  if (aLength < bLength) {
+    if (aLength < cLength) {
+      choice = a;
+    } else {
+      choice = c;
+    }
   } else {
-    if (blen < clen) choice = b;
-    else choice = c;
+    if (bLength < cLength) {
+      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);
+  return textureSample(sourceTexture, sourceTextureSampler, choice + hexagonalPixelate.center);
 }
 `;
 

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

@@ -5,23 +5,32 @@
 import type {ShaderPass} from '@luma.gl/shadertools';
 
 const source = /* wgsl */ `\
-uniform inkUniforms {
+struct inkUniforms {
   strength: f32,
 };
 
-@group(0) @binding(1) var<uniform> ink: inkUniforms;
+@group(0) @binding(auto) var<uniform> ink: inkUniforms;
 
-fn ink_sampleColor(sampler2D source, vec2 texSize, vec2 texCoord) -> vec4f {
-  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;
+fn ink_sampleColor(
+  sourceTexture: texture_2d<f32>,
+  sourceTextureSampler: sampler,
+  texSize: vec2f,
+  texCoord: vec2f
+) -> vec4f {
+  let dx = vec2f(1.0 / texSize.x, 0.0);
+  let dy = vec2f(0.0, 1.0 / texSize.y);
+  let color = textureSample(sourceTexture, sourceTextureSampler, texCoord);
+  var bigTotal = 0.0;
+  var smallTotal = 0.0;
+  var bigAverage = vec3f(0.0);
+  var smallAverage = vec3f(0.0);
+  for (var x = -2.0; x <= 2.0; x += 1.0) {
+    for (var y = -2.0; y <= 2.0; y += 1.0) {
+      let offsetColor = textureSample(
+        sourceTexture,
+        sourceTextureSampler,
+        texCoord + dx * x + dy * y
+      ).rgb;
       bigAverage += offsetColor;
       bigTotal += 1.0;
       if (abs(x) + abs(y) < 2.0) {
@@ -30,9 +39,9 @@ fn ink_sampleColor(sampler2D source, vec2 texSize, vec2 texCoord) -> vec4f {
       }
     }
   }
-  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);
+  let edge = max(vec3f(0.0), bigAverage / bigTotal - smallAverage / smallTotal);
+  let power = ink.strength * ink.strength * ink.strength * ink.strength * ink.strength;
+  return vec4f(color.rgb - vec3f(dot(edge, edge) * power * 100000.0), color.a);
 }
 `;
 

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

@@ -5,27 +5,37 @@
 import type {ShaderPass} from '@luma.gl/shadertools';
 
 const source = /* wgsl */ `\
-uniform magnifyUniforms {
-  screenXY: vec2f;
-  radiusPixels: f32;
-  zoom: f32;
-  borderWidthPixels: f32;
-  borderColor: vec4f;
+struct magnifyUniforms {
+  screenXY: vec2f,
+  radiusPixels: f32,
+  zoom: f32,
+  borderWidthPixels: f32,
+  borderColor: vec4f,
 };
 
-@group(0) @binding(1) var<uniform> magnify: magnifyUniforms;
+@group(0) @binding(auto) var<uniform> magnify: magnifyUniforms;
 
-fn magnify_sampleColor(sampler2D source, vec2 texSize, vec2 texCoord) -> vec4f {
-  vec2 pos = vec2(magnify.screenXY.x, 1.0 - magnify.screenXY.y);
-  float dist = distance(texCoord * texSize, pos * texSize);
+fn magnify_sampleColor(
+  sourceTexture: texture_2d<f32>,
+  sourceTextureSampler: sampler,
+  texSize: vec2f,
+  texCoord: vec2f
+) -> vec4f {
+  let pos = vec2f(magnify.screenXY.x, 1.0 - magnify.screenXY.y);
+  let dist = distance(texCoord * texSize, pos * texSize);
   if (dist < magnify.radiusPixels) {
-    return texture(source, (texCoord - pos) / magnify.zoom + pos);
+    return textureSampleLevel(
+      sourceTexture,
+      sourceTextureSampler,
+      (texCoord - pos) / magnify.zoom + pos,
+      0.0
+    );
   }
 
   if (dist <= magnify.radiusPixels + magnify.borderWidthPixels) {
     return magnify.borderColor;
   }
-  return texture(source, texCoord);
+  return textureSampleLevel(sourceTexture, sourceTextureSampler, texCoord, 0.0);
 }
 `;
 

package/src/passes/postprocessing/image-warp-filters/bulgepinch.ts

@@ -6,41 +6,55 @@ import type {ShaderPass} from '@luma.gl/shadertools';
 import {warp} from './warp';
 
 const source = /* wgsl */ `\
-uniform bulgePinchUniforms {
+struct bulgePinchUniforms {
+  center: vec2f,
   radius: f32,
   strength: f32,
-  center: vec2f,
 };
 
-@group(0) @binding(1) var<uniform> bulgePinch: bulgePinchUniforms;
+@group(0) @binding(auto) var<uniform> bulgePinch: bulgePinchUniforms;
 
-fn bulgePinch_warp(vec2 coord, vec2 texCenter) -> vec2f {
-  coord -= texCenter;
-  float distance = length(coord);
+fn bulgePinch_warp(coordIn: vec2f, texCenter: vec2f) -> vec2f {
+  var coord = coordIn - texCenter;
+  let distance = length(coord);
   if (distance < bulgePinch.radius) {
-    float percent = distance / bulgePinch.radius;
+    let percent = distance / bulgePinch.radius;
+    let safeDistance = max(distance, 0.00001);
     if (bulgePinch.strength > 0.0) {
-      coord *= mix(1.0, smoothstep(0.0, bulgePinch.radius / distance, percent), bulgePinch.strength * 0.75);
+      coord *= mix(
+        1.0,
+        smoothstep(0.0, bulgePinch.radius / safeDistance, percent),
+        bulgePinch.strength * 0.75
+      );
     } else {
-      coord *= mix(1.0, pow(percent, 1.0 + bulgePinch.strength * 0.75) * bulgePinch.radius / distance, 1.0 - percent);
+      coord *= mix(
+        1.0,
+        pow(percent, 1.0 + bulgePinch.strength * 0.75) * bulgePinch.radius / safeDistance,
+        1.0 - percent
+      );
     }
   }
   coord += texCenter;
   return coord;
 }
 
-fn bulgePinch_sampleColor(sampler2D source, vec2 texSize, vec2 texCoord) -> vec4f {
-  vec2 coord = texCoord * texSize;
+fn bulgePinch_sampleColor(
+  sourceTexture: texture_2d<f32>,
+  sourceTextureSampler: sampler,
+  texSize: vec2f,
+  texCoord: vec2f
+) -> vec4f {
+  var coord = texCoord * texSize;
   coord = bulgePinch_warp(coord, bulgePinch.center * texSize);
-  return warp_sampleColor(source, texSize, coord);
+  return warp_sampleColor(sourceTexture, sourceTextureSampler, texSize, coord);
 }
 `;
 
 const fs = /* glsl */ `\
 uniform bulgePinchUniforms {
+  vec2 center;
   float radius;
   float strength;
-  vec2 center;
 } bulgePinch;
 
 vec2 bulgePinch_warp(vec2 coord, vec2 texCenter) {

package/src/passes/postprocessing/image-warp-filters/swirl.ts

@@ -6,23 +6,23 @@ import type {ShaderPass} from '@luma.gl/shadertools';
 import {warp} from './warp';
 
 const source = /* wgsl */ `\
-uniform swirlUniforms {
+struct swirlUniforms {
+  center: vec2f,
   radius: f32,
   angle: f32,
-  center: vec2f,
 };
 
-@group(0) @binding(1) swirl: swirlUniforms;
+@group(0) @binding(auto) var<uniform> swirl: swirlUniforms;
 
-fn swirl_warp(vec2 coord, vec2 texCenter) -> vec2f {
-  coord -= texCenter;
-  float distance = length(coord);
+fn swirl_warp(coordIn: vec2f, texCenter: vec2f) -> vec2f {
+  var coord = coordIn - texCenter;
+  let distance = length(coord);
   if (distance < swirl.radius) {
-    float percent = (swirl.radius - distance) / swirl.radius;
-    float theta = percent * percent * swirl.angle;
-    float s = sin(theta);
-    float c = cos(theta);
-    coord = vec2(
+    let percent = (swirl.radius - distance) / swirl.radius;
+    let theta = percent * percent * swirl.angle;
+    let s = sin(theta);
+    let c = cos(theta);
+    coord = vec2f(
       coord.x * c - coord.y * s,
       coord.x * s + coord.y * c
     );
@@ -31,18 +31,23 @@ fn swirl_warp(vec2 coord, vec2 texCenter) -> vec2f {
   return coord;
 }
 
-fn swirl_sampleColor(sampler2D source, vec2 texSize, vec2 texCoord) -> vec4f {
-  vec2 coord = texCoord * texSize;
+fn swirl_sampleColor(
+  sourceTexture: texture_2d<f32>,
+  sourceTextureSampler: sampler,
+  texSize: vec2f,
+  texCoord: vec2f
+) -> vec4f {
+  var coord = texCoord * texSize;
   coord = swirl_warp(coord, swirl.center * texSize);
-  return warp_sampleColor(source, texSize, coord);
+  return warp_sampleColor(sourceTexture, sourceTextureSampler, texSize, coord);
 }
 `;
 
 const fs = /* glsl */ `\
 uniform swirlUniforms {
+  vec2 center;
   float radius;
   float angle;
-  vec2 center;
 } swirl;
 
 vec2 swirl_warp(vec2 coord, vec2 texCenter) {

package/src/passes/postprocessing/image-warp-filters/warp.ts

@@ -5,10 +5,15 @@
 import type {ShaderPass} from '@luma.gl/shadertools';
 
 const source = /* wgsl */ `\
-vec4 warp_sampleColor(sampler2D source, vec2 texSize, vec2 coord) {
-  vec4 color = texture(source, coord / texSize);
-  vec2 clampedCoord = clamp(coord, vec2(0.0), texSize);
-  if (coord != clampedCoord) {
+fn warp_sampleColor(
+  sourceTexture: texture_2d<f32>,
+  sourceTextureSampler: sampler,
+  texSize: vec2f,
+  coord: vec2f
+) -> vec4f {
+  var color = textureSample(sourceTexture, sourceTextureSampler, coord / texSize);
+  let clampedCoord = clamp(coord, vec2f(0.0), texSize);
+  if (any(coord != clampedCoord)) {
     /* fade to transparent if we are outside the image */
     color.a *= max(0.0, 1.0 - length(coord - clampedCoord));
   }