読者です 読者をやめる 読者になる 読者になる

Lyの日常

主が楽しくプログラムをカキカキするブログ

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

どうも、ω、
今日はこんなかんじのを実装してみたいと思います
f:id:akira206:20151219220820p:plain
光の玉みたいな。ω。

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

以下のコードで画面の中央に点がでればおk、ω、
f:id:akira206:20151219220528p:plain

どうなっとるんや!?

// 画面の中央座標を取得
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となってます

すこし図にかいてみるとみえて・・・
f:id:akira206:20151219214149j:plain
みえ・・・みえ・・・見えるぞ!

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

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

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

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

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

f:id:akira206:20151219221509p:plain
おほおおおおおお!!

追加点

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

図で表すと・・・
f:id:akira206:20151219222314j:plain
図が下手ですみません、ω、
もうすこし急なカーブを描くと思います。ω。

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

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

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

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