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

まず二次元の座標平面を用意します
ある場所の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