@paper-design/shaders 0.0.28 → 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.
Files changed (58) hide show
  1. package/dist/index.d.ts +2 -2
  2. package/dist/shader-mount.d.ts +5 -1
  3. package/dist/shader-sizing.d.ts +1 -1
  4. package/dist/shaders/dithering.d.ts +21 -7
  5. package/dist/shaders/grain-gradient.d.ts +12 -2
  6. package/package.json +2 -2
  7. package/dist/get-shader-color-from-string.js +0 -93
  8. package/dist/get-shader-color-from-string.js.map +0 -7
  9. package/dist/get-shader-noise-texture.js +0 -23
  10. package/dist/get-shader-noise-texture.js.map +0 -7
  11. package/dist/index.js +0 -97
  12. package/dist/index.js.map +0 -7
  13. package/dist/shader-color-spaces.js +0 -96
  14. package/dist/shader-color-spaces.js.map +0 -7
  15. package/dist/shader-mount.js +0 -568
  16. package/dist/shader-mount.js.map +0 -7
  17. package/dist/shader-sizing.js +0 -196
  18. package/dist/shader-sizing.js.map +0 -7
  19. package/dist/shader-utils.js +0 -59
  20. package/dist/shader-utils.js.map +0 -7
  21. package/dist/shaders/dithering.js +0 -197
  22. package/dist/shaders/dithering.js.map +0 -7
  23. package/dist/shaders/dot-grid.js +0 -100
  24. package/dist/shaders/dot-grid.js.map +0 -7
  25. package/dist/shaders/dot-orbit.js +0 -120
  26. package/dist/shaders/dot-orbit.js.map +0 -7
  27. package/dist/shaders/god-rays.js +0 -134
  28. package/dist/shaders/god-rays.js.map +0 -7
  29. package/dist/shaders/grain-gradient.js +0 -219
  30. package/dist/shaders/grain-gradient.js.map +0 -7
  31. package/dist/shaders/liquid-metal.js +0 -224
  32. package/dist/shaders/liquid-metal.js.map +0 -7
  33. package/dist/shaders/mesh-gradient.js +0 -97
  34. package/dist/shaders/mesh-gradient.js.map +0 -7
  35. package/dist/shaders/metaballs.js +0 -109
  36. package/dist/shaders/metaballs.js.map +0 -7
  37. package/dist/shaders/neuro-noise.js +0 -66
  38. package/dist/shaders/neuro-noise.js.map +0 -7
  39. package/dist/shaders/perlin-noise.js +0 -193
  40. package/dist/shaders/perlin-noise.js.map +0 -7
  41. package/dist/shaders/pulsing-border.js +0 -218
  42. package/dist/shaders/pulsing-border.js.map +0 -7
  43. package/dist/shaders/simplex-noise.js +0 -103
  44. package/dist/shaders/simplex-noise.js.map +0 -7
  45. package/dist/shaders/smoke-ring.js +0 -141
  46. package/dist/shaders/smoke-ring.js.map +0 -7
  47. package/dist/shaders/spiral.js +0 -75
  48. package/dist/shaders/spiral.js.map +0 -7
  49. package/dist/shaders/swirl.js +0 -80
  50. package/dist/shaders/swirl.js.map +0 -7
  51. package/dist/shaders/voronoi.js +0 -143
  52. package/dist/shaders/voronoi.js.map +0 -7
  53. package/dist/shaders/warp.js +0 -124
  54. package/dist/shaders/warp.js.map +0 -7
  55. package/dist/shaders/waves.js +0 -60
  56. package/dist/shaders/waves.js.map +0 -7
  57. package/dist/types.js +0 -6
  58. package/dist/types.js.map +0 -7
