@paper-design/shaders 0.0.31-backbuffer-experiment.0 → 0.0.31-backbuffer-experiment.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/get-shader-color-from-string.js +93 -0
- package/dist/get-shader-color-from-string.js.map +7 -0
- package/dist/get-shader-noise-texture.js +23 -0
- package/dist/get-shader-noise-texture.js.map +7 -0
- package/dist/index.d.ts +1 -1
- package/dist/index.js +109 -0
- package/dist/index.js.map +7 -0
- package/dist/shader-color-spaces.js +96 -0
- package/dist/shader-color-spaces.js.map +7 -0
- package/dist/shader-mount.d.ts +9 -0
- package/dist/shader-mount.js +733 -0
- package/dist/shader-mount.js.map +7 -0
- package/dist/shader-sizing.js +193 -0
- package/dist/shader-sizing.js.map +7 -0
- package/dist/shader-utils.js +59 -0
- package/dist/shader-utils.js.map +7 -0
- package/dist/shaders/dithering.d.ts +6 -6
- package/dist/shaders/dithering.js +221 -0
- package/dist/shaders/dithering.js.map +7 -0
- package/dist/shaders/dot-grid.js +107 -0
- package/dist/shaders/dot-grid.js.map +7 -0
- package/dist/shaders/dot-orbit.d.ts +3 -0
- package/dist/shaders/dot-orbit.js +124 -0
- package/dist/shaders/dot-orbit.js.map +7 -0
- package/dist/shaders/god-rays.d.ts +6 -3
- package/dist/shaders/god-rays.js +133 -0
- package/dist/shaders/god-rays.js.map +7 -0
- package/dist/shaders/grain-gradient.d.ts +2 -0
- package/dist/shaders/grain-gradient.js +243 -0
- package/dist/shaders/grain-gradient.js.map +7 -0
- package/dist/shaders/liquid-metal.d.ts +25 -10
- package/dist/shaders/liquid-metal.js +221 -0
- package/dist/shaders/liquid-metal.js.map +7 -0
- package/dist/shaders/mesh-gradient.js +97 -0
- package/dist/shaders/mesh-gradient.js.map +7 -0
- package/dist/shaders/metaballs.d.ts +3 -0
- package/dist/shaders/metaballs.js +110 -0
- package/dist/shaders/metaballs.js.map +7 -0
- package/dist/shaders/neuro-noise.d.ts +10 -4
- package/dist/shaders/neuro-noise.js +81 -0
- package/dist/shaders/neuro-noise.js.map +7 -0
- package/dist/shaders/perlin-noise.d.ts +8 -8
- package/dist/shaders/perlin-noise.js +201 -0
- package/dist/shaders/perlin-noise.js.map +7 -0
- package/dist/shaders/pulsing-border.js +218 -0
- package/dist/shaders/pulsing-border.js.map +7 -0
- package/dist/shaders/simplex-noise.js +103 -0
- package/dist/shaders/simplex-noise.js.map +7 -0
- package/dist/shaders/smoke-ring.js +141 -0
- package/dist/shaders/smoke-ring.js.map +7 -0
- package/dist/shaders/spiral.d.ts +6 -6
- package/dist/shaders/spiral.js +83 -0
- package/dist/shaders/spiral.js.map +7 -0
- package/dist/shaders/swirl.d.ts +2 -0
- package/dist/shaders/swirl.js +91 -0
- package/dist/shaders/swirl.js.map +7 -0
- package/dist/shaders/voronoi.d.ts +5 -5
- package/dist/shaders/voronoi.js +143 -0
- package/dist/shaders/voronoi.js.map +7 -0
- package/dist/shaders/warp.js +128 -0
- package/dist/shaders/warp.js.map +7 -0
- package/dist/shaders/waves.d.ts +6 -6
- package/dist/shaders/waves.js +68 -0
- package/dist/shaders/waves.js.map +7 -0
- package/dist/types.js +6 -0
- package/dist/types.js.map +7 -0
- package/package.json +2 -2
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/shaders/dithering.ts"],
|
|
4
|
+
"sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount';\nimport {\n sizingUniformsDeclaration,\n type ShaderSizingParams,\n type ShaderSizingUniforms,\n sizingUV,\n drawSizingHelpers,\n} from '../shader-sizing';\nimport { declareSimplexNoise, declarePI, declareRandom } from '../shader-utils';\n\n/**\n * Dithering Fragment Shader by Ksenia Kondrashova\n * Applies dithering (4 dithering types available) over the\n * abstract shapes animation (7 animated shapes available)\n *\n * Uniforms include:\n * - u_colorBack: background color, RGBA\n * - u_colorFront: pixels color, RGBA\n *\n * - u_shape (float, used as int, 1 to 7):\n * --- shape = 1: Simplex noise pattern\n * --- shape = 2: Warp noise pattern\n * --- shape = 3: Columns if dots moving vertically\n * --- shape = 4: Sine wave\n * --- shape = 5: Ripple effect\n * --- shape = 6: Swirl animation\n * --- shape = 7: Rotating sphere\n *\n * - u_type (float, used as int, 1 to 4):\n * --- type = 1: Random dithering\n * --- type = 2: 2x2 Bayer matrix\n * --- type = 3: 4x4 Bayer matrix\n * --- type = 4: 8x8 Bayer matrix\n *\n * - pxSize (float), relative to canvas resolution\n *\n */\nexport const ditheringFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\nuniform vec2 u_resolution;\nuniform float u_pixelRatio;\n\n${sizingUniformsDeclaration}\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colorFront;\nuniform float u_shape;\nuniform float u_type;\nuniform float u_pxSize;\n\nout vec4 fragColor;\n\n${declareSimplexNoise}\n${declarePI}\n${declareRandom}\n\nfloat getSimplexNoise(vec2 uv, float t) {\n float noise = .5 * snoise(uv - vec2(0., .3 * t));\n noise += .5 * snoise(2. * uv + vec2(0., .32 * t));\n\n return noise;\n}\n\nconst int bayer2x2[4] = int[4](0, 2, 3, 1);\nconst int bayer4x4[16] = int[16](\n 0, 8, 2, 10,\n 12, 4, 14, 6,\n 3, 11, 1, 9,\n 15, 7, 13, 5\n);\n\nconst int bayer8x8[64] = int[64](\n 0, 32, 8, 40, 2, 34, 10, 42,\n 48, 16, 56, 24, 50, 18, 58, 26,\n 12, 44, 4, 36, 14, 46, 6, 38,\n 60, 28, 52, 20, 62, 30, 54, 22,\n 3, 35, 11, 43, 1, 33, 9, 41,\n 51, 19, 59, 27, 49, 17, 57, 25,\n 15, 47, 7, 39, 13, 45, 5, 37,\n 63, 31, 55, 23, 61, 29, 53, 21\n);\n\nfloat getBayerValue(vec2 uv, int size) {\n ivec2 pos = ivec2(mod(uv, float(size)));\n int index = pos.y * size + pos.x;\n\n if (size == 2) {\n return float(bayer2x2[index]) / 4.0;\n } else if (size == 4) {\n return float(bayer4x4[index]) / 16.0;\n } else if (size == 8) {\n return float(bayer8x8[index]) / 64.0;\n }\n return 0.0;\n}\n\n\nvoid main() {\n float t = .5 * u_time;\n\n #define USE_PATTERN_SIZING\n #define USE_OBJECT_SIZING\n #define USE_PIXELIZATION\n // #define ADD_HELPERS\n\n ${sizingUV}\n\n vec2 dithering_uv = pxSizeUv;\n vec2 ditheringNoise_uv = uv;\n vec2 shape_uv = objectUV;\n if (u_shape < 3.5) {\n shape_uv = patternUV;\n }\n\n float shape = 0.;\n if (u_shape < 1.5) {\n // Simplex noise\n shape_uv *= .001;\n\n shape = 0.5 + 0.5 * getSimplexNoise(shape_uv, t);\n shape = smoothstep(0.3, 0.9, shape);\n\n } else if (u_shape < 2.5) {\n // Warp\n shape_uv *= .003;\n\n for (float i = 1.0; i < 6.0; i++) {\n shape_uv.x += 0.6 / i * cos(i * 2.5 * shape_uv.y + t);\n shape_uv.y += 0.6 / i * cos(i * 1.5 * shape_uv.x + t);\n }\n\n shape = .15 / abs(sin(t - shape_uv.y - shape_uv.x));\n shape = smoothstep(0.02, 1., shape);\n\n } else if (u_shape < 3.5) {\n // Dots\n shape_uv *= .05;\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, 6.);\n\n } else if (u_shape < 4.5) {\n // Sine wave\n shape_uv *= 4.;\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 < 5.5) {\n // Ripple\n\n float dist = length(shape_uv);\n float waves = sin(pow(dist, 1.7) * 7. - 3. * t) * .5 + .5;\n shape = waves;\n\n } else if (u_shape < 6.5) {\n // Swirl\n\n float l = length(shape_uv);\n float angle = 6. * atan(shape_uv.y, shape_uv.x) + 4. * t;\n float twist = 1.2;\n float offset = pow(l, -twist) + angle / TWO_PI;\n float mid = smoothstep(0., 1., pow(l, twist));\n shape = mix(0., fract(offset), mid);\n\n } else {\n // Sphere\n shape_uv *= 2.;\n\n vec3 pos = vec3(shape_uv, sqrt(1. - pow(length(shape_uv), 2.)));\n vec3 lightPos = normalize(vec3(cos(1.5 * t), .8, sin(1.25 * t)));\n shape = .5 + .5 * dot(lightPos, pos);\n }\n\n\n int type = int(floor(u_type));\n float dithering = 0.0;\n\n switch (type) {\n case 1: {\n dithering = step(random(ditheringNoise_uv), shape);\n } break;\n case 2:\n dithering = getBayerValue(dithering_uv, 2);\n break;\n case 3:\n dithering = getBayerValue(dithering_uv, 4);\n break;\n default:\n dithering = getBayerValue(dithering_uv, 8);\n break;\n }\n\n dithering -= .5;\n float res = step(.5, shape + dithering);\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 #ifdef ADD_HELPERS\n vec2 helperBox = objectHelperBox;\n vec2 boxSize = objectBoxSize;\n if (u_shape < 3.5) {\n helperBox = patternHelperBox;\n boxSize = patternBoxSize;\n }\n ${drawSizingHelpers}\n #endif\n\n fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface DitheringUniforms extends ShaderSizingUniforms {\n u_colorBack: [number, number, number, number];\n u_colorFront: [number, number, number, number];\n u_shape: (typeof DitheringShapes)[DitheringShape];\n u_type: (typeof DitheringTypes)[DitheringType];\n u_pxSize: number;\n}\n\nexport interface DitheringParams extends ShaderSizingParams, ShaderMotionParams {\n colorBack?: string;\n colorFront?: string;\n shape?: DitheringShape;\n type?: DitheringType;\n pxSize?: number;\n}\n\nexport const DitheringShapes = {\n simplex: 1,\n warp: 2,\n dots: 3,\n wave: 4,\n ripple: 5,\n swirl: 6,\n sphere: 7,\n} as const;\n\nexport type DitheringShape = keyof typeof DitheringShapes;\n\nexport const DitheringTypes = {\n random: 1,\n '2x2': 2,\n '4x4': 3,\n '8x8': 4,\n} as const;\n\nexport type DitheringType = keyof typeof DitheringTypes;\n"],
|
|
5
|
+
"mappings": ";;;;;AACA;AAAA,EACE;AAAA,EAGA;AAAA,EACA;AAAA,OACK;AACP,SAAS,qBAAqB,WAAW,qBAAqB;AA6BvD,MAAM,0BAAkC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAO7C,yBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUzB,mBAAmB;AAAA,EACnB,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAmDX,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAiHN,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBhB,MAAM,kBAAkB;AAAA,EAC7B,SAAS;AAAA,EACT,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AACV;AAIO,MAAM,iBAAiB;AAAA,EAC5B,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACT;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
|
2
|
+
* Paper Shaders *
|
|
3
|
+
* https://github.com/paper-design/shaders *
|
|
4
|
+
* * * * * * * * * * * * * * * * * * * * * * * * * * * */
|
|
5
|
+
|
|
6
|
+
import { sizingVariablesDeclaration } from "../shader-sizing";
|
|
7
|
+
import { declarePI, declareSimplexNoise } from "../shader-utils";
|
|
8
|
+
const dotGridFragmentShader = `#version 300 es
|
|
9
|
+
precision mediump float;
|
|
10
|
+
|
|
11
|
+
uniform vec4 u_colorBack;
|
|
12
|
+
uniform vec4 u_colorFill;
|
|
13
|
+
uniform vec4 u_colorStroke;
|
|
14
|
+
uniform float u_dotSize;
|
|
15
|
+
uniform float u_gapX;
|
|
16
|
+
uniform float u_gapY;
|
|
17
|
+
uniform float u_strokeWidth;
|
|
18
|
+
uniform float u_sizeRange;
|
|
19
|
+
uniform float u_opacityRange;
|
|
20
|
+
uniform float u_shape;
|
|
21
|
+
|
|
22
|
+
${sizingVariablesDeclaration}
|
|
23
|
+
|
|
24
|
+
out vec4 fragColor;
|
|
25
|
+
|
|
26
|
+
${declarePI}
|
|
27
|
+
${declareSimplexNoise}
|
|
28
|
+
|
|
29
|
+
float polygon(vec2 p, float N, float rot) {
|
|
30
|
+
float a = atan(p.x, p.y) + rot;
|
|
31
|
+
float r = TWO_PI / float(N);
|
|
32
|
+
|
|
33
|
+
return cos(floor(.5 + a / r) * r - a) * length(p);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
void main() {
|
|
37
|
+
|
|
38
|
+
vec2 shape_uv = v_patternUV;
|
|
39
|
+
shape_uv += .5;
|
|
40
|
+
|
|
41
|
+
vec2 grid = fract(shape_uv / vec2(u_gapX, u_gapY)) + 1e-4;
|
|
42
|
+
vec2 grid_idx = floor(shape_uv / vec2(u_gapX, u_gapY));
|
|
43
|
+
float sizeRandomizer = .5 + .8 * snoise(2. * vec2(grid_idx.x * 100., grid_idx.y));
|
|
44
|
+
float opacity_randomizer = .5 + .7 * snoise(2. * vec2(grid_idx.y, grid_idx.x));
|
|
45
|
+
|
|
46
|
+
vec2 center = vec2(0.5) - 1e-3;
|
|
47
|
+
vec2 p = (grid - center) * vec2(u_gapX, u_gapY);
|
|
48
|
+
|
|
49
|
+
float baseSize = u_dotSize * (1. - sizeRandomizer * u_sizeRange);
|
|
50
|
+
float strokeWidth = u_strokeWidth * (1. - sizeRandomizer * u_sizeRange);
|
|
51
|
+
|
|
52
|
+
float dist;
|
|
53
|
+
if (u_shape < 0.5) {
|
|
54
|
+
// Circle
|
|
55
|
+
dist = length(p);
|
|
56
|
+
} else if (u_shape < 1.5) {
|
|
57
|
+
// Diamond
|
|
58
|
+
strokeWidth *= 1.5;
|
|
59
|
+
dist = polygon(1.5 * p, 4., .25 * PI);
|
|
60
|
+
} else if (u_shape < 2.5) {
|
|
61
|
+
// Square
|
|
62
|
+
dist = polygon(1.03 * p, 4., 1e-3);
|
|
63
|
+
} else {
|
|
64
|
+
// Triangle
|
|
65
|
+
strokeWidth *= 1.5;
|
|
66
|
+
p = p * 2. - 1.;
|
|
67
|
+
p *= .9;
|
|
68
|
+
p.y -= .75 * baseSize;
|
|
69
|
+
dist = polygon(p, 3., 1e-3);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
float edgeWidth = fwidth(dist);
|
|
73
|
+
float shapeOuter = smoothstep(baseSize + edgeWidth, baseSize - edgeWidth, dist - strokeWidth);
|
|
74
|
+
float shapeInner = smoothstep(baseSize + edgeWidth, baseSize - edgeWidth, dist);
|
|
75
|
+
float stroke = shapeOuter - shapeInner;
|
|
76
|
+
|
|
77
|
+
float dotOpacity = max(0., 1. - opacity_randomizer * u_opacityRange);
|
|
78
|
+
stroke *= dotOpacity;
|
|
79
|
+
shapeInner *= dotOpacity;
|
|
80
|
+
|
|
81
|
+
stroke *= u_colorStroke.a;
|
|
82
|
+
shapeInner *= u_colorFill.a;
|
|
83
|
+
|
|
84
|
+
vec3 color = vec3(0.);
|
|
85
|
+
color += stroke * u_colorStroke.rgb;
|
|
86
|
+
color += shapeInner * u_colorFill.rgb;
|
|
87
|
+
color += (1. - shapeInner - stroke) * u_colorBack.rgb * u_colorBack.a;
|
|
88
|
+
|
|
89
|
+
float opacity = 0.;
|
|
90
|
+
opacity += stroke;
|
|
91
|
+
opacity += shapeInner;
|
|
92
|
+
opacity += (1. - opacity) * u_colorBack.a;
|
|
93
|
+
|
|
94
|
+
fragColor = vec4(color, opacity);
|
|
95
|
+
}
|
|
96
|
+
`;
|
|
97
|
+
const DotGridShapes = {
|
|
98
|
+
circle: 0,
|
|
99
|
+
diamond: 1,
|
|
100
|
+
square: 2,
|
|
101
|
+
triangle: 3
|
|
102
|
+
};
|
|
103
|
+
export {
|
|
104
|
+
DotGridShapes,
|
|
105
|
+
dotGridFragmentShader
|
|
106
|
+
};
|
|
107
|
+
//# sourceMappingURL=dot-grid.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/shaders/dot-grid.ts"],
|
|
4
|
+
"sourcesContent": ["import { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing';\nimport { declarePI, declareSimplexNoise } from '../shader-utils';\n\n/**\n * Dot Grid Pattern\n * (the size parameters are set in pixels)\n *\n * Uniforms include:\n * u_colorBack - the background color\n * u_colorFill - the fill color\n * u_colorStroke - the stroke color\n * u_dotSize (px) - the base dot radius\n * u_strokeWidth (px) - the stroke (to be subtracted from u_dotSize)\n * u_gapX (px) - horizontal grid spacing\n * u_gapY (px) - vertical grid spacing\n * u_sizeRange (0 .. 1) - variety of dot size\n * u_opacityRange(0 .. 1) - variety of dot opacity to be applied equally to fill and stroke\n * u_shape - shape code (0 - circle, 1 - diamond, 2 - square, 3 - triangle)\n */\nexport const dotGridFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colorFill;\nuniform vec4 u_colorStroke;\nuniform float u_dotSize;\nuniform float u_gapX;\nuniform float u_gapY;\nuniform float u_strokeWidth;\nuniform float u_sizeRange;\nuniform float u_opacityRange;\nuniform float u_shape;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n${declareSimplexNoise}\n\nfloat polygon(vec2 p, float N, float rot) {\n float a = atan(p.x, p.y) + rot;\n float r = TWO_PI / float(N);\n\n return cos(floor(.5 + a / r) * r - a) * length(p);\n}\n\nvoid main() {\n \n vec2 shape_uv = v_patternUV;\n shape_uv += .5;\n\n vec2 grid = fract(shape_uv / vec2(u_gapX, u_gapY)) + 1e-4;\n vec2 grid_idx = floor(shape_uv / vec2(u_gapX, u_gapY));\n float sizeRandomizer = .5 + .8 * snoise(2. * vec2(grid_idx.x * 100., grid_idx.y));\n float opacity_randomizer = .5 + .7 * snoise(2. * vec2(grid_idx.y, grid_idx.x));\n\n vec2 center = vec2(0.5) - 1e-3;\n vec2 p = (grid - center) * vec2(u_gapX, u_gapY);\n\n float baseSize = u_dotSize * (1. - sizeRandomizer * u_sizeRange);\n float strokeWidth = u_strokeWidth * (1. - sizeRandomizer * u_sizeRange);\n\n float dist;\n if (u_shape < 0.5) {\n // Circle\n dist = length(p);\n } else if (u_shape < 1.5) {\n // Diamond\n strokeWidth *= 1.5;\n dist = polygon(1.5 * p, 4., .25 * PI);\n } else if (u_shape < 2.5) {\n // Square\n dist = polygon(1.03 * p, 4., 1e-3);\n } else {\n // Triangle\n strokeWidth *= 1.5;\n p = p * 2. - 1.;\n p *= .9;\n p.y -= .75 * baseSize;\n dist = polygon(p, 3., 1e-3);\n }\n\n float edgeWidth = fwidth(dist);\n float shapeOuter = smoothstep(baseSize + edgeWidth, baseSize - edgeWidth, dist - strokeWidth);\n float shapeInner = smoothstep(baseSize + edgeWidth, baseSize - edgeWidth, dist);\n float stroke = shapeOuter - shapeInner;\n\n float dotOpacity = max(0., 1. - opacity_randomizer * u_opacityRange);\n stroke *= dotOpacity;\n shapeInner *= dotOpacity;\n\n stroke *= u_colorStroke.a;\n shapeInner *= u_colorFill.a;\n\n vec3 color = vec3(0.);\n color += stroke * u_colorStroke.rgb;\n color += shapeInner * u_colorFill.rgb;\n color += (1. - shapeInner - stroke) * u_colorBack.rgb * u_colorBack.a;\n\n float opacity = 0.;\n opacity += stroke;\n opacity += shapeInner;\n opacity += (1. - opacity) * u_colorBack.a;\n \n fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface DotGridUniforms extends ShaderSizingUniforms {\n u_colorBack: [number, number, number, number];\n u_colorFill: [number, number, number, number];\n u_colorStroke: [number, number, number, number];\n u_dotSize: number;\n u_gapX: number;\n u_gapY: number;\n u_strokeWidth: number;\n u_sizeRange: number;\n u_opacityRange: number;\n u_shape: (typeof DotGridShapes)[DotGridShape];\n}\n\nexport interface DotGridParams extends ShaderSizingParams {\n colorBack?: string;\n colorFill?: string;\n colorStroke?: string;\n size?: number;\n gapX?: number;\n gapY?: number;\n strokeWidth?: number;\n sizeRange?: number;\n opacityRange?: number;\n shape?: DotGridShape;\n}\n\nexport const DotGridShapes = {\n circle: 0,\n diamond: 1,\n square: 2,\n triangle: 3,\n} as const;\n\nexport type DotGridShape = keyof typeof DotGridShapes;\n"],
|
|
5
|
+
"mappings": ";;;;;AAAA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,2BAA2B;AAkBxC,MAAM,wBAAgC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAc3C,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiGd,MAAM,gBAAgB;AAAA,EAC3B,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,UAAU;AACZ;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -10,6 +10,7 @@ export declare const dotOrbitMeta: {
|
|
|
10
10
|
* Renders a dot pattern with dot placed in the center of each cell of animated Voronoi diagram
|
|
11
11
|
*
|
|
12
12
|
* Uniforms include:
|
|
13
|
+
* - u_colorBack (vec4): the background color of the scene
|
|
13
14
|
* - u_colors (vec4[]): Input RGBA colors
|
|
14
15
|
* - u_colorsCount (float): Number of active colors (`u_colors` length)
|
|
15
16
|
* - u_stepsPerColor (float): Discretization of the color transition
|
|
@@ -19,6 +20,7 @@ export declare const dotOrbitMeta: {
|
|
|
19
20
|
*/
|
|
20
21
|
export declare const dotOrbitFragmentShader: string;
|
|
21
22
|
export interface DotOrbitUniforms extends ShaderSizingUniforms {
|
|
23
|
+
u_colorBack: [number, number, number, number];
|
|
22
24
|
u_colors: vec4[];
|
|
23
25
|
u_colorsCount: number;
|
|
24
26
|
u_size: number;
|
|
@@ -27,6 +29,7 @@ export interface DotOrbitUniforms extends ShaderSizingUniforms {
|
|
|
27
29
|
u_stepsPerColor: number;
|
|
28
30
|
}
|
|
29
31
|
export interface DotOrbitParams extends ShaderSizingParams, ShaderMotionParams {
|
|
32
|
+
colorBack?: string;
|
|
30
33
|
colors?: string[];
|
|
31
34
|
size?: number;
|
|
32
35
|
sizeRange?: number;
|
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
|
2
|
+
* Paper Shaders *
|
|
3
|
+
* https://github.com/paper-design/shaders *
|
|
4
|
+
* * * * * * * * * * * * * * * * * * * * * * * * * * * */
|
|
5
|
+
|
|
6
|
+
import { sizingVariablesDeclaration } from "../shader-sizing";
|
|
7
|
+
import { declarePI, declareRandom, declareRotate } from "../shader-utils";
|
|
8
|
+
const dotOrbitMeta = {
|
|
9
|
+
maxColorCount: 10
|
|
10
|
+
};
|
|
11
|
+
const dotOrbitFragmentShader = `#version 300 es
|
|
12
|
+
precision mediump float;
|
|
13
|
+
|
|
14
|
+
uniform float u_time;
|
|
15
|
+
|
|
16
|
+
uniform vec4 u_colorBack;
|
|
17
|
+
uniform vec4 u_colors[${dotOrbitMeta.maxColorCount}];
|
|
18
|
+
uniform float u_colorsCount;
|
|
19
|
+
uniform float u_stepsPerColor;
|
|
20
|
+
uniform float u_size;
|
|
21
|
+
uniform float u_sizeRange;
|
|
22
|
+
uniform float u_spreading;
|
|
23
|
+
|
|
24
|
+
${sizingVariablesDeclaration}
|
|
25
|
+
|
|
26
|
+
out vec4 fragColor;
|
|
27
|
+
|
|
28
|
+
${declarePI}
|
|
29
|
+
${declareRandom}
|
|
30
|
+
${declareRotate}
|
|
31
|
+
|
|
32
|
+
vec2 random2(vec2 p) {
|
|
33
|
+
return vec2(random(p), random(200. * p));
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
vec3 voronoiShape(vec2 uv, float time) {
|
|
37
|
+
vec2 i_uv = floor(uv);
|
|
38
|
+
vec2 f_uv = fract(uv);
|
|
39
|
+
|
|
40
|
+
float spreading = .25 * clamp(u_spreading, 0., 1.);
|
|
41
|
+
|
|
42
|
+
float minDist = 1.;
|
|
43
|
+
vec2 randomizer = vec2(0.);
|
|
44
|
+
for (int y = -1; y <= 1; y++) {
|
|
45
|
+
for (int x = -1; x <= 1; x++) {
|
|
46
|
+
vec2 tileOffset = vec2(float(x), float(y));
|
|
47
|
+
vec2 rand = random2(i_uv + tileOffset);
|
|
48
|
+
vec2 cellCenter = vec2(.5 + 1e-4);
|
|
49
|
+
cellCenter += spreading * cos(time + TWO_PI * rand);
|
|
50
|
+
cellCenter -= .5;
|
|
51
|
+
cellCenter = rotate(cellCenter, random(vec2(rand.x, rand.y)) + .1 * time);
|
|
52
|
+
cellCenter += .5;
|
|
53
|
+
float dist = length(tileOffset + cellCenter - f_uv);
|
|
54
|
+
if (dist < minDist) {
|
|
55
|
+
minDist = dist;
|
|
56
|
+
randomizer = rand;
|
|
57
|
+
}
|
|
58
|
+
minDist = min(minDist, dist);
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
return vec3(minDist, randomizer);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
void main() {
|
|
66
|
+
|
|
67
|
+
vec2 shape_uv = v_patternUV;
|
|
68
|
+
shape_uv += .5;
|
|
69
|
+
shape_uv *= .015;
|
|
70
|
+
|
|
71
|
+
float t = u_time;
|
|
72
|
+
|
|
73
|
+
vec3 voronoi = voronoiShape(shape_uv, t) + 1e-4;
|
|
74
|
+
|
|
75
|
+
float radius = .25 * clamp(u_size, 0., 1.) - .5 * clamp(u_sizeRange, 0., 1.) * voronoi[2];
|
|
76
|
+
float dist = voronoi[0];
|
|
77
|
+
float edgeWidth = fwidth(dist);
|
|
78
|
+
float dots = smoothstep(radius + edgeWidth, radius - edgeWidth, dist);
|
|
79
|
+
|
|
80
|
+
float shape = voronoi[1];
|
|
81
|
+
|
|
82
|
+
float mixer = shape * (u_colorsCount - 1.);
|
|
83
|
+
mixer = (shape - .5 / u_colorsCount) * u_colorsCount;
|
|
84
|
+
float steps = max(1., u_stepsPerColor);
|
|
85
|
+
|
|
86
|
+
vec4 gradient = u_colors[0];
|
|
87
|
+
gradient.rgb *= gradient.a;
|
|
88
|
+
for (int i = 1; i < ${dotOrbitMeta.maxColorCount}; i++) {
|
|
89
|
+
if (i >= int(u_colorsCount)) break;
|
|
90
|
+
float localT = clamp(mixer - float(i - 1), 0.0, 1.0);
|
|
91
|
+
localT = round(localT * steps) / steps;
|
|
92
|
+
vec4 c = u_colors[i];
|
|
93
|
+
c.rgb *= c.a;
|
|
94
|
+
gradient = mix(gradient, c, localT);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
if ((mixer < 0.) || (mixer > (u_colorsCount - 1.))) {
|
|
98
|
+
float localT = mixer + 1.;
|
|
99
|
+
if (mixer > (u_colorsCount - 1.)) {
|
|
100
|
+
localT = mixer - (u_colorsCount - 1.);
|
|
101
|
+
}
|
|
102
|
+
localT = round(localT * steps) / steps;
|
|
103
|
+
vec4 cFst = u_colors[0];
|
|
104
|
+
cFst.rgb *= cFst.a;
|
|
105
|
+
vec4 cLast = u_colors[int(u_colorsCount - 1.)];
|
|
106
|
+
cLast.rgb *= cLast.a;
|
|
107
|
+
gradient = mix(cLast, cFst, localT);
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
vec3 color = gradient.rgb * dots;
|
|
111
|
+
float opacity = gradient.a * dots;
|
|
112
|
+
|
|
113
|
+
vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
|
|
114
|
+
color = color + bgColor * (1. - opacity);
|
|
115
|
+
opacity = opacity + u_colorBack.a * (1. - opacity);
|
|
116
|
+
|
|
117
|
+
fragColor = vec4(color, opacity);
|
|
118
|
+
}
|
|
119
|
+
`;
|
|
120
|
+
export {
|
|
121
|
+
dotOrbitFragmentShader,
|
|
122
|
+
dotOrbitMeta
|
|
123
|
+
};
|
|
124
|
+
//# sourceMappingURL=dot-orbit.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/shaders/dot-orbit.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 } from '../shader-utils';\n\nexport const dotOrbitMeta = {\n maxColorCount: 10,\n} as const;\n\n/**\n * Dot Pattern with dot moving around their grid position\n * The artwork by Ksenia Kondrashova\n * Renders a dot pattern with dot placed in the center of each cell of animated Voronoi diagram\n *\n * Uniforms include:\n * - u_colorBack (vec4): the background color of the scene\n * - u_colors (vec4[]): Input RGBA colors\n * - u_colorsCount (float): Number of active colors (`u_colors` length)\n * - u_stepsPerColor (float): Discretization of the color transition\n * - u_size (float, 0 .. 1): Base dot radius (relative to cell size)\n * - u_sizeRange (float, 0 .. 1): Dot radius to vary between the cells\n * - u_spreading (float, 0 .. 1): the distance each dot can move around the regular grid\n */\nexport const dotOrbitFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colors[${dotOrbitMeta.maxColorCount}];\nuniform float u_colorsCount;\nuniform float u_stepsPerColor;\nuniform float u_size;\nuniform float u_sizeRange;\nuniform float u_spreading;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n${declareRandom}\n${declareRotate}\n\nvec2 random2(vec2 p) {\n return vec2(random(p), random(200. * p));\n}\n\nvec3 voronoiShape(vec2 uv, float time) {\n vec2 i_uv = floor(uv);\n vec2 f_uv = fract(uv);\n \n float spreading = .25 * clamp(u_spreading, 0., 1.);\n\n float minDist = 1.;\n vec2 randomizer = vec2(0.);\n for (int y = -1; y <= 1; y++) {\n for (int x = -1; x <= 1; x++) {\n vec2 tileOffset = vec2(float(x), float(y));\n vec2 rand = random2(i_uv + tileOffset);\n vec2 cellCenter = vec2(.5 + 1e-4);\n cellCenter += spreading * cos(time + TWO_PI * rand);\n cellCenter -= .5;\n cellCenter = rotate(cellCenter, random(vec2(rand.x, rand.y)) + .1 * time);\n cellCenter += .5;\n float dist = length(tileOffset + cellCenter - f_uv);\n if (dist < minDist) {\n minDist = dist;\n randomizer = rand;\n }\n minDist = min(minDist, dist);\n }\n }\n\n return vec3(minDist, randomizer);\n}\n\nvoid main() {\n \n vec2 shape_uv = v_patternUV;\n shape_uv += .5;\n shape_uv *= .015;\n \n float t = u_time;\n\n vec3 voronoi = voronoiShape(shape_uv, t) + 1e-4;\n\n float radius = .25 * clamp(u_size, 0., 1.) - .5 * clamp(u_sizeRange, 0., 1.) * voronoi[2];\n float dist = voronoi[0];\n float edgeWidth = fwidth(dist);\n float dots = smoothstep(radius + edgeWidth, radius - edgeWidth, dist);\n\n float shape = voronoi[1];\n \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 < ${dotOrbitMeta.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 color = gradient.rgb * dots;\n float opacity = gradient.a * dots;\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 fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface DotOrbitUniforms extends ShaderSizingUniforms {\n u_colorBack: [number, number, number, number];\n u_colors: vec4[];\n u_colorsCount: number;\n u_size: number;\n u_sizeRange: number;\n u_spreading: number;\n u_stepsPerColor: number;\n}\n\nexport interface DotOrbitParams extends ShaderSizingParams, ShaderMotionParams {\n colorBack?: string;\n colors?: string[];\n size?: number;\n sizeRange?: number;\n spreading?: number;\n stepsPerColor?: number;\n}\n"],
|
|
5
|
+
"mappings": ";;;;;AAEA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,eAAe,qBAAqB;AAEjD,MAAM,eAAe;AAAA,EAC1B,eAAe;AACjB;AAgBO,MAAM,yBAAiC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMtB,aAAa,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOhD,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,wBA0DS,aAAa,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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
|
+
}
|
|
@@ -12,17 +12,19 @@ export declare const godRaysMeta: {
|
|
|
12
12
|
* Uniforms include:
|
|
13
13
|
*
|
|
14
14
|
* - u_colorBack: background RGBA color
|
|
15
|
+
* - u_colorBloom:
|
|
15
16
|
* - uColors (vec4[]): Input RGBA colors
|
|
16
17
|
* - u_frequency: the frequency of rays (the number of sectors)
|
|
17
18
|
* - u_spotty: the density of spots in the rings (higher = more spots)
|
|
18
19
|
* - u_midSize: the size of the central shape within the rings
|
|
19
20
|
* - u_midIntensity: the influence of the central shape on the rings
|
|
20
21
|
* - u_density (0 .. 1): the number of visible rays
|
|
21
|
-
* -
|
|
22
|
+
* - u_bloom (0 .. 1): normal / additive bloom
|
|
22
23
|
*/
|
|
23
24
|
export declare const godRaysFragmentShader: string;
|
|
24
25
|
export interface GodRaysUniforms extends ShaderSizingUniforms {
|
|
25
26
|
u_colorBack: [number, number, number, number];
|
|
27
|
+
u_colorBloom: [number, number, number, number];
|
|
26
28
|
u_colors: vec4[];
|
|
27
29
|
u_colorsCount: number;
|
|
28
30
|
u_spotty: number;
|
|
@@ -30,15 +32,16 @@ export interface GodRaysUniforms extends ShaderSizingUniforms {
|
|
|
30
32
|
u_midIntensity: number;
|
|
31
33
|
u_frequency: number;
|
|
32
34
|
u_density: number;
|
|
33
|
-
|
|
35
|
+
u_bloom: number;
|
|
34
36
|
}
|
|
35
37
|
export interface GodRaysParams extends ShaderSizingParams, ShaderMotionParams {
|
|
36
38
|
colorBack?: string;
|
|
39
|
+
colorBloom?: string;
|
|
37
40
|
colors?: string[];
|
|
38
41
|
spotty?: number;
|
|
39
42
|
midSize?: number;
|
|
40
43
|
midIntensity?: number;
|
|
41
44
|
frequency?: number;
|
|
42
45
|
density?: number;
|
|
43
|
-
|
|
46
|
+
bloom?: number;
|
|
44
47
|
}
|
|
@@ -0,0 +1,133 @@
|
|
|
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 godRaysMeta = {
|
|
9
|
+
maxColorCount: 5
|
|
10
|
+
};
|
|
11
|
+
const godRaysFragmentShader = `#version 300 es
|
|
12
|
+
precision mediump float;
|
|
13
|
+
|
|
14
|
+
uniform float u_time;
|
|
15
|
+
|
|
16
|
+
uniform vec4 u_colorBack;
|
|
17
|
+
uniform vec4 u_colorBloom;
|
|
18
|
+
uniform vec4 u_colors[${godRaysMeta.maxColorCount}];
|
|
19
|
+
uniform float u_colorsCount;
|
|
20
|
+
|
|
21
|
+
uniform float u_frequency;
|
|
22
|
+
uniform float u_spotty;
|
|
23
|
+
uniform float u_midSize;
|
|
24
|
+
uniform float u_midIntensity;
|
|
25
|
+
uniform float u_density;
|
|
26
|
+
uniform float u_bloom;
|
|
27
|
+
|
|
28
|
+
${sizingVariablesDeclaration}
|
|
29
|
+
|
|
30
|
+
out vec4 fragColor;
|
|
31
|
+
|
|
32
|
+
${declarePI}
|
|
33
|
+
${declareRandom}
|
|
34
|
+
${declareRotate}
|
|
35
|
+
|
|
36
|
+
float hash(float n) {
|
|
37
|
+
return fract(sin(n * 43758.5453123) * 43758.5453123);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
float valueNoise(vec2 uv) {
|
|
41
|
+
vec2 i = floor(uv);
|
|
42
|
+
vec2 f = fract(uv);
|
|
43
|
+
|
|
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
|
+
vec2 u = f * f * (3.0 - 2.0 * f);
|
|
50
|
+
|
|
51
|
+
float x1 = mix(a, b, u.x);
|
|
52
|
+
float x2 = mix(c, d, u.x);
|
|
53
|
+
return mix(x1, x2, u.y);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
float raysShape(vec2 uv, float r, float freq, float density, float radius) {
|
|
57
|
+
float a = atan(uv.y, uv.x);
|
|
58
|
+
vec2 left = vec2(a * freq, r);
|
|
59
|
+
vec2 right = vec2(mod(a, TWO_PI) * freq, r);
|
|
60
|
+
float n_left = pow(valueNoise(left), density);
|
|
61
|
+
float n_right = pow(valueNoise(right), density);
|
|
62
|
+
float shape = mix(n_right, n_left, smoothstep(-.15, .15, uv.x));
|
|
63
|
+
return shape;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
void main() {
|
|
67
|
+
vec2 shape_uv = v_objectUV;
|
|
68
|
+
|
|
69
|
+
float t = .2 * u_time;
|
|
70
|
+
|
|
71
|
+
float radius = length(shape_uv);
|
|
72
|
+
float spots = 5. * abs(u_spotty);
|
|
73
|
+
|
|
74
|
+
float density = 4. - 3. * clamp(u_density, 0., 1.);
|
|
75
|
+
|
|
76
|
+
float delta = 1. - smoothstep(0., 1., radius);
|
|
77
|
+
|
|
78
|
+
float middleShape = pow(u_midIntensity, .3) * smoothstep(abs(u_midSize), 0.02 * abs(u_midSize), 3.0 * radius);
|
|
79
|
+
middleShape = pow(middleShape, 5.0);
|
|
80
|
+
|
|
81
|
+
vec3 accumColor = vec3(0.0);
|
|
82
|
+
float accumAlpha = 0.0;
|
|
83
|
+
|
|
84
|
+
for (int i = 0; i < ${godRaysMeta.maxColorCount}; i++) {
|
|
85
|
+
if (i >= int(u_colorsCount)) break;
|
|
86
|
+
|
|
87
|
+
vec2 rotatedUV = rotate(shape_uv, float(i) + 1.0);
|
|
88
|
+
|
|
89
|
+
float r1 = radius * (1.0 + 0.4 * float(i)) - 3.0 * t;
|
|
90
|
+
float r2 = 0.5 * radius * (1.0 + spots) - 2.0 * t;
|
|
91
|
+
float f = mix(1.0, 3.0 + 0.5 * float(i), hash(float(i) + 10.0)) * u_frequency;
|
|
92
|
+
|
|
93
|
+
float ray = raysShape(rotatedUV, r1, 5.0 * f, density, radius);
|
|
94
|
+
ray *= raysShape(rotatedUV, r2, 4.0 * f, density, radius);
|
|
95
|
+
ray += (1. + 4. * ray) * middleShape;
|
|
96
|
+
ray = clamp(ray, 0.0, 1.0);
|
|
97
|
+
|
|
98
|
+
float srcAlpha = u_colors[i].a * ray;
|
|
99
|
+
vec3 srcColor = u_colors[i].rgb * srcAlpha;
|
|
100
|
+
|
|
101
|
+
vec3 alphaBlendColor = accumColor + (1.0 - accumAlpha) * srcColor;
|
|
102
|
+
float alphaBlendAlpha = accumAlpha + (1.0 - accumAlpha) * srcAlpha;
|
|
103
|
+
|
|
104
|
+
vec3 addBlendColor = accumColor + srcColor;
|
|
105
|
+
float addBlendAlpha = accumAlpha + srcAlpha;
|
|
106
|
+
|
|
107
|
+
accumColor = mix(alphaBlendColor, addBlendColor, u_bloom);
|
|
108
|
+
accumAlpha = mix(alphaBlendAlpha, addBlendAlpha, u_bloom);
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
float overlayAlpha = u_colorBloom.a;
|
|
112
|
+
vec3 overlayColor = u_colorBloom.rgb * overlayAlpha;
|
|
113
|
+
|
|
114
|
+
vec3 colorWithOverlay = accumColor + accumAlpha * overlayColor;
|
|
115
|
+
accumColor = mix(accumColor, colorWithOverlay, u_bloom);
|
|
116
|
+
|
|
117
|
+
vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
|
|
118
|
+
|
|
119
|
+
vec3 color = accumColor + (1. - accumAlpha) * bgColor;
|
|
120
|
+
float opacity = accumAlpha + (1. - accumAlpha) * u_colorBack.a;
|
|
121
|
+
color = clamp(color, 0., 1.);
|
|
122
|
+
opacity = clamp(opacity, 0., 1.);
|
|
123
|
+
|
|
124
|
+
${colorBandingFix}
|
|
125
|
+
|
|
126
|
+
fragColor = vec4(color, opacity);
|
|
127
|
+
}
|
|
128
|
+
`;
|
|
129
|
+
export {
|
|
130
|
+
godRaysFragmentShader,
|
|
131
|
+
godRaysMeta
|
|
132
|
+
};
|
|
133
|
+
//# sourceMappingURL=god-rays.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/shaders/god-rays.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 godRaysMeta = {\n maxColorCount: 5,\n} as const;\n\n/**\n * GodRays pattern\n * The artwork by Ksenia Kondrashova\n * Renders a number of circular shapes with gooey effect applied\n *\n * Uniforms include:\n *\n * - u_colorBack: background RGBA color\n * - u_colorBloom:\n * - uColors (vec4[]): Input RGBA colors\n * - u_frequency: the frequency of rays (the number of sectors)\n * - u_spotty: the density of spots in the rings (higher = more spots)\n * - u_midSize: the size of the central shape within the rings\n * - u_midIntensity: the influence of the central shape on the rings\n * - u_density (0 .. 1): the number of visible rays\n * - u_bloom (0 .. 1): normal / additive bloom\n */\nexport const godRaysFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colorBloom;\nuniform vec4 u_colors[${godRaysMeta.maxColorCount}];\nuniform float u_colorsCount;\n\nuniform float u_frequency;\nuniform float u_spotty;\nuniform float u_midSize;\nuniform float u_midIntensity;\nuniform float u_density;\nuniform float u_bloom;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n${declareRandom}\n${declareRotate}\n\nfloat hash(float n) {\n return fract(sin(n * 43758.5453123) * 43758.5453123);\n}\n\nfloat valueNoise(vec2 uv) {\n vec2 i = floor(uv);\n vec2 f = fract(uv);\n\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 vec2 u = f * f * (3.0 - 2.0 * f);\n\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 raysShape(vec2 uv, float r, float freq, float density, float radius) {\n float a = atan(uv.y, uv.x);\n vec2 left = vec2(a * freq, r);\n vec2 right = vec2(mod(a, TWO_PI) * freq, r);\n float n_left = pow(valueNoise(left), density);\n float n_right = pow(valueNoise(right), density);\n float shape = mix(n_right, n_left, smoothstep(-.15, .15, uv.x));\n return shape;\n}\n\nvoid main() {\n vec2 shape_uv = v_objectUV;\n\n float t = .2 * u_time;\n\n float radius = length(shape_uv);\n float spots = 5. * abs(u_spotty);\n\n float density = 4. - 3. * clamp(u_density, 0., 1.);\n\n float delta = 1. - smoothstep(0., 1., radius);\n\n float middleShape = pow(u_midIntensity, .3) * smoothstep(abs(u_midSize), 0.02 * abs(u_midSize), 3.0 * radius);\n middleShape = pow(middleShape, 5.0);\n\n vec3 accumColor = vec3(0.0);\n float accumAlpha = 0.0;\n\n for (int i = 0; i < ${godRaysMeta.maxColorCount}; i++) {\n if (i >= int(u_colorsCount)) break;\n\n vec2 rotatedUV = rotate(shape_uv, float(i) + 1.0);\n\n float r1 = radius * (1.0 + 0.4 * float(i)) - 3.0 * t;\n float r2 = 0.5 * radius * (1.0 + spots) - 2.0 * t;\n float f = mix(1.0, 3.0 + 0.5 * float(i), hash(float(i) + 10.0)) * u_frequency;\n\n float ray = raysShape(rotatedUV, r1, 5.0 * f, density, radius);\n ray *= raysShape(rotatedUV, r2, 4.0 * f, density, radius);\n ray += (1. + 4. * ray) * middleShape;\n ray = clamp(ray, 0.0, 1.0);\n\n float srcAlpha = u_colors[i].a * ray;\n vec3 srcColor = u_colors[i].rgb * srcAlpha;\n\n vec3 alphaBlendColor = accumColor + (1.0 - accumAlpha) * srcColor;\n float alphaBlendAlpha = accumAlpha + (1.0 - accumAlpha) * srcAlpha;\n\n vec3 addBlendColor = accumColor + srcColor;\n float addBlendAlpha = accumAlpha + srcAlpha;\n\n accumColor = mix(alphaBlendColor, addBlendColor, u_bloom);\n accumAlpha = mix(alphaBlendAlpha, addBlendAlpha, u_bloom);\n }\n \n float overlayAlpha = u_colorBloom.a;\n vec3 overlayColor = u_colorBloom.rgb * overlayAlpha;\n\n vec3 colorWithOverlay = accumColor + accumAlpha * overlayColor; \n accumColor = mix(accumColor, colorWithOverlay, u_bloom);\n\n vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\n\n vec3 color = accumColor + (1. - accumAlpha) * bgColor;\n float opacity = accumAlpha + (1. - accumAlpha) * u_colorBack.a;\n color = clamp(color, 0., 1.);\n opacity = clamp(opacity, 0., 1.);\n\n ${colorBandingFix}\n\n fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface GodRaysUniforms extends ShaderSizingUniforms {\n u_colorBack: [number, number, number, number];\n u_colorBloom: [number, number, number, number];\n u_colors: vec4[];\n u_colorsCount: number;\n u_spotty: number;\n u_midSize: number;\n u_midIntensity: number;\n u_frequency: number;\n u_density: number;\n u_bloom: number;\n}\n\nexport interface GodRaysParams extends ShaderSizingParams, ShaderMotionParams {\n colorBack?: string;\n colorBloom?: string;\n colors?: string[];\n spotty?: number;\n midSize?: number;\n midIntensity?: number;\n frequency?: number;\n density?: number;\n bloom?: number;\n}\n"],
|
|
5
|
+
"mappings": ";;;;;AAEA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,eAAe,eAAe,uBAAuB;AAElE,MAAM,cAAc;AAAA,EACzB,eAAe;AACjB;AAmBO,MAAM,wBAAgC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAOrB,YAAY,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAU/C,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,wBAkDS,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,IAwC7C,eAAe;AAAA;AAAA;AAAA;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -9,6 +9,7 @@ export declare const grainGradientMeta: {
|
|
|
9
9
|
*/
|
|
10
10
|
export declare const grainGradientFragmentShader: string;
|
|
11
11
|
export interface GrainGradientUniforms extends ShaderSizingUniforms {
|
|
12
|
+
u_colorBack: [number, number, number, number];
|
|
12
13
|
u_colors: vec4[];
|
|
13
14
|
u_colorsCount: number;
|
|
14
15
|
u_softness: number;
|
|
@@ -17,6 +18,7 @@ export interface GrainGradientUniforms extends ShaderSizingUniforms {
|
|
|
17
18
|
u_shape: (typeof GrainGradientShapes)[GrainGradientShape];
|
|
18
19
|
}
|
|
19
20
|
export interface GrainGradientParams extends ShaderSizingParams, ShaderMotionParams {
|
|
21
|
+
colorBack?: string;
|
|
20
22
|
colors?: string[];
|
|
21
23
|
softness?: number;
|
|
22
24
|
intensity?: number;
|