@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.
- package/dist/dist.dev.js +1265 -362
- package/dist/dist.min.js +10 -9
- package/dist/index.cjs +419 -258
- package/dist/index.cjs.map +2 -2
- package/dist/passes/postprocessing/image-adjust-filters/brightnesscontrast.d.ts +1 -1
- package/dist/passes/postprocessing/image-adjust-filters/brightnesscontrast.d.ts.map +1 -1
- package/dist/passes/postprocessing/image-adjust-filters/brightnesscontrast.js +5 -4
- package/dist/passes/postprocessing/image-adjust-filters/brightnesscontrast.js.map +1 -1
- package/dist/passes/postprocessing/image-adjust-filters/denoise.d.ts +1 -1
- package/dist/passes/postprocessing/image-adjust-filters/denoise.d.ts.map +1 -1
- package/dist/passes/postprocessing/image-adjust-filters/denoise.js +29 -21
- package/dist/passes/postprocessing/image-adjust-filters/denoise.js.map +1 -1
- package/dist/passes/postprocessing/image-adjust-filters/huesaturation.d.ts +1 -1
- package/dist/passes/postprocessing/image-adjust-filters/huesaturation.d.ts.map +1 -1
- package/dist/passes/postprocessing/image-adjust-filters/huesaturation.js +26 -32
- package/dist/passes/postprocessing/image-adjust-filters/huesaturation.js.map +1 -1
- package/dist/passes/postprocessing/image-adjust-filters/noise.d.ts +1 -1
- package/dist/passes/postprocessing/image-adjust-filters/noise.d.ts.map +1 -1
- package/dist/passes/postprocessing/image-adjust-filters/noise.js +8 -7
- package/dist/passes/postprocessing/image-adjust-filters/noise.js.map +1 -1
- package/dist/passes/postprocessing/image-adjust-filters/sepia.d.ts +1 -1
- package/dist/passes/postprocessing/image-adjust-filters/sepia.d.ts.map +1 -1
- package/dist/passes/postprocessing/image-adjust-filters/sepia.js +10 -9
- package/dist/passes/postprocessing/image-adjust-filters/sepia.js.map +1 -1
- package/dist/passes/postprocessing/image-adjust-filters/vibrance.d.ts +1 -1
- package/dist/passes/postprocessing/image-adjust-filters/vibrance.d.ts.map +1 -1
- package/dist/passes/postprocessing/image-adjust-filters/vibrance.js +9 -8
- package/dist/passes/postprocessing/image-adjust-filters/vibrance.js.map +1 -1
- package/dist/passes/postprocessing/image-adjust-filters/vignette.d.ts +1 -1
- package/dist/passes/postprocessing/image-adjust-filters/vignette.d.ts.map +1 -1
- package/dist/passes/postprocessing/image-adjust-filters/vignette.js +9 -13
- package/dist/passes/postprocessing/image-adjust-filters/vignette.js.map +1 -1
- package/dist/passes/postprocessing/image-blur-filters/tiltshift.d.ts +2 -2
- package/dist/passes/postprocessing/image-blur-filters/tiltshift.d.ts.map +1 -1
- package/dist/passes/postprocessing/image-blur-filters/tiltshift.js +34 -16
- package/dist/passes/postprocessing/image-blur-filters/tiltshift.js.map +1 -1
- package/dist/passes/postprocessing/image-blur-filters/triangleblur.d.ts +2 -2
- package/dist/passes/postprocessing/image-blur-filters/triangleblur.d.ts.map +1 -1
- package/dist/passes/postprocessing/image-blur-filters/triangleblur.js +21 -12
- package/dist/passes/postprocessing/image-blur-filters/triangleblur.js.map +1 -1
- package/dist/passes/postprocessing/image-blur-filters/zoomblur.d.ts +2 -2
- package/dist/passes/postprocessing/image-blur-filters/zoomblur.d.ts.map +1 -1
- package/dist/passes/postprocessing/image-blur-filters/zoomblur.js +20 -11
- package/dist/passes/postprocessing/image-blur-filters/zoomblur.js.map +1 -1
- package/dist/passes/postprocessing/image-fun-filters/colorhalftone.d.ts +1 -1
- package/dist/passes/postprocessing/image-fun-filters/colorhalftone.d.ts.map +1 -1
- package/dist/passes/postprocessing/image-fun-filters/colorhalftone.js +18 -16
- package/dist/passes/postprocessing/image-fun-filters/colorhalftone.js.map +1 -1
- package/dist/passes/postprocessing/image-fun-filters/dotscreen.d.ts +1 -1
- package/dist/passes/postprocessing/image-fun-filters/dotscreen.js +11 -11
- package/dist/passes/postprocessing/image-fun-filters/edgework.d.ts +2 -2
- package/dist/passes/postprocessing/image-fun-filters/edgework.d.ts.map +1 -1
- package/dist/passes/postprocessing/image-fun-filters/edgework.js +83 -12
- package/dist/passes/postprocessing/image-fun-filters/edgework.js.map +1 -1
- package/dist/passes/postprocessing/image-fun-filters/hexagonalpixelate.d.ts +1 -1
- package/dist/passes/postprocessing/image-fun-filters/hexagonalpixelate.d.ts.map +1 -1
- package/dist/passes/postprocessing/image-fun-filters/hexagonalpixelate.js +33 -21
- package/dist/passes/postprocessing/image-fun-filters/hexagonalpixelate.js.map +1 -1
- package/dist/passes/postprocessing/image-fun-filters/ink.d.ts +1 -1
- package/dist/passes/postprocessing/image-fun-filters/ink.d.ts.map +1 -1
- package/dist/passes/postprocessing/image-fun-filters/ink.js +24 -15
- package/dist/passes/postprocessing/image-fun-filters/ink.js.map +1 -1
- package/dist/passes/postprocessing/image-fun-filters/magnify.d.ts +1 -1
- package/dist/passes/postprocessing/image-fun-filters/magnify.d.ts.map +1 -1
- package/dist/passes/postprocessing/image-fun-filters/magnify.js +16 -11
- package/dist/passes/postprocessing/image-fun-filters/magnify.js.map +1 -1
- package/dist/passes/postprocessing/image-warp-filters/bulgepinch.d.ts +2 -2
- package/dist/passes/postprocessing/image-warp-filters/bulgepinch.d.ts.map +1 -1
- package/dist/passes/postprocessing/image-warp-filters/bulgepinch.js +24 -10
- package/dist/passes/postprocessing/image-warp-filters/bulgepinch.js.map +1 -1
- package/dist/passes/postprocessing/image-warp-filters/swirl.d.ts +2 -2
- package/dist/passes/postprocessing/image-warp-filters/swirl.d.ts.map +1 -1
- package/dist/passes/postprocessing/image-warp-filters/swirl.js +18 -13
- package/dist/passes/postprocessing/image-warp-filters/swirl.js.map +1 -1
- package/dist/passes/postprocessing/image-warp-filters/warp.d.ts +1 -1
- package/dist/passes/postprocessing/image-warp-filters/warp.d.ts.map +1 -1
- package/dist/passes/postprocessing/image-warp-filters/warp.js +9 -4
- package/dist/passes/postprocessing/image-warp-filters/warp.js.map +1 -1
- package/package.json +2 -2
- package/src/passes/postprocessing/image-adjust-filters/brightnesscontrast.ts +5 -4
- package/src/passes/postprocessing/image-adjust-filters/denoise.ts +31 -23
- package/src/passes/postprocessing/image-adjust-filters/huesaturation.ts +28 -34
- package/src/passes/postprocessing/image-adjust-filters/noise.ts +8 -7
- package/src/passes/postprocessing/image-adjust-filters/sepia.ts +10 -9
- package/src/passes/postprocessing/image-adjust-filters/vibrance.ts +9 -8
- package/src/passes/postprocessing/image-adjust-filters/vignette.ts +9 -13
- package/src/passes/postprocessing/image-blur-filters/tiltshift.ts +36 -18
- package/src/passes/postprocessing/image-blur-filters/triangleblur.ts +21 -12
- package/src/passes/postprocessing/image-blur-filters/zoomblur.ts +21 -12
- package/src/passes/postprocessing/image-fun-filters/colorhalftone.ts +18 -16
- package/src/passes/postprocessing/image-fun-filters/dotscreen.ts +11 -11
- package/src/passes/postprocessing/image-fun-filters/edgework.ts +84 -13
- package/src/passes/postprocessing/image-fun-filters/hexagonalpixelate.ts +36 -24
- package/src/passes/postprocessing/image-fun-filters/ink.ts +24 -15
- package/src/passes/postprocessing/image-fun-filters/magnify.ts +16 -11
- package/src/passes/postprocessing/image-warp-filters/bulgepinch.ts +24 -10
- package/src/passes/postprocessing/image-warp-filters/swirl.ts +18 -13
- 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
|
-
|
|
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(
|
|
20
|
-
|
|
21
|
-
return
|
|
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(
|
|
25
|
-
|
|
26
|
-
|
|
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
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
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
|
|
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
|
-
|
|
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
|
-
|
|
17
|
-
|
|
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
|
-
|
|
20
|
-
|
|
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
|
-
|
|
28
|
+
let offset = random(vec3f(12.9898, 78.233, 151.7182), 0.0);
|
|
24
29
|
|
|
25
|
-
for (
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
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
|
|
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
|
-
|
|
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(
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
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
|
-
|
|
24
|
-
|
|
25
|
-
for (
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
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
|
|
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
|
|
18
|
-
let
|
|
19
|
-
let
|
|
20
|
-
|
|
21
|
-
|
|
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
|
|
27
|
-
let scale
|
|
28
|
-
|
|
29
|
-
|
|
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) /
|
|
33
|
+
cmy = (cmy - vec3f(k)) / safeDenominator;
|
|
32
34
|
cmy = clamp(
|
|
33
|
-
|
|
35
|
+
cmy * 10.0 - vec3f(3.0) + vec3f(
|
|
34
36
|
pattern(colorHalftone.angle + 0.26179, scale, texSize, texCoord),
|
|
35
|
-
|
|
37
|
+
pattern(colorHalftone.angle + 1.30899, scale, texSize, texCoord),
|
|
36
38
|
pattern(colorHalftone.angle, scale, texSize, texCoord)
|
|
37
39
|
),
|
|
38
|
-
|
|
39
|
-
|
|
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
|
|
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
|
-
|
|
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
|
|
18
|
-
|
|
19
|
-
let
|
|
20
|
-
tex
|
|
21
|
-
point = vec2f(
|
|
22
|
-
c
|
|
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(
|
|
29
|
-
let average
|
|
30
|
-
return
|
|
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
|
-
|
|
11
|
+
mode: u32,
|
|
12
12
|
};
|
|
13
13
|
|
|
14
14
|
@group(0) @binding(1) var<uniform> edgeWork: edgeWorkUniforms;
|
|
15
15
|
|
|
16
|
-
fn edgeWork_sampleColorRGB(
|
|
17
|
-
|
|
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
|
-
|
|
20
|
-
|
|
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
|
-
|
|
24
|
-
|
|
25
|
-
for (
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
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
|
|
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(
|
|
16
|
-
|
|
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
|
-
|
|
25
|
+
var a = vec2f(0.0);
|
|
21
26
|
if (tex.x + tex.y - floor(tex.x) - floor(tex.y) < 1.0) {
|
|
22
|
-
a =
|
|
27
|
+
a = vec2f(floor(tex.x), floor(tex.y));
|
|
28
|
+
} else {
|
|
29
|
+
a = vec2f(ceil(tex.x), ceil(tex.y));
|
|
23
30
|
}
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
else
|
|
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 (
|
|
43
|
-
|
|
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
|
|
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
|
-
|
|
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(
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
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
|
-
|
|
34
|
-
|
|
35
|
-
return
|
|
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
|
-
|
|
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(
|
|
19
|
-
|
|
20
|
-
|
|
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
|
|
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
|
|
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
|
-
|
|
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(
|
|
18
|
-
coord
|
|
19
|
-
|
|
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
|
-
|
|
21
|
+
let percent = distance / bulgePinch.radius;
|
|
22
|
+
let safeDistance = max(distance, 0.00001);
|
|
22
23
|
if (bulgePinch.strength > 0.0) {
|
|
23
|
-
coord *= mix(
|
|
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(
|
|
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(
|
|
33
|
-
|
|
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(
|
|
49
|
+
return warp_sampleColor(sourceTexture, sourceTextureSampler, texSize, coord);
|
|
36
50
|
}
|
|
37
51
|
`;
|
|
38
52
|
|