@luma.gl/effects 9.3.0-alpha.2 → 9.3.0-alpha.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (98) hide show
  1. package/dist/dist.dev.js +1265 -362
  2. package/dist/dist.min.js +10 -9
  3. package/dist/index.cjs +419 -258
  4. package/dist/index.cjs.map +2 -2
  5. package/dist/passes/postprocessing/image-adjust-filters/brightnesscontrast.d.ts +1 -1
  6. package/dist/passes/postprocessing/image-adjust-filters/brightnesscontrast.d.ts.map +1 -1
  7. package/dist/passes/postprocessing/image-adjust-filters/brightnesscontrast.js +5 -4
  8. package/dist/passes/postprocessing/image-adjust-filters/brightnesscontrast.js.map +1 -1
  9. package/dist/passes/postprocessing/image-adjust-filters/denoise.d.ts +1 -1
  10. package/dist/passes/postprocessing/image-adjust-filters/denoise.d.ts.map +1 -1
  11. package/dist/passes/postprocessing/image-adjust-filters/denoise.js +29 -21
  12. package/dist/passes/postprocessing/image-adjust-filters/denoise.js.map +1 -1
  13. package/dist/passes/postprocessing/image-adjust-filters/huesaturation.d.ts +1 -1
  14. package/dist/passes/postprocessing/image-adjust-filters/huesaturation.d.ts.map +1 -1
  15. package/dist/passes/postprocessing/image-adjust-filters/huesaturation.js +26 -32
  16. package/dist/passes/postprocessing/image-adjust-filters/huesaturation.js.map +1 -1
  17. package/dist/passes/postprocessing/image-adjust-filters/noise.d.ts +1 -1
  18. package/dist/passes/postprocessing/image-adjust-filters/noise.d.ts.map +1 -1
  19. package/dist/passes/postprocessing/image-adjust-filters/noise.js +8 -7
  20. package/dist/passes/postprocessing/image-adjust-filters/noise.js.map +1 -1
  21. package/dist/passes/postprocessing/image-adjust-filters/sepia.d.ts +1 -1
  22. package/dist/passes/postprocessing/image-adjust-filters/sepia.d.ts.map +1 -1
  23. package/dist/passes/postprocessing/image-adjust-filters/sepia.js +10 -9
  24. package/dist/passes/postprocessing/image-adjust-filters/sepia.js.map +1 -1
  25. package/dist/passes/postprocessing/image-adjust-filters/vibrance.d.ts +1 -1
  26. package/dist/passes/postprocessing/image-adjust-filters/vibrance.d.ts.map +1 -1
  27. package/dist/passes/postprocessing/image-adjust-filters/vibrance.js +9 -8
  28. package/dist/passes/postprocessing/image-adjust-filters/vibrance.js.map +1 -1
  29. package/dist/passes/postprocessing/image-adjust-filters/vignette.d.ts +1 -1
  30. package/dist/passes/postprocessing/image-adjust-filters/vignette.d.ts.map +1 -1
  31. package/dist/passes/postprocessing/image-adjust-filters/vignette.js +9 -13
  32. package/dist/passes/postprocessing/image-adjust-filters/vignette.js.map +1 -1
  33. package/dist/passes/postprocessing/image-blur-filters/tiltshift.d.ts +2 -2
  34. package/dist/passes/postprocessing/image-blur-filters/tiltshift.d.ts.map +1 -1
  35. package/dist/passes/postprocessing/image-blur-filters/tiltshift.js +34 -16
  36. package/dist/passes/postprocessing/image-blur-filters/tiltshift.js.map +1 -1
  37. package/dist/passes/postprocessing/image-blur-filters/triangleblur.d.ts +2 -2
  38. package/dist/passes/postprocessing/image-blur-filters/triangleblur.d.ts.map +1 -1
  39. package/dist/passes/postprocessing/image-blur-filters/triangleblur.js +21 -12
  40. package/dist/passes/postprocessing/image-blur-filters/triangleblur.js.map +1 -1
  41. package/dist/passes/postprocessing/image-blur-filters/zoomblur.d.ts +2 -2
  42. package/dist/passes/postprocessing/image-blur-filters/zoomblur.d.ts.map +1 -1
  43. package/dist/passes/postprocessing/image-blur-filters/zoomblur.js +20 -11
  44. package/dist/passes/postprocessing/image-blur-filters/zoomblur.js.map +1 -1
  45. package/dist/passes/postprocessing/image-fun-filters/colorhalftone.d.ts +1 -1
  46. package/dist/passes/postprocessing/image-fun-filters/colorhalftone.d.ts.map +1 -1
  47. package/dist/passes/postprocessing/image-fun-filters/colorhalftone.js +18 -16
  48. package/dist/passes/postprocessing/image-fun-filters/colorhalftone.js.map +1 -1
  49. package/dist/passes/postprocessing/image-fun-filters/dotscreen.d.ts +1 -1
  50. package/dist/passes/postprocessing/image-fun-filters/dotscreen.js +11 -11
  51. package/dist/passes/postprocessing/image-fun-filters/edgework.d.ts +2 -2
  52. package/dist/passes/postprocessing/image-fun-filters/edgework.d.ts.map +1 -1
  53. package/dist/passes/postprocessing/image-fun-filters/edgework.js +83 -12
  54. package/dist/passes/postprocessing/image-fun-filters/edgework.js.map +1 -1
  55. package/dist/passes/postprocessing/image-fun-filters/hexagonalpixelate.d.ts +1 -1
  56. package/dist/passes/postprocessing/image-fun-filters/hexagonalpixelate.d.ts.map +1 -1
  57. package/dist/passes/postprocessing/image-fun-filters/hexagonalpixelate.js +33 -21
  58. package/dist/passes/postprocessing/image-fun-filters/hexagonalpixelate.js.map +1 -1
  59. package/dist/passes/postprocessing/image-fun-filters/ink.d.ts +1 -1
  60. package/dist/passes/postprocessing/image-fun-filters/ink.d.ts.map +1 -1
  61. package/dist/passes/postprocessing/image-fun-filters/ink.js +24 -15
  62. package/dist/passes/postprocessing/image-fun-filters/ink.js.map +1 -1
  63. package/dist/passes/postprocessing/image-fun-filters/magnify.d.ts +1 -1
  64. package/dist/passes/postprocessing/image-fun-filters/magnify.d.ts.map +1 -1
  65. package/dist/passes/postprocessing/image-fun-filters/magnify.js +16 -11
  66. package/dist/passes/postprocessing/image-fun-filters/magnify.js.map +1 -1
  67. package/dist/passes/postprocessing/image-warp-filters/bulgepinch.d.ts +2 -2
  68. package/dist/passes/postprocessing/image-warp-filters/bulgepinch.d.ts.map +1 -1
  69. package/dist/passes/postprocessing/image-warp-filters/bulgepinch.js +24 -10
  70. package/dist/passes/postprocessing/image-warp-filters/bulgepinch.js.map +1 -1
  71. package/dist/passes/postprocessing/image-warp-filters/swirl.d.ts +2 -2
  72. package/dist/passes/postprocessing/image-warp-filters/swirl.d.ts.map +1 -1
  73. package/dist/passes/postprocessing/image-warp-filters/swirl.js +18 -13
  74. package/dist/passes/postprocessing/image-warp-filters/swirl.js.map +1 -1
  75. package/dist/passes/postprocessing/image-warp-filters/warp.d.ts +1 -1
  76. package/dist/passes/postprocessing/image-warp-filters/warp.d.ts.map +1 -1
  77. package/dist/passes/postprocessing/image-warp-filters/warp.js +9 -4
  78. package/dist/passes/postprocessing/image-warp-filters/warp.js.map +1 -1
  79. package/package.json +2 -2
  80. package/src/passes/postprocessing/image-adjust-filters/brightnesscontrast.ts +5 -4
  81. package/src/passes/postprocessing/image-adjust-filters/denoise.ts +31 -23
  82. package/src/passes/postprocessing/image-adjust-filters/huesaturation.ts +28 -34
  83. package/src/passes/postprocessing/image-adjust-filters/noise.ts +8 -7
  84. package/src/passes/postprocessing/image-adjust-filters/sepia.ts +10 -9
  85. package/src/passes/postprocessing/image-adjust-filters/vibrance.ts +9 -8
  86. package/src/passes/postprocessing/image-adjust-filters/vignette.ts +9 -13
  87. package/src/passes/postprocessing/image-blur-filters/tiltshift.ts +36 -18
  88. package/src/passes/postprocessing/image-blur-filters/triangleblur.ts +21 -12
  89. package/src/passes/postprocessing/image-blur-filters/zoomblur.ts +21 -12
  90. package/src/passes/postprocessing/image-fun-filters/colorhalftone.ts +18 -16
  91. package/src/passes/postprocessing/image-fun-filters/dotscreen.ts +11 -11
  92. package/src/passes/postprocessing/image-fun-filters/edgework.ts +84 -13
  93. package/src/passes/postprocessing/image-fun-filters/hexagonalpixelate.ts +36 -24
  94. package/src/passes/postprocessing/image-fun-filters/ink.ts +24 -15
  95. package/src/passes/postprocessing/image-fun-filters/magnify.ts +16 -11
  96. package/src/passes/postprocessing/image-warp-filters/bulgepinch.ts +24 -10
  97. package/src/passes/postprocessing/image-warp-filters/swirl.ts +18 -13
  98. package/src/passes/postprocessing/image-warp-filters/warp.ts +9 -4
