Shader #1 : 円

Shadertoy

www.shadertoy.com

ソースコード

Image

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // 円の中心
    vec2 center = iResolution.xy * 0.5;
    
    // 円の半径
    float radius = 0.30 * iResolution.y;
    
    // ピクセルの座標
    vec2 pixel = fragCoord.xy;
    
    // 中心からの距離
    float dist = length(center - pixel);
    
    // 円内フラグ(中心からの距離 <= 半径)
    float inside = step(dist, radius);
    
    // ピクセルの色を設定
    fragColor = vec4(inside, inside, inside, 1.0);
}

解説

    // 円の中心
    vec2 center = iResolution.xy * 0.5;

• iResolution : 画面解像度
• 円の中心 = 画面の中心

    // 円の半径
    float radius = 0.30 * iResolution.y;

• 円の半径 = 画面の縦の解像度の30%

    // ピクセルの座標
    vec2 pixel = fragCoord.xy;

• fragCoord.xy : 画面左下を(0,0)としたピクセル座標

    // 中心からの距離
    float dist = length(center - pixel);

• length関数 : vec2の長さを返す
• center - pixel : ピクセルから中心点へのベクトル

    // 円内フラグ(中心からの距離 <= 半径)
    float inside = step(dist, radius);

• step 関数 :
  • 第一引数 <= 第二引数 : 1を返す
  • 第一引数 > 第二引数 : 0を返す

    // ピクセルの色を設定
    fragColor = vec4(inside, inside, inside, 1.0);

• fragColor : ここに設定した色(rgba)でピクセルが描画される
  • 円の内側 : (1.0, 1.0, 1.0, 1.0) // 白
  • 円の外側 : (0.0, 0.0, 0.0, 1.0) // 黒