シェーダーたのじいいいいいいいい!(二日目
どうも、ω、
今日はこんなかんじのを実装してみたいと思います
光の玉みたいな。ω。
まずは点を描画してみる!
以下のコードで画面の中央に点がでればおk、ω、
どうなっとるんや!?
// 画面の中央座標を取得 vec2 center = resolution * 0.5;
resolutionは画面のサイズでした
その値を[ * 0.5 ]つまり半分にした値が画面の中央座標になるわけです
たとえば横幅400、 縦幅200の場合
[ * 0.5 ]をすれば[200, 100]の値がとれるわけです!
// 最終的な色を決める変数を用意 // 黒で初期化 vec4 color = vec4(0.0);
そこまんまですね
いろいろ計算して1ピクセルの色を決定しますが
その最終的に決まった色をこの変数に格納させます、ω、
// 現在計算している座標(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
図で表すと・・・
図が下手ですみません、ω、
もうすこし急なカーブを描くと思います。ω。
つまり近いほど値が(光の強さ)大きく
離れるにつれてゆっくりと値が小さくなるわけです
綺麗な玉が描画できた!((いみしん
今日はここまでとします、ω、
ほんとはブラーまでいきたかったけど
次回に持ち越しです。ω。
それではよいコーディングライフを!ノシ