@@ -1,141 +0,0 @@
1
- /* * * * * * * * * * * * * * * * * * * * * * * * * * * *
2
- * Paper Shaders *
3
- * https://github.com/paper-design/shaders *
4
- * * * * * * * * * * * * * * * * * * * * * * * * * * * */
5
-
6
- import { sizingVariablesDeclaration } from "../shader-sizing";
7
- import { declarePI, declareRandom, colorBandingFix } from "../shader-utils";
8
- const smokeRingMeta = {
9
- maxColorCount: 10,
10
- maxNoiseIterations: 8
11
- };
12
- const smokeRingFragmentShader = `#version 300 es
13
- precision highp float;
14
-
15
- uniform float u_time;
16
-
17
- uniform sampler2D u_noiseTexture;
18
-
19
- uniform vec4 u_colorBack;
20
- uniform vec4 u_colors[${smokeRingMeta.maxColorCount}];
21
- uniform float u_colorsCount;
22
-
23
- uniform float u_noiseScale;
24
- uniform float u_thickness;
25
- uniform float u_radius;
26
- uniform float u_innerShape;
27
- uniform float u_noiseIterations;
28
-
29
- ${sizingVariablesDeclaration}
30
-
31
- out vec4 fragColor;
32
-
33
- ${declarePI}
34
- //$ {declareRandom}
35
-
36
- float random(vec2 p) {
37
- vec2 uv = floor(p) / 100. + .5;
38
- return texture(u_noiseTexture, uv).r;
39
- }
40
-
41
- float noise(vec2 st) {
42
- vec2 i = floor(st);
43
- vec2 f = fract(st);
44
- float a = random(i);
45
- float b = random(i + vec2(1.0, 0.0));
46
- float c = random(i + vec2(0.0, 1.0));
47
- float d = random(i + vec2(1.0, 1.0));
48
-
49
- // Smoothstep for interpolation
50
- vec2 u = f * f * (3.0 - 2.0 * f);
51
-
52
- // Do the interpolation as two nested mix operations
53
- // If you try to do this in one big operation, there's enough precision loss to be off by 1px at cell boundaries
54
- float x1 = mix(a, b, u.x);
55
- float x2 = mix(c, d, u.x);
56
- return mix(x1, x2, u.y);
57
-
58
- }
59
- float fbm(in vec2 n) {
60
- float total = 0.0, amplitude = .4;
61
- for (int i = 0; i < ${smokeRingMeta.maxNoiseIterations}; i++) {
62
- if (i >= int(u_noiseIterations)) break;
63
- total += noise(n) * amplitude;
64
- n *= 1.99;
65
- amplitude *= 0.65;
66
- }
67
- return total;
68
- }
69
-
70
- float getNoise(vec2 uv, vec2 pUv, float t) {
71
- float noiseLeft = fbm(pUv + .03 * t);
72
- pUv.x = mod(pUv.x, u_noiseScale * TWO_PI);
73
- float noiseRight = fbm(pUv + .03 * t);
74
- return mix(noiseRight, noiseLeft, smoothstep(-.25, .25, uv.x));
75
- }
76
-
77
- float getRingShape(vec2 uv) {
78
- float radius = u_radius;
79
- float thickness = u_thickness;
80
-
81
- float distance = length(uv);
82
- float ringValue = 1. - smoothstep(radius, radius + thickness, distance);
83
- ringValue *= smoothstep(radius - pow(u_innerShape, 3.) * thickness, radius, distance);
84
-
85
- return ringValue;
86
- }
87
-
88
- void main() {
89
- vec2 shape_uv = v_objectUV;
90
-
91
- float t = u_time;
92
-
93
- float cycleDuration = 3.;
94
- float localTime1 = mod(.1 * t + cycleDuration, 2. * cycleDuration);
95
- float localTime2 = mod(.1 * t, 2. * cycleDuration);
96
- float timeBlend = .5 + .5 * sin(.1 * t * PI / cycleDuration - .5 * PI);
97
-
98
- float atg = atan(shape_uv.y, shape_uv.x) + .001;
99
- float l = length(shape_uv);
100
- vec2 polar_uv1 = vec2(atg, localTime1 - (.5 * l) + 1. / pow(l, .5));
101
- polar_uv1 *= u_noiseScale;
102
- float noise1 = getNoise(shape_uv, polar_uv1, t);
103
-
104
- vec2 polar_uv2 = vec2(atg, localTime2 - (.5 * l) + 1. / pow(l, .5));
105
- polar_uv2 *= u_noiseScale;
106
- float noise2 = getNoise(shape_uv, polar_uv2, t);
107
-
108
- float noise = mix(noise1, noise2, timeBlend);
109
-
110
- shape_uv *= (.8 + 1.2 * noise);
111
-
112
- float ringShape = getRingShape(shape_uv);
113
-
114
- float mixer = pow(ringShape, 3.) * (u_colorsCount - 1.);
115
- vec4 gradient = u_colors[0];
116
- gradient.rgb *= gradient.a;
117
- for (int i = 1; i < ${smokeRingMeta.maxColorCount}; i++) {
118
- if (i >= int(u_colorsCount)) break;
119
- float localT = clamp(mixer - float(i - 1), 0., 1.);
120
- vec4 c = u_colors[i];
121
- c.rgb *= c.a;
122
- gradient = mix(gradient, c, localT);
123
- }
124
-
125
- float opacity = gradient.a * ringShape;
126
- opacity += u_colorBack.a;
127
-
128
- vec3 color = gradient.rgb * ringShape;
129
- color += u_colorBack.rgb * u_colorBack.a * (1. - ringShape);
130
- color += u_colorBack.rgb * u_colorBack.a * ringShape * (1. - gradient.a);
131
-
132
- ${colorBandingFix}
133
-
134
- fragColor = vec4(color, opacity);
135
- }
136
- `;
137
- export {
138
- smokeRingFragmentShader,
139
- smokeRingMeta
140
- };
141
- //# sourceMappingURL=smoke-ring.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../src/shaders/smoke-ring.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, declareRandom, colorBandingFix } from '../shader-utils';\n\nexport const smokeRingMeta = {\n maxColorCount: 10,\n maxNoiseIterations: 8,\n} as const;\n\n/**\n * Smoke Ring by Ksenia Kondrashova\n * Renders a fractional Brownian motion (fBm) noise over the\n * polar coordinates masked with ring shape\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) * u_noiseScale - the resolution of noise texture\n * - u_thickness (float): the thickness of the ring\n * - u_radius (float): the radius of the ring (u_radius = 0.5 to fit in contain mode)\n * - u_innerShape (float): if we fill the shape inside the radius (u_innerShape = 1 to render only the thickness)\n * - u_noiseIterations (float): how detailed is the noise (number of fbm layers)\n */\n\nexport const smokeRingFragmentShader: string = `#version 300 es\nprecision highp float;\n\nuniform float u_time;\n\nuniform sampler2D u_noiseTexture;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colors[${smokeRingMeta.maxColorCount}];\nuniform float u_colorsCount;\n\nuniform float u_noiseScale;\nuniform float u_thickness;\nuniform float u_radius;\nuniform float u_innerShape;\nuniform float u_noiseIterations;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n//$ {declareRandom}\n\nfloat random(vec2 p) {\n vec2 uv = floor(p) / 100. + .5;\n return texture(u_noiseTexture, uv).r;\n}\n\nfloat noise(vec2 st) {\n vec2 i = floor(st);\n vec2 f = fract(st);\n float a = random(i);\n float b = random(i + vec2(1.0, 0.0));\n float c = random(i + vec2(0.0, 1.0));\n float d = random(i + vec2(1.0, 1.0));\n\n // Smoothstep for interpolation\n vec2 u = f * f * (3.0 - 2.0 * f);\n\n // Do the interpolation as two nested mix operations\n // If you try to do this in one big operation, there's enough precision loss to be off by 1px at cell boundaries\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 fbm(in vec2 n) {\n float total = 0.0, amplitude = .4;\n for (int i = 0; i < ${smokeRingMeta.maxNoiseIterations}; i++) {\n if (i >= int(u_noiseIterations)) break;\n total += noise(n) * amplitude;\n n *= 1.99;\n amplitude *= 0.65;\n }\n return total;\n}\n\nfloat getNoise(vec2 uv, vec2 pUv, float t) {\n float noiseLeft = fbm(pUv + .03 * t);\n pUv.x = mod(pUv.x, u_noiseScale * TWO_PI);\n float noiseRight = fbm(pUv + .03 * t);\n return mix(noiseRight, noiseLeft, smoothstep(-.25, .25, uv.x));\n}\n\nfloat getRingShape(vec2 uv) {\n float radius = u_radius;\n float thickness = u_thickness;\n\n float distance = length(uv);\n float ringValue = 1. - smoothstep(radius, radius + thickness, distance);\n ringValue *= smoothstep(radius - pow(u_innerShape, 3.) * thickness, radius, distance);\n\n return ringValue;\n}\n\nvoid main() {\n vec2 shape_uv = v_objectUV;\n\n float t = u_time;\n\n float cycleDuration = 3.;\n float localTime1 = mod(.1 * t + cycleDuration, 2. * cycleDuration);\n float localTime2 = mod(.1 * t, 2. * cycleDuration);\n float timeBlend = .5 + .5 * sin(.1 * t * PI / cycleDuration - .5 * PI);\n\n float atg = atan(shape_uv.y, shape_uv.x) + .001;\n float l = length(shape_uv);\n vec2 polar_uv1 = vec2(atg, localTime1 - (.5 * l) + 1. / pow(l, .5));\n polar_uv1 *= u_noiseScale;\n float noise1 = getNoise(shape_uv, polar_uv1, t);\n\n vec2 polar_uv2 = vec2(atg, localTime2 - (.5 * l) + 1. / pow(l, .5));\n polar_uv2 *= u_noiseScale;\n float noise2 = getNoise(shape_uv, polar_uv2, t);\n\n float noise = mix(noise1, noise2, timeBlend);\n\n shape_uv *= (.8 + 1.2 * noise);\n\n float ringShape = getRingShape(shape_uv);\n\n float mixer = pow(ringShape, 3.) * (u_colorsCount - 1.);\n vec4 gradient = u_colors[0];\n gradient.rgb *= gradient.a;\n for (int i = 1; i < ${smokeRingMeta.maxColorCount}; i++) {\n if (i >= int(u_colorsCount)) break;\n float localT = clamp(mixer - float(i - 1), 0., 1.);\n vec4 c = u_colors[i];\n c.rgb *= c.a;\n gradient = mix(gradient, c, localT);\n }\n\n float opacity = gradient.a * ringShape;\n opacity += u_colorBack.a;\n\n vec3 color = gradient.rgb * ringShape;\n color += u_colorBack.rgb * u_colorBack.a * (1. - ringShape);\n color += u_colorBack.rgb * u_colorBack.a * ringShape * (1. - gradient.a);\n\n ${colorBandingFix}\n\n fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface SmokeRingUniforms extends ShaderSizingUniforms {\n u_colorBack: [number, number, number, number];\n u_colors: vec4[];\n u_colorsCount: number;\n u_noiseScale: number;\n u_thickness: number;\n u_radius: number;\n u_innerShape: number;\n u_noiseIterations: number;\n u_noiseTexture?: HTMLImageElement;\n}\n\nexport interface SmokeRingParams extends ShaderSizingParams, ShaderMotionParams {\n colorBack?: string;\n colors?: string[];\n noiseScale?: number;\n thickness?: number;\n radius?: number;\n innerShape?: number;\n noiseIterations?: number;\n}\n"],
5
- "mappings": ";;;;;AAEA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,eAAe,uBAAuB;AAEnD,MAAM,gBAAgB;AAAA,EAC3B,eAAe;AAAA,EACf,oBAAoB;AACtB;AAiBO,MAAM,0BAAkC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAQvB,cAAc,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASjD,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,wBA4Ba,cAAc,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAwDhC,cAAc,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAe/C,eAAe;AAAA;AAAA;AAAA;AAAA;",
6
- "names": []
7
- }
@@ -1,75 +0,0 @@
1
- /* * * * * * * * * * * * * * * * * * * * * * * * * * * *
2
- * Paper Shaders *
3
- * https://github.com/paper-design/shaders *
4
- * * * * * * * * * * * * * * * * * * * * * * * * * * * */
5
-
6
- import { sizingVariablesDeclaration } from "../shader-sizing";
7
- import { declareSimplexNoise, declarePI, colorBandingFix } from "../shader-utils";
8
- const spiralFragmentShader = `#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_density;
16
- uniform float u_distortion;
17
- uniform float u_strokeWidth;
18
- uniform float u_strokeCap;
19
- uniform float u_strokeTaper;
20
-
21
- uniform float u_noiseFrequency;
22
- uniform float u_noisePower;
23
- uniform float u_softness;
24
-
25
- ${sizingVariablesDeclaration}
26
-
27
- out vec4 fragColor;
28
-
29
- ${declarePI}
30
- ${declareSimplexNoise}
31
-
32
- void main() {
33
- vec2 shape_uv = v_patternUV * .02;
34
-
35
- float t = u_time;
36
-
37
- float l = length(shape_uv);
38
- float angle = atan(shape_uv.y, shape_uv.x) - 2. * t;
39
- float angle_norm = angle / TWO_PI;
40
-
41
- angle_norm += .125 * u_noisePower * snoise(.5 * u_noiseFrequency * shape_uv);
42
-
43
- float offset = pow(l, 1. - clamp(u_density, 0., 1.)) + angle_norm;
44
-
45
- float stripe_map = fract(offset);
46
- stripe_map -= .5 * u_strokeTaper * l;
47
-
48
- stripe_map += .25 * u_noisePower * snoise(u_noiseFrequency * shape_uv);
49
-
50
- float shape = 2. * abs(stripe_map - .5);
51
-
52
- shape *= (1. + u_distortion * sin(4. * l - t) * cos(PI + l + t));
53
-
54
- float stroke_width = clamp(u_strokeWidth, fwidth(l), 1. - fwidth(l));
55
-
56
- float edge_width = min(fwidth(l), fwidth(offset));
57
-
58
- float mid = 1. - smoothstep(.0, .9, l);
59
- mid = pow(mid, 2.);
60
- shape -= .5 * u_strokeCap * mid;
61
-
62
- shape = smoothstep(stroke_width - edge_width - u_softness, stroke_width + edge_width + u_softness, shape);
63
-
64
- vec3 color = mix(u_color1.rgb * u_color1.a, u_color2.rgb * u_color2.a, shape);
65
- float opacity = mix(u_color1.a, u_color2.a, shape);
66
-
67
- ${colorBandingFix}
68
-
69
- fragColor = vec4(color, opacity);
70
- }
71
- `;
72
- export {
73
- spiralFragmentShader
74
- };
75
- //# sourceMappingURL=spiral.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../src/shaders/spiral.ts"],
4
- "sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing';\nimport { declareSimplexNoise, declarePI, colorBandingFix } from '../shader-utils';\n\n/**\n * Spiral shape by Ksenia Kondrashova\n * Generates a dynamic spiral shape with configurable parameters\n *\n * Uniforms include:\n *\n * u_scale - controls the overall scale of the spiral (u_scale = 1 makes it fit the viewport height)\n * u_offsetX - left / right pan\n * u_offsetY - up / down pan\n * u_color1 - the first color used in the spiral (stroke)\n * u_color2 - the second color used in the spiral (back)\n * u_density (0 .. 1) - the spacing of the spiral arms\n * u_distortion (0 .. 1) - adds a wavy distortion effect to the spiral arms\n * u_strokeWidth (0 .. 1) - defines the thickness of the spiral lines.\n * u_strokeCap (0 .. 1) - adjusts the fading of the spiral edges.\n * u_strokeTaper (0 .. 1) - controls the tapering effect along the spiral arms.\n * u_noiseFrequency - frequency of the noise applied to the spiral.\n * u_noisePower (0 .. 1) - strength of the noise effect.\n * u_softness - softens the edges of the spiral for a smoother appearance.\n */\nexport const spiralFragmentShader: string = `#version 300 es\nprecision highp float;\n\nuniform float u_time;\n\nuniform vec4 u_color1;\nuniform vec4 u_color2;\nuniform float u_density;\nuniform float u_distortion;\nuniform float u_strokeWidth;\nuniform float u_strokeCap;\nuniform float u_strokeTaper;\n\nuniform float u_noiseFrequency;\nuniform float u_noisePower;\nuniform float u_softness;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n${declareSimplexNoise}\n\nvoid main() {\n vec2 shape_uv = v_patternUV * .02;\n\n float t = u_time;\n\n float l = length(shape_uv);\n float angle = atan(shape_uv.y, shape_uv.x) - 2. * t;\n float angle_norm = angle / TWO_PI;\n\n angle_norm += .125 * u_noisePower * snoise(.5 * u_noiseFrequency * shape_uv);\n\n float offset = pow(l, 1. - clamp(u_density, 0., 1.)) + angle_norm;\n\n float stripe_map = fract(offset);\n stripe_map -= .5 * u_strokeTaper * l;\n\n stripe_map += .25 * u_noisePower * snoise(u_noiseFrequency * shape_uv);\n\n float shape = 2. * abs(stripe_map - .5);\n\n shape *= (1. + u_distortion * sin(4. * l - t) * cos(PI + l + t));\n\n float stroke_width = clamp(u_strokeWidth, fwidth(l), 1. - fwidth(l));\n\n float edge_width = min(fwidth(l), fwidth(offset));\n\n float mid = 1. - smoothstep(.0, .9, l);\n mid = pow(mid, 2.);\n shape -= .5 * u_strokeCap * mid;\n\n shape = smoothstep(stroke_width - edge_width - u_softness, stroke_width + edge_width + u_softness, shape);\n\n vec3 color = mix(u_color1.rgb * u_color1.a, u_color2.rgb * u_color2.a, shape);\n float opacity = mix(u_color1.a, u_color2.a, shape);\n\n ${colorBandingFix}\n\n fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface SpiralUniforms extends ShaderSizingUniforms {\n u_color1: [number, number, number, number];\n u_color2: [number, number, number, number];\n u_density: number;\n u_distortion: number;\n u_strokeWidth: number;\n u_strokeTaper: number;\n u_strokeCap: number;\n u_noiseFrequency: number;\n u_noisePower: number;\n u_softness: number;\n}\n\nexport interface SpiralParams extends ShaderSizingParams, ShaderMotionParams {\n color1?: string;\n color2?: string;\n density?: number;\n distortion?: number;\n strokeWidth?: number;\n strokeTaper?: number;\n strokeCap?: number;\n noiseFrequency?: number;\n noisePower?: number;\n softness?: number;\n}\n"],
5
- "mappings": ";;;;;AACA,SAAS,kCAAsF;AAC/F,SAAS,qBAAqB,WAAW,uBAAuB;AAsBzD,MAAM,uBAA+B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiB1C,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA,EACT,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,IAqCjB,eAAe;AAAA;AAAA;AAAA;AAAA;",
6
- "names": []
7
- }
@@ -1,80 +0,0 @@
1
- /* * * * * * * * * * * * * * * * * * * * * * * * * * * *
2
- * Paper Shaders *
3
- * https://github.com/paper-design/shaders *
4
- * * * * * * * * * * * * * * * * * * * * * * * * * * * */
5
-
6
- import { sizingVariablesDeclaration } from "../shader-sizing";
7
- import { declareSimplexNoise, declarePI, declareRotate, colorBandingFix } from "../shader-utils";
8
- const swirlMeta = {
9
- maxColorCount: 10
10
- };
11
- const swirlFragmentShader = `#version 300 es
12
- precision highp float;
13
-
14
- uniform float u_time;
15
-
16
- uniform vec4 u_colors[${swirlMeta.maxColorCount}];
17
- uniform float u_colorsCount;
18
- uniform float u_bandCount;
19
- uniform float u_twist;
20
- uniform float u_softness;
21
- uniform float u_noisePower;
22
- uniform float u_noiseFrequency;
23
-
24
- ${sizingVariablesDeclaration}
25
-
26
- out vec4 fragColor;
27
-
28
- ${declarePI}
29
- ${declareSimplexNoise}
30
- ${declareRotate}
31
-
32
- void main() {
33
- vec2 shape_uv = v_objectUV;
34
-
35
- float l = length(shape_uv);
36
-
37
- float t = u_time;
38
-
39
- float angle = ceil(u_bandCount) * atan(shape_uv.y, shape_uv.x) + t;
40
- float angle_norm = angle / TWO_PI;
41
-
42
- float twist = 3. * clamp(u_twist, 0., 1.);
43
- float offset = pow(l, -twist) + angle_norm;
44
-
45
- float shape = fract(offset);
46
- shape = 1. - abs(2. * shape - 1.);
47
- shape += u_noisePower * snoise(pow(u_noiseFrequency, 2.) * shape_uv);
48
-
49
- float mid = smoothstep(.2, .4, pow(l, twist));
50
- shape = mix(0., shape, mid);
51
-
52
- float mixer = shape * (u_colorsCount - 1.);
53
- float softness = u_softness + (.1 + .012 * u_colorsCount) * smoothstep(.6, .2, pow(l, twist));
54
-
55
- vec4 gradient = u_colors[0];
56
- gradient.rgb *= gradient.a;
57
- for (int i = 1; i < ${swirlMeta.maxColorCount}; i++) {
58
- if (i >= int(u_colorsCount)) break;
59
-
60
- float localT = clamp(mixer - float(i - 1), 0., 1.);
61
- localT = smoothstep(.5 - .5 * u_softness, .5 + .5 * u_softness, localT);
62
-
63
- vec4 c = u_colors[i];
64
- c.rgb *= c.a;
65
- gradient = mix(gradient, c, localT);
66
- }
67
-
68
- vec3 color = gradient.rgb;
69
- float opacity = gradient.a;
70
-
71
- ${colorBandingFix}
72
-
73
- fragColor = vec4(color, opacity);
74
- }
75
- `;
76
- export {
77
- swirlFragmentShader,
78
- swirlMeta
79
- };
80
- //# sourceMappingURL=swirl.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../src/shaders/swirl.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, declarePI, declareRotate, colorBandingFix } from '../shader-utils';\n\nexport const swirlMeta = {\n maxColorCount: 10,\n} as const;\n\n/**\n */\nexport const swirlFragmentShader: string = `#version 300 es\nprecision highp float;\n\nuniform float u_time;\n\nuniform vec4 u_colors[${swirlMeta.maxColorCount}];\nuniform float u_colorsCount;\nuniform float u_bandCount;\nuniform float u_twist;\nuniform float u_softness;\nuniform float u_noisePower;\nuniform float u_noiseFrequency;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n${declareSimplexNoise}\n${declareRotate}\n\nvoid main() {\n vec2 shape_uv = v_objectUV;\n \n float l = length(shape_uv);\n\n float t = u_time;\n\n float angle = ceil(u_bandCount) * atan(shape_uv.y, shape_uv.x) + t;\n float angle_norm = angle / TWO_PI; \n \n float twist = 3. * clamp(u_twist, 0., 1.);\n float offset = pow(l, -twist) + angle_norm;\n \n float shape = fract(offset);\n shape = 1. - abs(2. * shape - 1.);\n shape += u_noisePower * snoise(pow(u_noiseFrequency, 2.) * shape_uv);\n\n float mid = smoothstep(.2, .4, pow(l, twist));\n shape = mix(0., shape, mid);\n \n float mixer = shape * (u_colorsCount - 1.);\n float softness = u_softness + (.1 + .012 * u_colorsCount) * smoothstep(.6, .2, pow(l, twist));\n\n vec4 gradient = u_colors[0];\n gradient.rgb *= gradient.a;\n for (int i = 1; i < ${swirlMeta.maxColorCount}; i++) {\n if (i >= int(u_colorsCount)) break;\n \n float localT = clamp(mixer - float(i - 1), 0., 1.); \n localT = smoothstep(.5 - .5 * u_softness, .5 + .5 * u_softness, localT);\n\n vec4 c = u_colors[i];\n c.rgb *= c.a;\n gradient = mix(gradient, c, localT);\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 SwirlUniforms extends ShaderSizingUniforms {\n u_colors: vec4[];\n u_colorsCount: number;\n u_bandCount: number;\n u_twist: number;\n u_softness: number;\n u_noiseFrequency: number;\n u_noisePower: number;\n}\n\nexport interface SwirlParams extends ShaderSizingParams, ShaderMotionParams {\n colors?: string[];\n bandCount?: number;\n twist?: number;\n softness?: number;\n noiseFrequency?: number;\n noisePower?: number;\n}\n"],
5
- "mappings": ";;;;;AAEA,SAAS,kCAAsF;AAC/F,SAAS,qBAAqB,WAAW,eAAe,uBAAuB;AAExE,MAAM,YAAY;AAAA,EACvB,eAAe;AACjB;AAIO,MAAM,sBAA8B;AAAA;AAAA;AAAA;AAAA;AAAA,wBAKnB,UAAU,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQ7C,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA,EACT,mBAAmB;AAAA,EACnB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBA2BS,UAAU,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAc3C,eAAe;AAAA;AAAA;AAAA;AAAA;",
6
- "names": []
7
- }
@@ -1,143 +0,0 @@
1
- /* * * * * * * * * * * * * * * * * * * * * * * * * * * *
2
- * Paper Shaders *
3
- * https://github.com/paper-design/shaders *
4
- * * * * * * * * * * * * * * * * * * * * * * * * * * * */
5
-
6
- import { sizingVariablesDeclaration } from "../shader-sizing";
7
- import { declarePI } from "../shader-utils";
8
- const voronoiMeta = {
9
- maxColorCount: 5
10
- };
11
- const voronoiFragmentShader = `#version 300 es
12
- precision highp float;
13
-
14
- uniform float u_time;
15
-
16
- uniform float u_scale;
17
-
18
- uniform sampler2D u_noiseTexture;
19
-
20
- uniform vec4 u_colors[${voronoiMeta.maxColorCount}];
21
- uniform float u_colorsCount;
22
-
23
- uniform float u_stepsPerColor;
24
- uniform vec4 u_colorGlow;
25
- uniform vec4 u_colorBack;
26
- uniform float u_distortion;
27
- uniform float u_gap;
28
- uniform float u_innerGlow;
29
-
30
- ${sizingVariablesDeclaration}
31
-
32
- out vec4 fragColor;
33
-
34
- ${declarePI}
35
-
36
- vec2 hash(vec2 p) {
37
- vec2 uv = floor(p) / 100. + .5;
38
- return texture(u_noiseTexture, uv).gb;
39
- }
40
-
41
- vec4 voronoi(vec2 x, float t) {
42
- vec2 ip = floor(x);
43
- vec2 fp = fract(x);
44
-
45
- vec2 mg, mr;
46
- float md = 8.;
47
- float rand = 0.;
48
-
49
- for (int j = -1; j <= 1; j++) {
50
- for (int i = -1; i <= 1; i++) {
51
- vec2 g = vec2(float(i), float(j));
52
- vec2 raw_hash = hash(ip + g);
53
- vec2 o = hash(ip + g);
54
- o = .5 + u_distortion * sin(t + TWO_PI * o);
55
- vec2 r = g + o - fp;
56
- float d = dot(r, r);
57
-
58
- if (d < md) {
59
- md = d;
60
- mr = r;
61
- mg = g;
62
- rand = raw_hash.x;
63
- }
64
- }
65
- }
66
-
67
- md = 8.;
68
- for (int j = -2; j <= 2; j++) {
69
- for (int i = -2; i <= 2; i++) {
70
- vec2 g = mg + vec2(float(i), float(j));
71
- vec2 o = hash(ip + g);
72
- o = .5 + u_distortion * sin(t + TWO_PI * o);
73
- vec2 r = g + o - fp;
74
- if (dot(mr - r, mr - r) > .00001) {
75
- md = min(md, dot(.5 * (mr + r), normalize(r - mr)));
76
- }
77
- }
78
- }
79
-
80
- return vec4(md, mr, rand);
81
- }
82
-
83
- void main() {
84
- vec2 shape_uv = v_patternUV;
85
- shape_uv *= .0125;
86
-
87
- float t = u_time;
88
-
89
- vec4 voronoiRes = voronoi(shape_uv, t);
90
-
91
- float shape = clamp(voronoiRes.w, 0., 1.);
92
- float mixer = shape * (u_colorsCount - 1.);
93
- mixer = (shape - .5 / u_colorsCount) * u_colorsCount;
94
- float steps = max(1., u_stepsPerColor);
95
-
96
- vec4 gradient = u_colors[0];
97
- gradient.rgb *= gradient.a;
98
- for (int i = 1; i < ${voronoiMeta.maxColorCount}; i++) {
99
- if (i >= int(u_colorsCount)) break;
100
- float localT = clamp(mixer - float(i - 1), 0.0, 1.0);
101
- localT = round(localT * steps) / steps;
102
- vec4 c = u_colors[i];
103
- c.rgb *= c.a;
104
- gradient = mix(gradient, c, localT);
105
- }
106
-
107
- if ((mixer < 0.) || (mixer > (u_colorsCount - 1.))) {
108
- float localT = mixer + 1.;
109
- if (mixer > (u_colorsCount - 1.)) {
110
- localT = mixer - (u_colorsCount - 1.);
111
- }
112
- localT = round(localT * steps) / steps;
113
- vec4 cFst = u_colors[0];
114
- cFst.rgb *= cFst.a;
115
- vec4 cLast = u_colors[int(u_colorsCount - 1.)];
116
- cLast.rgb *= cLast.a;
117
- gradient = mix(cLast, cFst, localT);
118
- }
119
-
120
- vec3 cellColor = gradient.rgb;
121
- float cellOpacity = gradient.a;
122
-
123
- float innerGlows = length(voronoiRes.yz * u_innerGlow + .1);
124
- innerGlows = pow(innerGlows, 1.5);
125
-
126
- vec3 color = mix(cellColor, u_colorGlow.rgb * u_colorGlow.a, u_colorGlow.a * innerGlows);
127
- float opacity = cellOpacity + u_colorGlow.a * innerGlows;
128
-
129
- float edge = voronoiRes.x;
130
- float smoothEdge = .02 / (2. * u_scale) * (1. + .5 * u_gap);
131
- edge = smoothstep(u_gap - smoothEdge, u_gap + smoothEdge, edge);
132
-
133
- color = mix(u_colorBack.rgb * u_colorBack.a, color, edge);
134
- opacity = mix(u_colorBack.a, opacity, edge);
135
-
136
- fragColor = vec4(color, opacity);
137
- }
138
- `;
139
- export {
140
- voronoiFragmentShader,
141
- voronoiMeta
142
- };
143
- //# sourceMappingURL=voronoi.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../src/shaders/voronoi.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 } from '../shader-utils';\n\nexport const voronoiMeta = {\n maxColorCount: 5,\n} as const;\n\n/**\n * Voronoi pattern by Ksenia Kondrashova\n * The variation of Voronoi pattern with cell edges. Big thanks to Inigo Quilez\n * https://www.shadertoy.com/view/ldl3W8\n *\n * Uniforms include:\n *\n * - `u_colors` (`vec4[]`): Array of RGBA colors used for cell filling\n * - `u_colorsCount` (`float`): Number of active colors in `u_colors`\n * - `u_colorBack` (`vec4`): RGBA color for the gaps between cells\n * - `u_colorGlow` (`vec4`): RGBA color for the radial shape on the cell edges\n * - `u_distortion` (`float`, 0 \u2013 0.5): Controls how far cell centers can be displaced from the regular grid\n * - `u_gap` (`float`): Width of the gaps between cells (gaps can't be removed completely due to artifacts of Voronoi cells)\n * - `u_innerGlow` (`float`): Controls the size of the radial glow inside each cell\n * - `u_stepsPerColor` (`float`): Discretization of the color transition\n * - `u_noiseTexture` (`sampler2D`): Replacement of standard hash function, added for better performance\n */\nexport const voronoiFragmentShader: string = `#version 300 es\nprecision highp float;\n\nuniform float u_time;\n\nuniform float u_scale;\n\nuniform sampler2D u_noiseTexture;\n\nuniform vec4 u_colors[${voronoiMeta.maxColorCount}];\nuniform float u_colorsCount;\n\nuniform float u_stepsPerColor;\nuniform vec4 u_colorGlow;\nuniform vec4 u_colorBack;\nuniform float u_distortion;\nuniform float u_gap;\nuniform float u_innerGlow;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n\nvec2 hash(vec2 p) {\n vec2 uv = floor(p) / 100. + .5;\n return texture(u_noiseTexture, uv).gb;\n}\n\nvec4 voronoi(vec2 x, float t) {\n vec2 ip = floor(x);\n vec2 fp = fract(x);\n\n vec2 mg, mr;\n float md = 8.;\n float rand = 0.;\n\n for (int j = -1; j <= 1; j++) {\n for (int i = -1; i <= 1; i++) {\n vec2 g = vec2(float(i), float(j));\n vec2 raw_hash = hash(ip + g);\n vec2 o = hash(ip + g);\n o = .5 + u_distortion * sin(t + TWO_PI * o);\n vec2 r = g + o - fp;\n float d = dot(r, r);\n\n if (d < md) {\n md = d;\n mr = r;\n mg = g;\n rand = raw_hash.x;\n }\n }\n }\n\n md = 8.;\n for (int j = -2; j <= 2; j++) {\n for (int i = -2; i <= 2; i++) {\n vec2 g = mg + vec2(float(i), float(j));\n vec2 o = hash(ip + g);\n o = .5 + u_distortion * sin(t + TWO_PI * o);\n vec2 r = g + o - fp;\n if (dot(mr - r, mr - r) > .00001) {\n md = min(md, dot(.5 * (mr + r), normalize(r - mr)));\n }\n }\n }\n\n return vec4(md, mr, rand);\n}\n\nvoid main() {\n vec2 shape_uv = v_patternUV;\n shape_uv *= .0125;\n\n float t = u_time;\n\n vec4 voronoiRes = voronoi(shape_uv, t);\n\n float shape = clamp(voronoiRes.w, 0., 1.);\n float mixer = shape * (u_colorsCount - 1.);\n mixer = (shape - .5 / u_colorsCount) * u_colorsCount;\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 < ${voronoiMeta.maxColorCount}; i++) {\n if (i >= int(u_colorsCount)) break;\n float localT = clamp(mixer - float(i - 1), 0.0, 1.0);\n localT = round(localT * steps) / steps;\n vec4 c = u_colors[i];\n c.rgb *= c.a;\n gradient = mix(gradient, c, localT);\n }\n\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 = round(localT * steps) / steps;\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 vec3 cellColor = gradient.rgb;\n float cellOpacity = gradient.a;\n\n float innerGlows = length(voronoiRes.yz * u_innerGlow + .1);\n innerGlows = pow(innerGlows, 1.5);\n\n vec3 color = mix(cellColor, u_colorGlow.rgb * u_colorGlow.a, u_colorGlow.a * innerGlows);\n float opacity = cellOpacity + u_colorGlow.a * innerGlows;\n\n float edge = voronoiRes.x;\n float smoothEdge = .02 / (2. * u_scale) * (1. + .5 * u_gap);\n edge = smoothstep(u_gap - smoothEdge, u_gap + smoothEdge, edge);\n\n color = mix(u_colorBack.rgb * u_colorBack.a, color, edge);\n opacity = mix(u_colorBack.a, opacity, edge);\n\n fragColor = vec4(color, opacity); \n}\n`;\n\nexport interface VoronoiUniforms extends ShaderSizingUniforms {\n u_colors: vec4[];\n u_colorsCount: number;\n u_stepsPerColor: number;\n u_colorBack: [number, number, number, number];\n u_colorGlow: [number, number, number, number];\n u_distortion: number;\n u_gap: number;\n u_innerGlow: number;\n u_noiseTexture?: HTMLImageElement;\n}\n\nexport interface VoronoiParams extends ShaderSizingParams, ShaderMotionParams {\n colors?: string[];\n stepsPerColor?: number;\n colorBack?: string;\n colorGlow?: string;\n distortion?: number;\n gap?: number;\n innerGlow?: number;\n}\n"],
5
- "mappings": ";;;;;AAEA,SAAS,kCAAsF;AAC/F,SAAS,iBAAiB;AAEnB,MAAM,cAAc;AAAA,EACzB,eAAe;AACjB;AAmBO,MAAM,wBAAgC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASrB,YAAY,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAU/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,wBAgEa,YAAY,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
6
- "names": []
7
- }
@@ -1,124 +0,0 @@
1
- /* * * * * * * * * * * * * * * * * * * * * * * * * * * *
2
- * Paper Shaders *
3
- * https://github.com/paper-design/shaders *
4
- * * * * * * * * * * * * * * * * * * * * * * * * * * * */
5
-
6
- import { sizingVariablesDeclaration } from "../shader-sizing";
7
- import { declarePI, declareRandom, declareRotate, colorBandingFix } from "../shader-utils";
8
- const warpMeta = {
9
- maxColorCount: 10
10
- };
11
- const warpFragmentShader = `#version 300 es
12
- precision highp float;
13
-
14
- uniform float u_time;
15
- uniform float u_scale;
16
- uniform vec2 u_resolution;
17
-
18
- uniform vec4 u_colors[${warpMeta.maxColorCount}];
19
- uniform float u_colorsCount;
20
- uniform float u_proportion;
21
- uniform float u_softness;
22
- uniform float u_shape;
23
- uniform float u_shapeScale;
24
- uniform float u_distortion;
25
- uniform float u_swirl;
26
- uniform float u_swirlIterations;
27
-
28
- ${sizingVariablesDeclaration}
29
-
30
- out vec4 fragColor;
31
-
32
- ${declarePI}
33
- ${declareRandom}
34
- ${declareRotate}
35
-
36
- float noise(vec2 st) {
37
- vec2 i = floor(st);
38
- vec2 f = fract(st);
39
- float a = random(i);
40
- float b = random(i + vec2(1.0, 0.0));
41
- float c = random(i + vec2(0.0, 1.0));
42
- float d = random(i + vec2(1.0, 1.0));
43
-
44
- // Smoothstep for interpolation
45
- vec2 u = f * f * (3.0 - 2.0 * f);
46
-
47
- // Do the interpolation as two nested mix operations
48
- // If you try to do this in one big operation, there's enough precision loss to be off by 1px at cell boundaries
49
- float x1 = mix(a, b, u.x);
50
- float x2 = mix(c, d, u.x);
51
- return mix(x1, x2, u.y);
52
-
53
- }
54
-
55
- void main() {
56
- vec2 shape_uv = v_patternUV;
57
- shape_uv *= .0025;
58
-
59
- float t = .01 * u_time;
60
-
61
- float noise_scale = .0005 + .006 * u_scale;
62
-
63
- float n1 = noise(shape_uv * 1. + t);
64
- float n2 = noise(shape_uv * 2. - t);
65
- float angle = n1 * TWO_PI;
66
- shape_uv.x += 4. * u_distortion * n2 * cos(angle);
67
- shape_uv.y += 4. * u_distortion * n2 * sin(angle);
68
-
69
- float iterations_number = ceil(clamp(u_swirlIterations, 1., 30.));
70
- for (float i = 1.; i <= iterations_number; i++) {
71
- shape_uv.x += clamp(u_swirl, 0., 2.) / i * cos(t + i * 1.5 * shape_uv.y);
72
- shape_uv.y += clamp(u_swirl, 0., 2.) / i * cos(t + i * 1. * shape_uv.x);
73
- }
74
-
75
- float proportion = clamp(u_proportion, 0., 1.);
76
-
77
- float shape = 0.;
78
- if (u_shape < .5) {
79
- vec2 checks_shape_uv = shape_uv * (.5 + 3.5 * u_shapeScale);
80
- shape = .5 + .5 * sin(checks_shape_uv.x) * cos(checks_shape_uv.y);
81
- shape += .48 * sign(proportion - .5) * pow(abs(proportion - .5), .5);
82
- } else if (u_shape < 1.5) {
83
- vec2 stripes_shape_uv = shape_uv * (.25 + 3. * u_shapeScale);
84
- float f = fract(stripes_shape_uv.y);
85
- shape = smoothstep(.0, .55, f) * smoothstep(1., .45, f);
86
- shape += .48 * sign(proportion - .5) * pow(abs(proportion - .5), .5);
87
- } else {
88
- float sh = 1. - shape_uv.y;
89
- float shape_scaling = 5. * (1. - u_shapeScale);
90
- shape = smoothstep(.45 - shape_scaling, .55 + shape_scaling, sh + .3 * (proportion - .5));
91
- }
92
-
93
- float mixer = shape * (u_colorsCount - 1.);
94
- mixer = (shape - .5 / u_colorsCount) * u_colorsCount;
95
- vec4 gradient = u_colors[0];
96
- gradient.rgb *= gradient.a;
97
- for (int i = 1; i < ${warpMeta.maxColorCount}; i++) {
98
- if (i >= int(u_colorsCount)) break;
99
- float localT = clamp(mixer - float(i - 1), 0.0, 1.0);
100
- localT = smoothstep(.5 - .5 * u_softness, .5 + .5 * u_softness, localT);
101
- vec4 c = u_colors[i];
102
- c.rgb *= c.a;
103
- gradient = mix(gradient, c, localT);
104
- }
105
-
106
- vec3 color = gradient.rgb;
107
- float opacity = gradient.a;
108
-
109
- ${colorBandingFix}
110
-
111
- fragColor = vec4(color, opacity);
112
- }
113
- `;
114
- const WarpPatterns = {
115
- checks: 0,
116
- stripes: 1,
117
- edge: 2
118
- };
119
- export {
120
- WarpPatterns,
121
- warpFragmentShader,
122
- warpMeta
123
- };
124
- //# sourceMappingURL=warp.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../src/shaders/warp.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, declareRandom, declareRotate, colorBandingFix } from '../shader-utils';\n\nexport const warpMeta = {\n maxColorCount: 10,\n} as const;\n\n/**\n * 3d Perlin noise with exposed parameters\n *\n * Uniforms include:\n * - u_colors (vec4[]): Input RGBA colors\n * - u_colorsCount (float): Number of active colors (`u_colors` length)\n * - u_proportion (0 .. 1): the proportion between colors (on 0.5 colors are equally distributed)\n * - u_softness (0 .. 1): the color blur (0 for pronounced edges, 1 for gradient)\n * - u_shape (0 ... 2): the color pattern to be distorted with noise & swirl\n * - u_shape = 0 is checks\n * - u_shape = 1 is stripes\n * - u_shape = 2 is 2 halves of canvas (mapping the canvas height regardless of resolution)\n * - u_shapeScale: the scale of color pattern (appies over the global scaling)\n * - u_distortion: the noisy distortion over the UV coordinate (applied before the overlapping swirl)\n * - u_swirl: the power of swirly distortion\n * - u_swirlIterations: the number of swirl iterations (layering curves effect)\n *\n */\nexport const warpFragmentShader: string = `#version 300 es\nprecision highp float;\n\nuniform float u_time;\nuniform float u_scale;\nuniform vec2 u_resolution;\n\nuniform vec4 u_colors[${warpMeta.maxColorCount}];\nuniform float u_colorsCount;\nuniform float u_proportion;\nuniform float u_softness;\nuniform float u_shape;\nuniform float u_shapeScale;\nuniform float u_distortion;\nuniform float u_swirl;\nuniform float u_swirlIterations;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n${declareRandom}\n${declareRotate}\n\nfloat noise(vec2 st) {\n vec2 i = floor(st);\n vec2 f = fract(st);\n float a = random(i);\n float b = random(i + vec2(1.0, 0.0));\n float c = random(i + vec2(0.0, 1.0));\n float d = random(i + vec2(1.0, 1.0));\n\n // Smoothstep for interpolation\n vec2 u = f * f * (3.0 - 2.0 * f);\n\n // Do the interpolation as two nested mix operations\n // If you try to do this in one big operation, there's enough precision loss to be off by 1px at cell boundaries\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}\n\nvoid main() {\n vec2 shape_uv = v_patternUV;\n shape_uv *= .0025;\n\n float t = .01 * u_time;\n\n float noise_scale = .0005 + .006 * u_scale;\n\n float n1 = noise(shape_uv * 1. + t);\n float n2 = noise(shape_uv * 2. - t);\n float angle = n1 * TWO_PI;\n shape_uv.x += 4. * u_distortion * n2 * cos(angle);\n shape_uv.y += 4. * u_distortion * n2 * sin(angle);\n\n float iterations_number = ceil(clamp(u_swirlIterations, 1., 30.));\n for (float i = 1.; i <= iterations_number; i++) {\n shape_uv.x += clamp(u_swirl, 0., 2.) / i * cos(t + i * 1.5 * shape_uv.y);\n shape_uv.y += clamp(u_swirl, 0., 2.) / i * cos(t + i * 1. * shape_uv.x);\n }\n\n float proportion = clamp(u_proportion, 0., 1.);\n\n float shape = 0.;\n if (u_shape < .5) {\n vec2 checks_shape_uv = shape_uv * (.5 + 3.5 * u_shapeScale);\n shape = .5 + .5 * sin(checks_shape_uv.x) * cos(checks_shape_uv.y);\n shape += .48 * sign(proportion - .5) * pow(abs(proportion - .5), .5);\n } else if (u_shape < 1.5) {\n vec2 stripes_shape_uv = shape_uv * (.25 + 3. * u_shapeScale);\n float f = fract(stripes_shape_uv.y);\n shape = smoothstep(.0, .55, f) * smoothstep(1., .45, f);\n shape += .48 * sign(proportion - .5) * pow(abs(proportion - .5), .5);\n } else {\n float sh = 1. - shape_uv.y;\n float shape_scaling = 5. * (1. - u_shapeScale);\n shape = smoothstep(.45 - shape_scaling, .55 + shape_scaling, sh + .3 * (proportion - .5));\n }\n\n float mixer = shape * (u_colorsCount - 1.);\n mixer = (shape - .5 / u_colorsCount) * u_colorsCount;\n vec4 gradient = u_colors[0];\n gradient.rgb *= gradient.a;\n for (int i = 1; i < ${warpMeta.maxColorCount}; i++) {\n if (i >= int(u_colorsCount)) break;\n float localT = clamp(mixer - float(i - 1), 0.0, 1.0);\n localT = smoothstep(.5 - .5 * u_softness, .5 + .5 * u_softness, localT);\n vec4 c = u_colors[i];\n c.rgb *= c.a;\n gradient = mix(gradient, c, localT);\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 WarpUniforms extends ShaderSizingUniforms {\n u_colors: vec4[];\n u_colorsCount: number;\n u_proportion: number;\n u_softness: number;\n u_shape: (typeof WarpPatterns)[WarpPattern];\n u_shapeScale: number;\n u_distortion: number;\n u_swirl: number;\n u_swirlIterations: number;\n}\n\nexport interface WarpParams extends ShaderSizingParams, ShaderMotionParams {\n colors?: string[];\n rotation?: number;\n proportion?: number;\n softness?: number;\n shape?: WarpPattern;\n shapeScale?: number;\n distortion?: number;\n swirl?: number;\n swirlIterations?: number;\n}\n\nexport const WarpPatterns = {\n checks: 0,\n stripes: 1,\n edge: 2,\n} as const;\n\nexport type WarpPattern = keyof typeof WarpPatterns;\n"],
5
- "mappings": ";;;;;AAEA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,eAAe,eAAe,uBAAuB;AAElE,MAAM,WAAW;AAAA,EACtB,eAAe;AACjB;AAoBO,MAAM,qBAA6B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAOlB,SAAS,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAU5C,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA,EACT,aAAa;AAAA,EACb,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBA+DS,SAAS,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAY1C,eAAe;AAAA;AAAA;AAAA;AAAA;AA8BZ,MAAM,eAAe;AAAA,EAC1B,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,MAAM;AACR;",
6
- "names": []
7
- }