Shader #3 : 多重リング

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 ratio = 10.0;
    
    // 距離をsin値に変換
    float sinVal = sin(dist / ratio) / 2.0 + 0.5;
    
    // 閾値
    float threshold = 0.1f;
    
    // 白で描画する判定(sinVal <= threshold)
    float white = step(sinVal, threshold);
    
    // ピクセルの色を設定
    fragColor = vec4(white, white, white, 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 ratio = 10.0;
    
    // 距離をsin値に変換
    float sinVal = sin(dist / ratio) / 2.0 + 0.5;

• sin波の周期は2π(≒6.28)なので、sin(dist)とすると1周期 ≒ 6pixel
  • sin(dist)だと細かすぎるので、ratio で1周期あたりのpixelを増やす
• sin波は -1.0 ~ 1.0 の値を取るので、sin / 2.0 + 0.5して 0.0 ~ 1.0 の値に変換

    // 閾値
    float threshold = 0.1f;
    
    // 白で描画する判定(sinVal <= threshold)
    float white = step(sinVal, threshold);

• sin値が閾値以下(sinVal <= threshold) : 1.0f
• sin値が閾値より大きい(sinVal > threshold) : 0.0f

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

• 描画