シェーダーたのじいいいいいいいい！(二日目

どうも、ω、
今日はこんなかんじのを実装してみたいと思います

光の玉みたいな。ω。

まずは点を描画してみる！

以下のコードで画面の中央に点がでればおk、ω、

どうなっとるんや！？

// 画面の中央座標を取得
vec2 center = resolution * 0.5;

resolutionは画面のサイズでした
その値を[ * 0.5 ]つまり半分にした値が画面の中央座標になるわけです
たとえば横幅400、 縦幅200の場合
[ * 0.5 ]をすれば[200, 100]の値がとれるわけです！

// 最終的な色を決める変数を用意
// 黒で初期化
vec4 color = vec4(0.0);

そこまんまですね
いろいろ計算して１ピクセルの色を決定しますが
その最終的に決まった色をこの変数に格納させます、ω、

// 現在計算している座標(gl_FragCoord.xy)から
// 画面の中央(center)との距離を求める
float dist = length(gl_FragCoord.xy - center);

length関数はvec2型を引数にとり
返り値がfloatとなってます

すこし図にかいてみるとみえて・・・

みえ・・・みえ・・・見えるぞ！

ようはvec2の値をfloatに変換してるだけですね、ω、

// 最終的な色に足しこむ
color += dist;

distは距離でした
距離が一番近い値で0.0で
すこしでも離れると値が増えていきますね
なぜこれで点が描画されるのか
図に書いてみてみましょう

みえ・・・みえ・・・見えるかもしれない・・・？

光の強さ(色)は0.0~1.0で表すので
1.0を越えた時点で真っ白になります
なので距離が0,0にちかい一点のみ黒くなるわけですね

そろそろかっちょいいの出そう！

おほおおおおおお！！

追加点

float size = 5.0;
color += (size / dist);

sizeは言わずもがなサイズです
玉のサイズにあたる部分です

さて、サイズ / 距離 でこんな演出がなぜできるのでしょうか？

distは離れるにつれて数値がでかくなります
ためしに小さい値から順に5.0を割ってみましょう

5.0 / 0.1 = 50
5.0 / 0.5 = 10
5.0 / 1.0 = 5
5.0 / 1.5 = 3.333...
5.0 / 2.0 = 2.5
5.0 / 2.5 = 2

図で表すと・・・

図が下手ですみません、ω、
もうすこし急なカーブを描くと思います。ω。

つまり近いほど値が(光の強さ)大きく
離れるにつれてゆっくりと値が小さくなるわけです

綺麗な玉が描画できた！((いみしん

今日はここまでとします、ω、
ほんとはブラーまでいきたかったけど
次回に持ち越しです。ω。

それではよいコーディングライフを！ノシ