@@ -6,7 +6,7 @@ import type {ShaderPass} from '@luma.gl/shadertools';
6
6
  import {random} from '@luma.gl/shadertools';
7
7
 
8
8
  const source = /* wgsl */ `\
9
- uniform tiltShiftUniforms {
9
+ struct tiltShiftUniforms {
10
10
  blurRadius: f32,
11
11
  gradientRadius: f32,
12
12
  start: vec2f,
@@ -16,32 +16,50 @@ uniform tiltShiftUniforms {
16
16
 
17
17
  @group(0) @binding(1) var<uniform> tiltShift: tiltShiftUniforms;
18
18
 
19
- fn tiltShift_getDelta(vec2 texSize) -> vec2f {
20
- vec2 vector = normalize((tiltShift.end - tiltShift.start) * texSize);
21
- return tiltShift.invert ? vec2(-vector.y, vector.x) : vector;
19
+ fn tiltShift_getDelta(texSize: vec2f) -> vec2f {
20
+ let vector = normalize((tiltShift.end - tiltShift.start) * texSize);
21
+ return select(vector, vec2f(-vector.y, vector.x), tiltShift.invert != 0u);
22
22
  }
23
23
 
24
- fn tiltShift_sampleColor(sampler2D source, vec2 texSize, vec2 texCoord) -> vec4f {
25
- vec4 color = vec4(0.0);
26
- float total = 0.0;
24
+ fn tiltShift_sampleColor(
25
+ sourceTexture: texture_2d<f32>,
26
+ sourceTextureSampler: sampler,
27
+ texSize: vec2f,
28
+ texCoord: vec2f
29
+ ) -> vec4f {
30
+ var color = vec4f(0.0);
31
+ var total = 0.0;
27
32
 
28
33
  /* randomize the lookup values to hide the fixed number of samples */
29
- float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);
30
-
31
- vec2 normal = normalize(vec2((tiltShift.start.y - tiltShift.end.y) * texSize.y, (tiltShift.end.x - tiltShift.start.x) * texSize.x));
32
- float radius = smoothstep(0.0, 1.0,
33
- abs(dot(texCoord * texSize - tiltShift.start * texSize, normal)) / tiltShift.gradientRadius) * tiltShift.blurRadius;
34
-
35
- for (float t = -30.0; t <= 30.0; t++) {
36
- float percent = (t + offset - 0.5) / 30.0;
37
- float weight = 1.0 - abs(percent);
38
- vec4 offsetColor = texture(source, texCoord + tiltShift_getDelta(texSize) / texSize * percent * radius);
34
+ let offset = random(vec3f(12.9898, 78.233, 151.7182), 0.0);
35
+
36
+ let normal = normalize(
37
+ vec2f(
38
+ (tiltShift.start.y - tiltShift.end.y) * texSize.y,
39
+ (tiltShift.end.x - tiltShift.start.x) * texSize.x
40
+ )
41
+ );
42
+ let radius =
43
+ smoothstep(
44
+ 0.0,
45
+ 1.0,
46
+ abs(dot(texCoord * texSize - tiltShift.start * texSize, normal)) / tiltShift.gradientRadius
47
+ ) * tiltShift.blurRadius;
48
+
49
+ for (var t = -30.0; t <= 30.0; t += 1.0) {
50
+ let percent = (t + offset - 0.5) / 30.0;
51
+ let weight = 1.0 - abs(percent);
52
+ let offsetColor = textureSample(
53
+ sourceTexture,
54
+ sourceTextureSampler,
55
+ texCoord + tiltShift_getDelta(texSize) / texSize * percent * radius
56
+ );
39
57
 
40
58
  color += offsetColor * weight;
41
59
  total += weight;
42
60
  }
43
61
 
44
- color = color / total;
62
+ color /= total;
45
63
  return color;
46
64
  }
47
65
  `;
