- canvas стартует с opacity:0 и плавно проявляется (0.9s) при .is-ready - initPageMeshShader ставит is-ready после первого кадра - modulepreload page-mesh-shader.js для параллельной загрузки с main.js - пересборка страниц (build:pages)
132 lines
3.6 KiB
JavaScript
132 lines
3.6 KiB
JavaScript
/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
|
* Paper Shaders *
|
|
* https://github.com/paper-design/shaders *
|
|
* * * * * * * * * * * * * * * * * * * * * * * * * * * */
|
|
|
|
const declarePI = `
|
|
#define TWO_PI 6.28318530718
|
|
#define PI 3.14159265358979323846
|
|
`;
|
|
const rotation2 = `
|
|
vec2 rotate(vec2 uv, float th) {
|
|
return mat2(cos(th), sin(th), -sin(th), cos(th)) * uv;
|
|
}
|
|
`;
|
|
const proceduralHash11 = `
|
|
float hash11(float p) {
|
|
p = fract(p * 0.3183099) + 0.1;
|
|
p *= p + 19.19;
|
|
return fract(p * p);
|
|
}
|
|
`;
|
|
const proceduralHash21 = `
|
|
float hash21(vec2 p) {
|
|
p = fract(p * vec2(0.3183099, 0.3678794)) + 0.1;
|
|
p += dot(p, p + 19.19);
|
|
return fract(p.x * p.y);
|
|
}
|
|
`;
|
|
const proceduralHash22 = `
|
|
vec2 hash22(vec2 p) {
|
|
p = fract(p * vec2(0.3183099, 0.3678794)) + 0.1;
|
|
p += dot(p, p.yx + 19.19);
|
|
return fract(vec2(p.x * p.y, p.x + p.y));
|
|
}
|
|
`;
|
|
const textureRandomizerR = `
|
|
float randomR(vec2 p) {
|
|
vec2 uv = floor(p) / 100. + .5;
|
|
return texture(u_noiseTexture, fract(uv)).r;
|
|
}
|
|
`;
|
|
const textureRandomizerGB = `
|
|
vec2 randomGB(vec2 p) {
|
|
vec2 uv = floor(p) / 100. + .5;
|
|
return texture(u_noiseTexture, fract(uv)).gb;
|
|
}
|
|
`;
|
|
const colorBandingFix = `
|
|
color += 1. / 256. * (fract(sin(dot(.014 * gl_FragCoord.xy, vec2(12.9898, 78.233))) * 43758.5453123) - .5);
|
|
`;
|
|
const simplexNoise = `
|
|
vec3 permute(vec3 x) { return mod(((x * 34.0) + 1.0) * x, 289.0); }
|
|
float snoise(vec2 v) {
|
|
const vec4 C = vec4(0.211324865405187, 0.366025403784439,
|
|
-0.577350269189626, 0.024390243902439);
|
|
vec2 i = floor(v + dot(v, C.yy));
|
|
vec2 x0 = v - i + dot(i, C.xx);
|
|
vec2 i1;
|
|
i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
|
|
vec4 x12 = x0.xyxy + C.xxzz;
|
|
x12.xy -= i1;
|
|
i = mod(i, 289.0);
|
|
vec3 p = permute(permute(i.y + vec3(0.0, i1.y, 1.0))
|
|
+ i.x + vec3(0.0, i1.x, 1.0));
|
|
vec3 m = max(0.5 - vec3(dot(x0, x0), dot(x12.xy, x12.xy),
|
|
dot(x12.zw, x12.zw)), 0.0);
|
|
m = m * m;
|
|
m = m * m;
|
|
vec3 x = 2.0 * fract(p * C.www) - 1.0;
|
|
vec3 h = abs(x) - 0.5;
|
|
vec3 ox = floor(x + 0.5);
|
|
vec3 a0 = x - ox;
|
|
m *= 1.79284291400159 - 0.85373472095314 * (a0 * a0 + h * h);
|
|
vec3 g;
|
|
g.x = a0.x * x0.x + h.x * x0.y;
|
|
g.yz = a0.yz * x12.xz + h.yz * x12.yw;
|
|
return 130.0 * dot(m, g);
|
|
}
|
|
`;
|
|
const fiberNoise = `
|
|
float fiberRandom(vec2 p) {
|
|
vec2 uv = floor(p) / 100.;
|
|
return texture(u_noiseTexture, fract(uv)).b;
|
|
}
|
|
|
|
float fiberValueNoise(vec2 st) {
|
|
vec2 i = floor(st);
|
|
vec2 f = fract(st);
|
|
float a = fiberRandom(i);
|
|
float b = fiberRandom(i + vec2(1.0, 0.0));
|
|
float c = fiberRandom(i + vec2(0.0, 1.0));
|
|
float d = fiberRandom(i + vec2(1.0, 1.0));
|
|
vec2 u = f * f * (3.0 - 2.0 * f);
|
|
float x1 = mix(a, b, u.x);
|
|
float x2 = mix(c, d, u.x);
|
|
return mix(x1, x2, u.y);
|
|
}
|
|
|
|
float fiberNoiseFbm(in vec2 n, vec2 seedOffset) {
|
|
float total = 0.0, amplitude = 1.;
|
|
for (int i = 0; i < 4; i++) {
|
|
n = rotate(n, .7);
|
|
total += fiberValueNoise(n + seedOffset) * amplitude;
|
|
n *= 2.;
|
|
amplitude *= 0.6;
|
|
}
|
|
return total;
|
|
}
|
|
|
|
float fiberNoise(vec2 uv, vec2 seedOffset) {
|
|
float epsilon = 0.001;
|
|
float n1 = fiberNoiseFbm(uv + vec2(epsilon, 0.0), seedOffset);
|
|
float n2 = fiberNoiseFbm(uv - vec2(epsilon, 0.0), seedOffset);
|
|
float n3 = fiberNoiseFbm(uv + vec2(0.0, epsilon), seedOffset);
|
|
float n4 = fiberNoiseFbm(uv - vec2(0.0, epsilon), seedOffset);
|
|
return length(vec2(n1 - n2, n3 - n4)) / (2.0 * epsilon);
|
|
}
|
|
`;
|
|
export {
|
|
colorBandingFix,
|
|
declarePI,
|
|
fiberNoise,
|
|
proceduralHash11,
|
|
proceduralHash21,
|
|
proceduralHash22,
|
|
rotation2,
|
|
simplexNoise,
|
|
textureRandomizerGB,
|
|
textureRandomizerR
|
|
};
|
|
//# sourceMappingURL=shader-utils.js.map
|