WebGL でティザーサイトっぽい背景を作った

この記事の概要

WebGL をいじっていて、結構良さそうな表現が作れたので記事にしました。

上記の記事の構成と同じで、バンドラーに Vite を使い、シェーダーファイルは分けてあります。

完成形

万華鏡っぽい柄が中心から広がるようにアニメーションしています。
タイトル文字などを載せれば、ティザーサイトやイベントサイトの背景などに使えそうな気がしています。

コード

#version 300 es

precision mediump float;

uniform float uTime;
uniform vec2 uResolution;
out vec4 fragColor;

#define PI 3.14159265359

vec2 hexagonalGrid(vec2 uv) {
    vec2 r = vec2(1.0, sqrt(3.0));
    vec2 h = r * 0.5;
    vec2 a = mod(uv, r) - h;
    vec2 b = mod(uv - h, r) - h;
    return dot(a, a) < dot(b, b) ? a : b;
}

void main() {
    vec2 uv = (gl_FragCoord.xy * 2.0 - uResolution.xy) / min(uResolution.x, uResolution.y);
    uv *= 5.0; // Scale up the pattern

    // Rotate the UV coordinates
    float rotation = uTime * -0.1;
    mat2 rotationMatrix = mat2(cos(rotation), -sin(rotation), sin(rotation), cos(rotation));
    uv = rotationMatrix * uv;

    vec2 id = floor(uv);
    vec2 gv = hexagonalGrid(uv);
    
    float d = length(gv);
    float size = sin(-uTime + length(id) * 0.5) * 0.2 + 0.7; // Pulsating size
    d = smoothstep(size, size + 0.05, d);

    // Create color based on position and time
    float hue = atan(gv.y, gv.x) / (2.0 * PI) + 0.5 + uTime * 0.1;
    vec3 color = hsl2rgb(vec3(hue, 0.7, 0.5));

    // Add some variation based on distance from center
    float distFromCenter = length(uv / 5.0);
    color *= 1.0 - distFromCenter * 0.5;

    // Mix with background color
    vec3 bgColor = vec3(0.1, 0.1, 0.1);
    color = mix(bgColor, color, d);

    fragColor = vec4(color, 1.0);
}

あわよくば X のつぶやきGLSLに出してみたいな、などと思っていましたが、文字数を削るのに断念したためここで供養します。