@paper-design/shaders 0.0.31 → 0.0.32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (75) hide show
  1. package/dist/index.d.ts +23 -25
  2. package/dist/shaders/dithering.d.ts +8 -8
  3. package/dist/shaders/dot-grid.d.ts +1 -1
  4. package/dist/shaders/dot-orbit.d.ts +3 -6
  5. package/dist/shaders/god-rays.d.ts +6 -9
  6. package/dist/shaders/grain-gradient.d.ts +3 -5
  7. package/dist/shaders/liquid-metal.d.ts +12 -27
  8. package/dist/shaders/mesh-gradient.d.ts +3 -3
  9. package/dist/shaders/metaballs.d.ts +3 -6
  10. package/dist/shaders/neuro-noise.d.ts +6 -12
  11. package/dist/shaders/perlin-noise.d.ts +10 -10
  12. package/dist/shaders/pulsing-border.d.ts +3 -3
  13. package/dist/shaders/simplex-noise.d.ts +3 -3
  14. package/dist/shaders/smoke-ring.d.ts +3 -3
  15. package/dist/shaders/spiral.d.ts +8 -8
  16. package/dist/shaders/swirl.d.ts +3 -5
  17. package/dist/shaders/voronoi.d.ts +8 -8
  18. package/dist/shaders/warp.d.ts +3 -3
  19. package/dist/shaders/waves.d.ts +7 -7
  20. package/package.json +2 -2
  21. package/dist/get-shader-color-from-string.js +0 -93
  22. package/dist/get-shader-color-from-string.js.map +0 -7
  23. package/dist/get-shader-noise-texture.js +0 -23
  24. package/dist/get-shader-noise-texture.js.map +0 -7
  25. package/dist/index.js +0 -118
  26. package/dist/index.js.map +0 -7
  27. package/dist/shader-color-spaces.js +0 -96
  28. package/dist/shader-color-spaces.js.map +0 -7
  29. package/dist/shader-mount.js +0 -582
  30. package/dist/shader-mount.js.map +0 -7
  31. package/dist/shader-sizing.js +0 -193
  32. package/dist/shader-sizing.js.map +0 -7
  33. package/dist/shader-utils.js +0 -59
  34. package/dist/shader-utils.js.map +0 -7
  35. package/dist/shaders/color-panels.d.ts +0 -48
  36. package/dist/shaders/color-panels.js +0 -213
  37. package/dist/shaders/color-panels.js.map +0 -7
  38. package/dist/shaders/dithering.js +0 -221
  39. package/dist/shaders/dithering.js.map +0 -7
  40. package/dist/shaders/dot-grid.js +0 -107
  41. package/dist/shaders/dot-grid.js.map +0 -7
  42. package/dist/shaders/dot-orbit.js +0 -124
  43. package/dist/shaders/dot-orbit.js.map +0 -7
  44. package/dist/shaders/god-rays.js +0 -133
  45. package/dist/shaders/god-rays.js.map +0 -7
  46. package/dist/shaders/grain-gradient.js +0 -243
  47. package/dist/shaders/grain-gradient.js.map +0 -7
  48. package/dist/shaders/liquid-metal.js +0 -221
  49. package/dist/shaders/liquid-metal.js.map +0 -7
  50. package/dist/shaders/mesh-gradient.js +0 -97
  51. package/dist/shaders/mesh-gradient.js.map +0 -7
  52. package/dist/shaders/metaballs.js +0 -110
  53. package/dist/shaders/metaballs.js.map +0 -7
  54. package/dist/shaders/neuro-noise.js +0 -81
  55. package/dist/shaders/neuro-noise.js.map +0 -7
  56. package/dist/shaders/perlin-noise.js +0 -201
  57. package/dist/shaders/perlin-noise.js.map +0 -7
  58. package/dist/shaders/pulsing-border.js +0 -218
  59. package/dist/shaders/pulsing-border.js.map +0 -7
  60. package/dist/shaders/simplex-noise.js +0 -103
  61. package/dist/shaders/simplex-noise.js.map +0 -7
  62. package/dist/shaders/smoke-ring.js +0 -141
  63. package/dist/shaders/smoke-ring.js.map +0 -7
  64. package/dist/shaders/spiral.js +0 -83
  65. package/dist/shaders/spiral.js.map +0 -7
  66. package/dist/shaders/swirl.js +0 -91
  67. package/dist/shaders/swirl.js.map +0 -7
  68. package/dist/shaders/voronoi.js +0 -143
  69. package/dist/shaders/voronoi.js.map +0 -7
  70. package/dist/shaders/warp.js +0 -128
  71. package/dist/shaders/warp.js.map +0 -7
  72. package/dist/shaders/waves.js +0 -68
  73. package/dist/shaders/waves.js.map +0 -7
  74. package/dist/types.js +0 -6
  75. package/dist/types.js.map +0 -7
