@paper-design/shaders 0.0.26 → 0.0.27
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/get-shader-color-from-string.d.ts +1 -1
- package/dist/get-shader-color-from-string.js +93 -0
- package/dist/get-shader-color-from-string.js.map +7 -0
- package/dist/get-shader-noise-texture.d.ts +1 -0
- package/dist/get-shader-noise-texture.js +23 -0
- package/dist/get-shader-noise-texture.js.map +7 -0
- package/dist/index.d.ts +30 -16
- package/dist/index.js +79 -1767
- package/dist/index.js.map +4 -4
- package/dist/shader-color-spaces.d.ts +6 -0
- package/dist/shader-color-spaces.js +96 -0
- package/dist/shader-color-spaces.js.map +7 -0
- package/dist/shader-mount.d.ts +48 -17
- package/dist/shader-mount.js +568 -0
- package/dist/shader-mount.js.map +7 -0
- package/dist/shader-sizing.d.ts +35 -0
- package/dist/shader-sizing.js +196 -0
- package/dist/shader-sizing.js.map +7 -0
- package/dist/shader-utils.d.ts +5 -0
- package/dist/shader-utils.js +59 -0
- package/dist/shader-utils.js.map +7 -0
- package/dist/shaders/dithering.d.ts +47 -0
- package/dist/shaders/dithering.js +197 -0
- package/dist/shaders/dithering.js.map +7 -0
- package/dist/shaders/dot-grid.d.ts +33 -20
- package/dist/shaders/dot-grid.js +100 -0
- package/dist/shaders/dot-grid.js.map +7 -0
- package/dist/shaders/dot-orbit.d.ts +27 -18
- package/dist/shaders/dot-orbit.js +120 -0
- package/dist/shaders/dot-orbit.js.map +7 -0
- package/dist/shaders/god-rays.d.ts +35 -26
- package/dist/shaders/god-rays.js +134 -0
- package/dist/shaders/god-rays.js.map +7 -0
- package/dist/shaders/grain-gradient.d.ts +25 -0
- package/dist/shaders/grain-gradient.js +219 -0
- package/dist/shaders/grain-gradient.js.map +7 -0
- package/dist/shaders/liquid-metal.d.ts +19 -0
- package/dist/shaders/liquid-metal.js +224 -0
- package/dist/shaders/liquid-metal.js.map +7 -0
- package/dist/shaders/mesh-gradient.d.ts +23 -13
- package/dist/shaders/mesh-gradient.js +97 -0
- package/dist/shaders/mesh-gradient.js.map +7 -0
- package/dist/shaders/metaballs.d.ts +22 -15
- package/dist/shaders/metaballs.js +108 -0
- package/dist/shaders/metaballs.js.map +7 -0
- package/dist/shaders/neuro-noise.d.ts +13 -8
- package/dist/shaders/neuro-noise.js +66 -0
- package/dist/shaders/neuro-noise.js.map +7 -0
- package/dist/shaders/perlin-noise.d.ts +26 -15
- package/dist/shaders/perlin-noise.js +193 -0
- package/dist/shaders/perlin-noise.js.map +7 -0
- package/dist/shaders/pulsing-border.d.ts +54 -0
- package/dist/shaders/pulsing-border.js +218 -0
- package/dist/shaders/pulsing-border.js.map +7 -0
- package/dist/shaders/simplex-noise.d.ts +29 -0
- package/dist/shaders/simplex-noise.js +103 -0
- package/dist/shaders/simplex-noise.js.map +7 -0
- package/dist/shaders/smoke-ring.d.ts +34 -12
- package/dist/shaders/smoke-ring.js +141 -0
- package/dist/shaders/smoke-ring.js.map +7 -0
- package/dist/shaders/spiral.d.ts +28 -18
- package/dist/shaders/spiral.js +75 -0
- package/dist/shaders/spiral.js.map +7 -0
- package/dist/shaders/swirl.d.ts +26 -0
- package/dist/shaders/swirl.js +80 -0
- package/dist/shaders/swirl.js.map +7 -0
- package/dist/shaders/voronoi.d.ts +39 -29
- package/dist/shaders/voronoi.js +143 -0
- package/dist/shaders/voronoi.js.map +7 -0
- package/dist/shaders/warp.d.ts +43 -32
- package/dist/shaders/warp.js +124 -0
- package/dist/shaders/warp.js.map +7 -0
- package/dist/shaders/waves.d.ts +25 -15
- package/dist/shaders/waves.js +60 -0
- package/dist/shaders/waves.js.map +7 -0
- package/dist/types.d.ts +3 -0
- package/dist/types.js +6 -0
- package/dist/types.js.map +7 -0
- package/package.json +2 -1
- package/dist/get-shader-color-from-string.test.d.ts +0 -1
- package/dist/shaders/stepped-simplex-noise.d.ts +0 -24
|
@@ -1,22 +1,29 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
u_visibilityRange: number;
|
|
1
|
+
import type { vec4 } from '../types';
|
|
2
|
+
import type { ShaderMotionParams } from '../shader-mount';
|
|
3
|
+
import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing';
|
|
4
|
+
export declare const metaballsMeta: {
|
|
5
|
+
readonly maxColorCount: 8;
|
|
6
|
+
readonly maxBallsCount: 20;
|
|
8
7
|
};
|
|
9
8
|
/**
|
|
10
9
|
* Metaballs (circular shapes with gooey effect applied)
|
|
11
10
|
* The artwork by Ksenia Kondrashova
|
|
12
11
|
*
|
|
13
12
|
* Uniforms include:
|
|
14
|
-
*
|
|
15
|
-
*
|
|
16
|
-
*
|
|
17
|
-
*
|
|
18
|
-
* u_color3 - the mataballs gradient color #3
|
|
19
|
-
* u_ballSize (0 .. 1) - the size coefficient applied to each ball
|
|
20
|
-
* u_visibilityRange (0 .. 1) - to show 2 to 15 balls
|
|
13
|
+
* - uColors (vec4[]): Input RGBA colors
|
|
14
|
+
* - uColorsCount (float): Number of active colors (`uColors` length)
|
|
15
|
+
* - u_count (float)
|
|
16
|
+
* - u_size (float)
|
|
21
17
|
*/
|
|
22
|
-
export declare const metaballsFragmentShader
|
|
18
|
+
export declare const metaballsFragmentShader: string;
|
|
19
|
+
export interface MetaballsUniforms extends ShaderSizingUniforms {
|
|
20
|
+
u_colors: vec4[];
|
|
21
|
+
u_colorsCount: number;
|
|
22
|
+
u_count: number;
|
|
23
|
+
u_size: number;
|
|
24
|
+
}
|
|
25
|
+
export interface MetaballsParams extends ShaderSizingParams, ShaderMotionParams {
|
|
26
|
+
colors?: string[];
|
|
27
|
+
count?: number;
|
|
28
|
+
size?: number;
|
|
29
|
+
}
|
|
@@ -0,0 +1,108 @@
|
|
|
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 metaballsMeta = {
|
|
9
|
+
maxColorCount: 8,
|
|
10
|
+
maxBallsCount: 20
|
|
11
|
+
};
|
|
12
|
+
const metaballsFragmentShader = `#version 300 es
|
|
13
|
+
precision highp float;
|
|
14
|
+
|
|
15
|
+
uniform float u_time;
|
|
16
|
+
|
|
17
|
+
uniform vec4 u_colors[${metaballsMeta.maxColorCount}];
|
|
18
|
+
uniform float u_colorsCount;
|
|
19
|
+
uniform float u_size;
|
|
20
|
+
uniform float u_sizeRange;
|
|
21
|
+
uniform float u_count;
|
|
22
|
+
|
|
23
|
+
${sizingVariablesDeclaration}
|
|
24
|
+
|
|
25
|
+
out vec4 fragColor;
|
|
26
|
+
|
|
27
|
+
${declarePI}
|
|
28
|
+
|
|
29
|
+
float hash(float x) {
|
|
30
|
+
return fract(sin(x) * 43758.5453123);
|
|
31
|
+
}
|
|
32
|
+
float noise(float x) {
|
|
33
|
+
float i = floor(x);
|
|
34
|
+
float f = fract(x);
|
|
35
|
+
float u = f * f * (3.0 - 2.0 * f);
|
|
36
|
+
return mix(hash(i), hash(i + 1.0), u);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
float getBallShape(vec2 uv, vec2 c, float p) {
|
|
40
|
+
float s = .5 * length(uv - c);
|
|
41
|
+
s = 1. - clamp(s, 0., 1.);
|
|
42
|
+
s = pow(s, p);
|
|
43
|
+
return s;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
void main() {
|
|
47
|
+
vec2 shape_uv = v_objectUV;
|
|
48
|
+
|
|
49
|
+
shape_uv += .5;
|
|
50
|
+
|
|
51
|
+
float t = .2 * u_time + 1.;
|
|
52
|
+
|
|
53
|
+
vec3 totalColor = vec3(0.);
|
|
54
|
+
float totalShape = 0.;
|
|
55
|
+
float totalOpacity = 0.;
|
|
56
|
+
|
|
57
|
+
for (int i = 0; i < ${metaballsMeta.maxBallsCount}; i++) {
|
|
58
|
+
if (i >= int(ceil(u_count))) break;
|
|
59
|
+
|
|
60
|
+
float idxFract = float(i) / float(${metaballsMeta.maxBallsCount});
|
|
61
|
+
float angle = TWO_PI * idxFract;
|
|
62
|
+
|
|
63
|
+
float speed = 1. - .2 * idxFract;
|
|
64
|
+
float noiseX = noise(angle * 10. + float(i) + t * speed);
|
|
65
|
+
float noiseY = noise(angle * 20. + float(i) - t * speed);
|
|
66
|
+
|
|
67
|
+
vec2 pos = vec2(.5) + 1e-4 + .9 * (vec2(noiseX, noiseY) - .5);
|
|
68
|
+
|
|
69
|
+
int safeIndex = i % int(u_colorsCount + 0.5);
|
|
70
|
+
vec4 ballColor = u_colors[safeIndex];
|
|
71
|
+
ballColor.rgb *= ballColor.a;
|
|
72
|
+
|
|
73
|
+
float sizeFrac = 1.;
|
|
74
|
+
if (float(i) > floor(u_count - 1.)) {
|
|
75
|
+
sizeFrac *= fract(u_count);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
float shape = getBallShape(shape_uv, pos, 50. - 30. * u_size * sizeFrac);
|
|
79
|
+
shape = smoothstep(0., 1., shape);
|
|
80
|
+
|
|
81
|
+
totalColor += ballColor.rgb * shape;
|
|
82
|
+
totalShape += shape;
|
|
83
|
+
totalOpacity += ballColor.a * shape;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
totalColor /= max(totalShape, 1e-4);
|
|
87
|
+
totalOpacity /= max(totalShape, 1e-4);
|
|
88
|
+
|
|
89
|
+
float edge_width = fwidth(totalShape);
|
|
90
|
+
float finalShape = smoothstep(.4, .4 + edge_width, totalShape);
|
|
91
|
+
|
|
92
|
+
vec3 color = totalColor * finalShape;
|
|
93
|
+
float opacity = totalOpacity * finalShape;
|
|
94
|
+
|
|
95
|
+
if (opacity < .005) {
|
|
96
|
+
discard;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
${colorBandingFix}
|
|
100
|
+
|
|
101
|
+
fragColor = vec4(color, opacity);
|
|
102
|
+
}
|
|
103
|
+
`;
|
|
104
|
+
export {
|
|
105
|
+
metaballsFragmentShader,
|
|
106
|
+
metaballsMeta
|
|
107
|
+
};
|
|
108
|
+
//# sourceMappingURL=metaballs.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/shaders/metaballs.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 metaballsMeta = {\n maxColorCount: 8,\n maxBallsCount: 20,\n} as const;\n\n/**\n * Metaballs (circular shapes with gooey effect applied)\n * The artwork by Ksenia Kondrashova\n *\n * Uniforms include:\n * - uColors (vec4[]): Input RGBA colors\n * - uColorsCount (float): Number of active colors (`uColors` length)\n * - u_count (float)\n * - u_size (float)\n */\nexport const metaballsFragmentShader: string = `#version 300 es\nprecision highp float;\n\nuniform float u_time;\n\nuniform vec4 u_colors[${metaballsMeta.maxColorCount}];\nuniform float u_colorsCount;\nuniform float u_size;\nuniform float u_sizeRange;\nuniform float u_count;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n\nfloat hash(float x) {\n return fract(sin(x) * 43758.5453123);\n}\nfloat noise(float x) {\n float i = floor(x);\n float f = fract(x);\n float u = f * f * (3.0 - 2.0 * f);\n return mix(hash(i), hash(i + 1.0), u);\n}\n\nfloat getBallShape(vec2 uv, vec2 c, float p) {\n float s = .5 * length(uv - c);\n s = 1. - clamp(s, 0., 1.);\n s = pow(s, p);\n return s;\n}\n\nvoid main() {\n vec2 shape_uv = v_objectUV;\n\n shape_uv += .5;\n\n float t = .2 * u_time + 1.;\n\n vec3 totalColor = vec3(0.);\n float totalShape = 0.;\n float totalOpacity = 0.;\n \n for (int i = 0; i < ${metaballsMeta.maxBallsCount}; i++) {\n if (i >= int(ceil(u_count))) break;\n \n float idxFract = float(i) / float(${metaballsMeta.maxBallsCount});\n float angle = TWO_PI * idxFract;\n \n float speed = 1. - .2 * idxFract;\n float noiseX = noise(angle * 10. + float(i) + t * speed);\n float noiseY = noise(angle * 20. + float(i) - t * speed);\n \n vec2 pos = vec2(.5) + 1e-4 + .9 * (vec2(noiseX, noiseY) - .5);\n \n int safeIndex = i % int(u_colorsCount + 0.5);\n vec4 ballColor = u_colors[safeIndex];\n ballColor.rgb *= ballColor.a;\n\n float sizeFrac = 1.;\n if (float(i) > floor(u_count - 1.)) {\n sizeFrac *= fract(u_count);\n }\n\n float shape = getBallShape(shape_uv, pos, 50. - 30. * u_size * sizeFrac);\n shape = smoothstep(0., 1., shape);\n\n totalColor += ballColor.rgb * shape;\n totalShape += shape;\n totalOpacity += ballColor.a * shape;\n }\n\n totalColor /= max(totalShape, 1e-4);\n totalOpacity /= max(totalShape, 1e-4);\n\n float edge_width = fwidth(totalShape);\n float finalShape = smoothstep(.4, .4 + edge_width, totalShape);\n\n vec3 color = totalColor * finalShape;\n float opacity = totalOpacity * finalShape;\n\n if (opacity < .005) {\n discard;\n }\n\n ${colorBandingFix}\n\n fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface MetaballsUniforms extends ShaderSizingUniforms {\n u_colors: vec4[];\n u_colorsCount: number;\n u_count: number;\n u_size: number;\n}\n\nexport interface MetaballsParams extends ShaderSizingParams, ShaderMotionParams {\n colors?: string[];\n count?: number;\n size?: number;\n}\n"],
|
|
5
|
+
"mappings": ";;;;;AAEA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,uBAAuB;AAEpC,MAAM,gBAAgB;AAAA,EAC3B,eAAe;AAAA,EACf,eAAe;AACjB;AAYO,MAAM,0BAAkC;AAAA;AAAA;AAAA;AAAA;AAAA,wBAKvB,cAAc,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMjD,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,wBA8Ba,cAAc,aAAa;AAAA;AAAA;AAAA,wCAGX,cAAc,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAuC/D,eAAe;AAAA;AAAA;AAAA;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,18 +1,23 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
u_colorFront: [number, number, number, number];
|
|
4
|
-
u_colorBack: [number, number, number, number];
|
|
5
|
-
u_brightness: number;
|
|
6
|
-
};
|
|
1
|
+
import type { ShaderMotionParams } from '../shader-mount';
|
|
2
|
+
import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing';
|
|
7
3
|
/**
|
|
8
4
|
* Neuro Noise Pattern
|
|
9
5
|
* The original artwork: https://codepen.io/ksenia-k/full/vYwgrWv by Ksenia Kondrashova
|
|
10
6
|
* Renders a fractal-like structure made of several layers of since-arches
|
|
11
7
|
*
|
|
12
8
|
* Uniforms include:
|
|
13
|
-
* u_scale - the scale applied to user space
|
|
14
9
|
* u_colorFront - the front color of pattern
|
|
15
10
|
* u_colorBack - the back color of pattern
|
|
16
11
|
* u_brightness - the power (brightness) of pattern lines
|
|
17
12
|
*/
|
|
18
|
-
export declare const neuroNoiseFragmentShader
|
|
13
|
+
export declare const neuroNoiseFragmentShader: string;
|
|
14
|
+
export interface NeuroNoiseUniforms extends ShaderSizingUniforms {
|
|
15
|
+
u_colorFront: [number, number, number, number];
|
|
16
|
+
u_colorBack: [number, number, number, number];
|
|
17
|
+
u_brightness: number;
|
|
18
|
+
}
|
|
19
|
+
export interface NeuroNoiseParams extends ShaderSizingParams, ShaderMotionParams {
|
|
20
|
+
colorFront?: string;
|
|
21
|
+
colorBack?: string;
|
|
22
|
+
brightness?: number;
|
|
23
|
+
}
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
|
2
|
+
* Paper Shaders *
|
|
3
|
+
* https://github.com/paper-design/shaders *
|
|
4
|
+
* * * * * * * * * * * * * * * * * * * * * * * * * * * */
|
|
5
|
+
|
|
6
|
+
import { sizingVariablesDeclaration } from "../shader-sizing";
|
|
7
|
+
import { declareRotate, colorBandingFix } from "../shader-utils";
|
|
8
|
+
const neuroNoiseFragmentShader = `#version 300 es
|
|
9
|
+
precision highp float;
|
|
10
|
+
|
|
11
|
+
uniform float u_time;
|
|
12
|
+
uniform vec2 u_resolution;
|
|
13
|
+
uniform float u_pixelRatio;
|
|
14
|
+
|
|
15
|
+
uniform vec4 u_colorFront;
|
|
16
|
+
uniform vec4 u_colorBack;
|
|
17
|
+
uniform float u_brightness;
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
${sizingVariablesDeclaration}
|
|
21
|
+
|
|
22
|
+
out vec4 fragColor;
|
|
23
|
+
|
|
24
|
+
${declareRotate}
|
|
25
|
+
|
|
26
|
+
float neuro_shape(vec2 uv, float t) {
|
|
27
|
+
vec2 sine_acc = vec2(0.);
|
|
28
|
+
vec2 res = vec2(0.);
|
|
29
|
+
float scale = 8.;
|
|
30
|
+
|
|
31
|
+
for (int j = 0; j < 15; j++) {
|
|
32
|
+
uv = rotate(uv, 1.);
|
|
33
|
+
sine_acc = rotate(sine_acc, 1.);
|
|
34
|
+
vec2 layer = uv * scale + float(j) + sine_acc - t;
|
|
35
|
+
sine_acc += sin(layer);
|
|
36
|
+
res += (.5 + .5 * cos(layer)) / scale;
|
|
37
|
+
scale *= (1.2);
|
|
38
|
+
}
|
|
39
|
+
return res.x + res.y;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
void main() {
|
|
43
|
+
vec2 shape_uv = v_patternUV;
|
|
44
|
+
|
|
45
|
+
shape_uv *= .002;
|
|
46
|
+
|
|
47
|
+
float t = .5 * u_time;
|
|
48
|
+
|
|
49
|
+
float noise = neuro_shape(shape_uv, t);
|
|
50
|
+
|
|
51
|
+
noise = u_brightness * pow(noise, 3.);
|
|
52
|
+
noise += pow(noise, 12.);
|
|
53
|
+
noise = max(.0, noise - .5);
|
|
54
|
+
|
|
55
|
+
vec3 color = mix(u_colorBack.rgb * u_colorBack.a, u_colorFront.rgb * u_colorFront.a, noise);
|
|
56
|
+
float opacity = mix(u_colorBack.a, u_colorFront.a, noise);
|
|
57
|
+
|
|
58
|
+
${colorBandingFix}
|
|
59
|
+
|
|
60
|
+
fragColor = vec4(color, opacity);
|
|
61
|
+
}
|
|
62
|
+
`;
|
|
63
|
+
export {
|
|
64
|
+
neuroNoiseFragmentShader
|
|
65
|
+
};
|
|
66
|
+
//# sourceMappingURL=neuro-noise.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/shaders/neuro-noise.ts"],
|
|
4
|
+
"sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing';\nimport { declareRotate, colorBandingFix } from '../shader-utils';\n\n/**\n * Neuro Noise Pattern\n * The original artwork: https://codepen.io/ksenia-k/full/vYwgrWv by Ksenia Kondrashova\n * Renders a fractal-like structure made of several layers of since-arches\n *\n * Uniforms include:\n * u_colorFront - the front color of pattern\n * u_colorBack - the back color of pattern\n * u_brightness - the power (brightness) of pattern lines\n */\nexport const neuroNoiseFragmentShader: string = `#version 300 es\nprecision highp float;\n\nuniform float u_time;\nuniform vec2 u_resolution;\nuniform float u_pixelRatio;\n\nuniform vec4 u_colorFront;\nuniform vec4 u_colorBack;\nuniform float u_brightness;\n\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declareRotate}\n\nfloat neuro_shape(vec2 uv, float t) {\n vec2 sine_acc = vec2(0.);\n vec2 res = vec2(0.);\n float scale = 8.;\n\n for (int j = 0; j < 15; j++) {\n uv = rotate(uv, 1.);\n sine_acc = rotate(sine_acc, 1.);\n vec2 layer = uv * scale + float(j) + sine_acc - t;\n sine_acc += sin(layer);\n res += (.5 + .5 * cos(layer)) / scale;\n scale *= (1.2);\n }\n return res.x + res.y;\n}\n\nvoid main() {\n vec2 shape_uv = v_patternUV;\n\n shape_uv *= .002;\n\n float t = .5 * u_time;\n\n float noise = neuro_shape(shape_uv, t);\n\n noise = u_brightness * pow(noise, 3.);\n noise += pow(noise, 12.);\n noise = max(.0, noise - .5);\n\n vec3 color = mix(u_colorBack.rgb * u_colorBack.a, u_colorFront.rgb * u_colorFront.a, noise);\n float opacity = mix(u_colorBack.a, u_colorFront.a, noise);\n \n ${colorBandingFix}\n\n fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface NeuroNoiseUniforms extends ShaderSizingUniforms {\n u_colorFront: [number, number, number, number];\n u_colorBack: [number, number, number, number];\n u_brightness: number;\n}\n\nexport interface NeuroNoiseParams extends ShaderSizingParams, ShaderMotionParams {\n colorFront?: string;\n colorBack?: string;\n brightness?: number;\n}\n"],
|
|
5
|
+
"mappings": ";;;;;AACA,SAAS,kCAAsF;AAC/F,SAAS,eAAe,uBAAuB;AAYxC,MAAM,2BAAmC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAY9C,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAkCX,eAAe;AAAA;AAAA;AAAA;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,21 +1,14 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
u_color: [number, number, number, number];
|
|
4
|
-
u_proportion: number;
|
|
5
|
-
u_softness: number;
|
|
6
|
-
u_octaveCount: number;
|
|
7
|
-
u_persistence: number;
|
|
8
|
-
u_lacunarity: number;
|
|
9
|
-
};
|
|
1
|
+
import type { ShaderMotionParams } from '../shader-mount';
|
|
2
|
+
import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing';
|
|
10
3
|
/**
|
|
11
|
-
* 3d Perlin noise with exposed parameters
|
|
4
|
+
* 3d Perlin noise with exposed parameters
|
|
12
5
|
* Based on https://www.shadertoy.com/view/NlSGDz
|
|
13
6
|
*
|
|
14
7
|
* Uniforms include:
|
|
15
|
-
*
|
|
16
|
-
*
|
|
17
|
-
* u_proportion (0 .. 1) - the proportion between u_color1 and
|
|
18
|
-
* u_softness - the sharpness of the transition between u_color1 and
|
|
8
|
+
* u_color1 - the first mixed color
|
|
9
|
+
* u_color2 - the second mixed color
|
|
10
|
+
* u_proportion (0 .. 1) - the proportion between u_color1 and u_color2;
|
|
11
|
+
* u_softness - the sharpness of the transition between u_color1 and u_color2 in the noise output
|
|
19
12
|
* u_octaveCount - the number of octaves for Perlin noise;
|
|
20
13
|
* higher values increase the complexity of the noise
|
|
21
14
|
* u_persistence (0 .. 1) - the amplitude of each successive octave of the noise;
|
|
@@ -23,4 +16,22 @@ export type PerlinNoiseUniforms = {
|
|
|
23
16
|
* u_lacunarity - the frequency of each successive octave of the noise;
|
|
24
17
|
* higher values increase the detail
|
|
25
18
|
*/
|
|
26
|
-
export declare const perlinNoiseFragmentShader
|
|
19
|
+
export declare const perlinNoiseFragmentShader: string;
|
|
20
|
+
export interface PerlinNoiseUniforms extends ShaderSizingUniforms {
|
|
21
|
+
u_color1: [number, number, number, number];
|
|
22
|
+
u_color2: [number, number, number, number];
|
|
23
|
+
u_proportion: number;
|
|
24
|
+
u_softness: number;
|
|
25
|
+
u_octaveCount: number;
|
|
26
|
+
u_persistence: number;
|
|
27
|
+
u_lacunarity: number;
|
|
28
|
+
}
|
|
29
|
+
export interface PerlinNoiseParams extends ShaderSizingParams, ShaderMotionParams {
|
|
30
|
+
color1?: string;
|
|
31
|
+
color2?: string;
|
|
32
|
+
proportion?: number;
|
|
33
|
+
softness?: number;
|
|
34
|
+
octaveCount?: number;
|
|
35
|
+
persistence?: number;
|
|
36
|
+
lacunarity?: number;
|
|
37
|
+
}
|
|
@@ -0,0 +1,193 @@
|
|
|
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
|
|
@@ -0,0 +1,7 @@
|
|
|
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
|
+
}
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import type { vec4 } from '../types';
|
|
2
|
+
import type { ShaderMotionParams } from '../shader-mount';
|
|
3
|
+
import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing';
|
|
4
|
+
export declare const pulsingBorderMeta: {
|
|
5
|
+
readonly maxColorCount: 5;
|
|
6
|
+
readonly maxSpotsPerColor: 5;
|
|
7
|
+
};
|
|
8
|
+
/**
|
|
9
|
+
* Pulsing Border Pattern with Smoke Effect
|
|
10
|
+
* This shader creates a rounded border mask with multiple color spots
|
|
11
|
+
* traveling along the border
|
|
12
|
+
*
|
|
13
|
+
* Uniforms include:
|
|
14
|
+
* u_colorBack - The background color of the pattern
|
|
15
|
+
* u_colors - An array of colors for the pulsing spots (with up to `u_colorsCount` entries)
|
|
16
|
+
* u_colorsCount - The number of colors used in the pattern
|
|
17
|
+
* u_roundness - The roundness of the border corners
|
|
18
|
+
* u_thickness - The thickness of the border
|
|
19
|
+
* u_softness - The blur around the border edges
|
|
20
|
+
* u_intensity - The intensity multiplier for the pulsing effect
|
|
21
|
+
* u_spotSize - The size of the color spots
|
|
22
|
+
* u_spotsPerColor - The number of spots for each color (not all the spots are visible all the time)
|
|
23
|
+
* u_pulse - A multiplier for the pulsing strength (pulsing signal taken from the u_pulseTexture)
|
|
24
|
+
* u_smoke - The strength of the smoke effect (the noise aroung the border)
|
|
25
|
+
*/
|
|
26
|
+
export declare const pulsingBorderFragmentShader: string;
|
|
27
|
+
export interface PulsingBorderUniforms extends ShaderSizingUniforms {
|
|
28
|
+
u_colorBack: [number, number, number, number];
|
|
29
|
+
u_colors: vec4[];
|
|
30
|
+
u_colorsCount: number;
|
|
31
|
+
u_roundness: number;
|
|
32
|
+
u_thickness: number;
|
|
33
|
+
u_softness: number;
|
|
34
|
+
u_intensity: number;
|
|
35
|
+
u_spotsPerColor: number;
|
|
36
|
+
u_spotSize: number;
|
|
37
|
+
u_pulse: number;
|
|
38
|
+
u_smoke: number;
|
|
39
|
+
u_smokeSize: number;
|
|
40
|
+
u_pulseTexture?: HTMLImageElement;
|
|
41
|
+
}
|
|
42
|
+
export interface PulsingBorderParams extends ShaderSizingParams, ShaderMotionParams {
|
|
43
|
+
colorBack?: string;
|
|
44
|
+
colors?: string[];
|
|
45
|
+
roundness?: number;
|
|
46
|
+
thickness?: number;
|
|
47
|
+
softness?: number;
|
|
48
|
+
intensity?: number;
|
|
49
|
+
spotsPerColor?: number;
|
|
50
|
+
spotSize?: number;
|
|
51
|
+
pulse?: number;
|
|
52
|
+
smoke?: number;
|
|
53
|
+
smokeSize?: number;
|
|
54
|
+
}
|