@@ -6,26 +6,35 @@ import type {ShaderPass} from '@luma.gl/shadertools';
6
6
  import {random} from '@luma.gl/shadertools';
7
7
 
8
8
  const source = /* wgsl */ `\
9
- uniform triangleBlurUniforms {
9
+ struct triangleBlurUniforms {
10
10
  radius: f32,
11
11
  delta: vec2f,
12
- }
12
+ };
13
13
 
14
14
  @group(0) @binding(1) var<uniform> triangleBlur: triangleBlurUniforms;
15
15
 
16
- vec4 triangleBlur_sampleColor(sampler2D source, vec2 texSize, vec2 texCoord) {
17
- vec2 adjustedDelta = triangleBlur.delta * triangleBlur.radius / texSize;
16
+ fn triangleBlur_sampleColor(
17
+ sourceTexture: texture_2d<f32>,
18
+ sourceTextureSampler: sampler,
19
+ texSize: vec2f,
20
+ texCoord: vec2f
21
+ ) -> vec4f {
22
+ let adjustedDelta = triangleBlur.delta * triangleBlur.radius / texSize;
18
23
 
19
- vec4 color = vec4(0.0);
20
- float total = 0.0;
24
+ var color = vec4f(0.0);
25
+ var total = 0.0;
21
26
 
22
27
  /* randomize the lookup values to hide the fixed number of samples */
23
- float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);
28
+ let offset = random(vec3f(12.9898, 78.233, 151.7182), 0.0);
24
29
 
25
- for (float t = -30.0; t <= 30.0; t++) {
26
- float percent = (t + offset - 0.5) / 30.0;
27
- float weight = 1.0 - abs(percent);
28
- vec4 offsetColor = texture(source, texCoord + adjustedDelta * percent);
30
+ for (var t = -30.0; t <= 30.0; t += 1.0) {
31
+ let percent = (t + offset - 0.5) / 30.0;
32
+ let weight = 1.0 - abs(percent);
33
+ var offsetColor = textureSample(
34
+ sourceTexture,
35
+ sourceTextureSampler,
36
+ texCoord + adjustedDelta * percent
37
+ );
29
38
 
30
39
  /* switch to pre-multiplied alpha to correctly blur transparent images */
31
40
  offsetColor.rgb *= offsetColor.a;
@@ -34,7 +43,7 @@ vec4 triangleBlur_sampleColor(sampler2D source, vec2 texSize, vec2 texCoord) {
34
43
  total += weight;
35
44
  }
36
45
 
37
- color = color / total;
46
+ color /= total;
38
47
 
39
48
  /* switch back from pre-multiplied alpha */
40
49
  color.rgb /= color.a + 0.00001;
@@ -6,7 +6,7 @@ import type {ShaderPass} from '@luma.gl/shadertools';
6
6
  import {random} from '@luma.gl/shadertools';
7
7
 
8
8
  const source = /* wgsl */ `