@@ -1,110 +0,0 @@
1
- /* * * * * * * * * * * * * * * * * * * * * * * * * * * *
2
- * Paper Shaders *
3
- * https://github.com/paper-design/shaders *
4
- * * * * * * * * * * * * * * * * * * * * * * * * * * * */
5
-
6
- import { sizingVariablesDeclaration } from "../shader-sizing.js";
7
- import { declarePI, colorBandingFix } from "../shader-utils.js";
8
- const metaballsMeta = {
9
- maxColorCount: 8,
10
- maxBallsCount: 20
11
- };
12
- const metaballsFragmentShader = `#version 300 es
13
- precision mediump float;
14
-
15
- uniform float u_time;
16
-
17
- uniform vec4 u_colorBack;
18
- uniform vec4 u_colors[${metaballsMeta.maxColorCount}];
19
- uniform float u_colorsCount;
20
- uniform float u_size;
21
- uniform float u_sizeRange;
22
- uniform float u_count;
23
-
24
- ${sizingVariablesDeclaration}
25
-
26
- out vec4 fragColor;
27
-
28
- ${declarePI}
29
-
30
- float hash(float x) {
31
- return fract(sin(x) * 43758.5453123);
32
- }
33
- float noise(float x) {
34
- float i = floor(x);
35
- float f = fract(x);
36
- float u = f * f * (3.0 - 2.0 * f);
37
- return mix(hash(i), hash(i + 1.0), u);
38
- }
39
-
40
- float getBallShape(vec2 uv, vec2 c, float p) {
41
- float s = .5 * length(uv - c);
42
- s = 1. - clamp(s, 0., 1.);
43
- s = pow(s, p);
44
- return s;
45
- }
46
-
47
- void main() {
48
- vec2 shape_uv = v_objectUV;
49
-
50
- shape_uv += .5;
51
-
52
- float t = .2 * u_time + 1.;
53
-
54
- vec3 totalColor = vec3(0.);
55
- float totalShape = 0.;
56
- float totalOpacity = 0.;
57
-
58
- for (int i = 0; i < ${metaballsMeta.maxBallsCount}; i++) {
59
- if (i >= int(ceil(u_count))) break;
60
-
61
- float idxFract = float(i) / float(${metaballsMeta.maxBallsCount});
62
- float angle = TWO_PI * idxFract;
63
-
64
- float speed = 1. - .2 * idxFract;
65
- float noiseX = noise(angle * 10. + float(i) + t * speed);
66
- float noiseY = noise(angle * 20. + float(i) - t * speed);
67
-
68
- vec2 pos = vec2(.5) + 1e-4 + .9 * (vec2(noiseX, noiseY) - .5);
69
-
70
- int safeIndex = i % int(u_colorsCount + 0.5);
71
- vec4 ballColor = u_colors[safeIndex];
72
- ballColor.rgb *= ballColor.a;
73
-
74
- float sizeFrac = 1.;
75
- if (float(i) > floor(u_count - 1.)) {
76
- sizeFrac *= fract(u_count);
77
- }
78
-
79
- float shape = getBallShape(shape_uv, pos, 45. - 30. * u_size * sizeFrac);
80
- shape *= pow(u_size, .2);
81
- shape = smoothstep(0., 1., shape);
82
-
83
- totalColor += ballColor.rgb * shape;
84
- totalShape += shape;
85
- totalOpacity += ballColor.a * shape;
86
- }
87
-
88
- totalColor /= max(totalShape, 1e-4);
89
- totalOpacity /= max(totalShape, 1e-4);
90
-
91
- float edge_width = fwidth(totalShape);
92
- float finalShape = smoothstep(.4, .4 + edge_width, totalShape);
93
-
94
- vec3 color = totalColor * finalShape;
95
- float opacity = totalOpacity * finalShape;
96
-
97
- vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
98
- color = color + bgColor * (1. - opacity);
99
- opacity = opacity + u_colorBack.a * (1. - opacity);
100
-
101
- ${colorBandingFix}
102
-
103
- fragColor = vec4(color, opacity);
104
- }
105
- `;
106
- export {
107
- metaballsFragmentShader,
108
- metaballsMeta
109
- };
110
- //# sourceMappingURL=metaballs.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../src/shaders/metaballs.ts"],
4
- "sourcesContent": ["import type { vec4 } from '../types.js';\nimport type { ShaderMotionParams } from '../shader-mount.js';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { declarePI, colorBandingFix } from '../shader-utils.js';\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 * - u_colorBack: the background color of the scene\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 mediump float;\n\nuniform float u_time;\n\nuniform vec4 u_colorBack;\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, 45. - 30. * u_size * sizeFrac);\n shape *= pow(u_size, .2);\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 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 MetaballsUniforms extends ShaderSizingUniforms {\n u_colorBack: [number, number, number, number];\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 colorBack?: string;\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;AAaO,MAAM,0BAAkC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMvB,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;AAAA,IAwC/D,eAAe;AAAA;AAAA;AAAA;AAAA;",
6
- "names": []
7
- }
@@ -1,81 +0,0 @@
1
- /* * * * * * * * * * * * * * * * * * * * * * * * * * * *
2
- * Paper Shaders *
3
- * https://github.com/paper-design/shaders *
4
- * * * * * * * * * * * * * * * * * * * * * * * * * * * */
5
-
6
- import { sizingVariablesDeclaration } from "../shader-sizing.js";
7
- import { declareRotate, colorBandingFix } from "../shader-utils.js";
8
- const neuroNoiseFragmentShader = `#version 300 es
9
- precision mediump 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_colorMid;
17
- uniform vec4 u_colorBack;
18
- uniform float u_brightness;
19
- uniform float u_contrast;
20
-
21
-
22
- ${sizingVariablesDeclaration}
23
-
24
- out vec4 fragColor;
25
-
26
- ${declareRotate}
27
-
28
- float neuroShape(vec2 uv, float t) {
29
- vec2 sine_acc = vec2(0.);
30
- vec2 res = vec2(0.);
31
- float scale = 8.;
32
-
33
- for (int j = 0; j < 15; j++) {
34
- uv = rotate(uv, 1.);
35
- sine_acc = rotate(sine_acc, 1.);
36
- vec2 layer = uv * scale + float(j) + sine_acc - t;
37
- sine_acc += sin(layer);
38
- res += (.5 + .5 * cos(layer)) / scale;
39
- scale *= (1.2);
40
- }
41
- return res.x + res.y;
42
- }
43
-
44
- void main() {
45
- vec2 shape_uv = v_patternUV;
46
-
47
- shape_uv *= .0013;
48
-
49
- float t = .5 * u_time;
50
-
51
- float noise = neuroShape(shape_uv, t);
52
-
53
- noise = (1. + u_brightness) * pow(noise, 2.);
54
- noise = pow(noise, .7 + 6. * u_contrast);
55
- noise = min(1.4, noise);
56
-
57
- float blend = smoothstep(0.7, 1.4, noise);
58
-
59
- vec4 frontC = u_colorFront;
60
- frontC.rgb *= frontC.a;
61
- vec4 midC = u_colorMid;
62
- midC.rgb *= midC.a;
63
- vec4 blendFront = mix(midC, frontC, blend);
64
-
65
- float safeNoise = max(noise, 0.0);
66
- vec3 color = blendFront.rgb * safeNoise;
67
- float opacity = clamp(blendFront.a * safeNoise, 0., 1.);
68
-
69
- vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
70
- color = color + bgColor * (1. - opacity);
71
- opacity = opacity + u_colorBack.a * (1. - opacity);
72
-
73
- ${colorBandingFix}
74
-
75
- fragColor = vec4(color, opacity);
76
- }
77
- `;
78
- export {
79
- neuroNoiseFragmentShader
80
- };
81
- //# sourceMappingURL=neuro-noise.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../src/shaders/neuro-noise.ts"],
4
- "sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount.js';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { declareRotate, colorBandingFix } from '../shader-utils.js';\n\n/**\n * Neuro Noise Pattern\n * Original algo: https://x.com/zozuar/status/1625182758745128981/\n * Renders a fractal-like structure made of several layers of since-arches\n *\n * Uniforms include:\n * u_colorFront - the highlights (overexposed noise areas)\n * u_colorMid - the base color of pattern\n * u_colorBack - the backgrond color of pattern\n * u_brightness - increase/decrease the weight of strong lines\n * u_contrast - show/hide the weak pattern lines\n */\nexport const neuroNoiseFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\nuniform vec2 u_resolution;\nuniform float u_pixelRatio;\n\nuniform vec4 u_colorFront;\nuniform vec4 u_colorMid;\nuniform vec4 u_colorBack;\nuniform float u_brightness;\nuniform float u_contrast;\n\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declareRotate}\n\nfloat neuroShape(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 *= .0013;\n\n float t = .5 * u_time;\n\n float noise = neuroShape(shape_uv, t);\n\n noise = (1. + u_brightness) * pow(noise, 2.);\n noise = pow(noise, .7 + 6. * u_contrast);\n noise = min(1.4, noise);\n\n float blend = smoothstep(0.7, 1.4, noise);\n\n vec4 frontC = u_colorFront;\n frontC.rgb *= frontC.a;\n vec4 midC = u_colorMid;\n midC.rgb *= midC.a;\n vec4 blendFront = mix(midC, frontC, blend);\n\n float safeNoise = max(noise, 0.0);\n vec3 color = blendFront.rgb * safeNoise;\n float opacity = clamp(blendFront.a * safeNoise, 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 NeuroNoiseUniforms extends ShaderSizingUniforms {\n u_colorFront: [number, number, number, number];\n u_colorMid: [number, number, number, number];\n u_colorBack: [number, number, number, number];\n u_brightness: number;\n u_contrast: number;\n}\n\nexport interface NeuroNoiseParams extends ShaderSizingParams, ShaderMotionParams {\n colorFront?: string;\n colorMid?: string;\n colorBack?: string;\n brightness?: number;\n contrast?: number;\n}\n"],
5
- "mappings": ";;;;;AACA,SAAS,kCAAsF;AAC/F,SAAS,eAAe,uBAAuB;AAcxC,MAAM,2BAAmC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAc9C,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IA+CX,eAAe;AAAA;AAAA;AAAA;AAAA;",
6
- "names": []
7
- }
@@ -1,201 +0,0 @@
1
- /* * * * * * * * * * * * * * * * * * * * * * * * * * * *
2
- * Paper Shaders *
3
- * https://github.com/paper-design/shaders *
4
- * * * * * * * * * * * * * * * * * * * * * * * * * * * */
5
-
6
- import { sizingVariablesDeclaration } from "../shader-sizing.js";
7
- import { declarePI, colorBandingFix } from "../shader-utils.js";
8
- const perlinNoiseFragmentShader = `#version 300 es
9
- precision mediump float;
10
-
11
- uniform float u_time;
12
-
13
- uniform vec4 u_colorFront;
14
- uniform vec4 u_colorBack;
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 uv = v_patternUV;
162
-
163
- uv *= .005;
164
- float t = .2 * u_time;
165
-
166
- vec3 p = vec3(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 res = smoothstep(
177
- .5 - .5 * sharpness - smooth_w,
178
- .5 + .5 * sharpness + smooth_w,
179
- noise_normalized
180
- );
181
-
182
- vec3 fgColor = u_colorFront.rgb * u_colorFront.a;
183
- float fgOpacity = u_colorFront.a;
184
- vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
185
- float bgOpacity = u_colorBack.a;
186
-
187
- vec3 color = fgColor * res;
188
- float opacity = fgOpacity * res;
189
-
190
- color += bgColor * (1. - opacity);
191
- opacity += bgOpacity * (1. - opacity);
192
-
193
- ${colorBandingFix}
194
-
195
- fragColor = vec4(color, opacity);
196
- }
197
- `;
198
- export {
199
- perlinNoiseFragmentShader
200
- };
201
- //# 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.js';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { declarePI, colorBandingFix } from '../shader-utils.js';\n\n/**\n * 3d Perlin noise with exposed parameters\n * Based on https://www.shadertoy.com/view/NlSGDz\n *\n * Uniforms include:\n * u_colorFront - the first mixed color\n * u_colorBack - the second mixed color\n * u_proportion (0 .. 1) - the proportion between u_colorFront and u_colorBack;\n * u_softness - the sharpness of the transition between u_colorFront and u_colorBack 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 mediump float;\n\nuniform float u_time;\n\nuniform vec4 u_colorFront;\nuniform vec4 u_colorBack;\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 uv = v_patternUV;\n\n uv *= .005;\n float t = .2 * u_time;\n\n vec3 p = vec3(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 res = smoothstep(\n .5 - .5 * sharpness - smooth_w,\n .5 + .5 * sharpness + smooth_w,\n noise_normalized\n );\n\n vec3 fgColor = u_colorFront.rgb * u_colorFront.a;\n float fgOpacity = u_colorFront.a;\n vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\n float bgOpacity = u_colorBack.a;\n\n vec3 color = fgColor * res;\n float opacity = fgOpacity * res;\n\n color += bgColor * (1. - opacity);\n opacity += bgOpacity * (1. - opacity);\n\n ${colorBandingFix}\n\n fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface PerlinNoiseUniforms extends ShaderSizingUniforms {\n u_colorFront: [number, number, number, number];\n u_colorBack: [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 colorFront?: string;\n colorBack?: 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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAwKP,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.js";
7
- import { declarePI, colorBandingFix } from "../shader-utils.js";
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.js';\nimport type { ShaderMotionParams } from '../shader-mount.js';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { declarePI, colorBandingFix } from '../shader-utils.js';\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
- }