🔺

GLSLで二等辺三角形タイリング

2024/10/30に公開

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

以前にGLSLで正三角形タイリングを実装しましたが、正三角形も二等辺三角形の一種なので実装的にもより一般化した形となります。
https://zenn.dev/aadebdeb/articles/fe0ae41590ee3b

vec2 isoscelesTriagleTiling(vec2 p, float width, float height, out vec2 index) {    
    vec2 q = p;
    float skew = 0.5 * width / height;
    q.x -= q.y * skew;
    index = vec2(2.0 * floor(q.x / width), floor(q.y / height));
    q = vec2(mod(q.x, width), mod(q.y, height));
    if (q.x / width + q.y / height >= 1.0) {
        q.x = width - q.x;
        q.y = height - q.y;
        index.x += 1;
    }
    q.x += q.y * skew;
    return q;
} 
vec2 p = v_texcoord * resolution / min(resolution.x, resolution.y) * 10.0;
vec2 index;
vec2 q = isoscelesTriagleTiling(p, 1, 2, index);
gl_FragColor = vec4(q, 0.0, 1.0);

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

上述したように正三角形も二等辺三角形の一種なので、以下のようにすると一辺の長さが1の正三角形によるタイリングとなります。

vec2 q = isoscelesTriagleTiling(p, 1, sqrt(3) / 2, index);

Discussion