のぐそんブログ

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

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

フラグメントシェーダーを使った描画についてのメモです。 ちなみに頂点シェーダーを考慮すると難易度が高くなって私には理解できなくなるので、一旦下記のツールを使う前提で書いていきます。

http://glslsandbox.com/

gl_FragColorの使い方

gl_FragColorは描画用の組み込み変数なので、定義が不要です。 方はvec4になります。

定義の仕方は下記です。設定する値の型はfloatになります。

//RGBAで設定
gl_FragColor = vec4(0.5,0.5,0.5,0.5);
gl_FragCoordの使い方

gl_FragCoordはピクセル座標の組み込み変数です。 型はvec4になります。

//gl_FragCoordを利用して色をしていする
float c = gl_FragCoord.x /resolution.x;
gl_FragColor = vec4(c,c,c,1.0);

GLSLの原点

色を描画する為のGLSLでは左下が原点(0.0,0.0)になります。

float c = gl_FragCoord.y /resolution.y;
gl_FragColor = vec4(c,c,c,1.0);

原点を中央にする

原点から描画したい場合は下記の式で原点を中央に変更する。 座標を2倍して、画面サイズを引くことで原点を中央にします。

中央からグラデーションさせる

中央からグラデーションさせる為には、座標情報を正規化する必要があります。 min(x,y)は xとyのより小さい値を返す関数です。 この結果cには-1.0 ~ 1.0の値が入ります。

vec2 c = (gl_FragCoord.xy * 2.0 - resolution.xy) / min(resolution.x, resolution.y);

次に、正規化した値を使って色情報作成していきます。 以下のような値を設定するイメージです。

原点から離れれば離れるほど、値が小さくなれば良さそうです。

正規化した値をそのまま使うとマイナス値も含んでいる為上手くいきません。

length関数で距離を取得する

そこでビルドイン関数のlengthを利用して、原点からの距離を利用します。

length関数で取得できる値は必ずプラスの値になります。

void main(void){
    vec2 c = (gl_FragCoord.xy * 2.0 - resolution.xy) / min(resolution.x, resolution.y);
    float l = 0.1 / length(c);
    gl_FragColor = vec4(vec3(l), 1.0);
}

上記の式のイメージはこんな感じです。 原点からはなれるほど、値が小さくなっていきます。

まとめ

ゆっくり理解すればまだわかるレベルです。 ちなみに今回の記事は↓の参考サイトを見ながら試した為、↓を見たほうが遥かにわかりやすいです。

参考

[連載]やってみれば超簡単! WebGL と GLSL で始める、はじめてのシェーダコーディング(4)