@paper-design/shaders 0.0.29 → 0.0.30-backbuffer-experiment.0
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/shader-mount.d.ts +5 -1
- package/dist/shader-sizing.d.ts +1 -1
- package/dist/shaders/dithering.d.ts +21 -7
- package/dist/shaders/grain-gradient.d.ts +12 -2
- package/package.json +2 -2
- package/dist/get-shader-color-from-string.js +0 -93
- package/dist/get-shader-color-from-string.js.map +0 -7
- package/dist/get-shader-noise-texture.js +0 -23
- package/dist/get-shader-noise-texture.js.map +0 -7
- package/dist/index.js +0 -97
- package/dist/index.js.map +0 -7
- package/dist/shader-color-spaces.js +0 -96
- package/dist/shader-color-spaces.js.map +0 -7
- package/dist/shader-mount.js +0 -569
- package/dist/shader-mount.js.map +0 -7
- package/dist/shader-sizing.js +0 -196
- package/dist/shader-sizing.js.map +0 -7
- package/dist/shader-utils.js +0 -59
- package/dist/shader-utils.js.map +0 -7
- package/dist/shaders/dithering.js +0 -197
- package/dist/shaders/dithering.js.map +0 -7
- package/dist/shaders/dot-grid.js +0 -100
- package/dist/shaders/dot-grid.js.map +0 -7
- package/dist/shaders/dot-orbit.js +0 -120
- package/dist/shaders/dot-orbit.js.map +0 -7
- package/dist/shaders/god-rays.js +0 -134
- package/dist/shaders/god-rays.js.map +0 -7
- package/dist/shaders/grain-gradient.js +0 -219
- package/dist/shaders/grain-gradient.js.map +0 -7
- package/dist/shaders/liquid-metal.js +0 -224
- package/dist/shaders/liquid-metal.js.map +0 -7
- package/dist/shaders/mesh-gradient.js +0 -97
- package/dist/shaders/mesh-gradient.js.map +0 -7
- package/dist/shaders/metaballs.js +0 -109
- package/dist/shaders/metaballs.js.map +0 -7
- package/dist/shaders/neuro-noise.js +0 -66
- package/dist/shaders/neuro-noise.js.map +0 -7
- package/dist/shaders/perlin-noise.js +0 -193
- package/dist/shaders/perlin-noise.js.map +0 -7
- package/dist/shaders/pulsing-border.js +0 -218
- package/dist/shaders/pulsing-border.js.map +0 -7
- package/dist/shaders/simplex-noise.js +0 -103
- package/dist/shaders/simplex-noise.js.map +0 -7
- package/dist/shaders/smoke-ring.js +0 -141
- package/dist/shaders/smoke-ring.js.map +0 -7
- package/dist/shaders/spiral.js +0 -75
- package/dist/shaders/spiral.js.map +0 -7
- package/dist/shaders/swirl.js +0 -80
- package/dist/shaders/swirl.js.map +0 -7
- package/dist/shaders/voronoi.js +0 -143
- package/dist/shaders/voronoi.js.map +0 -7
- package/dist/shaders/warp.js +0 -124
- package/dist/shaders/warp.js.map +0 -7
- package/dist/shaders/waves.js +0 -60
- package/dist/shaders/waves.js.map +0 -7
- package/dist/types.js +0 -6
- package/dist/types.js.map +0 -7
|
@@ -1,193 +0,0 @@
|
|
|
1
|
-
/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
|
2
|
-
* Paper Shaders *
|
|
3
|
-
* https://github.com/paper-design/shaders *
|
|
4
|
-
* * * * * * * * * * * * * * * * * * * * * * * * * * * */
|
|
5
|
-
|
|
6
|
-
import { sizingVariablesDeclaration } from "../shader-sizing";
|
|
7
|
-
import { declarePI, colorBandingFix } from "../shader-utils";
|
|
8
|
-
const perlinNoiseFragmentShader = `#version 300 es
|
|
9
|
-
precision highp float;
|
|
10
|
-
|
|
11
|
-
uniform float u_time;
|
|
12
|
-
|
|
13
|
-
uniform vec4 u_color1;
|
|
14
|
-
uniform vec4 u_color2;
|
|
15
|
-
uniform float u_proportion;
|
|
16
|
-
uniform float u_softness;
|
|
17
|
-
uniform float u_octaveCount;
|
|
18
|
-
uniform float u_persistence;
|
|
19
|
-
uniform float u_lacunarity;
|
|
20
|
-
|
|
21
|
-
${sizingVariablesDeclaration}
|
|
22
|
-
|
|
23
|
-
out vec4 fragColor;
|
|
24
|
-
|
|
25
|
-
${declarePI}
|
|
26
|
-
|
|
27
|
-
uint hash(uint x, uint seed) {
|
|
28
|
-
const uint m = 0x5bd1e995U;
|
|
29
|
-
uint hash = seed;
|
|
30
|
-
// process input
|
|
31
|
-
uint k = x;
|
|
32
|
-
k *= m;
|
|
33
|
-
k ^= k >> 24;
|
|
34
|
-
k *= m;
|
|
35
|
-
hash *= m;
|
|
36
|
-
hash ^= k;
|
|
37
|
-
// some final mixing
|
|
38
|
-
hash ^= hash >> 13;
|
|
39
|
-
hash *= m;
|
|
40
|
-
hash ^= hash >> 15;
|
|
41
|
-
return hash;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
uint hash(uvec3 x, uint seed){
|
|
45
|
-
const uint m = 0x5bd1e995U;
|
|
46
|
-
uint hash = seed;
|
|
47
|
-
// process first vector element
|
|
48
|
-
uint k = x.x;
|
|
49
|
-
k *= m;
|
|
50
|
-
k ^= k >> 24;
|
|
51
|
-
k *= m;
|
|
52
|
-
hash *= m;
|
|
53
|
-
hash ^= k;
|
|
54
|
-
// process second vector element
|
|
55
|
-
k = x.y;
|
|
56
|
-
k *= m;
|
|
57
|
-
k ^= k >> 24;
|
|
58
|
-
k *= m;
|
|
59
|
-
hash *= m;
|
|
60
|
-
hash ^= k;
|
|
61
|
-
// process third vector element
|
|
62
|
-
k = x.z;
|
|
63
|
-
k *= m;
|
|
64
|
-
k ^= k >> 24;
|
|
65
|
-
k *= m;
|
|
66
|
-
hash *= m;
|
|
67
|
-
hash ^= k;
|
|
68
|
-
// some final mixing
|
|
69
|
-
hash ^= hash >> 13;
|
|
70
|
-
hash *= m;
|
|
71
|
-
hash ^= hash >> 15;
|
|
72
|
-
return hash;
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
vec3 gradientdy(uint hash) {
|
|
77
|
-
switch (int(hash) & 15) { // look at the last four bits to pick a gradient dy
|
|
78
|
-
case 0:
|
|
79
|
-
return vec3(1, 1, 0);
|
|
80
|
-
case 1:
|
|
81
|
-
return vec3(-1, 1, 0);
|
|
82
|
-
case 2:
|
|
83
|
-
return vec3(1, -1, 0);
|
|
84
|
-
case 3:
|
|
85
|
-
return vec3(-1, -1, 0);
|
|
86
|
-
case 4:
|
|
87
|
-
return vec3(1, 0, 1);
|
|
88
|
-
case 5:
|
|
89
|
-
return vec3(-1, 0, 1);
|
|
90
|
-
case 6:
|
|
91
|
-
return vec3(1, 0, -1);
|
|
92
|
-
case 7:
|
|
93
|
-
return vec3(-1, 0, -1);
|
|
94
|
-
case 8:
|
|
95
|
-
return vec3(0, 1, 1);
|
|
96
|
-
case 9:
|
|
97
|
-
return vec3(0, -1, 1);
|
|
98
|
-
case 10:
|
|
99
|
-
return vec3(0, 1, -1);
|
|
100
|
-
case 11:
|
|
101
|
-
return vec3(0, -1, -1);
|
|
102
|
-
case 12:
|
|
103
|
-
return vec3(1, 1, 0);
|
|
104
|
-
case 13:
|
|
105
|
-
return vec3(-1, 1, 0);
|
|
106
|
-
case 14:
|
|
107
|
-
return vec3(0, -1, 1);
|
|
108
|
-
case 15:
|
|
109
|
-
return vec3(0, -1, -1);
|
|
110
|
-
}
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
float interpolate(float value1, float value2, float value3, float value4, float value5, float value6, float value7, float value8, vec3 t) {
|
|
114
|
-
return mix(
|
|
115
|
-
mix(mix(value1, value2, t.x), mix(value3, value4, t.x), t.y),
|
|
116
|
-
mix(mix(value5, value6, t.x), mix(value7, value8, t.x), t.y),
|
|
117
|
-
t.z
|
|
118
|
-
);
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
vec3 fade(vec3 t) {
|
|
122
|
-
return t * t * t * (t * (t * 6.0 - 15.0) + 10.0);
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
float perlinNoise(vec3 position, uint seed) {
|
|
126
|
-
position += 1e+4;
|
|
127
|
-
vec3 floorPosition = floor(position);
|
|
128
|
-
vec3 fractPosition = fract(position);
|
|
129
|
-
uvec3 cellCoordinates = uvec3(floorPosition);
|
|
130
|
-
float value1 = dot(gradientdy(hash(cellCoordinates, seed)), fractPosition);
|
|
131
|
-
float value2 = dot(gradientdy(hash((cellCoordinates + uvec3(1, 0, 0)), seed)), fractPosition - vec3(1, 0, 0));
|
|
132
|
-
float value3 = dot(gradientdy(hash((cellCoordinates + uvec3(0, 1, 0)), seed)), fractPosition - vec3(0, 1, 0));
|
|
133
|
-
float value4 = dot(gradientdy(hash((cellCoordinates + uvec3(1, 1, 0)), seed)), fractPosition - vec3(1, 1, 0));
|
|
134
|
-
float value5 = dot(gradientdy(hash((cellCoordinates + uvec3(0, 0, 1)), seed)), fractPosition - vec3(0, 0, 1));
|
|
135
|
-
float value6 = dot(gradientdy(hash((cellCoordinates + uvec3(1, 0, 1)), seed)), fractPosition - vec3(1, 0, 1));
|
|
136
|
-
float value7 = dot(gradientdy(hash((cellCoordinates + uvec3(0, 1, 1)), seed)), fractPosition - vec3(0, 1, 1));
|
|
137
|
-
float value8 = dot(gradientdy(hash((cellCoordinates + uvec3(1, 1, 1)), seed)), fractPosition - vec3(1, 1, 1));
|
|
138
|
-
return interpolate(value1, value2, value3, value4, value5, value6, value7, value8, fade(fractPosition));
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
float p_noise(vec3 position, int octaveCount, float persistence, float lacunarity) {
|
|
142
|
-
float value = 0.0;
|
|
143
|
-
float amplitude = 1.0;
|
|
144
|
-
float currentFrequency = 10.;
|
|
145
|
-
uint currentSeed = uint(0);
|
|
146
|
-
for (int i = 0; i < octaveCount; i++) {
|
|
147
|
-
currentSeed = hash(currentSeed, 0x0U);
|
|
148
|
-
value += perlinNoise(position * currentFrequency, currentSeed) * amplitude;
|
|
149
|
-
amplitude *= persistence;
|
|
150
|
-
currentFrequency *= lacunarity;
|
|
151
|
-
}
|
|
152
|
-
return value;
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
float get_max_amp(float persistence, float octaveCount) {
|
|
156
|
-
persistence *= .999;
|
|
157
|
-
return (1. - pow(persistence, octaveCount)) / (1. - persistence);
|
|
158
|
-
}
|
|
159
|
-
|
|
160
|
-
void main() {
|
|
161
|
-
vec2 shape_uv = v_patternUV;
|
|
162
|
-
|
|
163
|
-
shape_uv *= .005;
|
|
164
|
-
float t = .2 * u_time;
|
|
165
|
-
|
|
166
|
-
vec3 p = vec3(shape_uv, t);
|
|
167
|
-
|
|
168
|
-
float oct_count = max(0., floor(u_octaveCount));
|
|
169
|
-
float persistence = clamp(u_persistence, 0., 1.);
|
|
170
|
-
float noise = p_noise(p, int(oct_count), persistence, u_lacunarity);
|
|
171
|
-
|
|
172
|
-
float max_amp = get_max_amp(persistence, oct_count);
|
|
173
|
-
float noise_normalized = (noise + max_amp) / (2. * max_amp) + (u_proportion - .5);
|
|
174
|
-
float sharpness = clamp(u_softness, 0., 1.);
|
|
175
|
-
float smooth_w = 0.5 * fwidth(noise_normalized);
|
|
176
|
-
float sharp_noise = smoothstep(
|
|
177
|
-
.5 - .5 * sharpness - smooth_w,
|
|
178
|
-
.5 + .5 * sharpness + smooth_w,
|
|
179
|
-
noise_normalized
|
|
180
|
-
);
|
|
181
|
-
|
|
182
|
-
vec3 color = mix(u_color1.rgb * u_color1.a, u_color2.rgb * u_color2.a, sharp_noise);
|
|
183
|
-
float opacity = mix(u_color1.a, u_color2.a, sharp_noise);
|
|
184
|
-
|
|
185
|
-
${colorBandingFix}
|
|
186
|
-
|
|
187
|
-
fragColor = vec4(color, opacity);
|
|
188
|
-
}
|
|
189
|
-
`;
|
|
190
|
-
export {
|
|
191
|
-
perlinNoiseFragmentShader
|
|
192
|
-
};
|
|
193
|
-
//# sourceMappingURL=perlin-noise.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/shaders/perlin-noise.ts"],
|
|
4
|
-
"sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing';\nimport { declarePI, colorBandingFix } from '../shader-utils';\n\n/**\n * 3d Perlin noise with exposed parameters\n * Based on https://www.shadertoy.com/view/NlSGDz\n *\n * Uniforms include:\n * u_color1 - the first mixed color\n * u_color2 - the second mixed color\n * u_proportion (0 .. 1) - the proportion between u_color1 and u_color2;\n * u_softness - the sharpness of the transition between u_color1 and u_color2 in the noise output\n * u_octaveCount - the number of octaves for Perlin noise;\n * higher values increase the complexity of the noise\n * u_persistence (0 .. 1) - the amplitude of each successive octave of the noise;\n * lower values make higher octaves less pronounced\n * u_lacunarity - the frequency of each successive octave of the noise;\n * higher values increase the detail\n */\nexport const perlinNoiseFragmentShader: string = `#version 300 es\nprecision highp float;\n\nuniform float u_time;\n\nuniform vec4 u_color1;\nuniform vec4 u_color2;\nuniform float u_proportion;\nuniform float u_softness;\nuniform float u_octaveCount;\nuniform float u_persistence;\nuniform float u_lacunarity;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n\nuint hash(uint x, uint seed) {\n const uint m = 0x5bd1e995U;\n uint hash = seed;\n // process input\n uint k = x;\n k *= m;\n k ^= k >> 24;\n k *= m;\n hash *= m;\n hash ^= k;\n // some final mixing\n hash ^= hash >> 13;\n hash *= m;\n hash ^= hash >> 15;\n return hash;\n}\n\nuint hash(uvec3 x, uint seed){\n const uint m = 0x5bd1e995U;\n uint hash = seed;\n // process first vector element\n uint k = x.x;\n k *= m;\n k ^= k >> 24;\n k *= m;\n hash *= m;\n hash ^= k;\n // process second vector element\n k = x.y;\n k *= m;\n k ^= k >> 24;\n k *= m;\n hash *= m;\n hash ^= k;\n // process third vector element\n k = x.z;\n k *= m;\n k ^= k >> 24;\n k *= m;\n hash *= m;\n hash ^= k;\n // some final mixing\n hash ^= hash >> 13;\n hash *= m;\n hash ^= hash >> 15;\n return hash;\n}\n\n\nvec3 gradientdy(uint hash) {\n switch (int(hash) & 15) { // look at the last four bits to pick a gradient dy\n case 0:\n return vec3(1, 1, 0);\n case 1:\n return vec3(-1, 1, 0);\n case 2:\n return vec3(1, -1, 0);\n case 3:\n return vec3(-1, -1, 0);\n case 4:\n return vec3(1, 0, 1);\n case 5:\n return vec3(-1, 0, 1);\n case 6:\n return vec3(1, 0, -1);\n case 7:\n return vec3(-1, 0, -1);\n case 8:\n return vec3(0, 1, 1);\n case 9:\n return vec3(0, -1, 1);\n case 10:\n return vec3(0, 1, -1);\n case 11:\n return vec3(0, -1, -1);\n case 12:\n return vec3(1, 1, 0);\n case 13:\n return vec3(-1, 1, 0);\n case 14:\n return vec3(0, -1, 1);\n case 15:\n return vec3(0, -1, -1);\n }\n}\n\nfloat interpolate(float value1, float value2, float value3, float value4, float value5, float value6, float value7, float value8, vec3 t) {\n return mix(\n mix(mix(value1, value2, t.x), mix(value3, value4, t.x), t.y),\n mix(mix(value5, value6, t.x), mix(value7, value8, t.x), t.y),\n t.z\n );\n}\n\nvec3 fade(vec3 t) {\n return t * t * t * (t * (t * 6.0 - 15.0) + 10.0);\n}\n\nfloat perlinNoise(vec3 position, uint seed) {\n position += 1e+4;\n vec3 floorPosition = floor(position);\n vec3 fractPosition = fract(position);\n uvec3 cellCoordinates = uvec3(floorPosition);\n float value1 = dot(gradientdy(hash(cellCoordinates, seed)), fractPosition);\n float value2 = dot(gradientdy(hash((cellCoordinates + uvec3(1, 0, 0)), seed)), fractPosition - vec3(1, 0, 0));\n float value3 = dot(gradientdy(hash((cellCoordinates + uvec3(0, 1, 0)), seed)), fractPosition - vec3(0, 1, 0));\n float value4 = dot(gradientdy(hash((cellCoordinates + uvec3(1, 1, 0)), seed)), fractPosition - vec3(1, 1, 0));\n float value5 = dot(gradientdy(hash((cellCoordinates + uvec3(0, 0, 1)), seed)), fractPosition - vec3(0, 0, 1));\n float value6 = dot(gradientdy(hash((cellCoordinates + uvec3(1, 0, 1)), seed)), fractPosition - vec3(1, 0, 1));\n float value7 = dot(gradientdy(hash((cellCoordinates + uvec3(0, 1, 1)), seed)), fractPosition - vec3(0, 1, 1));\n float value8 = dot(gradientdy(hash((cellCoordinates + uvec3(1, 1, 1)), seed)), fractPosition - vec3(1, 1, 1));\n return interpolate(value1, value2, value3, value4, value5, value6, value7, value8, fade(fractPosition));\n}\n\nfloat p_noise(vec3 position, int octaveCount, float persistence, float lacunarity) {\n float value = 0.0;\n float amplitude = 1.0;\n float currentFrequency = 10.;\n uint currentSeed = uint(0);\n for (int i = 0; i < octaveCount; i++) {\n currentSeed = hash(currentSeed, 0x0U);\n value += perlinNoise(position * currentFrequency, currentSeed) * amplitude;\n amplitude *= persistence;\n currentFrequency *= lacunarity;\n }\n return value;\n}\n\nfloat get_max_amp(float persistence, float octaveCount) {\n persistence *= .999;\n return (1. - pow(persistence, octaveCount)) / (1. - persistence);\n}\n\nvoid main() {\n vec2 shape_uv = v_patternUV;\n\n shape_uv *= .005;\n float t = .2 * u_time;\n\n vec3 p = vec3(shape_uv, t);\n\n float oct_count = max(0., floor(u_octaveCount));\n float persistence = clamp(u_persistence, 0., 1.);\n float noise = p_noise(p, int(oct_count), persistence, u_lacunarity);\n\n float max_amp = get_max_amp(persistence, oct_count);\n float noise_normalized = (noise + max_amp) / (2. * max_amp) + (u_proportion - .5);\n float sharpness = clamp(u_softness, 0., 1.);\n float smooth_w = 0.5 * fwidth(noise_normalized);\n float sharp_noise = smoothstep(\n .5 - .5 * sharpness - smooth_w,\n .5 + .5 * sharpness + smooth_w,\n noise_normalized\n );\n\n vec3 color = mix(u_color1.rgb * u_color1.a, u_color2.rgb * u_color2.a, sharp_noise);\n float opacity = mix(u_color1.a, u_color2.a, sharp_noise);\n\n ${colorBandingFix}\n\n fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface PerlinNoiseUniforms extends ShaderSizingUniforms {\n u_color1: [number, number, number, number];\n u_color2: [number, number, number, number];\n u_proportion: number;\n u_softness: number;\n u_octaveCount: number;\n u_persistence: number;\n u_lacunarity: number;\n}\n\nexport interface PerlinNoiseParams extends ShaderSizingParams, ShaderMotionParams {\n color1?: string;\n color2?: string;\n proportion?: number;\n softness?: number;\n octaveCount?: number;\n persistence?: number;\n lacunarity?: number;\n}\n"],
|
|
5
|
-
"mappings": ";;;;;AACA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,uBAAuB;AAkBpC,MAAM,4BAAoC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAa/C,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAgKP,eAAe;AAAA;AAAA;AAAA;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,218 +0,0 @@
|
|
|
1
|
-
/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
|
2
|
-
* Paper Shaders *
|
|
3
|
-
* https://github.com/paper-design/shaders *
|
|
4
|
-
* * * * * * * * * * * * * * * * * * * * * * * * * * * */
|
|
5
|
-
|
|
6
|
-
import { sizingVariablesDeclaration } from "../shader-sizing";
|
|
7
|
-
import { declarePI, colorBandingFix } from "../shader-utils";
|
|
8
|
-
const pulsingBorderMeta = {
|
|
9
|
-
maxColorCount: 5,
|
|
10
|
-
maxSpotsPerColor: 5
|
|
11
|
-
};
|
|
12
|
-
const pulsingBorderFragmentShader = `#version 300 es
|
|
13
|
-
precision lowp float;
|
|
14
|
-
|
|
15
|
-
uniform float u_time;
|
|
16
|
-
|
|
17
|
-
uniform vec4 u_colorBack;
|
|
18
|
-
uniform vec4 u_colors[${pulsingBorderMeta.maxColorCount}];
|
|
19
|
-
uniform float u_colorsCount;
|
|
20
|
-
uniform float u_roundness;
|
|
21
|
-
uniform float u_thickness;
|
|
22
|
-
uniform float u_softness;
|
|
23
|
-
uniform float u_intensity;
|
|
24
|
-
uniform float u_spotSize;
|
|
25
|
-
uniform float u_spotsPerColor;
|
|
26
|
-
uniform float u_pulse;
|
|
27
|
-
uniform float u_smoke;
|
|
28
|
-
uniform float u_smokeSize;
|
|
29
|
-
|
|
30
|
-
uniform sampler2D u_pulseTexture;
|
|
31
|
-
uniform sampler2D u_noiseTexture;
|
|
32
|
-
|
|
33
|
-
${sizingVariablesDeclaration}
|
|
34
|
-
|
|
35
|
-
out vec4 fragColor;
|
|
36
|
-
|
|
37
|
-
${declarePI}
|
|
38
|
-
|
|
39
|
-
float roundedBox(vec2 uv, vec2 halfSize, float radius, float distance, float edgeSoftness) {
|
|
40
|
-
|
|
41
|
-
float borderDistance = abs(distance) - .5 * u_thickness;
|
|
42
|
-
float border = 1. - smoothstep(-.5 * edgeSoftness, .5 * edgeSoftness, borderDistance);
|
|
43
|
-
border *= border;
|
|
44
|
-
|
|
45
|
-
vec2 v0 = uv + halfSize;
|
|
46
|
-
vec2 v1 = uv - vec2(-halfSize.x, halfSize.y);
|
|
47
|
-
vec2 v2 = uv - vec2(halfSize.x, -halfSize.y);
|
|
48
|
-
vec2 v3 = uv - halfSize;
|
|
49
|
-
|
|
50
|
-
float mult = (.07 - .25 * radius);
|
|
51
|
-
float m0 = mult * clamp(pow(1. - abs(v0.x - v0.y), 20.), 0., 1.);
|
|
52
|
-
float m1 = mult * clamp(pow(1. - abs(v1.x + v1.y), 20.), 0., 1.);
|
|
53
|
-
float m2 = mult * clamp(pow(1. - abs(v2.x + v2.y), 20.), 0., 1.);
|
|
54
|
-
float m3 = mult * clamp(pow(1. - abs(v3.x - v3.y), 20.), 0., 1.);
|
|
55
|
-
|
|
56
|
-
float l = edgeSoftness * .5 + .75 * u_thickness;
|
|
57
|
-
float fade0 = 1. - clamp(length(v0) / l, 0., 1.);
|
|
58
|
-
float fade1 = 1. - clamp(length(v1) / l, 0., 1.);
|
|
59
|
-
float fade2 = 1. - clamp(length(v2) / l, 0., 1.);
|
|
60
|
-
float fade3 = 1. - clamp(length(v3) / l, 0., 1.);
|
|
61
|
-
|
|
62
|
-
m0 *= fade0;
|
|
63
|
-
m1 *= fade1;
|
|
64
|
-
m2 *= fade2;
|
|
65
|
-
m3 *= fade3;
|
|
66
|
-
|
|
67
|
-
float fillFix = m0 + m1 + m2 + m3;
|
|
68
|
-
fillFix *= step(distance, 0.);
|
|
69
|
-
fillFix *= (1. + 3. * u_thickness);
|
|
70
|
-
fillFix *= (1.5 - .5 * smoothstep(0., .5, edgeSoftness));
|
|
71
|
-
fillFix = clamp(fillFix, 0., 1.);
|
|
72
|
-
|
|
73
|
-
return border + fillFix;
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
float roundedBoxSmoke(vec2 uv, vec2 halfSize, float radius, float distance, float size) {
|
|
77
|
-
float borderDistance = abs(distance);
|
|
78
|
-
float border = 1. - smoothstep(-.75 * size, .75 * size, borderDistance);
|
|
79
|
-
border *= border;
|
|
80
|
-
|
|
81
|
-
vec2 v0 = uv + halfSize;
|
|
82
|
-
vec2 v1 = uv - vec2(-halfSize.x, halfSize.y);
|
|
83
|
-
vec2 v2 = uv - vec2(halfSize.x, -halfSize.y);
|
|
84
|
-
vec2 v3 = uv - halfSize;
|
|
85
|
-
|
|
86
|
-
float l_mask = .5;
|
|
87
|
-
float mask = smoothstep(0., 1., length(v0) / l_mask);
|
|
88
|
-
mask *= smoothstep(0., 1., length(v1) / l_mask);
|
|
89
|
-
mask *= smoothstep(0., 1., length(v2) / l_mask);
|
|
90
|
-
mask *= smoothstep(0., 1., length(v3) / l_mask);
|
|
91
|
-
|
|
92
|
-
return border * mask;
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
vec2 rand(vec2 p) {
|
|
96
|
-
vec2 uv = floor(p) / 100. + .5;
|
|
97
|
-
return texture(u_noiseTexture, uv).gb;
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
float noise(vec2 st) {
|
|
101
|
-
vec2 i = floor(st);
|
|
102
|
-
vec2 f = fract(st);
|
|
103
|
-
float a = rand(i).x;
|
|
104
|
-
float b = rand(i + vec2(1.0, 0.0)).x;
|
|
105
|
-
float c = rand(i + vec2(0.0, 1.0)).x;
|
|
106
|
-
float d = rand(i + vec2(1.0, 1.0)).x;
|
|
107
|
-
vec2 u = f * f * (3.0 - 2.0 * f);
|
|
108
|
-
float x1 = mix(a, b, u.x);
|
|
109
|
-
float x2 = mix(c, d, u.x);
|
|
110
|
-
return mix(x1, x2, u.y);
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
float getWaveformValue(float time) {
|
|
114
|
-
float dur = 5.;
|
|
115
|
-
float wrappedTime = mod(time, dur);
|
|
116
|
-
float normalizedTime = wrappedTime / dur;
|
|
117
|
-
float value = texture(u_pulseTexture, vec2(normalizedTime, 0.5)).r;
|
|
118
|
-
return value * 2. - 1.;
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
void main() {
|
|
122
|
-
|
|
123
|
-
float t = .5 * u_time + 20.;
|
|
124
|
-
|
|
125
|
-
vec2 borderUV = v_responsiveUV;
|
|
126
|
-
|
|
127
|
-
float angle = atan(borderUV.y, borderUV.x) / TWO_PI;
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
float borderRatio = v_responsiveBoxGivenSize.x / v_responsiveBoxGivenSize.y;
|
|
131
|
-
borderUV.x *= borderRatio;
|
|
132
|
-
vec2 halfSize = vec2(.5);
|
|
133
|
-
halfSize.x *= borderRatio;
|
|
134
|
-
float radius = min(.5 * u_roundness, halfSize.x);
|
|
135
|
-
vec2 d = abs(borderUV) - halfSize + radius;
|
|
136
|
-
float outsideDistance = length(max(d, 0.)) - radius;
|
|
137
|
-
float insideDistance = min(max(d.x, d.y), 0.0);
|
|
138
|
-
float distance = outsideDistance + insideDistance;
|
|
139
|
-
|
|
140
|
-
float border = roundedBox(borderUV, halfSize, radius, distance, .5 * u_softness);
|
|
141
|
-
|
|
142
|
-
float pulse = u_pulse * getWaveformValue(.18 * u_time);
|
|
143
|
-
|
|
144
|
-
border *= (1. + .1 * pulse);
|
|
145
|
-
border *= (1. + u_intensity);
|
|
146
|
-
|
|
147
|
-
vec2 smokeUV = .001 * u_smokeSize * v_patternUV;
|
|
148
|
-
float smoke = clamp(3. * noise(2.7 * smokeUV + .5 * t), 0., 1.);
|
|
149
|
-
smoke -= noise(3.4 * smokeUV - .5 * t);
|
|
150
|
-
smoke *= roundedBoxSmoke(borderUV, halfSize, radius, distance, u_smoke);
|
|
151
|
-
smoke = 50. * pow(smoke, 2.);
|
|
152
|
-
smoke *= u_smoke;
|
|
153
|
-
smoke *= (.8 + .4 * pulse);
|
|
154
|
-
smoke = clamp(smoke, 0., 1.);
|
|
155
|
-
|
|
156
|
-
border += smoke;
|
|
157
|
-
|
|
158
|
-
float sectorsTotal = 0.;
|
|
159
|
-
|
|
160
|
-
vec3 color = vec3(0.);
|
|
161
|
-
float opacity = 0.;
|
|
162
|
-
|
|
163
|
-
vec3 accumColor = vec3(0.);
|
|
164
|
-
float accumAlpha = 0.;
|
|
165
|
-
|
|
166
|
-
for (int i = 0; i < ${pulsingBorderMeta.maxSpotsPerColor}; i++) {
|
|
167
|
-
if (i >= int(u_spotsPerColor)) break;
|
|
168
|
-
float idx = float(i);
|
|
169
|
-
|
|
170
|
-
for (int j = 0; j < ${pulsingBorderMeta.maxColorCount}; j++) {
|
|
171
|
-
if (j >= int(u_colorsCount)) break;
|
|
172
|
-
float colorIdx = float(j);
|
|
173
|
-
|
|
174
|
-
vec2 randVal = rand(vec2(idx * 10. + 2., 40. + colorIdx));
|
|
175
|
-
|
|
176
|
-
float time = (.1 + .15 * abs(sin(idx * (2. + colorIdx)) * cos(idx * (2. + 2.5 * colorIdx)))) * t + randVal.x * 3.;
|
|
177
|
-
time *= mix(1., -1., step(.5, randVal.y));
|
|
178
|
-
|
|
179
|
-
float mask = .2 + mix(
|
|
180
|
-
sin(t + idx * (5. - 1.5 * colorIdx)),
|
|
181
|
-
cos(t + idx * (3. + 1.3 * colorIdx)),
|
|
182
|
-
step(mod(colorIdx, 2.), .5)
|
|
183
|
-
);
|
|
184
|
-
|
|
185
|
-
mask += pulse;
|
|
186
|
-
if (mask < 0.) continue;
|
|
187
|
-
|
|
188
|
-
float atg1 = fract(angle + time);
|
|
189
|
-
float sector = smoothstep(.5 - u_spotSize, .5, atg1) * smoothstep(.5 + u_spotSize, .5, atg1);
|
|
190
|
-
sector *= border;
|
|
191
|
-
sector *= mask;
|
|
192
|
-
sector = clamp(sector, 0., 1.);
|
|
193
|
-
|
|
194
|
-
sectorsTotal += sector;
|
|
195
|
-
|
|
196
|
-
float alpha = sector * u_colors[j].a;
|
|
197
|
-
accumColor += u_colors[j].rgb * alpha;
|
|
198
|
-
accumAlpha += alpha;
|
|
199
|
-
}
|
|
200
|
-
}
|
|
201
|
-
|
|
202
|
-
color = accumColor;
|
|
203
|
-
opacity = clamp(accumAlpha, 0., 1.);
|
|
204
|
-
|
|
205
|
-
vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
|
|
206
|
-
color = color + bgColor * (1. - opacity);
|
|
207
|
-
opacity = opacity + u_colorBack.a * (1. - opacity);
|
|
208
|
-
|
|
209
|
-
${colorBandingFix}
|
|
210
|
-
|
|
211
|
-
fragColor = vec4(color, opacity);
|
|
212
|
-
}
|
|
213
|
-
`;
|
|
214
|
-
export {
|
|
215
|
-
pulsingBorderFragmentShader,
|
|
216
|
-
pulsingBorderMeta
|
|
217
|
-
};
|
|
218
|
-
//# sourceMappingURL=pulsing-border.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/shaders/pulsing-border.ts"],
|
|
4
|
-
"sourcesContent": ["import type { vec4 } from '../types';\nimport type { ShaderMotionParams } from '../shader-mount';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing';\nimport { declarePI, colorBandingFix } from '../shader-utils';\n\nexport const pulsingBorderMeta = {\n maxColorCount: 5,\n maxSpotsPerColor: 5,\n} as const;\n\n/**\n * Pulsing Border Pattern with Smoke Effect\n * This shader creates a rounded border mask with multiple color spots\n * traveling along the border\n *\n * Uniforms include:\n * u_colorBack - The background color of the pattern\n * u_colors - An array of colors for the pulsing spots (with up to `u_colorsCount` entries)\n * u_colorsCount - The number of colors used in the pattern\n * u_roundness - The roundness of the border corners\n * u_thickness - The thickness of the border\n * u_softness - The blur around the border edges\n * u_intensity - The intensity multiplier for the pulsing effect\n * u_spotSize - The size of the color spots\n * u_spotsPerColor - The number of spots for each color (not all the spots are visible all the time)\n * u_pulse - A multiplier for the pulsing strength (pulsing signal taken from the u_pulseTexture)\n * u_smoke - The strength of the smoke effect (the noise aroung the border)\n */\n\nexport const pulsingBorderFragmentShader: string = `#version 300 es\nprecision lowp float;\n\nuniform float u_time;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colors[${pulsingBorderMeta.maxColorCount}];\nuniform float u_colorsCount;\nuniform float u_roundness;\nuniform float u_thickness;\nuniform float u_softness;\nuniform float u_intensity;\nuniform float u_spotSize;\nuniform float u_spotsPerColor;\nuniform float u_pulse;\nuniform float u_smoke;\nuniform float u_smokeSize;\n\nuniform sampler2D u_pulseTexture;\nuniform sampler2D u_noiseTexture;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n\nfloat roundedBox(vec2 uv, vec2 halfSize, float radius, float distance, float edgeSoftness) {\n \n float borderDistance = abs(distance) - .5 * u_thickness;\n float border = 1. - smoothstep(-.5 * edgeSoftness, .5 * edgeSoftness, borderDistance);\n border *= border;\n\n vec2 v0 = uv + halfSize;\n vec2 v1 = uv - vec2(-halfSize.x, halfSize.y);\n vec2 v2 = uv - vec2(halfSize.x, -halfSize.y);\n vec2 v3 = uv - halfSize;\n \n float mult = (.07 - .25 * radius);\n float m0 = mult * clamp(pow(1. - abs(v0.x - v0.y), 20.), 0., 1.);\n float m1 = mult * clamp(pow(1. - abs(v1.x + v1.y), 20.), 0., 1.);\n float m2 = mult * clamp(pow(1. - abs(v2.x + v2.y), 20.), 0., 1.);\n float m3 = mult * clamp(pow(1. - abs(v3.x - v3.y), 20.), 0., 1.);\n \n float l = edgeSoftness * .5 + .75 * u_thickness;\n float fade0 = 1. - clamp(length(v0) / l, 0., 1.);\n float fade1 = 1. - clamp(length(v1) / l, 0., 1.);\n float fade2 = 1. - clamp(length(v2) / l, 0., 1.);\n float fade3 = 1. - clamp(length(v3) / l, 0., 1.);\n \n m0 *= fade0;\n m1 *= fade1;\n m2 *= fade2;\n m3 *= fade3;\n \n float fillFix = m0 + m1 + m2 + m3;\n fillFix *= step(distance, 0.);\n fillFix *= (1. + 3. * u_thickness);\n fillFix *= (1.5 - .5 * smoothstep(0., .5, edgeSoftness));\n fillFix = clamp(fillFix, 0., 1.);\n\n return border + fillFix;\n}\n\nfloat roundedBoxSmoke(vec2 uv, vec2 halfSize, float radius, float distance, float size) {\n float borderDistance = abs(distance);\n float border = 1. - smoothstep(-.75 * size, .75 * size, borderDistance);\n border *= border;\n\n vec2 v0 = uv + halfSize;\n vec2 v1 = uv - vec2(-halfSize.x, halfSize.y);\n vec2 v2 = uv - vec2(halfSize.x, -halfSize.y);\n vec2 v3 = uv - halfSize;\n \n float l_mask = .5;\n float mask = smoothstep(0., 1., length(v0) / l_mask);\n mask *= smoothstep(0., 1., length(v1) / l_mask);\n mask *= smoothstep(0., 1., length(v2) / l_mask);\n mask *= smoothstep(0., 1., length(v3) / l_mask);\n\n return border * mask;\n}\n\nvec2 rand(vec2 p) {\n vec2 uv = floor(p) / 100. + .5;\n return texture(u_noiseTexture, uv).gb;\n}\n\nfloat noise(vec2 st) {\n vec2 i = floor(st);\n vec2 f = fract(st);\n float a = rand(i).x;\n float b = rand(i + vec2(1.0, 0.0)).x;\n float c = rand(i + vec2(0.0, 1.0)).x;\n float d = rand(i + vec2(1.0, 1.0)).x;\n vec2 u = f * f * (3.0 - 2.0 * f);\n float x1 = mix(a, b, u.x);\n float x2 = mix(c, d, u.x);\n return mix(x1, x2, u.y);\n}\n\nfloat getWaveformValue(float time) {\n float dur = 5.;\n float wrappedTime = mod(time, dur);\n float normalizedTime = wrappedTime / dur;\n float value = texture(u_pulseTexture, vec2(normalizedTime, 0.5)).r;\n return value * 2. - 1.;\n}\n\nvoid main() {\n\n float t = .5 * u_time + 20.;\n \n vec2 borderUV = v_responsiveUV;\n\n float angle = atan(borderUV.y, borderUV.x) / TWO_PI;\n \n \n float borderRatio = v_responsiveBoxGivenSize.x / v_responsiveBoxGivenSize.y;\n borderUV.x *= borderRatio;\n vec2 halfSize = vec2(.5);\n halfSize.x *= borderRatio;\n float radius = min(.5 * u_roundness, halfSize.x);\n vec2 d = abs(borderUV) - halfSize + radius;\n float outsideDistance = length(max(d, 0.)) - radius;\n float insideDistance = min(max(d.x, d.y), 0.0);\n float distance = outsideDistance + insideDistance;\n \n float border = roundedBox(borderUV, halfSize, radius, distance, .5 * u_softness);\n\n float pulse = u_pulse * getWaveformValue(.18 * u_time);\n \n border *= (1. + .1 * pulse);\n border *= (1. + u_intensity);\n\n vec2 smokeUV = .001 * u_smokeSize * v_patternUV;\n float smoke = clamp(3. * noise(2.7 * smokeUV + .5 * t), 0., 1.);\n smoke -= noise(3.4 * smokeUV - .5 * t);\n smoke *= roundedBoxSmoke(borderUV, halfSize, radius, distance, u_smoke);\n smoke = 50. * pow(smoke, 2.);\n smoke *= u_smoke;\n smoke *= (.8 + .4 * pulse);\n smoke = clamp(smoke, 0., 1.);\n\n border += smoke;\n\n float sectorsTotal = 0.;\n\n vec3 color = vec3(0.);\n float opacity = 0.;\n \n vec3 accumColor = vec3(0.);\n float accumAlpha = 0.;\n \n for (int i = 0; i < ${pulsingBorderMeta.maxSpotsPerColor}; i++) {\n if (i >= int(u_spotsPerColor)) break;\n float idx = float(i);\n \n for (int j = 0; j < ${pulsingBorderMeta.maxColorCount}; j++) {\n if (j >= int(u_colorsCount)) break;\n float colorIdx = float(j);\n\n vec2 randVal = rand(vec2(idx * 10. + 2., 40. + colorIdx));\n \n float time = (.1 + .15 * abs(sin(idx * (2. + colorIdx)) * cos(idx * (2. + 2.5 * colorIdx)))) * t + randVal.x * 3.;\n time *= mix(1., -1., step(.5, randVal.y));\n \n float mask = .2 + mix(\n sin(t + idx * (5. - 1.5 * colorIdx)),\n cos(t + idx * (3. + 1.3 * colorIdx)),\n step(mod(colorIdx, 2.), .5)\n );\n \n mask += pulse;\n if (mask < 0.) continue;\n \n float atg1 = fract(angle + time);\n float sector = smoothstep(.5 - u_spotSize, .5, atg1) * smoothstep(.5 + u_spotSize, .5, atg1);\n sector *= border;\n sector *= mask;\n sector = clamp(sector, 0., 1.);\n \n sectorsTotal += sector;\n \n float alpha = sector * u_colors[j].a;\n accumColor += u_colors[j].rgb * alpha;\n accumAlpha += alpha;\n }\n }\n \n color = accumColor;\n opacity = clamp(accumAlpha, 0., 1.);\n \n vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\n color = color + bgColor * (1. - opacity);\n opacity = opacity + u_colorBack.a * (1. - opacity);\n \n ${colorBandingFix}\n\n fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface PulsingBorderUniforms extends ShaderSizingUniforms {\n u_colorBack: [number, number, number, number];\n u_colors: vec4[];\n u_colorsCount: number;\n u_roundness: number;\n u_thickness: number;\n u_softness: number;\n u_intensity: number;\n u_spotsPerColor: number;\n u_spotSize: number;\n u_pulse: number;\n u_smoke: number;\n u_smokeSize: number;\n u_pulseTexture?: HTMLImageElement;\n}\n\nexport interface PulsingBorderParams extends ShaderSizingParams, ShaderMotionParams {\n colorBack?: string;\n colors?: string[];\n roundness?: number;\n thickness?: number;\n softness?: number;\n intensity?: number;\n spotsPerColor?: number;\n spotSize?: number;\n pulse?: number;\n smoke?: number;\n smokeSize?: number;\n}\n"],
|
|
5
|
-
"mappings": ";;;;;AAEA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,uBAAuB;AAEpC,MAAM,oBAAoB;AAAA,EAC/B,eAAe;AAAA,EACf,kBAAkB;AACpB;AAqBO,MAAM,8BAAsC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAM3B,kBAAkB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAerD,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAiIa,kBAAkB,gBAAgB;AAAA;AAAA;AAAA;AAAA,0BAIhC,kBAAkB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAuCrD,eAAe;AAAA;AAAA;AAAA;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,103 +0,0 @@
|
|
|
1
|
-
/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
|
2
|
-
* Paper Shaders *
|
|
3
|
-
* https://github.com/paper-design/shaders *
|
|
4
|
-
* * * * * * * * * * * * * * * * * * * * * * * * * * * */
|
|
5
|
-
|
|
6
|
-
import { sizingVariablesDeclaration } from "../shader-sizing";
|
|
7
|
-
import { declareSimplexNoise, colorBandingFix } from "../shader-utils";
|
|
8
|
-
const simplexNoiseMeta = {
|
|
9
|
-
maxColorCount: 10
|
|
10
|
-
};
|
|
11
|
-
const simplexNoiseFragmentShader = `#version 300 es
|
|
12
|
-
precision highp float;
|
|
13
|
-
|
|
14
|
-
uniform float u_time;
|
|
15
|
-
uniform float u_scale;
|
|
16
|
-
|
|
17
|
-
uniform vec4 u_colors[${simplexNoiseMeta.maxColorCount}];
|
|
18
|
-
uniform float u_colorsCount;
|
|
19
|
-
uniform float u_stepsPerColor;
|
|
20
|
-
uniform float u_softness;
|
|
21
|
-
|
|
22
|
-
${sizingVariablesDeclaration}
|
|
23
|
-
|
|
24
|
-
out vec4 fragColor;
|
|
25
|
-
|
|
26
|
-
${declareSimplexNoise}
|
|
27
|
-
|
|
28
|
-
float getNoise(vec2 uv, float t) {
|
|
29
|
-
float noise = .5 * snoise(uv - vec2(0., .3 * t));
|
|
30
|
-
noise += .5 * snoise(2. * uv + vec2(0., .32 * t));
|
|
31
|
-
|
|
32
|
-
return noise;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
float steppedSmooth(float t, float steps, float softness) {
|
|
36
|
-
float stepT = floor(t * steps) / steps;
|
|
37
|
-
float f = t * steps - floor(t * steps);
|
|
38
|
-
|
|
39
|
-
float fw = 0.005 / u_scale;
|
|
40
|
-
float smoothed = smoothstep(.5 - softness * .5 - fw, .5 + softness * .5 + fw, f);
|
|
41
|
-
|
|
42
|
-
return stepT + smoothed / steps;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
void main() {
|
|
46
|
-
vec2 shape_uv = v_patternUV;
|
|
47
|
-
|
|
48
|
-
shape_uv *= .001;
|
|
49
|
-
|
|
50
|
-
float t = .2 * u_time;
|
|
51
|
-
|
|
52
|
-
float shape = .5 + .5 * getNoise(shape_uv, t);
|
|
53
|
-
|
|
54
|
-
bool u_extraSides = true;
|
|
55
|
-
|
|
56
|
-
float mixer = shape * (u_colorsCount - 1.);
|
|
57
|
-
if (u_extraSides == true) {
|
|
58
|
-
mixer = (shape - .5 / u_colorsCount) * u_colorsCount;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
float steps = max(1., u_stepsPerColor);
|
|
62
|
-
|
|
63
|
-
vec4 gradient = u_colors[0];
|
|
64
|
-
gradient.rgb *= gradient.a;
|
|
65
|
-
for (int i = 1; i < ${simplexNoiseMeta.maxColorCount}; i++) {
|
|
66
|
-
if (i >= int(u_colorsCount)) break;
|
|
67
|
-
|
|
68
|
-
float localT = clamp(mixer - float(i - 1), 0., 1.);
|
|
69
|
-
localT = steppedSmooth(localT, steps, u_softness);
|
|
70
|
-
|
|
71
|
-
vec4 c = u_colors[i];
|
|
72
|
-
c.rgb *= c.a;
|
|
73
|
-
gradient = mix(gradient, c, localT);
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
if (u_extraSides == true) {
|
|
77
|
-
if ((mixer < 0.) || (mixer > (u_colorsCount - 1.))) {
|
|
78
|
-
float localT = mixer + 1.;
|
|
79
|
-
if (mixer > (u_colorsCount - 1.)) {
|
|
80
|
-
localT = mixer - (u_colorsCount - 1.);
|
|
81
|
-
}
|
|
82
|
-
localT = steppedSmooth(localT, steps, u_softness);
|
|
83
|
-
vec4 cFst = u_colors[0];
|
|
84
|
-
cFst.rgb *= cFst.a;
|
|
85
|
-
vec4 cLast = u_colors[int(u_colorsCount - 1.)];
|
|
86
|
-
cLast.rgb *= cLast.a;
|
|
87
|
-
gradient = mix(cLast, cFst, localT);
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
vec3 color = gradient.rgb;
|
|
92
|
-
float opacity = gradient.a;
|
|
93
|
-
|
|
94
|
-
${colorBandingFix}
|
|
95
|
-
|
|
96
|
-
fragColor = vec4(color, opacity);
|
|
97
|
-
}
|
|
98
|
-
`;
|
|
99
|
-
export {
|
|
100
|
-
simplexNoiseFragmentShader,
|
|
101
|
-
simplexNoiseMeta
|
|
102
|
-
};
|
|
103
|
-
//# sourceMappingURL=simplex-noise.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/shaders/simplex-noise.ts"],
|
|
4
|
-
"sourcesContent": ["import type { vec4 } from '../types';\nimport type { ShaderMotionParams } from '../shader-mount';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing';\nimport { declareSimplexNoise, colorBandingFix } from '../shader-utils';\n\nexport const simplexNoiseMeta = {\n maxColorCount: 10,\n} as const;\n\n/**\n * Simplex Noise animation by Ksenia Kondrashova\n * Calculates a combination of 2 simplex noises with result mapped as\n * a gradient with dynamic number of main colors and steps between them\n *\n * Uniforms include:\n * - u_colors (vec4[]): Input RGBA colors\n * - u_colorsCount (float): Number of active colors (`u_colors` length)\n * - u_stepsPerColor (float, used as int): Number of rendered colors per input color\n * - u_softness (float, 0..1): Amount of blur applied to the color steps\n */\nexport const simplexNoiseFragmentShader: string = `#version 300 es\nprecision highp float;\n\nuniform float u_time;\nuniform float u_scale;\n\nuniform vec4 u_colors[${simplexNoiseMeta.maxColorCount}];\nuniform float u_colorsCount;\nuniform float u_stepsPerColor;\nuniform float u_softness;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declareSimplexNoise}\n\nfloat getNoise(vec2 uv, float t) {\n float noise = .5 * snoise(uv - vec2(0., .3 * t));\n noise += .5 * snoise(2. * uv + vec2(0., .32 * t));\n\n return noise;\n}\n\nfloat steppedSmooth(float t, float steps, float softness) {\n float stepT = floor(t * steps) / steps;\n float f = t * steps - floor(t * steps);\n \n float fw = 0.005 / u_scale;\n float smoothed = smoothstep(.5 - softness * .5 - fw, .5 + softness * .5 + fw, f);\n \n return stepT + smoothed / steps;\n}\n\nvoid main() {\n vec2 shape_uv = v_patternUV;\n\n shape_uv *= .001;\n\n float t = .2 * u_time;\n\n float shape = .5 + .5 * getNoise(shape_uv, t);\n \n bool u_extraSides = true;\n \n float mixer = shape * (u_colorsCount - 1.);\n if (u_extraSides == true) {\n mixer = (shape - .5 / u_colorsCount) * u_colorsCount;\n }\n\n float steps = max(1., u_stepsPerColor);\n\n vec4 gradient = u_colors[0];\n gradient.rgb *= gradient.a;\n for (int i = 1; i < ${simplexNoiseMeta.maxColorCount}; i++) {\n if (i >= int(u_colorsCount)) break;\n \n float localT = clamp(mixer - float(i - 1), 0., 1.);\n localT = steppedSmooth(localT, steps, u_softness); \n \n vec4 c = u_colors[i];\n c.rgb *= c.a;\n gradient = mix(gradient, c, localT);\n }\n \n if (u_extraSides == true) {\n if ((mixer < 0.) || (mixer > (u_colorsCount - 1.))) {\n float localT = mixer + 1.;\n if (mixer > (u_colorsCount - 1.)) {\n localT = mixer - (u_colorsCount - 1.);\n }\n localT = steppedSmooth(localT, steps, u_softness); \n vec4 cFst = u_colors[0];\n cFst.rgb *= cFst.a;\n vec4 cLast = u_colors[int(u_colorsCount - 1.)];\n cLast.rgb *= cLast.a;\n gradient = mix(cLast, cFst, localT);\n }\n }\n\n vec3 color = gradient.rgb;\n float opacity = gradient.a;\n \n ${colorBandingFix}\n\n fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface SimplexNoiseUniforms extends ShaderSizingUniforms {\n u_colors: vec4[];\n u_colorsCount: number;\n u_stepsPerColor: number;\n u_softness: number;\n}\n\nexport interface SimplexNoiseParams extends ShaderSizingParams, ShaderMotionParams {\n colors?: string[];\n stepsPerColor?: number;\n softness?: number;\n}\n"],
|
|
5
|
-
"mappings": ";;;;;AAEA,SAAS,kCAAsF;AAC/F,SAAS,qBAAqB,uBAAuB;AAE9C,MAAM,mBAAmB;AAAA,EAC9B,eAAe;AACjB;AAaO,MAAM,6BAAqC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAM1B,iBAAiB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA,EAKpD,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAuCG,iBAAiB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IA6BlD,eAAe;AAAA;AAAA;AAAA;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|