9
- uniform zoomBlurUniforms {
9
+ struct zoomBlurUniforms {
10
10
  center: vec2f,
11
11
  strength: f32,
12
12
  };
@@ -14,23 +14,32 @@ uniform zoomBlurUniforms {
14
14
  @group(0) @binding(1) var<uniform> zoomBlur : zoomBlurUniforms;
15
15
 
16
16
 
17
- fn zoomBlur_sampleColor(sampler2D source, vec2 texSize, vec2 texCoord) -> vec4f {
18
- vec4 color = vec4(0.0);
19
- float total = 0.0;
20
- vec2 toCenter = zoomBlur.center * texSize - texCoord * texSize;
17
+ fn zoomBlur_sampleColor(
18
+ sourceTexture: texture_2d<f32>,
19
+ sourceTextureSampler: sampler,
20
+ texSize: vec2f,
21
+ texCoord: vec2f
22
+ ) -> vec4f {
23
+ var color = vec4f(0.0);
24
+ var total = 0.0;
25
+ let toCenter = zoomBlur.center * texSize - texCoord * texSize;
21
26
 
22
27
  /* randomize the lookup values to hide the fixed number of samples */
23
- float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);
24
-
25
- for (float t = 0.0; t <= 40.0; t++) {
26
- float percent = (t + offset) / 40.0;
27
- float weight = 4.0 * (percent - percent * percent);
28
- vec4 offsetColor = texture(source, texCoord + toCenter * percent * zoomBlur.strength / texSize);
28
+ let offset = random(vec3f(12.9898, 78.233, 151.7182), 0.0);
29
+
30
+ for (var t = 0.0; t <= 40.0; t += 1.0) {
31
+ let percent = (t + offset) / 40.0;
32
+ let weight = 4.0 * (percent - percent * percent);
33
+ let offsetColor = textureSample(
34
+ sourceTexture,
35
+ sourceTextureSampler,
36
+ texCoord + toCenter * percent * zoomBlur.strength / texSize
37
+ );
29
38
  color += offsetColor * weight;
30
39
  total += weight;
31
40
  }
32
41
 
33
- color = color / total;
42
+ color /= total;
34
43
  return color;
35
44
  }
36
45
  `;
@@ -8,38 +8,40 @@ const source = /* wgsl */ `\
8
8
  struct colorHalftoneUniforms {
9
9
  center: vec2f,
10
10
  angle: f32,
11
- size: f32.
11
+ size: f32,
12
12
  };
13
13
 
14
14
  @group(0) @binding(1) var<uniform> colorHalftone: colorHalftoneUniforms;
15
15
 
16
16
  fn pattern(angle: f32, scale: f32, texSize: vec2f, texCoord: vec2f) -> f32 {
17
- let s: f32 = sin(angle), c = cos(angle);
18
- let tex: vec2f = texCoord * texSize - colorHalftone.center * texSize;
19
- let point: vec2f = vec2(
20
- c * tex.x - s * tex.y,
21
- s * tex.x + c * tex.y
17
+ let s = sin(angle);
18
+ let c = cos(angle);
19
+ let tex = texCoord * texSize - colorHalftone.center * texSize;
20
+ let point = vec2f(
21
+ c * tex.x - s * tex.y,
22
+ s * tex.x + c * tex.y
22
23
  ) * scale;
23
24
  return (sin(point.x) * sin(point.y)) * 4.0;
24
25
  }
25
26
 
26
- fn colorHalftone_filterColor_ext(vec4f color, vec2f texSize, vec2f texCoord) -> vec4f {
27
- let scale: f32 = 3.1514 / colorHalftone.size;
28
- let cmy: vec3f = 1.0 - color.rgb;
29
- let k: f32 = min(cmy.x, min(cmy.y, cmy.z));
27
+ fn colorHalftone_filterColor_ext(color: vec4f, texSize: vec2f, texCoord: vec2f) -> vec4f {
28
+ let scale = 3.1514 / colorHalftone.size;
29
+ var cmy = vec3f(1.0) - color.rgb;
30
+ var k = min(cmy.x, min(cmy.y, cmy.z));
31
+ let safeDenominator = max(1.0 - k, 0.00001);
30
32
 
31
- cmy = (cmy - k) / (1.0 - k);
33
+ cmy = (cmy - vec3f(k)) / safeDenominator;
32
34
  cmy = clamp(
33
- cmy * 10.0 - 3.0 + vec3(
35
+ cmy * 10.0 - vec3f(3.0) + vec3f(
34
36
  pattern(colorHalftone.angle + 0.26179, scale, texSize, texCoord),
35
- pattern(colorHalftone.angle + 1.30899, scale, texSize, texCoord),
37
+ pattern(colorHalftone.angle + 1.30899, scale, texSize, texCoord),
36
38
  pattern(colorHalftone.angle, scale, texSize, texCoord)
37
39
  ),
38
- 0.0,
39
- 1.0
40
+ vec3f(0.0),
41
+ vec3f(1.0)
40
42
  );
41
43
  k = clamp(k * 10.0 - 5.0 + pattern(colorHalftone.angle + 0.78539, scale, texSize, texCoord), 0.0, 1.0);
42
- return vec4(1.0 - cmy - k, color.a);
44
+ return vec4f(vec3f(1.0) - cmy - vec3f(k), color.a);
43
45
  }
44
46
  `;
45
47
 
@@ -5,29 +5,29 @@
5
5
  import type {ShaderPass} from '@luma.gl/shadertools';
6
6
 
7
7
  const source = /* wgsl */ `\
8
- uniform dotScreenUniforms {
8
+ struct dotScreenUniforms {
9
9
  center: vec2f,
10
10
  angle: f32,
11
11
  size: f32,
12
12
  };
13
13
 
14
- @group(0) @binding(1) dotScreen: dotScreenUniforms;
14
+ @group(0) @binding(1) var<uniform> dotScreen: dotScreenUniforms;
15
15
 
16
16
  fn pattern(texSize: vec2f, texCoord: vec2f) -> f32 {
17
- let scale: f32 = 3.1415 / dotScreen.size;
18
-
19
- let s: f32 = sin(dotScreen.angle), c = cos(dotScreen.angle);
20
- tex: vec2f = texCoord * texSize - dotScreen.center * texSize;
21
- point = vec2f(
22
- c: * tex.x - s * tex.y,
17
+ let scale = 3.1415 / dotScreen.size;
18
+ let s = sin(dotScreen.angle);
19
+ let c = cos(dotScreen.angle);
20
+ let tex = texCoord * texSize - dotScreen.center * texSize;
21
+ let point = vec2f(
22
+ c * tex.x - s * tex.y,
23
23
  s * tex.x + c * tex.y
24
24
  ) * scale;
25
25
  return (sin(point.x) * sin(point.y)) * 4.0;
26
26
  }
27
27
 
28
- fn dotScreen_filterColor_ext(vec4 color, texSize: vec2f, texCoord: vec2f) -> vec4f {
29
- let average: f32 = (color.r + color.g + color.b) / 3.0;
30
- return vec4(vec3(average * 10.0 - 5.0 + pattern(texSize, texCoord)), color.a);
28
+ fn dotScreen_filterColor_ext(color: vec4f, texSize: vec2f, texCoord: vec2f) -> vec4f {
29
+ let average = (color.r + color.g + color.b) / 3.0;
30
+ return vec4f(vec3f(average * 10.0 - 5.0 + pattern(texSize, texCoord)), color.a);
31
31
  }
32
32
  `;
33
33
 
@@ -8,25 +8,35 @@ import {random} from '@luma.gl/shadertools';
8
8
  const source = /* wgsl */ `\
9
9
  struct edgeWorkUniforms {
10
10
  radius: f32,
11
- int mode: uint32,
11
+ mode: u32,
12
12
  };
13
13
 
14
14
  @group(0) @binding(1) var<uniform> edgeWork: edgeWorkUniforms;
15
15
 
16
- fn edgeWork_sampleColorRGB(sampler2D source, vec2 texSize, vec2 texCoord, vec2 delta) -> vec4f {
17
- vec2 relativeDelta = edgeWork.radius * delta / texSize;
16
+ fn edgeWork_sampleColorRGB(
17
+ sourceTexture: texture_2d<f32>,
18
+ sourceTextureSampler: sampler,
19
+ texSize: vec2f,
20
+ texCoord: vec2f,
21
+ delta: vec2f
22
+ ) -> vec4f {
23
+ let relativeDelta = edgeWork.radius * delta / texSize;
18
24
 
19
- vec2 color = vec2(0.0);
20
- vec2 total = vec2(0.0);
25
+ var color = vec2f(0.0);
26
+ var total = vec2f(0.0);
21
27
 
22
28
  /* randomize the lookup values to hide the fixed number of samples */
23
- float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);
24
-
25
- for (float t = -30.0; t <= 30.0; t++) {
26
- float percent = (t + offset - 0.5) / 30.0;
27
- float weight = 1.0 - abs(percent);
28
- vec3 sampleColor = texture(source, texCoord + relativeDelta * percent).rgb;
29
- float average = (sampleColor.r + sampleColor.g + sampleColor.b) / 3.0;
29
+ let offset = random(vec3f(12.9898, 78.233, 151.7182), 0.0);
30
+
31
+ for (var t = -30.0; t <= 30.0; t += 1.0) {
32
+ let percent = (t + offset - 0.5) / 30.0;
33
+ var weight = 1.0 - abs(percent);
34
+ let sampleColor = textureSample(
35
+ sourceTexture,
36
+ sourceTextureSampler,
37
+ texCoord + relativeDelta * percent
38
+ ).rgb;
39
+ let average = (sampleColor.r + sampleColor.g + sampleColor.b) / 3.0;
30
40
  color.x += average * weight;
31
41
  total.x += weight;
32
42
  if (abs(t) < 15.0) {
@@ -35,7 +45,68 @@ fn edgeWork_sampleColorRGB(sampler2D source, vec2 texSize, vec2 texCoord, vec2 d
35
45
  total.y += weight;
36
46
  }
37
47
  }
38
- return vec4(color / total, 0.0, 1.0);
48
+ return vec4f(color / total, 0.0, 1.0);
49
+ }
50
+
51
+ fn edgeWork_sampleColorXY(
52
+ sourceTexture: texture_2d<f32>,
53
+ sourceTextureSampler: sampler,
54
+ texSize: vec2f,
55
+ texCoord: vec2f,
56
+ delta: vec2f
57
+ ) -> vec4f {
58
+ let relativeDelta = edgeWork.radius * delta / texSize;
59
+
60
+ var color = vec2f(0.0);
61
+ var total = vec2f(0.0);
62
+
63
+ /* randomize the lookup values to hide the fixed number of samples */
64
+ let offset = random(vec3f(12.9898, 78.233, 151.7182), 0.0);
65
+
66
+ for (var t = -30.0; t <= 30.0; t += 1.0) {
67
+ let percent = (t + offset - 0.5) / 30.0;
68
+ var weight = 1.0 - abs(percent);
69
+ let sampleColor = textureSample(
70
+ sourceTexture,
71
+ sourceTextureSampler,
72
+ texCoord + relativeDelta * percent
73
+ ).xy;
74
+ color.x += sampleColor.x * weight;
75
+ total.x += weight;
76
+ if (abs(t) < 15.0) {
77
+ weight = weight * 2.0 - 1.0;
78
+ color.y += sampleColor.y * weight;
79
+ total.y += weight;
80
+ }
81
+ }
82
+
83
+ let c = clamp(10000.0 * (color.y / total.y - color.x / total.x) + 0.5, 0.0, 1.0);
84
+ return vec4f(c, c, c, 1.0);
85
+ }
86
+
87
+ fn edgeWork_sampleColor(
88
+ sourceTexture: texture_2d<f32>,
89
+ sourceTextureSampler: sampler,
90
+ texSize: vec2f,
91
+ texCoord: vec2f
92
+ ) -> vec4f {
93
+ if (edgeWork.mode == 0u) {
94
+ return edgeWork_sampleColorRGB(
95
+ sourceTexture,
96
+ sourceTextureSampler,
97
+ texSize,
98
+ texCoord,
99
+ vec2f(1.0, 0.0)
100
+ );
101
+ }
102
+
103
+ return edgeWork_sampleColorXY(
104
+ sourceTexture,
105
+ sourceTextureSampler,
106
+ texSize,
107
+ texCoord,
108
+ vec2f(0.0, 1.0)
109
+ );
39
110
  }
40
111
  `;
41
112
 
@@ -12,42 +12,54 @@ struct hexagonalPixelateUniforms {
12
12
 
13
13
  @group(0) @binding(1) var<uniform> hexagonalPixelate: hexagonalPixelateUniforms;
14
14
 
15
- fn hexagonalPixelate_sampleColor(sampler2D source, vec2 texSize, vec2 texCoord) -> vec4f {
16
- vec2 tex = (texCoord * texSize - hexagonalPixelate.center * texSize) / hexagonalPixelate.scale;
15
+ fn hexagonalPixelate_sampleColor(
16
+ sourceTexture: texture_2d<f32>,
17
+ sourceTextureSampler: sampler,
18
+ texSize: vec2f,
19
+ texCoord: vec2f
20
+ ) -> vec4f {
21
+ var tex = (texCoord * texSize - hexagonalPixelate.center * texSize) / hexagonalPixelate.scale;
17
22
  tex.y /= 0.866025404;
18
23
  tex.x -= tex.y * 0.5;
19
24
 
20
- vec2 a;
25
+ var a = vec2f(0.0);
21
26
  if (tex.x + tex.y - floor(tex.x) - floor(tex.y) < 1.0) {
22
- a = vec2(floor(tex.x), floor(tex.y));
27
+ a = vec2f(floor(tex.x), floor(tex.y));
28
+ } else {
29
+ a = vec2f(ceil(tex.x), ceil(tex.y));
23
30
  }
24
- else a = vec2(ceil(tex.x), ceil(tex.y));
25
- vec2 b = vec2(ceil(tex.x), floor(tex.y));
26
- vec2 c = vec2(floor(tex.x), ceil(tex.y));
27
-
28
- vec3 TEX = vec3(tex.x, tex.y, 1.0 - tex.x - tex.y);
29
- vec3 A = vec3(a.x, a.y, 1.0 - a.x - a.y);
30
- vec3 B = vec3(b.x, b.y, 1.0 - b.x - b.y);
31
- vec3 C = vec3(c.x, c.y, 1.0 - c.x - c.y);
32
-
33
- float alen = length(TEX - A);
34
- float blen = length(TEX - B);
35
- float clen = length(TEX - C);
36
-
37
- vec2 choice;
38
- if (alen < blen) {
39
- if (alen < clen) choice = a;
40
- else choice = c;
31
+ let b = vec2f(ceil(tex.x), floor(tex.y));
32
+ let c = vec2f(floor(tex.x), ceil(tex.y));
33
+
34
+ let texBarycentric = vec3f(tex.x, tex.y, 1.0 - tex.x - tex.y);
35
+ let aBarycentric = vec3f(a.x, a.y, 1.0 - a.x - a.y);
36
+ let bBarycentric = vec3f(b.x, b.y, 1.0 - b.x - b.y);
37
+ let cBarycentric = vec3f(c.x, c.y, 1.0 - c.x - c.y);
38
+
39
+ let aLength = length(texBarycentric - aBarycentric);
40
+ let bLength = length(texBarycentric - bBarycentric);
41
+ let cLength = length(texBarycentric - cBarycentric);
42
+
43
+ var choice = vec2f(0.0);
44
+ if (aLength < bLength) {
45
+ if (aLength < cLength) {
46
+ choice = a;
47
+ } else {
48
+ choice = c;
49
+ }
41
50
  } else {
42
- if (blen < clen) choice = b;
43
- else choice = c;
51
+ if (bLength < cLength) {
52
+ choice = b;
53
+ } else {
54
+ choice = c;
55
+ }
44
56
  }
45
57
 
46
58
  choice.x += choice.y * 0.5;
47
59
  choice.y *= 0.866025404;
48
60
  choice *= hexagonalPixelate.scale / texSize;
49
61
 
50
- return texture(source, choice + hexagonalPixelate.center);
62
+ return textureSample(sourceTexture, sourceTextureSampler, choice + hexagonalPixelate.center);
51
63
  }
52
64
  `;
53
65
 
@@ -5,23 +5,32 @@
5
5
  import type {ShaderPass} from '@luma.gl/shadertools';
6
6
 
7
7
  const source = /* wgsl */ `\
8
- uniform inkUniforms {
8
+ struct inkUniforms {
9
9
  strength: f32,
10
10
  };
11
11
 
12
12
  @group(0) @binding(1) var<uniform> ink: inkUniforms;
13
13
 
14
- fn ink_sampleColor(sampler2D source, vec2 texSize, vec2 texCoord) -> vec4f {
15
- vec2 dx = vec2(1.0 / texSize.x, 0.0);
16
- vec2 dy = vec2(0.0, 1.0 / texSize.y);
17
- vec4 color = texture(source, texCoord);
18
- float bigTotal = 0.0;
19
- float smallTotal = 0.0;
20
- vec3 bigAverage = vec3(0.0);
21
- vec3 smallAverage = vec3(0.0);
22
- for (float x = -2.0; x <= 2.0; x += 1.0) {
23
- for (float y = -2.0; y <= 2.0; y += 1.0) {
24
- vec3 offsetColor = texture(source, texCoord + dx * x + dy * y).rgb;
14
+ fn ink_sampleColor(
15
+ sourceTexture: texture_2d<f32>,
16
+ sourceTextureSampler: sampler,
17
+ texSize: vec2f,
18
+ texCoord: vec2f
19
+ ) -> vec4f {
20
+ let dx = vec2f(1.0 / texSize.x, 0.0);
21
+ let dy = vec2f(0.0, 1.0 / texSize.y);
22
+ let color = textureSample(sourceTexture, sourceTextureSampler, texCoord);
23
+ var bigTotal = 0.0;
24
+ var smallTotal = 0.0;
25
+ var bigAverage = vec3f(0.0);
26
+ var smallAverage = vec3f(0.0);
27
+ for (var x = -2.0; x <= 2.0; x += 1.0) {
28
+ for (var y = -2.0; y <= 2.0; y += 1.0) {
29
+ let offsetColor = textureSample(
30
+ sourceTexture,
31
+ sourceTextureSampler,
32
+ texCoord + dx * x + dy * y
33
+ ).rgb;
25
34
  bigAverage += offsetColor;
26
35
  bigTotal += 1.0;
27
36
  if (abs(x) + abs(y) < 2.0) {
@@ -30,9 +39,9 @@ fn ink_sampleColor(sampler2D source, vec2 texSize, vec2 texCoord) -> vec4f {
30
39
  }
31
40
  }
32
41
  }
33
- vec3 edge = max(vec3(0.0), bigAverage / bigTotal - smallAverage / smallTotal);
34
- float power = ink.strength * ink.strength * ink.strength * ink.strength * ink.strength;
35
- return vec4(color.rgb - dot(edge, edge) * power * 100000.0, color.a);
42
+ let edge = max(vec3f(0.0), bigAverage / bigTotal - smallAverage / smallTotal);
43
+ let power = ink.strength * ink.strength * ink.strength * ink.strength * ink.strength;
44
+ return vec4f(color.rgb - vec3f(dot(edge, edge) * power * 100000.0), color.a);
36
45
  }
37
46
  `;
38
47
 
@@ -5,27 +5,32 @@
5
5
  import type {ShaderPass} from '@luma.gl/shadertools';
6
6
 
7
7
  const source = /* wgsl */ `\
8
- uniform magnifyUniforms {
9
- screenXY: vec2f;
10
- radiusPixels: f32;
11
- zoom: f32;
12
- borderWidthPixels: f32;
13
- borderColor: vec4f;
8
+ struct magnifyUniforms {
9
+ screenXY: vec2f,
10
+ radiusPixels: f32,
11
+ zoom: f32,
12
+ borderWidthPixels: f32,
13
+ borderColor: vec4f,
14
14
  };
15
15
 
16
16
  @group(0) @binding(1) var<uniform> magnify: magnifyUniforms;
17
17
 
18
- fn magnify_sampleColor(sampler2D source, vec2 texSize, vec2 texCoord) -> vec4f {
19
- vec2 pos = vec2(magnify.screenXY.x, 1.0 - magnify.screenXY.y);
20
- float dist = distance(texCoord * texSize, pos * texSize);
18
+ fn magnify_sampleColor(
19
+ sourceTexture: texture_2d<f32>,
20
+ sourceTextureSampler: sampler,
21
+ texSize: vec2f,
22
+ texCoord: vec2f
23
+ ) -> vec4f {
24
+ let pos = vec2f(magnify.screenXY.x, 1.0 - magnify.screenXY.y);
25
+ let dist = distance(texCoord * texSize, pos * texSize);
21
26
  if (dist < magnify.radiusPixels) {
22
- return texture(source, (texCoord - pos) / magnify.zoom + pos);
27
+ return textureSample(sourceTexture, sourceTextureSampler, (texCoord - pos) / magnify.zoom + pos);
23
28
  }
24
29
 
25
30
  if (dist <= magnify.radiusPixels + magnify.borderWidthPixels) {
26
31
  return magnify.borderColor;
27
32
  }
28
- return texture(source, texCoord);
33
+ return textureSample(sourceTexture, sourceTextureSampler, texCoord);
29
34
  }
30
35
  `;
31
36
 
@@ -6,7 +6,7 @@ import type {ShaderPass} from '@luma.gl/shadertools';
6
6
  import {warp} from './warp';
7
7
 
8
8
  const source = /* wgsl */ `\
9
- uniform bulgePinchUniforms {
9
+ struct bulgePinchUniforms {
10
10
  radius: f32,
11
11
  strength: f32,
12
12
  center: vec2f,
@@ -14,25 +14,39 @@ uniform bulgePinchUniforms {
14
14
 
15
15
  @group(0) @binding(1) var<uniform> bulgePinch: bulgePinchUniforms;
16
16
 
17
- fn bulgePinch_warp(vec2 coord, vec2 texCenter) -> vec2f {
18
- coord -= texCenter;
19
- float distance = length(coord);
17
+ fn bulgePinch_warp(coordIn: vec2f, texCenter: vec2f) -> vec2f {
18
+ var coord = coordIn - texCenter;
19
+ let distance = length(coord);
20
20
  if (distance < bulgePinch.radius) {
21
- float percent = distance / bulgePinch.radius;
21
+ let percent = distance / bulgePinch.radius;
22
+ let safeDistance = max(distance, 0.00001);
22
23
  if (bulgePinch.strength > 0.0) {
23
- coord *= mix(1.0, smoothstep(0.0, bulgePinch.radius / distance, percent), bulgePinch.strength * 0.75);
24
+ coord *= mix(
25
+ 1.0,
26
+ smoothstep(0.0, bulgePinch.radius / safeDistance, percent),
27
+ bulgePinch.strength * 0.75
28
+ );
24
29
  } else {
25
- coord *= mix(1.0, pow(percent, 1.0 + bulgePinch.strength * 0.75) * bulgePinch.radius / distance, 1.0 - percent);
30
+ coord *= mix(
31
+ 1.0,
32
+ pow(percent, 1.0 + bulgePinch.strength * 0.75) * bulgePinch.radius / safeDistance,
33
+ 1.0 - percent
34
+ );
26
35
  }
27
36
  }
28
37
  coord += texCenter;
29
38
  return coord;
30
39
  }
31
40
 
32
- fn bulgePinch_sampleColor(sampler2D source, vec2 texSize, vec2 texCoord) -> vec4f {
33
- vec2 coord = texCoord * texSize;
41
+ fn bulgePinch_sampleColor(
42
+ sourceTexture: texture_2d<f32>,
43
+ sourceTextureSampler: sampler,
44
+ texSize: vec2f,
45
+ texCoord: vec2f
46
+ ) -> vec4f {
47
+ var coord = texCoord * texSize;
34
48
  coord = bulgePinch_warp(coord, bulgePinch.center * texSize);
35
- return warp_sampleColor(source, texSize, coord);
49
+ return warp_sampleColor(sourceTexture, sourceTextureSampler, texSize, coord);
36
50
  }
37
51
  `;
38
52