シェーダでノイズ3(セルノイズ)

シェーダでノイズ3(セルノイズ)

このノイズは細胞のように、区分けされた結果が得られるノイズです

セルラーノイズ

 このノイズはあるピクセルから、ランダムに与えられた複数の点の中から一番近い点までの距離を出力するノイズです。

始めに、バリューノイズやパーリンノイズで行ったように、UV座標に定数を掛け、その値の小数部分を取り出すことで格子状に区切ります。

この格子ごとにランダムな点を決定します。次に、ピクセルから一番近いランダムな点までの距離を求めます。一番近い点は、あるピクセルが存在する格子ではなく、そのピクセルが存在する格子の周辺の格子に一番近い点が存在する可能性があります。そのため、ピクセルから一番近い点までの距離を求めるには、ピクセルが存在する格子とその周辺の格子、つまり、下図のように九か所の格子に存在する点までの距離を調べる必要があります。

そして、一番近いランダムな点までの距離を保存し、その距離を出力します。

shader

 セルラーノイズの結果は以下の通りです。for文内でピクセルから九か所のランダムな点までの距離を調べつつ、min関数により一番近いランダムな点までの距離を記録しています。

実行結果

 上記シェーダの実行結果は以下の通りです。細胞のように区分けわれたような結果が得られます。

ボロノイ図

 ボロノイ図はピクセルから一番近いランダムな点に応じて領域を分けた図です。ボロノイ図を作成は、セルラーノイズを少し変更するだけで実現できます。

セルラーノイズではピクセルから一番近いランダムな点までの距離を以下のように求めていました。

この部分をif文によって以下のように書き換えます。

if文に置き換えることで、一番近い距離だけでないく一番近いランダムな点の座標を保存できます。この座標と距離を利用することで色分けできます。

また、座標と任意のベクトルの内積をとることで、グレースケールの結果が得られます。

shader

ボロノイ図を表示するシェーダは以下の通りです。

実行結果

上記シェーダの実行結果は以下の通りです。カラーで出力すると以下のようになります。

また、グレースケールで出力すると以下のようになります。

ボロノイ図の改良

 ボロノイ図を描画する際には一番近い点までの距離を利用していましたが、二番目に近い点までの距離を利用することで他の結果を得ることができます。if文を以下のように変更することで二番目に近い点までの距離を保存します。

 これらの距離を利用することで、ボロノイ図とは違った結果が得られます。他には、ボロノイ図の境界線を描画するシェーダがここで紹介されています。

実行結果

一番近い点までの距離をF1、二番目に近い点までの距離をF2とします。これらを利用することで以下のような結果が得られます。

F2

F2-F1

F2*F1

参考サイト

The Book of Shaders:Cellular noise

Inigo Quilez :vonoroi edges