@paper-design/shaders 0.0.79 → 0.0.81
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/index.d.ts +2 -2
- package/dist/index.js +7 -2
- package/dist/index.js.map +2 -2
- package/dist/shaders/color-panels.d.ts +1 -1
- package/dist/shaders/color-panels.js +1 -1
- package/dist/shaders/color-panels.js.map +1 -1
- package/dist/shaders/dot-grid.d.ts +2 -2
- package/dist/shaders/dot-grid.js.map +1 -1
- package/dist/shaders/dot-orbit.d.ts +2 -2
- package/dist/shaders/dot-orbit.js.map +1 -1
- package/dist/shaders/fluted-glass.d.ts +6 -8
- package/dist/shaders/fluted-glass.js +18 -15
- package/dist/shaders/fluted-glass.js.map +2 -2
- package/dist/shaders/gem-smoke.d.ts +8 -6
- package/dist/shaders/gem-smoke.js +5 -17
- package/dist/shaders/gem-smoke.js.map +2 -2
- package/dist/shaders/god-rays.d.ts +3 -3
- package/dist/shaders/god-rays.js.map +1 -1
- package/dist/shaders/grain-gradient.d.ts +0 -2
- package/dist/shaders/grain-gradient.js +0 -2
- package/dist/shaders/grain-gradient.js.map +2 -2
- package/dist/shaders/halftone-cmyk.d.ts +11 -12
- package/dist/shaders/halftone-cmyk.js +5 -2
- package/dist/shaders/halftone-cmyk.js.map +2 -2
- package/dist/shaders/halftone-dots.d.ts +5 -7
- package/dist/shaders/halftone-dots.js +17 -17
- package/dist/shaders/halftone-dots.js.map +2 -2
- package/dist/shaders/heatmap.d.ts +2 -3
- package/dist/shaders/heatmap.js +0 -1
- package/dist/shaders/heatmap.js.map +2 -2
- package/dist/shaders/image-dithering.d.ts +5 -7
- package/dist/shaders/image-dithering.js +0 -2
- package/dist/shaders/image-dithering.js.map +2 -2
- package/dist/shaders/lens-distortion.d.ts +15 -15
- package/dist/shaders/lens-distortion.js +1 -1
- package/dist/shaders/lens-distortion.js.map +1 -1
- package/dist/shaders/liquid-metal.d.ts +2 -3
- package/dist/shaders/liquid-metal.js +4 -1
- package/dist/shaders/liquid-metal.js.map +2 -2
- package/dist/shaders/mesh-gradient.js +15 -11
- package/dist/shaders/mesh-gradient.js.map +2 -2
- package/dist/shaders/metaballs.d.ts +2 -2
- package/dist/shaders/metaballs.js +0 -1
- package/dist/shaders/metaballs.js.map +2 -2
- package/dist/shaders/neuro-noise.d.ts +1 -3
- package/dist/shaders/neuro-noise.js +0 -2
- package/dist/shaders/neuro-noise.js.map +2 -2
- package/dist/shaders/paper-texture.d.ts +65 -34
- package/dist/shaders/paper-texture.js +443 -164
- package/dist/shaders/paper-texture.js.map +2 -2
- package/dist/shaders/perlin-noise.d.ts +3 -3
- package/dist/shaders/perlin-noise.js +0 -6
- package/dist/shaders/perlin-noise.js.map +2 -2
- package/dist/shaders/pulsing-border.d.ts +2 -2
- package/dist/shaders/pulsing-border.js.map +1 -1
- package/dist/shaders/simplex-noise.d.ts +2 -3
- package/dist/shaders/simplex-noise.js +11 -19
- package/dist/shaders/simplex-noise.js.map +2 -2
- package/dist/shaders/smoke-ring.d.ts +1 -1
- package/dist/shaders/smoke-ring.js.map +1 -1
- package/dist/shaders/spiral.d.ts +3 -3
- package/dist/shaders/spiral.js +3 -1
- package/dist/shaders/spiral.js.map +2 -2
- package/dist/shaders/static-mesh-gradient.d.ts +2 -2
- package/dist/shaders/static-mesh-gradient.js +15 -12
- package/dist/shaders/static-mesh-gradient.js.map +2 -2
- package/dist/shaders/static-radial-gradient.d.ts +4 -4
- package/dist/shaders/static-radial-gradient.js +15 -11
- package/dist/shaders/static-radial-gradient.js.map +2 -2
- package/dist/shaders/swirl.d.ts +3 -3
- package/dist/shaders/swirl.js +3 -1
- package/dist/shaders/swirl.js.map +2 -2
- package/dist/shaders/voronoi.d.ts +3 -3
- package/dist/shaders/voronoi.js.map +1 -1
- package/dist/shaders/warp.d.ts +2 -4
- package/dist/shaders/warp.js +0 -2
- package/dist/shaders/warp.js.map +2 -2
- package/dist/shaders/water.d.ts +6 -6
- package/dist/shaders/water.js +4 -2
- package/dist/shaders/water.js.map +2 -2
- package/dist/shaders/waves.d.ts +3 -3
- package/dist/shaders/waves.js.map +1 -1
- package/package.json +1 -1
|
@@ -4,245 +4,524 @@
|
|
|
4
4
|
* * * * * * * * * * * * * * * * * * * * * * * * * * * */
|
|
5
5
|
|
|
6
6
|
import {} from "../shader-sizing.js";
|
|
7
|
-
import {
|
|
7
|
+
import { declarePI, proceduralHash21, proceduralHash22 } from "../shader-utils.js";
|
|
8
|
+
const paperTextureMeta = {
|
|
9
|
+
maxCrumpleCount: 15
|
|
10
|
+
};
|
|
8
11
|
const paperTextureFragmentShader = `#version 300 es
|
|
9
12
|
precision mediump float;
|
|
10
13
|
|
|
11
|
-
uniform
|
|
12
|
-
uniform
|
|
14
|
+
uniform sampler2D u_image;
|
|
15
|
+
uniform bool u_isImage;
|
|
16
|
+
uniform float u_imageAspectRatio;
|
|
13
17
|
|
|
14
|
-
uniform vec4 u_colorFront;
|
|
15
18
|
uniform vec4 u_colorBack;
|
|
19
|
+
uniform vec4 u_colorPaper;
|
|
20
|
+
uniform vec4 u_colorShadow;
|
|
16
21
|
|
|
17
|
-
uniform
|
|
18
|
-
uniform float
|
|
22
|
+
uniform float u_blending;
|
|
23
|
+
uniform float u_distortion;
|
|
24
|
+
uniform bool u_clip;
|
|
25
|
+
uniform float u_angle;
|
|
26
|
+
uniform float u_seed;
|
|
19
27
|
|
|
20
|
-
uniform float u_contrast;
|
|
21
28
|
uniform float u_roughness;
|
|
29
|
+
uniform float u_roughnessSize;
|
|
30
|
+
uniform float u_roughnessRows;
|
|
22
31
|
uniform float u_fiber;
|
|
23
32
|
uniform float u_fiberSize;
|
|
24
|
-
uniform float u_crumples;
|
|
25
|
-
uniform float u_crumpleSize;
|
|
26
33
|
uniform float u_folds;
|
|
27
|
-
uniform float
|
|
34
|
+
uniform float u_foldSizeX;
|
|
35
|
+
uniform float u_foldSizeY;
|
|
36
|
+
uniform float u_foldOffsetX;
|
|
37
|
+
uniform float u_foldOffsetY;
|
|
38
|
+
uniform float u_wrinkles;
|
|
39
|
+
uniform float u_wrinkleSize;
|
|
40
|
+
uniform float u_crumples;
|
|
41
|
+
uniform float u_crumpleCount;
|
|
28
42
|
uniform float u_drops;
|
|
29
|
-
uniform float u_seed;
|
|
30
|
-
uniform float u_fade;
|
|
31
43
|
|
|
32
44
|
uniform sampler2D u_noiseTexture;
|
|
33
45
|
|
|
34
46
|
in vec2 v_imageUV;
|
|
35
|
-
|
|
36
47
|
out vec4 fragColor;
|
|
37
48
|
|
|
38
49
|
float getUvFrame(vec2 uv) {
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
float bottom = smoothstep(0., aay, uv.y);
|
|
45
|
-
float top = 1. - smoothstep(1. - aay, 1., uv.y);
|
|
50
|
+
vec2 invAA = .5 / clamp(fwidth(uv), 1e-5, .02);
|
|
51
|
+
vec2 lo = clamp(uv * invAA + .5, 0., 1.);
|
|
52
|
+
vec2 hi = clamp((1. - uv) * invAA + .5, 0., 1.);
|
|
53
|
+
return lo.x * hi.x * lo.y * hi.y;
|
|
54
|
+
}
|
|
46
55
|
|
|
47
|
-
|
|
56
|
+
float lst(float edge0, float edge1, float x) {
|
|
57
|
+
return clamp((x - edge0) / (edge1 - edge0), 0.0, 1.0);
|
|
48
58
|
}
|
|
49
59
|
|
|
50
60
|
${declarePI}
|
|
51
|
-
${
|
|
52
|
-
${
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
vec2
|
|
56
|
-
float
|
|
57
|
-
float
|
|
58
|
-
|
|
59
|
-
float
|
|
60
|
-
|
|
61
|
-
float
|
|
62
|
-
float
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
float
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
61
|
+
${proceduralHash21}
|
|
62
|
+
${proceduralHash22}
|
|
63
|
+
|
|
64
|
+
float getRoughness(vec2 p, vec2 lightDir, vec2 seedShift, float basePixel) {
|
|
65
|
+
vec2 u = p / vec2(2, 4);
|
|
66
|
+
float w = 100. * basePixel;
|
|
67
|
+
float eps = 4. * w;
|
|
68
|
+
|
|
69
|
+
float size = mix(3.2, .8, u_roughnessSize);
|
|
70
|
+
float logLac = log2(2.1);
|
|
71
|
+
float level = -log2(w + 1e-8) / logLac;
|
|
72
|
+
float baseLevel = floor(level) - 2.;
|
|
73
|
+
float fade = fract(level);
|
|
74
|
+
|
|
75
|
+
vec2 px = (u.x + vec2(eps, -eps)) * .1;
|
|
76
|
+
float py = u.y * .1;
|
|
77
|
+
|
|
78
|
+
vec2 sum = vec2(0.);
|
|
79
|
+
float norm = 0., amp = .5;
|
|
80
|
+
float freq = exp2(baseLevel * logLac);
|
|
81
|
+
for (int i = 0; i < 4; i++) {
|
|
82
|
+
float absIdx = baseLevel + float(i);
|
|
83
|
+
vec2 qx = size * px * freq;
|
|
84
|
+
float qy = size * py * freq;
|
|
85
|
+
|
|
86
|
+
float wi = 1.;
|
|
87
|
+
if (i == 0) wi = 1. - fade;
|
|
88
|
+
if (i == 3) wi = fade;
|
|
89
|
+
|
|
90
|
+
vec2 fx = fract(qx);
|
|
91
|
+
float fy = fract(qy);
|
|
92
|
+
vec2 shift = .5 + absIdx * .3 + seedShift;
|
|
93
|
+
float uvY = floor(qy) / 50. + shift.y;
|
|
94
|
+
vec2 s0a = textureLod(u_noiseTexture, fract(vec2(floor(qx.x) / 50. + shift.x, uvY)), 0.).rg;
|
|
95
|
+
vec2 s1a = textureLod(u_noiseTexture, fract(vec2( ceil(qx.x) / 50. + shift.x, uvY)), 0.).rg;
|
|
96
|
+
vec2 s0b = textureLod(u_noiseTexture, fract(vec2(floor(qx.y) / 50. + shift.x, uvY)), 0.).rg;
|
|
97
|
+
vec2 s1b = textureLod(u_noiseTexture, fract(vec2( ceil(qx.y) / 50. + shift.x, uvY)), 0.).rg;
|
|
98
|
+
vec2 ny0 = mix(vec2(s0a.r, s0b.r), vec2(s0a.g, s0b.g), fy);
|
|
99
|
+
vec2 ny1 = mix(vec2(s1a.r, s1b.r), vec2(s1a.g, s1b.g), fy);
|
|
100
|
+
vec2 n = mix(ny0, ny1, fx);
|
|
101
|
+
|
|
102
|
+
sum += amp * wi * n;
|
|
103
|
+
norm += amp * wi;
|
|
104
|
+
amp *= .8;
|
|
105
|
+
freq *= 2.1;
|
|
106
|
+
}
|
|
74
107
|
|
|
108
|
+
vec2 r = sum / norm;
|
|
109
|
+
float dx = .5 + r.x - r.y;
|
|
110
|
+
float grain = 3. * dx * dx - .7;
|
|
75
111
|
|
|
76
|
-
float
|
|
77
|
-
|
|
78
|
-
return texture(u_noiseTexture, fract(uv)).g;
|
|
79
|
-
}
|
|
80
|
-
float roughness(vec2 p) {
|
|
81
|
-
p *= .1;
|
|
82
|
-
float o = 0.;
|
|
83
|
-
for (float i = 0.; ++i < 4.; p *= 2.1) {
|
|
84
|
-
vec4 w = vec4(floor(p), ceil(p));
|
|
85
|
-
vec2 f = fract(p);
|
|
86
|
-
o += mix(
|
|
87
|
-
mix(randomG(w.xy), randomG(w.xw), f.y),
|
|
88
|
-
mix(randomG(w.zy), randomG(w.zw), f.y),
|
|
89
|
-
f.x);
|
|
90
|
-
o += .2 / exp(2. * abs(sin(.2 * p.x + .5 * p.y)));
|
|
91
|
-
}
|
|
92
|
-
return o / 3.;
|
|
112
|
+
float rowBand = fract(dot(p, lightDir) * .05 * size);
|
|
113
|
+
return grain + .6 * u_roughnessRows * (rowBand - .5);
|
|
93
114
|
}
|
|
94
115
|
|
|
95
|
-
|
|
116
|
+
float getFiber(vec2 p, vec2 seedShift, float basePixel) {
|
|
117
|
+
float size = mix(4., 1., u_fiberSize);
|
|
118
|
+
float w = 50. * basePixel;
|
|
119
|
+
float level = -log2(w + 1e-8);
|
|
120
|
+
float baseLevel = floor(level) - 3.;
|
|
121
|
+
float fade = fract(level);
|
|
122
|
+
|
|
123
|
+
vec2 grad = vec2(0.);
|
|
124
|
+
float scale = 1.;
|
|
125
|
+
float amp = 1.;
|
|
126
|
+
float freq = pow(1.7, baseLevel);
|
|
127
|
+
for (int i = 0; i < 5; i++) {
|
|
128
|
+
float absIdx = baseLevel + float(i);
|
|
129
|
+
vec2 q = size * p * freq;
|
|
130
|
+
|
|
131
|
+
float an = absIdx * .8;
|
|
132
|
+
float rc = cos(an), rs = sin(an);
|
|
133
|
+
q = vec2(rc * q.x - rs * q.y, rs * q.x + rc * q.y);
|
|
134
|
+
|
|
135
|
+
float wi = 1.;
|
|
136
|
+
if (i == 0) wi = 1. - fade;
|
|
137
|
+
if (i == 4) wi = fade;
|
|
138
|
+
|
|
139
|
+
vec2 iq = floor(q);
|
|
140
|
+
vec2 fq = fract(q);
|
|
141
|
+
float shift = absIdx * .3;
|
|
142
|
+
vec4 uv = fract(vec4(iq, iq + 1.) / 50. + .5 + shift + seedShift.xyxy);
|
|
143
|
+
float aF = textureLod(u_noiseTexture, uv.xy, 0.).b;
|
|
144
|
+
float bF = textureLod(u_noiseTexture, uv.zy, 0.).b;
|
|
145
|
+
float cF = textureLod(u_noiseTexture, uv.xw, 0.).b;
|
|
146
|
+
float dF = textureLod(u_noiseTexture, uv.zw, 0.).b;
|
|
147
|
+
vec2 u = fq * fq * (3. - 2. * fq);
|
|
148
|
+
vec2 du = 8. * fq * (1. - fq);
|
|
149
|
+
float dx = du.x * mix(bF - aF, dF - cF, u.y);
|
|
150
|
+
float dy = du.y * mix(cF - aF, dF - bF, u.x);
|
|
151
|
+
grad += wi * amp * scale * vec2(rc * dx + rs * dy, -rs * dx + rc * dy);
|
|
152
|
+
scale *= 1.7;
|
|
153
|
+
amp *= .5;
|
|
154
|
+
freq *= 1.7;
|
|
155
|
+
}
|
|
96
156
|
|
|
97
|
-
|
|
98
|
-
vec2 uv = floor(p) / 50. + .5;
|
|
99
|
-
return texture(u_noiseTexture, fract(uv)).gb;
|
|
157
|
+
return clamp(.333 * length(grad), 0., 1.);
|
|
100
158
|
}
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
159
|
+
|
|
160
|
+
vec2 smoothNoise(vec2 p) {
|
|
161
|
+
vec2 t = p * 50. - .5;
|
|
162
|
+
vec2 i = floor(t);
|
|
163
|
+
vec2 f = fract(t);
|
|
164
|
+
f = f * f * (3. - 2. * f);
|
|
165
|
+
return textureLod(u_noiseTexture, fract((i + f + .5) / vec2(50.)), 0.).rg;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
float getDrops(vec2 uv, vec2 seedShift) {
|
|
169
|
+
vec2 iDropsUV = floor(uv);
|
|
170
|
+
vec2 fDropsUV = fract(uv);
|
|
171
|
+
float dropsMinDist = 1.;
|
|
105
172
|
for (int y = -1; y < 2; y += 1) {
|
|
106
173
|
for (int x = -1; x < 2; x += 1) {
|
|
107
|
-
vec2
|
|
108
|
-
vec2
|
|
109
|
-
vec2
|
|
110
|
-
|
|
111
|
-
vec2 r = c - t;
|
|
112
|
-
float w = pow(smoothstep(0., 1., 1. - abs(r.x)), pw) * pow(smoothstep(0., 1., 1. - abs(r.y)), pw);
|
|
113
|
-
cl += (.5 + .5 * sin((q2.x + q2.y * 5.) * 8.)) * w;
|
|
114
|
-
wsum += w;
|
|
174
|
+
vec2 neighbor = vec2(float(y), float(x));
|
|
175
|
+
vec2 offset = hash22(iDropsUV + neighbor + 50. * seedShift);
|
|
176
|
+
vec2 pos = neighbor + offset - fDropsUV;
|
|
177
|
+
dropsMinDist *= min(1., dot(pos, pos));
|
|
115
178
|
}
|
|
116
179
|
}
|
|
117
|
-
return
|
|
180
|
+
return .5 * lst(.09, .08, sqrt(sqrt(dropsMinDist)));
|
|
118
181
|
}
|
|
119
|
-
|
|
120
|
-
|
|
182
|
+
|
|
183
|
+
vec2 getCellTilt(float idx, float radius) {
|
|
184
|
+
vec2 rand = hash22(vec2(idx + 31., idx * u_seed + 17.));
|
|
185
|
+
float an = rand.x * TWO_PI;
|
|
186
|
+
return vec2(cos(an), sin(an)) * mix(.3, 1.7, rand.y * rand.y) * mix(.7, 1., radius);
|
|
121
187
|
}
|
|
122
188
|
|
|
189
|
+
vec2 getCrumpleDetail(vec2 uv, float freq, float shift, float basePixel, out float depth) {
|
|
190
|
+
depth = 0.;
|
|
191
|
+
vec2 v = uv * freq;
|
|
192
|
+
float pixel = .9 * freq * basePixel;
|
|
193
|
+
vec2 base = floor(v);
|
|
194
|
+
float n1 = 9., n2 = 9.;
|
|
195
|
+
vec2 s1 = vec2(0.), s2 = vec2(0.), q1 = vec2(0.), q2 = vec2(0.);
|
|
196
|
+
|
|
197
|
+
for (int y = -1; y <= 1; y++) {
|
|
198
|
+
for (int x = -1; x <= 1; x++) {
|
|
199
|
+
vec2 cell = base + vec2(float(x), float(y));
|
|
200
|
+
vec2 q = hash22(vec2(cell.y * 1.9 + 3.1 + shift, cell.x * 1.3 + .11 * u_seed));
|
|
201
|
+
float keep = .8;
|
|
202
|
+
if (q.y > keep) continue;
|
|
203
|
+
|
|
204
|
+
vec2 r = hash22(vec2(cell.x + .37 * u_seed + shift + 11.1, cell.y - .21 * u_seed + 5.7));
|
|
205
|
+
vec2 s = cell + .06 + .88 * r;
|
|
206
|
+
|
|
207
|
+
vec2 d = v - s;
|
|
208
|
+
float dsq = dot(d, d);
|
|
209
|
+
if (dsq < n1) {
|
|
210
|
+
n2 = n1;
|
|
211
|
+
s2 = s1;
|
|
212
|
+
q2 = q1;
|
|
213
|
+
n1 = dsq;
|
|
214
|
+
s1 = s;
|
|
215
|
+
q1 = q;
|
|
216
|
+
} else if (dsq < n2) {
|
|
217
|
+
n2 = dsq;
|
|
218
|
+
s2 = s;
|
|
219
|
+
q2 = q;
|
|
220
|
+
}
|
|
221
|
+
}
|
|
222
|
+
}
|
|
123
223
|
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
float
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
224
|
+
if (n1 > 8.) return vec2(0.);
|
|
225
|
+
|
|
226
|
+
float an1 = q1.x * TWO_PI, mag1 = q1.y / .8;
|
|
227
|
+
vec2 t1 = vec2(cos(an1), sin(an1)) * mix(.3, 1.7, mag1 * mag1);
|
|
228
|
+
float an2 = q2.x * TWO_PI, mag2 = q2.y / .8;
|
|
229
|
+
vec2 t2 = vec2(cos(an2), sin(an2)) * mix(.3, 1.7, mag2 * mag2);
|
|
230
|
+
|
|
231
|
+
vec2 span = s1 - s2;
|
|
232
|
+
float spanLen = max(length(span), 1e-4);
|
|
233
|
+
float toEdge = (n2 - n1) / (2. * spanLen);
|
|
234
|
+
|
|
235
|
+
float pair = hash21(s1 + s2 + 1.7 * abs(s1 - s2));
|
|
236
|
+
float pairSoft = .05 + .1 * step(pair, .4);
|
|
237
|
+
float b = clamp(toEdge / max(1.5 * pixel, .5 * pairSoft), 0., 1.);
|
|
238
|
+
b = b * b * (3. - 2. * b);
|
|
239
|
+
float d1 = max(sqrt(n1), 1e-4);
|
|
240
|
+
depth = .2 * d1;
|
|
241
|
+
float shoulderAmt = max(0., 1. - toEdge / .42) * b;
|
|
242
|
+
vec2 shoulder = vec2(0.);
|
|
243
|
+
if (shoulderAmt > 0.) {
|
|
244
|
+
float d2 = max(sqrt(n2), 1e-4);
|
|
245
|
+
shoulder = shoulderAmt * ((v - s2) / d2 - (v - s1) / d1);
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
vec2 mid = .5 * (t1 + t2);
|
|
249
|
+
return mid + (t1 - mid) * b + .9 * shoulder;
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
vec4 getCrumples(vec2 uv) {
|
|
253
|
+
float crumpleN = max(2., floor(u_crumpleCount + .5));
|
|
254
|
+
float near = 60000., nearB = 60000.;
|
|
255
|
+
float idx = 0., rad = 0.;
|
|
256
|
+
vec2 nearP = vec2(0.), nearPb = vec2(0.);
|
|
257
|
+
vec4 seeds[${paperTextureMeta.maxCrumpleCount}];
|
|
258
|
+
for (int i = 0; i < ${paperTextureMeta.maxCrumpleCount}; i++) {
|
|
259
|
+
if (float(i) >= crumpleN) break;
|
|
260
|
+
vec2 rand = hash22(vec2(float(i), float(i) * u_seed));
|
|
130
261
|
float an = rand.x * TWO_PI;
|
|
131
262
|
vec2 p = vec2(cos(an), sin(an)) * rand.y;
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
263
|
+
seeds[i] = vec4(p, rand);
|
|
264
|
+
|
|
265
|
+
vec2 d = uv - p;
|
|
266
|
+
float dsq = dot(d, d);
|
|
267
|
+
if (dsq < near) {
|
|
268
|
+
nearB = near;
|
|
269
|
+
nearPb = nearP;
|
|
270
|
+
near = dsq;
|
|
271
|
+
idx = float(i);
|
|
272
|
+
rad = rand.y;
|
|
273
|
+
nearP = p;
|
|
274
|
+
} else if (dsq < nearB) {
|
|
275
|
+
nearB = dsq;
|
|
276
|
+
nearPb = p;
|
|
138
277
|
}
|
|
139
278
|
}
|
|
140
|
-
|
|
141
|
-
|
|
279
|
+
float l = sqrt(near), lb = sqrt(nearB);
|
|
280
|
+
vec2 dir = (uv - nearP) / max(l, 1e-4);
|
|
281
|
+
float edge = lst(0., .5, lb - l);
|
|
282
|
+
|
|
283
|
+
float shoulderLimit = l + .5;
|
|
284
|
+
|
|
285
|
+
vec2 tilt = getCellTilt(idx, rad);
|
|
286
|
+
float tiltSum = 1.;
|
|
287
|
+
vec2 wide = vec2(0.);
|
|
288
|
+
float wideSum = 0.;
|
|
289
|
+
float toEdge = 9., edgeSoft = 0.;
|
|
290
|
+
|
|
291
|
+
for (int i = 0; i < ${paperTextureMeta.maxCrumpleCount}; i++) {
|
|
292
|
+
if (float(i) >= crumpleN) break;
|
|
293
|
+
if (float(i) == idx) continue;
|
|
294
|
+
vec4 seed = seeds[i];
|
|
295
|
+
vec2 p = seed.xy;
|
|
296
|
+
vec2 rand = seed.zw;
|
|
297
|
+
|
|
298
|
+
vec2 d = uv - p;
|
|
299
|
+
float dsq = dot(d, d);
|
|
300
|
+
|
|
301
|
+
if (dsq < shoulderLimit * shoulderLimit) {
|
|
302
|
+
float di = sqrt(dsq);
|
|
303
|
+
float shoulder = lst(.5, 0., di - l);
|
|
304
|
+
wide += shoulder * (d / max(di, 1e-4) - dir);
|
|
305
|
+
wideSum += shoulder;
|
|
306
|
+
}
|
|
142
307
|
|
|
143
|
-
float
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
308
|
+
float pairSoft = .01 + .05 * step(.2, rand.x) + .3 * rand.y;
|
|
309
|
+
float toBisector = (dsq - near) / (.2 * max(length(p - nearP), 1e-4));
|
|
310
|
+
if (toBisector < toEdge) {
|
|
311
|
+
toEdge = toBisector;
|
|
312
|
+
edgeSoft = pairSoft;
|
|
313
|
+
}
|
|
314
|
+
|
|
315
|
+
float w = 1. - toBisector / pairSoft;
|
|
316
|
+
if (w > 0.) {
|
|
317
|
+
w *= w;
|
|
318
|
+
tilt += w * getCellTilt(float(i), rand.y);
|
|
319
|
+
tiltSum += w;
|
|
155
320
|
}
|
|
156
321
|
}
|
|
157
|
-
|
|
322
|
+
|
|
323
|
+
float blend = clamp(toEdge / edgeSoft, 0., 1.);
|
|
324
|
+
vec2 sharp = (1. - edge) * ((uv - nearPb) / max(lb, 1e-4) - dir);
|
|
325
|
+
vec2 rounding = mix(sharp, wide / max(wideSum, 1.), min(2. * edgeSoft, 1.));
|
|
326
|
+
float radial = l / max(l + toEdge, 1e-4);
|
|
327
|
+
|
|
328
|
+
return vec4(tilt / tiltSum + rounding * blend * radial, .2 * l, edge);
|
|
158
329
|
}
|
|
159
330
|
|
|
160
|
-
|
|
161
|
-
|
|
331
|
+
void getFolds(vec2 coord, vec2 offset, vec2 count, vec2 noise, vec2 baseFwidth, out vec2 slope, out vec2 dark, out vec2 lift) {
|
|
332
|
+
vec2 g = coord * count + .5 * offset + noise;
|
|
333
|
+
vec2 dx = fract(g) - .5;
|
|
334
|
+
vec2 adx = abs(dx);
|
|
335
|
+
float foldRadius = .3;
|
|
336
|
+
vec2 t = clamp(adx / foldRadius, 0., 1.);
|
|
337
|
+
dark = t * t * (3. - 2. * t);
|
|
338
|
+
lift = 1. - t;
|
|
339
|
+
lift *= lift;
|
|
340
|
+
|
|
341
|
+
vec2 crease = clamp(dx / max(count * baseFwidth, 1e-5), -1., 1.);
|
|
342
|
+
slope = crease * (1. - dark);
|
|
343
|
+
|
|
344
|
+
vec2 lineWidth = .02 * count * mix(vec2(2.5), vec2(.8), dark.yx) + .1 * noise;
|
|
345
|
+
slope -= 1. - smoothstep(vec2(0.), lineWidth, adx);
|
|
162
346
|
}
|
|
163
347
|
|
|
164
348
|
void main() {
|
|
165
349
|
|
|
166
|
-
vec2
|
|
167
|
-
|
|
168
|
-
|
|
350
|
+
vec2 patternUV = (v_imageUV - .5) * vec2(u_imageAspectRatio, 1.);
|
|
351
|
+
float basePixel = max(length(dFdx(patternUV)), length(dFdy(patternUV)));
|
|
352
|
+
vec2 baseFwidth = fwidth(patternUV);
|
|
353
|
+
|
|
354
|
+
float pattern = 0.;
|
|
355
|
+
|
|
356
|
+
float crumpleDepth = 0.;
|
|
357
|
+
float wrinkleDepth = 0.;
|
|
358
|
+
float foldDepth = 0.;
|
|
359
|
+
float roughness = 0.;
|
|
360
|
+
float fiber = 0.;
|
|
361
|
+
float drops = 0.;
|
|
362
|
+
|
|
363
|
+
float grazing = 0.7;
|
|
364
|
+
float lightRad = radians(u_angle);
|
|
365
|
+
vec2 lightDir = vec2(sin(lightRad), -cos(lightRad));
|
|
366
|
+
float foldAngleInSector = mod(u_angle, 90.);
|
|
367
|
+
float foldLightRad = radians(u_angle - foldAngleInSector + mix(12., 78., foldAngleInSector / 90.));
|
|
368
|
+
vec2 foldLightDir = vec2(sin(foldLightRad), -cos(foldLightRad));
|
|
369
|
+
vec2 relief = vec2(0.);
|
|
370
|
+
vec2 foldSlope = vec2(0.);
|
|
371
|
+
float reliefAmount = 0.;
|
|
372
|
+
float foldInk = 1.;
|
|
373
|
+
vec2 crumpleFlow = vec2(0.);
|
|
374
|
+
|
|
375
|
+
vec2 warpNoise = vec2(0.);
|
|
376
|
+
if (u_crumples > 0. || u_folds > 0. || u_wrinkles > 0.) {
|
|
377
|
+
warpNoise = smoothNoise(patternUV * .1 + .2 + .6 * fract(.017 * u_seed)) - .5;
|
|
378
|
+
}
|
|
379
|
+
vec2 crumplesUV = (patternUV * .9) + .012 * warpNoise;
|
|
169
380
|
|
|
170
|
-
|
|
171
|
-
|
|
381
|
+
if (u_crumples > 0.) {
|
|
382
|
+
vec4 crumples = getCrumples(crumplesUV);
|
|
172
383
|
|
|
173
|
-
|
|
174
|
-
|
|
384
|
+
vec2 crumpleTilt = .5 * u_crumples * crumples.xy;
|
|
385
|
+
crumpleTilt -= .1 * max(dot(crumpleTilt, lightDir), 0.) * lightDir;
|
|
386
|
+
relief += crumpleTilt;
|
|
387
|
+
reliefAmount += .6 * u_crumples;
|
|
388
|
+
crumpleFlow = crumples.w * crumpleTilt;
|
|
175
389
|
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
fiber = .5 * u_fiber * (fiber - 1.);
|
|
390
|
+
crumpleDepth = clamp(5. * crumples.z, 0., 1.);
|
|
391
|
+
}
|
|
179
392
|
|
|
180
|
-
|
|
181
|
-
|
|
393
|
+
if (u_wrinkles > 0.) {
|
|
394
|
+
float detailFreq = mix(10., 1., u_wrinkleSize);
|
|
395
|
+
float detailAmp = .2;
|
|
396
|
+
vec2 detailGrad = vec2(0.);
|
|
397
|
+
float detailDepth = 0., depthSum = 0.;
|
|
398
|
+
for (int i = 0; i < 3; i++) {
|
|
399
|
+
float layerDepth;
|
|
400
|
+
detailGrad += detailAmp * getCrumpleDetail(crumplesUV, detailFreq, 31. * float(i), basePixel, layerDepth);
|
|
401
|
+
detailDepth += detailAmp * layerDepth;
|
|
402
|
+
depthSum += detailAmp;
|
|
403
|
+
detailAmp *= (.5 + .2 * detailGrad.x);
|
|
404
|
+
detailFreq *= 2.1;
|
|
405
|
+
}
|
|
182
406
|
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
vec2 w2 = folds(foldsUV);
|
|
407
|
+
vec2 detailTilt = 1.5 * u_wrinkles * detailGrad;
|
|
408
|
+
detailTilt -= .65 * max(dot(detailTilt, lightDir), 0.) * lightDir;
|
|
409
|
+
relief += detailTilt;
|
|
410
|
+
reliefAmount += .6 * u_wrinkles;
|
|
188
411
|
|
|
189
|
-
|
|
412
|
+
wrinkleDepth = clamp(5. * detailDepth / max(depthSum, 1e-4), 0., 1.);
|
|
413
|
+
}
|
|
190
414
|
|
|
191
|
-
|
|
192
|
-
|
|
415
|
+
if (u_folds > 0.) {
|
|
416
|
+
vec2 foldOffset = vec2(1. - 2. * u_foldOffsetX, 1. - 2. * u_foldOffsetY);
|
|
417
|
+
vec2 foldCount = vec2(mix(3., .5, u_foldSizeX), mix(3., .5, u_foldSizeY));
|
|
418
|
+
vec2 foldNoise = .005 * warpNoise * foldCount;
|
|
419
|
+
vec2 uv = patternUV + .03 * crumpleFlow;
|
|
193
420
|
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
crumples = mix(crumples, 0., fade);
|
|
197
|
-
drops = mix(drops, 0., fade);
|
|
198
|
-
fiber *= mix(1., .5, fade);
|
|
199
|
-
roughness *= mix(1., .5, fade);
|
|
421
|
+
vec2 slope, dark, lift;
|
|
422
|
+
getFolds(uv, foldOffset, foldCount, foldNoise, baseFwidth, slope, dark, lift);
|
|
200
423
|
|
|
201
|
-
|
|
202
|
-
|
|
424
|
+
foldSlope = u_folds * slope;
|
|
425
|
+
reliefAmount += 1. * u_folds;
|
|
426
|
+
vec2 ink = mix(vec2(.96), vec2(1.), dark);
|
|
427
|
+
float flatness = dark.x * dark.y;
|
|
428
|
+
foldInk *= mix(1., ink.x * ink.y * mix(.5, .3, flatness), u_folds);
|
|
203
429
|
|
|
204
|
-
|
|
205
|
-
|
|
430
|
+
foldDepth = u_folds * (lift.y * foldLightDir.y - lift.x * foldLightDir.x);
|
|
431
|
+
}
|
|
206
432
|
|
|
207
|
-
|
|
208
|
-
|
|
433
|
+
float unlit = cos(grazing);
|
|
434
|
+
float lit = unlit;
|
|
209
435
|
|
|
210
|
-
|
|
211
|
-
|
|
436
|
+
if (reliefAmount > 0.) {
|
|
437
|
+
float lightFalloff = clamp(.5 + dot(v_imageUV - .5, lightDir), 0., 1.);
|
|
438
|
+
float lightPower = mix(.5, 1., lightFalloff);
|
|
439
|
+
float slope = clamp(dot(relief, lightDir) + dot(foldSlope, foldLightDir), -1.2, 1.2);
|
|
440
|
+
lit = max(cos(slope + grazing), 0.);
|
|
212
441
|
|
|
213
|
-
|
|
214
|
-
|
|
442
|
+
pattern += (clamp(reliefAmount, 0., 1.) * unlit + (lit - unlit)) * foldInk * lightPower;
|
|
443
|
+
}
|
|
215
444
|
|
|
216
|
-
|
|
217
|
-
float res = dot(normalize(vec3(normal, 9.5 - 9. * pow(u_contrast, .1))), normalize(lightPos));
|
|
445
|
+
patternUV += .04 * crumpleFlow;
|
|
218
446
|
|
|
219
|
-
|
|
220
|
-
float fgOpacity = u_colorFront.a;
|
|
221
|
-
vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
|
|
222
|
-
float bgOpacity = u_colorBack.a;
|
|
447
|
+
vec2 seedShift = floor(fract(u_seed * vec2(.7548776662, .5698402909)) * 50.) / 50.;
|
|
223
448
|
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
449
|
+
if (u_roughness > 0.) {
|
|
450
|
+
roughness = u_roughness * getRoughness(1000. * patternUV, lightDir, seedShift, basePixel);
|
|
451
|
+
pattern += roughness;
|
|
452
|
+
}
|
|
228
453
|
|
|
229
|
-
|
|
454
|
+
if (u_fiber > 0.) {
|
|
455
|
+
fiber = u_fiber * getFiber(50. * patternUV, seedShift, basePixel);
|
|
456
|
+
pattern += fiber;
|
|
457
|
+
}
|
|
230
458
|
|
|
231
|
-
|
|
232
|
-
|
|
459
|
+
if (u_drops > 0.) {
|
|
460
|
+
drops = u_drops * getDrops(patternUV * 10., seedShift);
|
|
461
|
+
}
|
|
233
462
|
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
463
|
+
pattern = clamp(pattern, 0., 1.);
|
|
464
|
+
|
|
465
|
+
vec3 backColor = u_colorBack.rgb * u_colorBack.a;
|
|
466
|
+
float backOpacity = u_colorBack.a;
|
|
467
|
+
vec3 baseColor = u_colorPaper.rgb * u_colorPaper.a;
|
|
468
|
+
float baseOpacity = u_colorPaper.a;
|
|
469
|
+
vec3 shadowColor = u_colorShadow.rgb * u_colorShadow.a;
|
|
470
|
+
float shadowOpacity = u_colorShadow.a;
|
|
471
|
+
|
|
472
|
+
float notClipped = u_clip ? .1 : 1.;
|
|
473
|
+
vec2 imageCenteredUV = v_imageUV - .5;
|
|
474
|
+
float edgeDist = 2. * max(abs(imageCenteredUV.x), abs(imageCenteredUV.y));
|
|
475
|
+
float wrinkleDistortion = mix(.38, .0175, smoothstep(0., 1., edgeDist));
|
|
476
|
+
float scaleDistortion = .15 * u_crumples * (crumpleDepth - .5) + wrinkleDistortion * u_wrinkles * (wrinkleDepth - .5) + .05 * foldDepth;
|
|
477
|
+
vec2 linearDistortion = notClipped * .002 * lightDir * drops;
|
|
478
|
+
float radialDistortion = notClipped * .02 * (roughness + fiber);
|
|
479
|
+
vec2 centeredUV = imageCenteredUV * (1. - u_distortion * scaleDistortion);
|
|
480
|
+
centeredUV -= u_distortion * linearDistortion;
|
|
481
|
+
vec2 imageUV = .5 + centeredUV * (1. - abs(u_distortion) * radialDistortion * dot(centeredUV, centeredUV));
|
|
482
|
+
|
|
483
|
+
vec3 color = shadowColor * pattern;
|
|
484
|
+
float opacity = shadowOpacity * pattern;
|
|
485
|
+
color += baseColor * (1. - opacity);
|
|
486
|
+
opacity += baseOpacity * (1. - opacity);
|
|
487
|
+
|
|
488
|
+
if (u_isImage) {
|
|
489
|
+
float frame = getUvFrame(imageUV);
|
|
490
|
+
vec4 image = texture(u_image, imageUV);
|
|
491
|
+
frame *= image.a;
|
|
492
|
+
|
|
493
|
+
float maxC = max(max(image.r, image.g), image.b);
|
|
494
|
+
float minC = min(min(image.r, image.g), image.b);
|
|
495
|
+
float sat = maxC > 0. ? (maxC - minC) / maxC : 0.;
|
|
496
|
+
float midC = image.r + image.g + image.b - maxC - minC;
|
|
497
|
+
float secondaryness = maxC > minC ? (midC - minC) / (maxC - minC) : 0.;
|
|
498
|
+
float satDampen = sat * (1. - .5 * secondaryness);
|
|
499
|
+
float darkDampen = 1. - dot(vec3(.2126, .7152, .0722), image.rgb);
|
|
500
|
+
float dampen = mix(0., .7, u_blending) * max(satDampen, darkDampen);
|
|
501
|
+
|
|
502
|
+
vec3 paper = vec3(1.) - opacity + color;
|
|
503
|
+
vec3 pic = image.rgb * paper * u_blending + image.rgb * (1. - u_blending);
|
|
504
|
+
pic = mix(pic, vec3(1.), .6 * pow(dampen, 2. + 3. * pattern));
|
|
505
|
+
|
|
506
|
+
color = mix(color, pic, frame);
|
|
507
|
+
opacity = frame + opacity * (1. - frame);
|
|
508
|
+
|
|
509
|
+
if (u_clip) {
|
|
510
|
+
color *= frame;
|
|
511
|
+
opacity *= frame;
|
|
512
|
+
}
|
|
513
|
+
}
|
|
237
514
|
|
|
238
|
-
color
|
|
515
|
+
color *= mix(vec3(1.), .5 * u_colorShadow.rgb, drops * shadowOpacity);
|
|
239
516
|
|
|
240
|
-
color
|
|
517
|
+
color += backColor * (1. - opacity);
|
|
518
|
+
opacity += backOpacity * (1. - opacity);
|
|
241
519
|
|
|
242
520
|
fragColor = vec4(color, opacity);
|
|
243
521
|
}
|
|
244
522
|
`;
|
|
245
523
|
export {
|
|
246
|
-
paperTextureFragmentShader
|
|
524
|
+
paperTextureFragmentShader,
|
|
525
|
+
paperTextureMeta
|
|
247
526
|
};
|
|
248
527
|
//# sourceMappingURL=paper-texture.js.map
|