Shader #5 : 斜めストライプ

Shadertoy

www.shadertoy.com

ソースコード

Image

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // ピクセルの座標
    vec2 pixel = fragCoord;
    
    // 斜め軸基準の距離
    float diagonal = (pixel.x + pixel.y) / 2.0;
    
    // 表示倍率
    float ratio = 10.0;
    
    // 距離をsin値に変換
    float sinVal = sin(diagonal / ratio) / 2.0 + 0.5;
    
    // 閾値
    float threshold = 0.5f;
    
    // 白で描画する判定(sinVal <= threshold)
    float white = step(sinVal, threshold);
    
    // ピクセルの色を設定
    fragColor = vec4(white, white, white, 1.0);
}

解説

    // ピクセルの座標
    vec2 pixel = fragCoord;
    
    // 斜め軸基準の距離
    float diagonal = (pixel.x + pixel.y) / 2.0;

• pixel : 画面左下を(0,0)としたピクセル座標
• diagonal : y = x の軸基準の原点からの距離
  • (100, 0), (50, 50), (0, 100) はどれも同じ値(50)になる

    // 表示倍率
    float ratio = 10.0;
    
    // 距離をsin値に変換
    float sinVal = sin(diagonal / ratio) / 2.0 + 0.5;
    
    // 閾値
    float threshold = 0.5f;
    
    // 白で描画する判定(sinVal <= threshold)
    float white = step(sinVal, threshold);
    
    // ピクセルの色を設定
    fragColor = vec4(white, white, white, 1.0);

ここは #3 と同じ

Shader #3 : 多重リング - zonu's memo