Shader #2 : リング

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 circle = step(dist, radius);
    
    // リングの幅
    float width = 0.05 * iResolution.y;
    
    // リングの描画判定
    float ring = circle * step(radius - width, dist);
    
    // ピクセルの色を設定
    fragColor = vec4(ring, ring, ring, 1.0);
}

解説

    // 円の中心
    vec2 center = iResolution.xy * 0.5;
    
    // 円の半径
    float radius = 0.30 * iResolution.y;
    
    // ピクセルの座標
    vec2 pixel = fragCoord.xy;
    
    // 中心からの距離
    float dist = length(center - pixel);

ここまでは #1 と同じ

Shader #1 : 円 - zonu's memo

    // 円の描画判定
    float circle = step(dist, radius);

• ピクセルが円の描画範囲内(dist <= radius) : 1.0f
• ピクセルが円の描画範囲外(dist > radius) : 0.0f

    // リングの幅
    float width = 0.05 * iResolution.y;
    
    // リングの描画判定
    float ring = circle * step(radius - width, dist);

• リングの幅 = 画面の縦の解像度の5%
• リングの内側の円の半径 = radius - width
• step(radius - width, dist)
  • ピクセルがリング内側の円より外(radius - width <= dist) : 1.0f
  • ピクセルがリング内側の円より内(radius - width > dist) : 0.0f
• ring : 「circle内」かつ「リング内側の円より外」が 1.0fになる

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

• リングを白で描画