#9 球の描画

:thinking:

index

2020/8/14 作成
2020/8/14 更新


単純な円

円は中心からの距離が等しい点の集合ですね
つまり中心からの距離が分かれば
半径とする値さえ決めてしまえば簡単に円を描くことができます

まず二次元の座標平面を用意します
ある場所の0,0からの距離を求めるときは
三平方の定理を使いますよね?
sqrt(x*x+y*y)
ですね(sqrtは平方根)
これをこのままつかってもいいのですが
glslにはこの計算をしてくれる専用の関数があります
length(x)
公式のリファレンス
引数にはfloat~vec4までほぼなんでも入れることができます
hlslにも同じ関数があります
めちゃくちゃ便利です
中心が0,0の2*2の座標で確認してみましょう

WebGL


ここにstep関数を使って半径を設定します
半径0.5の実行結果です↓

WebGL


あとは適当に色つけるなりしてください
マイクラ側で適当にフィルターかけてくれるみたいなので
これくらい雑でもそれなりに映ります

WebGL


今回は月の解説がメインなので
太陽はここら辺にして次進みますね
自分で試行錯誤してみてください

球の法線

ただの円では球を表現するにはあまりにも不十分です
ちゃんと3次元の座標を用意してみましょう
vec3の座標として用意してもいいのですが
大きさを変えたいときや色を付けたりするときに
面倒な処理をしなくて済むように
面の法線を3次元の情報として作っていきます

先に法線のz要素を計算してそれを手掛かりにxy要素を添えるイメージです
float d = length(p);
float r = .8;//半径
vec3 n = normalize(vec3(p,sqrt(r*r-d*d)));
最初に半径rの球を計算してからnormalizeで単位化しています
公式のリファレンス
球の外側をstep関数でカットして
xyz成分をそれぞれrgbとして表示するとこんな感じになります
いわゆる法線マップですね

WebGL


光源の設定

内積を使って明るさを計算します
vec3 light =vec3(1);//光源位置
float brightness = dot(normalize(light),n);
WebGL

あとはlightの座標をぶん回せば月として使えます
vec3 light = vec3(sin(-TIME),0.,cos(-IME));
WebGL


前回使ったノイズなどを組み合わせると
よりそれっぽく仕上がります
マイクラの月の満ち欠けの情報は
テクスチャの座標から逆算で求めることができます
是非考えてみてくださいね