シェーダで図形の描画

シェーダで図形の描画

距離関数

 シェーダを用いて図形を描画するには、距離関数が必要となります。この距離関数は図形ごとに異なる関数となります。図形ごとの距離関数とその関数によって描画される図形は以下の通りです。

 円の距離関数です。radiusによって円の大きさを変更できます。。

楕円

 楕円の距離関数です。rは縦横の幅をsizeで大きさを変更できます。

四角形

 四角形の距離関数です。sizeによって縦横の幅を変更できます。

ひし形

 ひし形の距離関数です。sizeによって大きさを変更できます。

多角形

 多角形の距離関数です。nは辺の数を、sizeで大きさを変更できます。

円環

 円環の距離関数です。sizeで大きさを、wで円環の太さを変更できます。

 星の距離関数です。\(n=5,t=0.5 \) とすると下画像のような星となります。また、sizeで大きさを変更できます。

ハート

glsl 色々なハートの描き方で紹介されている方法を少し変更したコードです。
また、sizeで大きさを変更できます。

楕円を利用して作成したハートです。sizeで大きさを変更できます。

図形の描画

 以上の距離関数を利用して図形を描画するコードは以下の通りです。uv座標の値は0~1なので、frac(i.uv) * 2 – 1によって-1~1へ変更しています。また、smoothstepを使用することで境界を滑らかにしています。

移動

 座標に任意の値を加減算すれば 図形の移動ができます。 下記コードでは四角形を中心から一定の距離ずらしています。

さらに、下記コードのように\(\sin\)と_Time.yを使用すると図形を往復させることができます。

回転

図形の回転

 二次元の回転は以下の式で求めることができます。

$$ \begin{equation} \begin{bmatrix} x’\\ y’ \end{bmatrix} = \begin{bmatrix} \cos\theta&-\sin\theta\\ \sin\theta&\cos\theta \end{bmatrix} \begin{bmatrix} x\\ y \end{bmatrix} \end{equation} $$

この式によって座標を回転させると、図形を回転させることができます。四角形を回転させるコードは以下の通りです。

座標を回転する前に座標に値を加減算することで、図形の位置を変更することができます。実行結果は以下の通りです。

図形の位置を回転

 図形自身を回転させずに、ある点回りに図形を回転させる方法です。単純に\(\sin\)と\(\cos\)を座標に加減算するだけで回転させることができます。コードは以下の通りです。

_Time.yにかける値により回転速度を調整することができます。また、radは回転半径です。\(\sin\)と\(\cos\)内のthetaを回転半径で除算することによって、回転半径によって速度が変わらないようにしています。そして、座標に\(\sin\)と\(\cos\)を加減算した後に、さらに値を加減算することで、回転中心を変えることができます。上記コードの実行結果は以下の通りです。

回転行列による図形位置の回転

 回転行列による図形位置の回転のコードは以下の通りです。

このコードによって回転させると、回転角度に伴って図形自身も回転します。実行結果は以下のようになります。

図形の繰り返し表示

 uv座標に定数を掛けることで同じ図形を等間隔に複数表示することができます。コードは以下の通りです。

sizeは表示する図形の数となります。実行結果は以下の通りです。

モーフィング

 図形ごとに距離関数によって値を求め、それらを線形補間することで、ある図形から他の図形へと自然に変形させることができます。丸から四角へ変形した後に四角から丸への変形を繰り返すコードは以下のようになります。

このコードを実行した結果は以下の通りです。

組み合わせ

 図形を中心回りに回転させ、その円上を中心として、さらに回転させた図形を回転させつつモーフィングを行うコードです。

実行結果は以下の通りです。

四角形を複数の円へ変形するコードです。

円はuv値に4を掛けているので4×4で16個表示されますが、

によって中央の4個のみ表示されるように処理をしています。実行結果は以下の通りです。

参考ページ

The Book of Shaders:Examples Gallery

glsl 色々なハートの描き方

のぐそんブログ:GLSLでモーフィングをやってみる