GLSLでフラグメントシェーダーを書く場合のメモ3

GLSLを学習中の自分用のメモです。

step関数

step(a,b)

a・・・閾値

b・・・チェックされる値

bがa(閾値)より小さい値には全て0.0 を返し、a(閾値)以上の値には 1.0 を返します。

void main() {
    //0.0 ~ 1.0に正規化する
    vec2 uv = gl_FragCoord.xy/resolution;
    //0.1以下は0.0で、0.1以上は1.0が返却される
    float c = step(0.1,uv.x);

    vec3 color = vec3(c);
    
    gl_FragColor = vec4(color,1.0);
}

smoothstep関数

step(a,b,c)

a・・・開始値

b・・・終了値

c・・・チェックされる値

a〜bの範囲の間で0.0から1.0まで滑らかに変化する数値を返します。

void main() {
    vec2 uv = gl_FragCoord.xy;
    //gl_FragCoord.xの値を使って、0.0から画面の幅から0.0~1.0を返却する
    float c = smoothstep(0.0,resolution.x,gl_FragCoord.x);
    
    gl_FragColor = vec4(vec3(c),1.0);
}

mix関数

mix(a,b,c)

a・・・値A

b・・・値B

c・・・混ぜる割合(0.0〜1.0)

正確な意味としては線形補完らしいです。

線形補完とは

参考:2点間の線形補間を計算する

線形補間とは、次のように2点 (x0, y0) と (x1, y1) を直線で結んだ時に、間にある任意のx座標に対応するyを計算することです。

混ぜてみます。

void main() {
    vec3 colorA = vec3(1.0,0.,0.);
    vec3 colorB = vec3(0.0,0.0,1.0);
    vec3 c = vec3(0.0);

    c = mix(colorA, colorB, 0.5); 

    gl_FragColor = vec4(c,1.0);
}

正規化したgl_FragCoordを利用してみる

gl_FragCoordの座標を利用することで、グラデーションをかけることができます。

void main() {
    vec2 uv = gl_FragCoord.xy/resolution.xy;
    vec3 colorA = vec3(1.0,0.,0.);
    vec3 colorB = vec3(0.0,0.0,1.0);
    vec3 c = vec3(0.0);

    c = mix(colorA, colorB,uv.x); 

    gl_FragColor = vec4(c,1.0);
}