Shader #8 : 正六角形

f:id:zonu_a0:20210608063209p:plain

Shadertoy

www.shadertoy.com

ソースコード

Image

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // 画面の中心
    vec2 center = iResolution.xy * 0.5;
    
    // ピクセルの座標
    vec2 pixel = fragCoord.xy;
    
    // 正六角形の高さ
    float height = 0.7 * iResolution.y;
    
    // √3
    float sqrt3 = sqrt(3.0);
    
    // 正六角形の幅
    float width = height * (2.0 / sqrt3);
    
    // centerを原点としたピクセル座標
    vec2 diff = pixel - center;
    
    //  正六角形の各辺の内側か判定
    float insideA = step(diff.x + diff.y / sqrt3, width / 2.0);
    float insideB = step(-diff.x + diff.y / sqrt3, width / 2.0);
    float insideC = step(pixel.y, center.y + height / 2.0);
    float insideD = step(diff.x - diff.y / sqrt3, width / 2.0);
    float insideE = step(-diff.x - diff.y / sqrt3, width / 2.0);
    float insideF = step(center.y - height / 2.0, pixel.y);
    
    //  正六角形内かを判定
    float inside = insideA * insideB * insideC * insideD * insideE * insideF;
    
    // ピクセルの色を設定
    fragColor = vec4(inside, inside, inside, 1.0);
}

解説

    // 画面の中心
    vec2 center = iResolution.xy * 0.5;
    
    // ピクセルの座標
    vec2 pixel = fragCoord.xy;
    
    // 正六角形の高さ
    float height = 0.7 * iResolution.y;
    
    // √3
    float sqrt3 = sqrt(3.0);
    
    // 正六角形の幅
    float width = height * (2.0 / sqrt3);
    
    // centerを原点としたピクセル座標
    vec2 diff = pixel - center;
  • ここは #7 と同じ

Shader #7 : 正三角形 - zonu's memo

    //  正六角形の各辺の内側か判定
    float insideA = step(diff.x + diff.y / sqrt3, width / 2.0);
    float insideB = step(-diff.x + diff.y / sqrt3, width / 2.0);
    float insideC = step(pixel.y, center.y + height / 2.0);
    float insideD = step(diff.x - diff.y / sqrt3, width / 2.0);
    float insideE = step(-diff.x - diff.y / sqrt3, width / 2.0);
    float insideF = step(center.y - height / 2.0, pixel.y);
    
    //  正六角形内かを判定
    float inside = insideA * insideB * insideC * insideD * insideE * insideF;

  • 正六角形は正三角形の組み合わせ
    • なので、正六角形の斜めの辺(A,B,D,E)の角度は、正三角形の斜めの辺の角度と同じ
      • insideA, insideBは #7 : 正三角形 と同じなので、解説はそちらを参照
      • insideD, insideEは、A,Cをx軸対称にしただけ
  • insideC = ピクセルが直線Cより下にあるか
  • insideF = ピクセルが直線Fより下にあるか
  • inside = 6つの直線内判定をかけあわせることで、正六角形範囲内のピクセルのみ1になる
    // ピクセルの色を設定
    fragColor = vec4(inside, inside, inside, 1.0);