root
daa623fe73
- canvas стартует с opacity:0 и плавно проявляется (0.9s) при .is-ready - initPageMeshShader ставит is-ready после первого кадра - modulepreload page-mesh-shader.js для параллельной загрузки с main.js - пересборка страниц (build:pages)
101 lines
2.5 KiB
JavaScript
101 lines
2.5 KiB
JavaScript
/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
|
* Paper Shaders *
|
|
* https://github.com/paper-design/shaders *
|
|
* * * * * * * * * * * * * * * * * * * * * * * * * * * */
|
|
|
|
import {} from "../shader-sizing.js";
|
|
import { simplexNoise, colorBandingFix } from "../shader-utils.js";
|
|
const simplexNoiseMeta = {
|
|
maxColorCount: 10
|
|
};
|
|
const simplexNoiseFragmentShader = `#version 300 es
|
|
precision mediump float;
|
|
|
|
uniform float u_time;
|
|
uniform float u_scale;
|
|
|
|
uniform vec4 u_colors[${simplexNoiseMeta.maxColorCount}];
|
|
uniform float u_colorsCount;
|
|
uniform float u_stepsPerColor;
|
|
uniform float u_softness;
|
|
|
|
in vec2 v_patternUV;
|
|
|
|
out vec4 fragColor;
|
|
|
|
${simplexNoise}
|
|
|
|
float getNoise(vec2 uv, float t) {
|
|
float noise = .5 * snoise(uv - vec2(0., .3 * t));
|
|
noise += .5 * snoise(2. * uv + vec2(0., .32 * t));
|
|
|
|
return noise;
|
|
}
|
|
|
|
float steppedSmooth(float m, float steps, float softness) {
|
|
float stepT = floor(m * steps) / steps;
|
|
float f = m * steps - floor(m * steps);
|
|
float fw = steps * fwidth(m);
|
|
float smoothed = smoothstep(.5 - softness, min(1., .5 + softness + fw), f);
|
|
return stepT + smoothed / steps;
|
|
}
|
|
|
|
void main() {
|
|
vec2 shape_uv = v_patternUV;
|
|
shape_uv *= .1;
|
|
|
|
float t = .2 * u_time;
|
|
|
|
float shape = .5 + .5 * getNoise(shape_uv, t);
|
|
|
|
bool u_extraSides = true;
|
|
|
|
float mixer = shape * (u_colorsCount - 1.);
|
|
if (u_extraSides == true) {
|
|
mixer = (shape - .5 / u_colorsCount) * u_colorsCount;
|
|
}
|
|
|
|
float steps = max(1., u_stepsPerColor);
|
|
|
|
vec4 gradient = u_colors[0];
|
|
gradient.rgb *= gradient.a;
|
|
for (int i = 1; i < ${simplexNoiseMeta.maxColorCount}; i++) {
|
|
if (i >= int(u_colorsCount)) break;
|
|
|
|
float localM = clamp(mixer - float(i - 1), 0., 1.);
|
|
localM = steppedSmooth(localM, steps, .5 * u_softness);
|
|
|
|
vec4 c = u_colors[i];
|
|
c.rgb *= c.a;
|
|
gradient = mix(gradient, c, localM);
|
|
}
|
|
|
|
if (u_extraSides == true) {
|
|
if ((mixer < 0.) || (mixer > (u_colorsCount - 1.))) {
|
|
float localM = mixer + 1.;
|
|
if (mixer > (u_colorsCount - 1.)) {
|
|
localM = mixer - (u_colorsCount - 1.);
|
|
}
|
|
localM = steppedSmooth(localM, steps, .5 * u_softness);
|
|
vec4 cFst = u_colors[0];
|
|
cFst.rgb *= cFst.a;
|
|
vec4 cLast = u_colors[int(u_colorsCount - 1.)];
|
|
cLast.rgb *= cLast.a;
|
|
gradient = mix(cLast, cFst, localM);
|
|
}
|
|
}
|
|
|
|
vec3 color = gradient.rgb;
|
|
float opacity = gradient.a;
|
|
|
|
${colorBandingFix}
|
|
|
|
fragColor = vec4(color, opacity);
|
|
}
|
|
`;
|
|
export {
|
|
simplexNoiseFragmentShader,
|
|
simplexNoiseMeta
|
|
};
|
|
//# sourceMappingURL=simplex-noise.js.map
|