@paper-design/shaders 0.0.31 → 0.0.33
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/shader-utils.d.ts +1 -0
- package/dist/shader-utils.js +16 -1
- package/dist/shader-utils.js.map +2 -2
- package/dist/shaders/color-panels.d.ts +11 -12
- package/dist/shaders/color-panels.js +1 -4
- package/dist/shaders/color-panels.js.map +2 -2
- package/dist/shaders/dithering.d.ts +18 -23
- package/dist/shaders/dithering.js.map +2 -2
- package/dist/shaders/dot-grid.d.ts +15 -13
- package/dist/shaders/dot-grid.js +1 -0
- package/dist/shaders/dot-grid.js.map +2 -2
- package/dist/shaders/dot-orbit.d.ts +9 -11
- package/dist/shaders/dot-orbit.js.map +2 -2
- package/dist/shaders/god-rays.d.ts +11 -15
- package/dist/shaders/god-rays.js +11 -26
- package/dist/shaders/god-rays.js.map +2 -2
- package/dist/shaders/grain-gradient.d.ts +19 -1
- package/dist/shaders/grain-gradient.js +4 -21
- package/dist/shaders/grain-gradient.js.map +2 -2
- package/dist/shaders/liquid-metal.d.ts +17 -0
- package/dist/shaders/liquid-metal.js +2 -2
- package/dist/shaders/liquid-metal.js.map +2 -2
- package/dist/shaders/mesh-gradient.d.ts +7 -7
- package/dist/shaders/mesh-gradient.js.map +2 -2
- package/dist/shaders/metaballs.d.ts +8 -8
- package/dist/shaders/metaballs.js.map +2 -2
- package/dist/shaders/neuro-noise.d.ts +7 -9
- package/dist/shaders/neuro-noise.js.map +2 -2
- package/dist/shaders/perlin-noise.d.ts +9 -13
- package/dist/shaders/perlin-noise.js.map +2 -2
- package/dist/shaders/pulsing-border.d.ts +14 -15
- package/dist/shaders/pulsing-border.js +12 -19
- package/dist/shaders/pulsing-border.js.map +2 -2
- package/dist/shaders/simplex-noise.d.ts +7 -9
- package/dist/shaders/simplex-noise.js.map +2 -2
- package/dist/shaders/smoke-ring.d.ts +8 -11
- package/dist/shaders/smoke-ring.js +4 -21
- package/dist/shaders/smoke-ring.js.map +2 -2
- package/dist/shaders/spiral.d.ts +10 -16
- package/dist/shaders/spiral.js +1 -0
- package/dist/shaders/spiral.js.map +2 -2
- package/dist/shaders/swirl.d.ts +10 -0
- package/dist/shaders/swirl.js +14 -16
- package/dist/shaders/swirl.js.map +2 -2
- package/dist/shaders/voronoi.d.ts +13 -13
- package/dist/shaders/voronoi.js.map +2 -2
- package/dist/shaders/warp.d.ts +12 -14
- package/dist/shaders/warp.js +2 -22
- package/dist/shaders/warp.js.map +2 -2
- package/dist/shaders/waves.d.ts +13 -16
- package/dist/shaders/waves.js.map +2 -2
- package/package.json +1 -1
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* * * * * * * * * * * * * * * * * * * * * * * * * * * */
|
|
5
5
|
|
|
6
6
|
import { sizingVariablesDeclaration } from "../shader-sizing.js";
|
|
7
|
-
import { declareSimplexNoise, declarePI, declareRandom, colorBandingFix } from "../shader-utils.js";
|
|
7
|
+
import { declareSimplexNoise, declarePI, declareRandom, declareValueNoise, colorBandingFix } from "../shader-utils.js";
|
|
8
8
|
const grainGradientMeta = {
|
|
9
9
|
maxColorCount: 7
|
|
10
10
|
};
|
|
@@ -30,26 +30,9 @@ out vec4 fragColor;
|
|
|
30
30
|
${declarePI}
|
|
31
31
|
${declareSimplexNoise}
|
|
32
32
|
${declareRandom}
|
|
33
|
+
${declareValueNoise}
|
|
33
34
|
|
|
34
35
|
|
|
35
|
-
float noisenoise(vec2 st) {
|
|
36
|
-
vec2 i = floor(st);
|
|
37
|
-
vec2 f = fract(st);
|
|
38
|
-
float a = random(i);
|
|
39
|
-
float b = random(i + vec2(1.0, 0.0));
|
|
40
|
-
float c = random(i + vec2(0.0, 1.0));
|
|
41
|
-
float d = random(i + vec2(1.0, 1.0));
|
|
42
|
-
|
|
43
|
-
// Smoothstep for interpolation
|
|
44
|
-
vec2 u = f * f * (3.0 - 2.0 * f);
|
|
45
|
-
|
|
46
|
-
// Do the interpolation as two nested mix operations
|
|
47
|
-
// If you try to do this in one big operation, there's enough precision loss to be off by 1px at cell boundaries
|
|
48
|
-
float x1 = mix(a, b, u.x);
|
|
49
|
-
float x2 = mix(c, d, u.x);
|
|
50
|
-
return mix(x1, x2, u.y);
|
|
51
|
-
}
|
|
52
|
-
|
|
53
36
|
float rand(vec2 n) {
|
|
54
37
|
return fract(cos(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);
|
|
55
38
|
}
|
|
@@ -112,8 +95,8 @@ void main() {
|
|
|
112
95
|
|
|
113
96
|
} else if (u_shape < 3.5) {
|
|
114
97
|
// Truchet pattern
|
|
115
|
-
|
|
116
|
-
float n2 =
|
|
98
|
+
|
|
99
|
+
float n2 = valueNoise(shape_uv * .4 - 2.5 * t);
|
|
117
100
|
shape_uv.x += 10.;
|
|
118
101
|
shape_uv *= .6;
|
|
119
102
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/shaders/grain-gradient.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 { declareSimplexNoise, declarePI, declareRandom, colorBandingFix } from '../shader-utils.js';\n\nexport const grainGradientMeta = {\n maxColorCount: 7,\n} as const;\n\n/**\n *
|
|
5
|
-
"mappings": ";;;;;AAEA,SAAS,kCAAsF;AAC/F,SAAS,qBAAqB,WAAW,eAAe,uBAAuB;
|
|
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 { declareSimplexNoise, declarePI, declareRandom, declareValueNoise, colorBandingFix } from '../shader-utils.js';\n\nexport const grainGradientMeta = {\n maxColorCount: 7,\n} as const;\n\n/**\n * Multi-color gradient with noise & grain over animated abstract shapes\n *\n * Uniforms:\n * - u_colorBack (RGBA)\n * - u_colors (vec4[]), u_colorsCount (float used as integer)\n * - u_softness (0..1): blur between color bands\n * - u_intensity (0..1): distortion between color bands\n * - u_noise (0..1): grainy noise independent of softness\n * - u_shape (float used as integer):\n * ---- 1: single sine wave\n * ---- 2: dots pattern\n * ---- 3: truchet pattern\n * ---- 4: corners (2 rounded rectangles)\n * ---- 5: ripple\n * ---- 6: blob (metaballs)\n * ---- 7: circle imitating 3d look\n *\n * Note: grains are calculated using gl_FragCoord & u_resolution, meaning grains don't react to scaling and fit\n *\n */\nexport const grainGradientFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\nuniform vec2 u_resolution;\nuniform float u_pixelRatio;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colors[${grainGradientMeta.maxColorCount}];\nuniform float u_colorsCount;\nuniform float u_softness;\nuniform float u_intensity;\nuniform float u_noise;\nuniform float u_shape;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n${declareSimplexNoise}\n${declareRandom}\n${declareValueNoise}\n\n\nfloat rand(vec2 n) {\n return fract(cos(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);\n}\nfloat noise(vec2 n) {\n const vec2 d = vec2(0.0, 1.0);\n vec2 b = floor(n), f = smoothstep(vec2(0.0), vec2(1.0), fract(n));\n return mix(mix(rand(b), rand(b + d.yx), f.x), mix(rand(b + d.xy), rand(b + d.yy), f.x), f.y);\n}\nfloat fbm_4(vec2 n) {\n float total = 0.0, amplitude = .2;\n for (int i = 0; i < 4; i++) {\n total += noise(n) * amplitude;\n n += n;\n amplitude *= 0.6;\n }\n return total;\n}\n\n\nvec2 truchet(vec2 uv, float idx){\n idx = fract(((idx - .5) * 2.));\n if (idx > 0.75) {\n uv = vec2(1.0) - uv;\n } else if (idx > 0.5) {\n uv = vec2(1.0 - uv.x, uv.y);\n } else if (idx > 0.25) {\n uv = 1.0 - vec2(1.0 - uv.x, uv.y);\n }\n return uv;\n}\n\nvoid main() {\n\n float t = .1 * u_time;\n\n vec2 grain_uv = (gl_FragCoord.xy - .5 * u_resolution) / u_pixelRatio;\n vec2 shape_uv = v_objectUV;\n if (u_shape < 3.5) {\n shape_uv = v_patternUV * .005;\n }\n\n\n float shape = 0.;\n\n if (u_shape < 1.5) {\n // Sine wave\n\n float wave = cos(.5 * shape_uv.x - 2. * t) * sin(1.5 * shape_uv.x + t) * (.75 + .25 * cos(3. * t));\n shape = 1. - smoothstep(-1., 1., shape_uv.y + wave);\n\n } else if (u_shape < 2.5) {\n // Grid (dots)\n\n float stripeIdx = floor(2. * shape_uv.x / TWO_PI);\n float rand = fract(sin(stripeIdx * 12.9898) * 43758.5453);\n\n float speed = sign(rand - .5) * ceil(2. + rand);\n shape = sin(shape_uv.x) * cos(shape_uv.y + speed * t);\n shape = pow(shape, 4.);\n\n } else if (u_shape < 3.5) {\n // Truchet pattern\n \n float n2 = valueNoise(shape_uv * .4 - 2.5 * t);\n shape_uv.x += 10.;\n shape_uv *= .6;\n\n vec2 tile = truchet(fract(shape_uv), random(floor(shape_uv)));\n\n float distance1 = length(tile);\n float distance2 = length(tile - vec2(1.));\n\n n2 -= .5;\n n2 *= .1;\n shape = smoothstep(.2, .55, distance1 + n2) * smoothstep(.8, .45, distance1 - n2);\n shape += smoothstep(.2, .55, distance2 + n2) * smoothstep(.8, .45, distance2 - n2);\n\n shape = pow(shape, 1.5);\n\n } else if (u_shape < 4.5) {\n // Corners\n\n shape_uv *= .6;\n vec2 outer = vec2(.5);\n\n vec2 bl = smoothstep(vec2(0.), outer, shape_uv + vec2(.1 + .1 * sin(2. * t), .2 - .1 * sin(3. * t)));\n vec2 tr = smoothstep(vec2(0.), outer, 1. - shape_uv);\n shape = 1. - bl.x * bl.y * tr.x * tr.y;\n\n shape_uv = -shape_uv;\n bl = smoothstep(vec2(0.), outer, shape_uv + vec2(.1 + .1 * sin(2. * t), .2 - .1 * cos(3. * t)));\n tr = smoothstep(vec2(0.), outer, 1. - shape_uv);\n shape -= bl.x * bl.y * tr.x * tr.y;\n\n shape = 1. - smoothstep(0., 1., shape);\n\n } else if (u_shape < 5.5) {\n // Ripple\n\n shape_uv *= 2.;\n float dist = length(.4 * shape_uv);\n float waves = sin(pow(dist, 1.2) * 5. - 3. * t) * .5 + .5;\n shape = waves;\n\n } else if (u_shape < 6.5) {\n // Blob\n\n t *= 2.;\n\n vec2 f1_traj = .25 * vec2(1.3 * sin(t), .2 + 1.3 * cos(.6 * t + 4.));\n vec2 f2_traj = .2 * vec2(1.2 * sin(-t), 1.3 * sin(1.6 * t));\n vec2 f3_traj = .25 * vec2(1.7 * cos(-.6 * t), cos(-1.6 * t));\n vec2 f4_traj = .3 * vec2(1.4 * cos(.8 * t), 1.2 * sin(-.6 * t - 3.));\n\n shape = .5 * pow(1. - clamp(0., 1., length(shape_uv + f1_traj)), 5.);\n shape += .5 * pow(1. - clamp(0., 1., length(shape_uv + f2_traj)), 5.);\n shape += .5 * pow(1. - clamp(0., 1., length(shape_uv + f3_traj)), 5.);\n shape += .5 * pow(1. - clamp(0., 1., length(shape_uv + f4_traj)), 5.);\n\n shape = smoothstep(.0, .9, shape);\n float edge = smoothstep(.25, .3, shape);\n shape = mix(.0, shape, edge);\n\n } else {\n // Sphere\n\n shape_uv *= 2.;\n float d = length(shape_uv);\n float z = sqrt(1.0 - clamp(pow(d, 2.0), 0.0, 1.0));\n vec3 pos = vec3(shape_uv, z);\n vec3 lightPos = normalize(vec3(cos(3. * t), 0.8, sin(2.5 * t)));\n float lighting = dot(lightPos, pos);\n float edge = smoothstep(1., .97, d);\n shape = mix(.1, .5 + .5 * lighting, edge);\n }\n\n float snoise05 = snoise(grain_uv * .5);\n float grainDist = snoise(grain_uv * .2) * snoise05 - fbm_4(.002 * grain_uv + 10.) - fbm_4(.003 * grain_uv);\n float noise = clamp(.6 * snoise05 - fbm_4(.4 * grain_uv) - fbm_4(.001 * grain_uv), 0., 1.);\n\n shape += u_intensity * 2. / u_colorsCount * (grainDist + .5);\n shape += u_noise * 10. / u_colorsCount * noise;\n\n float edge_w = fwidth(shape);\n\n float mixer = shape * (u_colorsCount + 1.) / u_colorsCount;\n vec4 gradient = u_colors[0];\n gradient.rgb *= gradient.a;\n\n for (int i = 1; i < ${grainGradientMeta.maxColorCount}; i++) {\n if (i > int(u_colorsCount) - 1) break;\n\n vec2 borders = vec2(float(i + 1) - u_softness - edge_w, float(i + 1) + u_softness + edge_w) / u_colorsCount;\n float localT = smoothstep(borders[0], borders[1], mixer);\n vec4 c = u_colors[i];\n c.rgb *= c.a;\n gradient = mix(gradient, c, localT);\n }\n\n vec2 borders = vec2(2. / (u_colorsCount - 1.));\n borders = vec2(borders[0] - u_softness - edge_w, borders[1] + u_softness + edge_w) / u_colorsCount;\n borders[0] = max(0., borders[0]);\n float gradientShape = smoothstep(borders[0], borders[1], mixer);\n\n vec3 color = gradient.rgb * gradientShape;\n float opacity = gradient.a * gradientShape;\n\n vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\n color = color + bgColor * (1.0 - opacity);\n opacity = opacity + u_colorBack.a * (1.0 - opacity);\n\n ${colorBandingFix}\n\n fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface GrainGradientUniforms extends ShaderSizingUniforms {\n u_colorBack: [number, number, number, number];\n u_colors: vec4[];\n u_colorsCount: number;\n u_softness: number;\n u_intensity: number;\n u_noise: number;\n u_shape: (typeof GrainGradientShapes)[GrainGradientShape];\n}\n\nexport interface GrainGradientParams extends ShaderSizingParams, ShaderMotionParams {\n colorBack?: string;\n colors?: string[];\n softness?: number;\n intensity?: number;\n noise?: number;\n shape?: GrainGradientShape;\n}\n\nexport const GrainGradientShapes = {\n wave: 1,\n dots: 2,\n truchet: 3,\n corners: 4,\n ripple: 5,\n blob: 6,\n sphere: 7,\n};\n\nexport type GrainGradientShape = keyof typeof GrainGradientShapes;\n"],
|
|
5
|
+
"mappings": ";;;;;AAEA,SAAS,kCAAsF;AAC/F,SAAS,qBAAqB,WAAW,eAAe,mBAAmB,uBAAuB;AAE3F,MAAM,oBAAoB;AAAA,EAC/B,eAAe;AACjB;AAuBO,MAAM,8BAAsC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAQ3B,kBAAkB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOrD,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA,EACT,mBAAmB;AAAA,EACnB,aAAa;AAAA,EACb,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAwJK,kBAAkB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAsBnD,eAAe;AAAA;AAAA;AAAA;AAAA;AAyBZ,MAAM,sBAAsB;AAAA,EACjC,MAAM;AAAA,EACN,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,QAAQ;AACV;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,6 +1,23 @@
|
|
|
1
1
|
import type { ShaderMotionParams } from '../shader-mount.js';
|
|
2
2
|
import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
|
|
3
3
|
/**
|
|
4
|
+
*
|
|
5
|
+
* Fluid motion imitation applied over abstract shapes
|
|
6
|
+
* (animated stripe pattern getting distorted with shape edges)
|
|
7
|
+
*
|
|
8
|
+
* Uniforms:
|
|
9
|
+
* - u_colorBack, u_colorTint (RGBA)
|
|
10
|
+
* - u_repetition: density of pattern stripes
|
|
11
|
+
* - u_softness: blur between stripes
|
|
12
|
+
* - u_shiftRed & u_shiftBlue: color dispersion between the stripes
|
|
13
|
+
* - u_distortion: pattern distortion on the whole canvas
|
|
14
|
+
* - u_contour: distortion power over the shape edges
|
|
15
|
+
* - u_shape (float used as integer):
|
|
16
|
+
* ---- 0: canvas-screen rectangle, needs u_worldWidth = u_worldHeight = 0 to be responsive (see vertex shader)
|
|
17
|
+
* ---- 1: static circle
|
|
18
|
+
* ---- 2: animated flower-like polar shape
|
|
19
|
+
* ---- 3: animated metaballs
|
|
20
|
+
*
|
|
4
21
|
*/
|
|
5
22
|
export declare const liquidMetalFragmentShader: string;
|
|
6
23
|
export interface LiquidMetalUniforms extends ShaderSizingUniforms {
|
|
@@ -48,8 +48,8 @@ float getColorChanges(float c1, float c2, float stripe_p, vec3 w, float blur, fl
|
|
|
48
48
|
float gradient_t = (stripe_p - w[0] - w[1]) / w[2];
|
|
49
49
|
float gradient = mix(c1, c2, smoothstep(0., 1., gradient_t));
|
|
50
50
|
ch = mix(ch, gradient, smoothstep(border - blur, border + blur, stripe_p));
|
|
51
|
-
|
|
52
|
-
//
|
|
51
|
+
|
|
52
|
+
// Tint color is applied with color burn blending
|
|
53
53
|
ch = mix(ch, 1. - min(1., (1. - ch) / max(tint, 0.0001)), u_colorTint.a);
|
|
54
54
|
return ch;
|
|
55
55
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/shaders/liquid-metal.ts"],
|
|
4
|
-
"sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount.js';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { declarePI, declareRotate, declareSimplexNoise, colorBandingFix } from '../shader-utils.js';\n\n/**\n */\n\nexport const liquidMetalFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colorTint;\n\nuniform float u_softness;\nuniform float u_repetition;\nuniform float u_shiftRed;\nuniform float u_shiftBlue;\nuniform float u_distortion;\nuniform float u_contour;\nuniform float u_shape;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n${declareRotate}\n${declareSimplexNoise}\n\nfloat getColorChanges(float c1, float c2, float stripe_p, vec3 w, float blur, float bump, float tint) {\n\n float ch = mix(c2, c1, smoothstep(.0, blur, stripe_p));\n\n float border = w[0];\n ch = mix(ch, c2, smoothstep(border - blur, border + blur, stripe_p));\n\n border = w[0] + .4 * (1. - bump) * w[1];\n ch = mix(ch, c1, smoothstep(border - blur, border + blur, stripe_p));\n\n border = w[0] + .5 * (1. - bump) * w[1];\n ch = mix(ch, c2, smoothstep(border - blur, border + blur, stripe_p));\n\n border = w[0] + w[1];\n ch = mix(ch, c1, smoothstep(border - blur, border + blur, stripe_p));\n\n float gradient_t = (stripe_p - w[0] - w[1]) / w[2];\n float gradient = mix(c1, c2, smoothstep(0., 1., gradient_t));\n ch = mix(ch, gradient, smoothstep(border - blur, border + blur, stripe_p));\n\n //
|
|
5
|
-
"mappings": ";;;;;AACA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,eAAe,qBAAqB,uBAAuB;
|
|
4
|
+
"sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount.js';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { declarePI, declareRotate, declareSimplexNoise, colorBandingFix } from '../shader-utils.js';\n\n/**\n *\n * Fluid motion imitation applied over abstract shapes\n * (animated stripe pattern getting distorted with shape edges)\n *\n * Uniforms:\n * - u_colorBack, u_colorTint (RGBA)\n * - u_repetition: density of pattern stripes\n * - u_softness: blur between stripes\n * - u_shiftRed & u_shiftBlue: color dispersion between the stripes\n * - u_distortion: pattern distortion on the whole canvas\n * - u_contour: distortion power over the shape edges\n * - u_shape (float used as integer):\n * ---- 0: canvas-screen rectangle, needs u_worldWidth = u_worldHeight = 0 to be responsive (see vertex shader)\n * ---- 1: static circle\n * ---- 2: animated flower-like polar shape\n * ---- 3: animated metaballs\n *\n */\n\nexport const liquidMetalFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colorTint;\n\nuniform float u_softness;\nuniform float u_repetition;\nuniform float u_shiftRed;\nuniform float u_shiftBlue;\nuniform float u_distortion;\nuniform float u_contour;\nuniform float u_shape;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n${declareRotate}\n${declareSimplexNoise}\n\nfloat getColorChanges(float c1, float c2, float stripe_p, vec3 w, float blur, float bump, float tint) {\n\n float ch = mix(c2, c1, smoothstep(.0, blur, stripe_p));\n\n float border = w[0];\n ch = mix(ch, c2, smoothstep(border - blur, border + blur, stripe_p));\n\n border = w[0] + .4 * (1. - bump) * w[1];\n ch = mix(ch, c1, smoothstep(border - blur, border + blur, stripe_p));\n\n border = w[0] + .5 * (1. - bump) * w[1];\n ch = mix(ch, c2, smoothstep(border - blur, border + blur, stripe_p));\n\n border = w[0] + w[1];\n ch = mix(ch, c1, smoothstep(border - blur, border + blur, stripe_p));\n\n float gradient_t = (stripe_p - w[0] - w[1]) / w[2];\n float gradient = mix(c1, c2, smoothstep(0., 1., gradient_t));\n ch = mix(ch, gradient, smoothstep(border - blur, border + blur, stripe_p));\n \n // Tint color is applied with color burn blending\n ch = mix(ch, 1. - min(1., (1. - ch) / max(tint, 0.0001)), u_colorTint.a);\n return ch;\n}\n\nvoid main() {\n\n float t = .1 * u_time;\n\n vec2 uv = v_objectUV;\n uv += .5;\n uv.y = 1. - uv.y;\n\n float cycleWidth = .5 * u_repetition;\n\n float mask = 1.;\n float contOffset = 1.;\n\n if (u_shape < 1.) {\n\n vec2 borderUV = v_responsiveUV + .5;\n float ratio = v_responsiveBoxGivenSize.x / v_responsiveBoxGivenSize.y;\n vec2 edge = min(borderUV, 1. - borderUV);\n vec2 pixel_thickness = 250. / v_responsiveBoxGivenSize;\n float maskX = smoothstep(0.0, pixel_thickness.x, edge.x);\n float maskY = smoothstep(0.0, pixel_thickness.y, edge.y);\n maskX = pow(maskX, .25);\n maskY = pow(maskY, .25);\n mask = clamp(1. - maskX * maskY, 0., 1.);\n\n uv = v_responsiveUV;\n if (ratio > 1.) {\n uv.y /= ratio;\n } else {\n uv.x *= ratio;\n }\n uv += .5;\n uv.y = 1. - uv.y;\n\n cycleWidth *= 2.;\n contOffset = 1.5;\n\n } else if (u_shape < 2.) {\n vec2 shapeUV = uv - .5;\n shapeUV *= .67;\n mask = pow(clamp(3. * length(shapeUV), 0., 1.), 18.);\n } else if (u_shape < 3.) {\n vec2 shapeUV = uv - .5;\n shapeUV *= 1.68;\n\n float r = length(shapeUV) * 2.;\n float a = atan(shapeUV.y, shapeUV.x) + .2;\n r *= (1. + .05 * sin(3. * a + 2. * t));\n float f = abs(cos(a * 3.));\n mask = smoothstep(f, f + .7, r);\n mask = pow(mask, 2.);\n\n uv *= .8;\n cycleWidth *= 1.6;\n\n } else if (u_shape < 4.) {\n vec2 shapeUV = uv - .5;\n shapeUV *= 1.3;\n mask = 0.;\n for (int i = 0; i < 5; i++) {\n float fi = float(i);\n float speed = 4.5 + 2. * sin(fi * 12.345);\n float angle = -fi * 1.5;\n vec2 dir1 = vec2(cos(angle), sin(angle));\n vec2 dir2 = vec2(cos(angle + 1.57), sin(angle + 1.));\n vec2 traj = .4 * (dir1 * sin(t * speed + fi * 1.23) + dir2 * cos(t * (speed * 0.7) + fi * 2.17));\n float d = length(shapeUV + traj);\n mask += pow(1.0 - clamp(d, 0.0, 1.0), 4.0);\n }\n mask = 1. - smoothstep(.65, .9, mask);\n mask = pow(mask, 4.);\n }\n\n float opacity = 1. - smoothstep(.8, .82, mask);\n\n float ridge = .15 * (smoothstep(.0, .15, uv.y) * smoothstep(.4, .15, uv.y));\n ridge += .05 * (smoothstep(.1, .2, 1. - uv.y) * smoothstep(.4, .2, 1. - uv.y));\n mask += ridge;\n\n float diagBLtoTR = uv.x - uv.y;\n float diagTLtoBR = uv.x + uv.y;\n\n vec3 color = vec3(0.);\n vec3 color1 = vec3(.98, 0.98, 1.);\n vec3 color2 = vec3(.1, .1, .1 + .1 * smoothstep(.7, 1.3, diagTLtoBR));\n\n vec2 grad_uv = uv - .5;\n\n float dist = length(grad_uv + vec2(0., .2 * diagBLtoTR));\n grad_uv = rotate(grad_uv, (.25 - .2 * diagBLtoTR) * PI);\n float direction = grad_uv.x;\n\n float bump = pow(1.8 * dist, 1.2);\n bump = 1. - bump;\n bump *= pow(uv.y, .3);\n\n\n float thin_strip_1_ratio = .12 / cycleWidth * (1. - .4 * bump);\n float thin_strip_2_ratio = .07 / cycleWidth * (1. + .4 * bump);\n float wide_strip_ratio = (1. - thin_strip_1_ratio - thin_strip_2_ratio);\n\n float thin_strip_1_width = cycleWidth * thin_strip_1_ratio;\n float thin_strip_2_width = cycleWidth * thin_strip_2_ratio;\n\n float noise = snoise(uv - t);\n\n mask += (1. - mask) * u_distortion * noise;\n\n direction += diagBLtoTR;\n\n float contour = u_contour * smoothstep(0., contOffset, mask) * smoothstep(contOffset, 0., mask);\n direction -= 14. * noise * contour;\n\n bump *= clamp(pow(uv.y, .1), .3, 1.);\n direction *= (.1 + (1.1 - mask) * bump);\n direction *= smoothstep(1., .2, mask);\n\n\n direction *= (.5 + .5 * pow(uv.y, 2.));\n direction *= cycleWidth;\n direction -= t;\n\n\n float colorDispersion = (1. - bump);\n float dispersionRed = colorDispersion;\n dispersionRed += bump * noise;\n float dispersionBlue = colorDispersion;\n\n dispersionRed *= (u_shiftRed / 20.);\n dispersionBlue *= (u_shiftBlue / 20.);\n\n float blur = u_softness / 15. + .3 * contour;\n\n vec3 w = vec3(thin_strip_1_width, thin_strip_2_width, wide_strip_ratio);\n w[1] -= .02 * smoothstep(.0, 1., mask + bump);\n float stripe_r = mod(direction + dispersionRed, 1.);\n float r = getColorChanges(color1.r, color2.r, stripe_r, w, blur, bump, u_colorTint.r);\n float stripe_g = mod(direction, 1.);\n float g = getColorChanges(color1.g, color2.g, stripe_g, w, blur, bump, u_colorTint.g);\n float stripe_b = mod(direction - dispersionBlue, 1.);\n float b = getColorChanges(color1.b, color2.b, stripe_b, w, blur, bump, u_colorTint.b);\n\n color = vec3(r, g, b);\n color *= opacity;\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 LiquidMetalUniforms extends ShaderSizingUniforms {\n u_colorBack: [number, number, number, number];\n u_colorTint: [number, number, number, number];\n u_softness: number;\n u_repetition: number;\n u_shiftRed: number;\n u_shiftBlue: number;\n u_distortion: number;\n u_contour: number;\n u_shape: (typeof LiquidMetalShapes)[LiquidMetalShape];\n}\n\nexport interface LiquidMetalParams extends ShaderSizingParams, ShaderMotionParams {\n colorBack?: string;\n colorTint?: string;\n softness?: number;\n repetition?: number;\n shiftRed?: number;\n shiftBlue?: number;\n distortion?: number;\n contour?: number;\n shape?: LiquidMetalShape;\n}\n\nexport const LiquidMetalShapes = {\n none: 0,\n circle: 1,\n daisy: 2,\n metaballs: 3,\n} as const;\n\nexport type LiquidMetalShape = keyof typeof LiquidMetalShapes;\n"],
|
|
5
|
+
"mappings": ";;;;;AACA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,eAAe,qBAAqB,uBAAuB;AAsBxE,MAAM,4BAAoC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAgB/C,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA,EACT,aAAa;AAAA,EACb,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAgLjB,eAAe;AAAA;AAAA;AAAA;AAAA;AA8BZ,MAAM,oBAAoB;AAAA,EAC/B,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,WAAW;AACb;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -5,14 +5,14 @@ export declare const meshGradientMeta: {
|
|
|
5
5
|
readonly maxColorCount: 10;
|
|
6
6
|
};
|
|
7
7
|
/**
|
|
8
|
-
*
|
|
9
|
-
*
|
|
8
|
+
* A composition of N color spots (one per color) with 2 types of
|
|
9
|
+
* distortions applied to the coordinate space
|
|
10
|
+
*
|
|
11
|
+
* Uniforms:
|
|
12
|
+
* - u_colors (vec4[]), u_colorsCount (float used as integer)
|
|
13
|
+
* - u_distortion: warp distortion
|
|
14
|
+
* - u_swirl: vortex distortion
|
|
10
15
|
*
|
|
11
|
-
* Uniforms include:
|
|
12
|
-
* - u_colors (vec4[]): Input RGBA colors
|
|
13
|
-
* - u_colorsCount (float): Number of active colors (`u_colors` length)
|
|
14
|
-
* - u_distortion (float): Amount of animated wavy distortion applied to UV coordinates
|
|
15
|
-
* - u_swirl (float): Amount of radial swirl distortion applied to UV coordinates
|
|
16
16
|
*/
|
|
17
17
|
export declare const meshGradientFragmentShader: string;
|
|
18
18
|
export interface MeshGradientUniforms extends ShaderSizingUniforms {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/shaders/mesh-gradient.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, declareRotate, colorBandingFix } from '../shader-utils.js';\n\nexport const meshGradientMeta = {\n maxColorCount: 10,\n} as const;\n\n/**\n *
|
|
5
|
-
"mappings": ";;;;;AAEA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,eAAe,uBAAuB;AAEnD,MAAM,mBAAmB;AAAA,EAC9B,eAAe;AACjB;
|
|
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, declareRotate, colorBandingFix } from '../shader-utils.js';\n\nexport const meshGradientMeta = {\n maxColorCount: 10,\n} as const;\n\n/**\n * A composition of N color spots (one per color) with 2 types of\n * distortions applied to the coordinate space\n *\n * Uniforms:\n * - u_colors (vec4[]), u_colorsCount (float used as integer)\n * - u_distortion: warp distortion\n * - u_swirl: vortex distortion\n *\n */\n\nexport const meshGradientFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\n\nuniform vec4 u_colors[${meshGradientMeta.maxColorCount}];\nuniform float u_colorsCount;\n\nuniform float u_distortion;\nuniform float u_swirl;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n${declareRotate}\n\nvec2 getPosition(int i, float t) {\n float a = float(i) * .37;\n float b = .6 + mod(float(i), 3.) * .3;\n float c = .8 + mod(float(i + 1), 4.) * 0.25;\n\n float x = sin(t * b + a);\n float y = cos(t * c + a * 1.5);\n\n return .5 + .5 * vec2(x, y);\n}\n\nvoid main() {\n vec2 shape_uv = v_objectUV;\n\n shape_uv += .5;\n\n float t = .5 * u_time;\n\n float radius = smoothstep(0., 1., length(shape_uv - .5));\n float center = 1. - radius;\n for (float i = 1.; i <= 2.; i++) {\n shape_uv.x += u_distortion * center / i * sin(t + i * .4 * smoothstep(.0, 1., shape_uv.y)) * cos(.2 * t + i * 2.4 * smoothstep(.0, 1., shape_uv.y));\n shape_uv.y += u_distortion * center / i * cos(t + i * 2. * smoothstep(.0, 1., shape_uv.x));\n }\n\n vec2 uvRotated = shape_uv;\n uvRotated -= vec2(.5);\n float angle = 3. * u_swirl * radius;\n uvRotated = rotate(uvRotated, -angle);\n uvRotated += vec2(.5);\n\n vec3 color = vec3(0.);\n float opacity = 0.;\n float totalWeight = 0.;\n\n for (int i = 0; i < ${meshGradientMeta.maxColorCount}; i++) {\n if (i >= int(u_colorsCount)) break;\n\n vec2 pos = getPosition(i, t);\n vec3 colorFraction = u_colors[i].rgb * u_colors[i].a;\n float opacityFraction = u_colors[i].a;\n\n float dist = 0.;\n if (mod(float(i), 2.) > 1.) {\n dist = length(shape_uv - pos);\n } else {\n dist = length(uvRotated - pos);\n }\n\n dist = pow(dist, 3.5);\n float weight = 1. / (dist + 1e-3);\n color += colorFraction * weight;\n opacity += opacityFraction * weight;\n totalWeight += weight;\n }\n\n color /= totalWeight;\n opacity /= totalWeight;\n\n ${colorBandingFix}\n\n fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface MeshGradientUniforms extends ShaderSizingUniforms {\n u_colors: vec4[];\n u_colorsCount: number;\n u_distortion: number;\n u_swirl: number;\n}\n\nexport interface MeshGradientParams extends ShaderSizingParams, ShaderMotionParams {\n colors?: string[];\n distortion?: number;\n swirl?: number;\n}\n"],
|
|
5
|
+
"mappings": ";;;;;AAEA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,eAAe,uBAAuB;AAEnD,MAAM,mBAAmB;AAAA,EAC9B,eAAe;AACjB;AAaO,MAAM,6BAAqC;AAAA;AAAA;AAAA;AAAA;AAAA,wBAK1B,iBAAiB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMpD,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA,EACT,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAqCS,iBAAiB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAwBlD,eAAe;AAAA;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -6,15 +6,15 @@ export declare const metaballsMeta: {
|
|
|
6
6
|
readonly maxBallsCount: 20;
|
|
7
7
|
};
|
|
8
8
|
/**
|
|
9
|
-
*
|
|
10
|
-
*
|
|
9
|
+
* N circular shapes moving around the center, blending and merging based on distance
|
|
10
|
+
*
|
|
11
|
+
* Uniforms:
|
|
12
|
+
* - u_colorBack (RGBA)
|
|
13
|
+
* - u_colors (vec4[]), u_colorsCount (float used as integer)
|
|
14
|
+
* - u_size: ball base size
|
|
15
|
+
* - u_sizeRange (0..1): randomizes the size of balls between 0 and u_size
|
|
16
|
+
* - u_count: number of balls on the canvas
|
|
11
17
|
*
|
|
12
|
-
* Uniforms include:
|
|
13
|
-
* - u_colorBack: the background color of the scene
|
|
14
|
-
* - uColors (vec4[]): Input RGBA colors
|
|
15
|
-
* - uColorsCount (float): Number of active colors (`uColors` length)
|
|
16
|
-
* - u_count (float)
|
|
17
|
-
* - u_size (float)
|
|
18
18
|
*/
|
|
19
19
|
export declare const metaballsFragmentShader: string;
|
|
20
20
|
export interface MetaballsUniforms extends ShaderSizingUniforms {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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 *
|
|
5
|
-
"mappings": ";;;;;AAEA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,uBAAuB;AAEpC,MAAM,gBAAgB;AAAA,EAC3B,eAAe;AAAA,EACf,eAAe;AACjB;
|
|
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 * N circular shapes moving around the center, blending and merging based on distance\n *\n * Uniforms:\n * - u_colorBack (RGBA)\n * - u_colors (vec4[]), u_colorsCount (float used as integer)\n * - u_size: ball base size\n * - u_sizeRange (0..1): randomizes the size of balls between 0 and u_size\n * - u_count: number of balls on the canvas\n *\n */\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;AAcO,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
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,16 +1,14 @@
|
|
|
1
1
|
import type { ShaderMotionParams } from '../shader-mount.js';
|
|
2
2
|
import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
|
|
3
3
|
/**
|
|
4
|
-
* Neuro Noise Pattern
|
|
5
|
-
* Original algo: https://x.com/zozuar/status/1625182758745128981/
|
|
6
|
-
* Renders a fractal-like structure made of several layers of since-arches
|
|
7
4
|
*
|
|
8
|
-
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
*
|
|
13
|
-
*
|
|
5
|
+
* Fractal-like structure made of several layers of since arches
|
|
6
|
+
* Original algorithm: https://x.com/zozuar/status/1625182758745128981/
|
|
7
|
+
*
|
|
8
|
+
* Uniforms:
|
|
9
|
+
* - u_colorBack, u_colorMid, u_colorFront (RGBA)
|
|
10
|
+
* - u_brightness, u_contrast
|
|
11
|
+
*
|
|
14
12
|
*/
|
|
15
13
|
export declare const neuroNoiseFragmentShader: string;
|
|
16
14
|
export interface NeuroNoiseUniforms extends ShaderSizingUniforms {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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 *
|
|
5
|
-
"mappings": ";;;;;AACA,SAAS,kCAAsF;AAC/F,SAAS,eAAe,uBAAuB;
|
|
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 *\n * Fractal-like structure made of several layers of since arches\n * Original algorithm: https://x.com/zozuar/status/1625182758745128981/\n *\n * Uniforms:\n * - u_colorBack, u_colorMid, u_colorFront (RGBA)\n * - u_brightness, u_contrast\n *\n */\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;AAaxC,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
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,20 +1,16 @@
|
|
|
1
1
|
import type { ShaderMotionParams } from '../shader-mount.js';
|
|
2
2
|
import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
|
|
3
3
|
/**
|
|
4
|
-
* 3d Perlin noise
|
|
5
|
-
*
|
|
4
|
+
* 3d Perlin noise; original algorithm: https://www.shadertoy.com/view/NlSGDz
|
|
5
|
+
*
|
|
6
|
+
* Uniforms:
|
|
7
|
+
* - u_colorBack, u_colorFront (RGBA)
|
|
8
|
+
* - u_proportion: (0..1) blend point between 2 colors (0.5 = equal distribution)
|
|
9
|
+
* - u_softness: color transition sharpness (0 = hard edge, 1 = smooth fade)
|
|
10
|
+
* - u_octaveCount: more octaves => more detailed pattern
|
|
11
|
+
* - u_persistence: roughness, falloff between octaves
|
|
12
|
+
* - u_lacunarity: frequency step, typically around 2, defines how compressed is the pattern
|
|
6
13
|
*
|
|
7
|
-
* Uniforms include:
|
|
8
|
-
* u_colorFront - the first mixed color
|
|
9
|
-
* u_colorBack - the second mixed color
|
|
10
|
-
* u_proportion (0 .. 1) - the proportion between u_colorFront and u_colorBack;
|
|
11
|
-
* u_softness - the sharpness of the transition between u_colorFront and u_colorBack in the noise output
|
|
12
|
-
* u_octaveCount - the number of octaves for Perlin noise;
|
|
13
|
-
* higher values increase the complexity of the noise
|
|
14
|
-
* u_persistence (0 .. 1) - the amplitude of each successive octave of the noise;
|
|
15
|
-
* lower values make higher octaves less pronounced
|
|
16
|
-
* u_lacunarity - the frequency of each successive octave of the noise;
|
|
17
|
-
* higher values increase the detail
|
|
18
14
|
*/
|
|
19
15
|
export declare const perlinNoiseFragmentShader: string;
|
|
20
16
|
export interface PerlinNoiseUniforms extends ShaderSizingUniforms {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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
|
|
5
|
-
"mappings": ";;;;;AACA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,uBAAuB;
|
|
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; original algorithm: https://www.shadertoy.com/view/NlSGDz\n *\n * Uniforms:\n * - u_colorBack, u_colorFront (RGBA)\n * - u_proportion: (0..1) blend point between 2 colors (0.5 = equal distribution)\n * - u_softness: color transition sharpness (0 = hard edge, 1 = smooth fade)\n * - u_octaveCount: more octaves => more detailed pattern\n * - u_persistence: roughness, falloff between octaves\n * - u_lacunarity: frequency step, typically around 2, defines how compressed is the pattern\n *\n */\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;AAepC,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
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -6,22 +6,21 @@ export declare const pulsingBorderMeta: {
|
|
|
6
6
|
readonly maxSpotsPerColor: 5;
|
|
7
7
|
};
|
|
8
8
|
/**
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
9
|
+
* Color spots traveling around rectangular stroke (border)
|
|
10
|
+
*
|
|
11
|
+
* Uniforms:
|
|
12
|
+
* - u_colorBack (RGBA)
|
|
13
|
+
* - u_colors (vec4[]), u_colorsCount (float used as integer)
|
|
14
|
+
* - u_roundness, u_thickness, u_softness: border parameters
|
|
15
|
+
* - u_intensity: global multiplier for spots shape & color
|
|
16
|
+
* - u_spotSize: angular size of spots
|
|
17
|
+
* - u_spotsPerColor (float used as int): number of spots rendered per color (not all visible at the same time)
|
|
18
|
+
* - u_pulse: optional pulsing animation
|
|
19
|
+
* - u_smoke, u_smokeSize: optional noisy shapes around the border
|
|
20
|
+
*
|
|
21
|
+
* - u_pulseTexture (sampler2D): pulsing signal source
|
|
22
|
+
* - u_noiseTexture (sampler2D): pre-computed randomizer source
|
|
12
23
|
*
|
|
13
|
-
* Uniforms include:
|
|
14
|
-
* u_colorBack - The background color of the pattern
|
|
15
|
-
* u_colors - An array of colors for the pulsing spots (with up to `u_colorsCount` entries)
|
|
16
|
-
* u_colorsCount - The number of colors used in the pattern
|
|
17
|
-
* u_roundness - The roundness of the border corners
|
|
18
|
-
* u_thickness - The thickness of the border
|
|
19
|
-
* u_softness - The blur around the border edges
|
|
20
|
-
* u_intensity - The intensity multiplier for the pulsing effect
|
|
21
|
-
* u_spotSize - The size of the color spots
|
|
22
|
-
* u_spotsPerColor - The number of spots for each color (not all the spots are visible all the time)
|
|
23
|
-
* u_pulse - A multiplier for the pulsing strength (pulsing signal taken from the u_pulseTexture)
|
|
24
|
-
* u_smoke - The strength of the smoke effect (the noise aroung the border)
|
|
25
24
|
*/
|
|
26
25
|
export declare const pulsingBorderFragmentShader: string;
|
|
27
26
|
export interface PulsingBorderUniforms extends ShaderSizingUniforms {
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* * * * * * * * * * * * * * * * * * * * * * * * * * * */
|
|
5
5
|
|
|
6
6
|
import { sizingVariablesDeclaration } from "../shader-sizing.js";
|
|
7
|
-
import { declarePI, colorBandingFix } from "../shader-utils.js";
|
|
7
|
+
import { declarePI, declareValueNoise, colorBandingFix } from "../shader-utils.js";
|
|
8
8
|
const pulsingBorderMeta = {
|
|
9
9
|
maxColorCount: 5,
|
|
10
10
|
maxSpotsPerColor: 5
|
|
@@ -37,7 +37,7 @@ out vec4 fragColor;
|
|
|
37
37
|
${declarePI}
|
|
38
38
|
|
|
39
39
|
float roundedBox(vec2 uv, vec2 halfSize, float radius, float distance, float edgeSoftness) {
|
|
40
|
-
|
|
40
|
+
|
|
41
41
|
float borderDistance = abs(distance) - .5 * u_thickness;
|
|
42
42
|
float border = 1. - smoothstep(-.5 * edgeSoftness, .5 * edgeSoftness, borderDistance);
|
|
43
43
|
border *= border;
|
|
@@ -92,23 +92,16 @@ float roundedBoxSmoke(vec2 uv, vec2 halfSize, float radius, float distance, floa
|
|
|
92
92
|
return border * mask;
|
|
93
93
|
}
|
|
94
94
|
|
|
95
|
-
|
|
95
|
+
float random(vec2 p) {
|
|
96
|
+
vec2 uv = floor(p) / 100. + .5;
|
|
97
|
+
return texture(u_noiseTexture, uv).g;
|
|
98
|
+
}
|
|
99
|
+
vec2 rand2(vec2 p) {
|
|
96
100
|
vec2 uv = floor(p) / 100. + .5;
|
|
97
101
|
return texture(u_noiseTexture, uv).gb;
|
|
98
102
|
}
|
|
99
103
|
|
|
100
|
-
|
|
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
|
-
}
|
|
104
|
+
${declareValueNoise}
|
|
112
105
|
|
|
113
106
|
float getWaveformValue(float time) {
|
|
114
107
|
float dur = 5.;
|
|
@@ -145,8 +138,8 @@ void main() {
|
|
|
145
138
|
border *= (1. + u_intensity);
|
|
146
139
|
|
|
147
140
|
vec2 smokeUV = .001 * u_smokeSize * v_patternUV;
|
|
148
|
-
float smoke = clamp(3. *
|
|
149
|
-
smoke -=
|
|
141
|
+
float smoke = clamp(3. * valueNoise(2.7 * smokeUV + .5 * t), 0., 1.);
|
|
142
|
+
smoke -= valueNoise(3.4 * smokeUV - .5 * t);
|
|
150
143
|
smoke *= roundedBoxSmoke(borderUV, halfSize, radius, distance, u_smoke);
|
|
151
144
|
smoke = 50. * pow(smoke, 2.);
|
|
152
145
|
smoke *= u_smoke;
|
|
@@ -171,8 +164,8 @@ void main() {
|
|
|
171
164
|
if (j >= int(u_colorsCount)) break;
|
|
172
165
|
float colorIdx = float(j);
|
|
173
166
|
|
|
174
|
-
vec2 randVal =
|
|
175
|
-
|
|
167
|
+
vec2 randVal = rand2(vec2(idx * 10. + 2., 40. + colorIdx));
|
|
168
|
+
|
|
176
169
|
float time = (.1 + .15 * abs(sin(idx * (2. + colorIdx)) * cos(idx * (2. + 2.5 * colorIdx)))) * t + randVal.x * 3.;
|
|
177
170
|
time *= mix(1., -1., step(.5, randVal.y));
|
|
178
171
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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 *
|
|
5
|
-
"mappings": ";;;;;AAEA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,uBAAuB;
|
|
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, declareValueNoise, colorBandingFix } from '../shader-utils.js';\n\nexport const pulsingBorderMeta = {\n maxColorCount: 5,\n maxSpotsPerColor: 5,\n} as const;\n\n/**\n * Color spots traveling around rectangular stroke (border)\n *\n * Uniforms:\n * - u_colorBack (RGBA)\n * - u_colors (vec4[]), u_colorsCount (float used as integer)\n * - u_roundness, u_thickness, u_softness: border parameters\n * - u_intensity: global multiplier for spots shape & color\n * - u_spotSize: angular size of spots\n * - u_spotsPerColor (float used as int): number of spots rendered per color (not all visible at the same time)\n * - u_pulse: optional pulsing animation\n * - u_smoke, u_smokeSize: optional noisy shapes around the border\n *\n * - u_pulseTexture (sampler2D): pulsing signal source\n * - u_noiseTexture (sampler2D): pre-computed randomizer source\n *\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\nfloat random(vec2 p) {\n vec2 uv = floor(p) / 100. + .5;\n return texture(u_noiseTexture, uv).g;\n}\nvec2 rand2(vec2 p) {\n vec2 uv = floor(p) / 100. + .5;\n return texture(u_noiseTexture, uv).gb;\n}\n\n${declareValueNoise}\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. * valueNoise(2.7 * smokeUV + .5 * t), 0., 1.);\n smoke -= valueNoise(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 = rand2(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,mBAAmB,uBAAuB;AAEvD,MAAM,oBAAoB;AAAA,EAC/B,eAAe;AAAA,EACf,kBAAkB;AACpB;AAoBO,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,EAmET,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAuDK,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
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -5,16 +5,14 @@ export declare const simplexNoiseMeta: {
|
|
|
5
5
|
readonly maxColorCount: 10;
|
|
6
6
|
};
|
|
7
7
|
/**
|
|
8
|
-
*
|
|
9
|
-
* Calculates a combination of 2 simplex noises with result mapped as
|
|
10
|
-
* a gradient with dynamic number of main colors and steps between them
|
|
8
|
+
* Color Gradient mapped over a combination of 2 Simplex noises
|
|
11
9
|
*
|
|
12
|
-
* Uniforms
|
|
13
|
-
* - u_colors (vec4[])
|
|
14
|
-
* -
|
|
15
|
-
* -
|
|
16
|
-
*
|
|
17
|
-
*/
|
|
10
|
+
* Uniforms:
|
|
11
|
+
* - u_colors (vec4[]), u_colorsCount (float used as integer)
|
|
12
|
+
* - u_stepsPerColor (float, used as int): discrete color steps between u_colors
|
|
13
|
+
* - u_softness: color transition sharpness (0 = hard edge, 1 = smooth fade)
|
|
14
|
+
*
|
|
15
|
+
* */
|
|
18
16
|
export declare const simplexNoiseFragmentShader: string;
|
|
19
17
|
export interface SimplexNoiseUniforms extends ShaderSizingUniforms {
|
|
20
18
|
u_colors: vec4[];
|