Visualizer
wipこの項目では、ステージの床 (オブジェクト名: Visualizer) の処理について解説します。
おおまかには、床はテクスチャ素材は使わず、ピクセルシェーダでパターンを生成しています。 反射の映り込みは Y 軸を反転したカメラでレンダリングした結果を用いて実現しています。 まずはピクセルシェーダでパターンを生成する処理について解説します。
ピクセルシェーダで図形を実現するのに distance function という手法を用いています。 これはその名の通り、現在のピクセルの位置と図形との距離を算出する関数です。 例えば円であれば以下のような式になります。
float circle(float2 pos, float radius)
{
return length(pos) - radius;
}
pos が円の内側であれば負に、外側であれば正になります。
画面左下が -1.0,-1.0、右上が 1.0,1.0 の領域に半径 0.5 で上の関数を実行し、結果が負の領域だけを白くすると以下のようになります。
[WebGL で実行}(http://glslsandbox.com/e#21159.0)
次に、円の内側をフェードアウトさせてみます。 外円を 0.5、内円を 0.4 とし、その間を距離に応じて 白->黒 とグラデーションさせます。
[WebGL で実行}(http://glslsandbox.com/e#21159.1)
次に、アニメーションさせてみます。 デフォルトのシェーダのパラメータの中には時間が含まれています。(_Time.y) これに応じて中心からの距離を広げることでアニメーションを実現できます。 また、それだけだと一つの輪が広がるだけになってしまうので、距離を mod() で区切ることで繰り返す処理も入れます。
[WebGL で実行}(http://glslsandbox.com/e#21159.2)
** 六角模様
六角形も考え方は円と同じで、図形との距離を算出して可視化していきます。 六角形の式は以下のようになります。
float hex(float2 pos, float2 size)
{
float2 apos = abs(pos);
return max(apos.x-size.y, max(apos.x+apos.y*0.57735, apos.y*1.1547)-size.x);
}
[WebGL で実行}(http://glslsandbox.com/e#21159.3)
円のアニメーションでも少し触れましたが、mod() 関数を使うことで図形を繰り返すことができます例えば mod(pos, 0.2) とすると pos は -0.2～0.2 の範囲を繰り返すことになるため、結果として図形も繰り返されることになります。 このようにして六角形を並べてハニカム模様にします。
[WebGL で実行}(http://glslsandbox.com/e#21159.4)
そして、広がる輪とハニカム模様の隙間との and を取ることで、溝を這う光の溝を実現できます。
[WebGL で実行}(http://glslsandbox.com/e#21159.5)
** リング ステージ中央を中心にぐるぐる回っているリング群、これは円の変則パターンです。 中心からの距離を mod() で区切ることで年輪模様ができます。
[WebGL で実行}(http://glslsandbox.com/e#21159.7)
横方向にもフェードアウトを入れます。
[WebGL で実行}(http://glslsandbox.com/e#21159.6)
時間に応じて回転させるアニメーションを入れます。 atan(pos.y, pos.x) でそのピクセルの中心からの方向が取れるので、角度に応じてフェードアウトさせる処理を入れます。 フェードアウトの角度を時間で変えることで、回転するアニメーションも実現できます。
[WebGL で実行}(http://glslsandbox.com/e#21171.1)
各リングの回転を (擬似) 乱数でずらします。 この乱数は各リング内においては同じ結果になる必要があります。 このため、floor(中心からの距離 / リングの幅) (== n 番目のリング) を適当に hash した値を乱数として使いました。
[WebGL で実行}(http://glslsandbox.com/e#21159.8)
そして最後に、BGM のボリュームに応じてリングの幅や色を変える処理を入れます。 これは reaktion のスペクトラム分析の結果をシェーダのパラメータに入れて、それを幅や色の値に使うだけです。
六角模様とリングを組み合わせることで以下のような結果になります。(BGM との連動はこの例では入っていません)
[WebGL で実行}(http://glslsandbox.com/e#21159.9)
大体ステージの床の模様と同じになっているのが見て取れると思います。 実際にステージに使われているものは、最終的にブルームで光らせるため、かなり色を強くしています。 RGB: 2.0,2.0,3.0 のようにすることで、模様本体は白く、フェードアウト部分や周囲のブルームの光はほのかに青い、という結果が得られます。