のぐそんブログ

暗いおじさんがシコシコ書くブログです。

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

GLSLを使っての簡単な描画表現に挑戦してみます。

中央から縦にグラデーションする。

void main( void ) {
    //原点を中央にする
    vec2 p = (gl_FragCoord.xy*2.0 - resolution) / min(resolution.x,resolution.y);
    //外に行くほど(cの値大きくなるほど)値が小さくなるようにする
    float c = 0.01/abs(p.y);

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

考慮点とすればマイナス座標をabsで絶対値に変換することです。

サイン波をつくる

sin関数が-1~1の値を返すのでコレを利用してサイン波を作ってみる。

void main( void ) {
    vec2 p = (gl_FragCoord.xy*2.0 - resolution) / min(resolution.x,resolution.y);
    //5.0を掛けることで波の数を調整している。
    float c = 0.01/abs(p.y + sin(p.x * 5.0) );
    gl_FragColor = vec4(vec3(c),1.0);
}

ハーフトーンぽい表現をしてみる

gl_FragCoordを利用するとハーフトーンぽい表現ができました。

void main( void ) {
    vec2 p = (gl_FragCoord.xy*2.0 - resolution) / min(resolution.x,resolution.y);

    float c = pow(0.5/length(p),5.0) * (sin(gl_FragCoord.x )  +  cos(gl_FragCoord.y)) ;

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

同心円状の模様を描く

sinを使うことで、同心円状の模様を簡単に書くことができます。

void main( void ) {

    vec2 p = (gl_FragCoord.xy * 2.0 - resolution)/min(resolution.x,resolution.y);
    
    //100.0の値をかけることで円が描画される回数(-1~1の繰り返す回数)を調整します
    float c = sin(length(p) * 100.0);
    
    gl_FragColor = vec4(vec3(c),1.0);

}

timeをつかって動かしてみたのはこちら