GLSLで正三角形タイリング

GLSLで正三角形タイリングを実装します。

vec2 equilateralTriagleTiling(vec2 p, out vec2 index) {
    const float HEIGHT = sqrt(3) / 2;
    const float SKEW = 1.0 / sqrt(3);
    vec2 q = p;
    q.x -= q.y * SKEW;
    index = vec2(2.0 * floor(q.x), floor(q.y / HEIGHT));
    q = vec2(mod(q.x, 1.0), mod(q.y, HEIGHT));
    if (q.x + q.y / HEIGHT >= 1.0) {
        q.x = 1.0 - q.x;
        q.y = HEIGHT - q.y;
        index.x += 1;
    }
    q.x += q.y * SKEW;
    return q;
}

equilateralTriangleTiling関数は引数pで与えられた位置から1辺の長さが1の正三角形タイリングしたときの正三角形内の座標値を返します。

vec2 p = v_texcoord * resolution / min(resolution.x, resolution.y) * 10.0;
vec2 index;
vec2 q = equilateralTriagleTiling(p, index);
gl_FragColor = vec4(q, 0.0, 1.0);

引数indexは同じ正三角形内の座標は同じ値を返します。

float rand(vec2 co){
    return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);
}

vec3 random(vec2 v) {
    return vec3(rand(v), rand(v + 100.0), rand(v + 200.0));
}

gl_FragColor = vec4(random(index), 1.0);