|
|
|
|
@ -37,7 +37,7 @@
|
|
|
|
|
|
|
|
|
|
<div class="codeAndCanvas" data="cellnoise-00.frag"></div>
|
|
|
|
|
|
|
|
|
|
このサンプルでは、点の1つがマウスの位置に対応しています。何が行われているか、しっかり把握できるまで試してみてください。理解できたら下記に挑戦してみましょう。
|
|
|
|
|
このサンプルでは、点の1つがマウスの位置に対応しています。何が行われているか、しっかり把握できるまで試してみてください。理解できたら以下に挑戦してみましょう。
|
|
|
|
|
|
|
|
|
|
- 他の点もアニメーションさせるにはどうすれば良いでしょう。
|
|
|
|
|
|
|
|
|
|
@ -63,7 +63,7 @@ GLSLと配列、```for``` ループはあまり相性が良くないことに気
|
|
|
|
|
vec2 f_st = fract(st);
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
次はどうするのでしょうか。このタイルの座標（```i_st``` に整数座標として格納されています）を点の位置をランダムに決めるために使います。```random2``` は ```vec2``` の値を受け取りランダムな座標を ```vec2``` で返します。こうして全てのタイルについて、その中でランダムな位置を持った点がひとつづつ決まります。
|
|
|
|
|
次はどうするのでしょうか。このタイルの座標（```i_st``` に整数座標として格納されています）を点の位置をランダムに決めるために使います。```random2``` は ```vec2``` の値を受け取りランダムな座標を ```vec2``` で返します。こうして全てのタイルについて、その中でランダムな位置を持った点が1つずつ決まります。。
|
|
|
|
|
|
|
|
|
|
```glsl
|
|
|
|
|
vec2 point = random2(i_st);
|
|
|
|
|
@ -117,13 +117,13 @@ for (int y= -1; y <= 1; y++) {
|
|
|
|
|
...
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
上のコードは[Inigo's Quilezの記事](http://www.iquilezles.org/www/articles/smoothvoronoi/smoothvoronoi.htm) を参考にしました。彼はこう書いています。
|
|
|
|
|
上のコードは[Inigo Quilezの記事](http://www.iquilezles.org/www/articles/smoothvoronoi/smoothvoronoi.htm)を参考にしました。彼はこう書いています。
|
|
|
|
|
|
|
|
|
|
「上記のコードにはうまいトリックが使われていることに触れておいた方が良いかもしれません。世にある多くの実装は計算精度の問題を抱えています。ランダムな点を（ワールド空間やオブジェクト空間のような）ドメイン空間の中で生成するため、原点から点の位置が任意の距離だけ離れている可能性があります。
|
|
|
|
|
>上記のコードにはうまいトリックが使われていることに触れておいた方が良いかもしれません。世にある多くの実装は計算精度の問題を抱えています。ランダムな点を（ワールド空間やオブジェクト空間のような）ドメイン空間の中で生成するため、原点から点の位置が任意の距離だけ離れている可能性があります。
|
|
|
|
|
|
|
|
|
|
（訳注：ドメイン空間 domain space — 数学的には「定義域」と訳したりしますが、ここでは分割された升目内のローカルな座標に対して、ワールド空間のようなプログラムが一般に使用する座標系を指している、くらいの解釈で良いと思います。）
|
|
|
|
|
|
|
|
|
|
この問題はコード全体でより精度の高いデータ型を用いるようにするか、もしくは少し頭を使うことで解決できます。私の実装では点の位置をドメイン空間ではなく、升目の中の空間で生成します。シェーディングする座標の整数部分と少数部分を抜き出して、どの升目を扱っているかを特定できれば、その升目の周囲で起きることだけに気をつければ良いことになります。つまり座標の整数部分をごっそり落としてその分のビットを精度を上げるために使うことができるのです。実際問題、標準的なボロノイの実装では、シェーディングする座標とランダムな点の座標の差を求める際に整数部分の値が打ち消し合うことになります。上の実装では、全ての計算を升目内の座標空間に移しているため、この打ち消し合いは発生すらしません。またこのトリックを使うと、世界を丸ごとボロノイでシェーディングするような場合も扱うことができます。入力を倍精度浮動小数点数に置き換えて floor() と fract() の計算を行いながら、他の箇所では単精度浮動小数点数を使うことで、全ての実装を倍精度に変えるコストを避けることができます。もちろん同じトリックはパーリンノイズにも使うことができます（私は実装もドキュメンテーションも見たことがありませんが）。」
|
|
|
|
|
>この問題はコード全体でより精度の高いデータ型を用いるようにするか、もしくは少し頭を使うことで解決できます。私の実装では点の位置をドメイン空間ではなく、升目の中の空間で生成します。シェーディングする座標の整数部分と少数部分を抜き出して、どの升目を扱っているかを特定できれば、その升目の周囲で起きることだけに気をつければ良いのです。つまり座標の整数部分をごっそり落として、その分のビットを精度を上げるために使うことができるのです。実際問題、標準的なボロノイの実装では、シェーディングする座標とランダムな点の座標の差を求める際に整数部分の値が打ち消し合うことになります。上の実装では、全ての計算を升目内の座標空間に移しているため、この打ち消し合いは発生すらしません。またこのトリックを使うと、世界を丸ごとボロノイでシェーディングするような場合も扱うことができます。入力を倍精度浮動小数点数に置き換えて ```floor()``` と ```fract()``` の計算を行いながら、他の箇所では単精度浮動小数点数を使うことで、全ての実装を倍精度に変えるコストを避けることができます。もちろん同じトリックはパーリンノイズにも使うことができます（私は実装もドキュメンテーションも見たことがありませんが）。」
|
|
|
|
|
|
|
|
|
|
要点まとめ：空間をタイルに分割します。それぞれのピクセルについて、そのピクセルを含むタイルとその周囲の8つのタイルの中にある点までの距離を計算し、最も近い点までの距離を記録します。その結果、下のサンプルのようなディスタンスフィールドが得られます。
|
|
|
|
|
|
|
|
|
|
@ -141,14 +141,14 @@ for (int y= -1; y <= 1; y++) {
|
|
|
|
|
|
|
|
|
|
- このディスタンスフィールドを使って面白いパターンを作ることはできますか。
|
|
|
|
|
|
|
|
|
|
このアルゴリズムはピクセルではなく、点からの視点で解釈することもできます。その場合は、それぞれの点が成長して、他の点からの領域にぶつかるまで膨らんでいく、といったように言い表せます。これはある種、自然界における成長の仕組みに似ています。生きている組織はこのように、内側からの広がり成長しようとする力と、外からの制約の緊張関係によって形作られます。この振る舞いをシミュレートする古典的なアルゴリズムは[Georgy Voronoi](https://en.wikipedia.org/wiki/Georgy_Voronoy)の名前をとって名付けられました。
|
|
|
|
|
このアルゴリズムはピクセルではなく、点からの視点で解釈することもできます。その場合は、それぞれの点が成長して、他の点からの領域にぶつかるまで膨らんでいく、といったように言い表せます。これはある種、自然界における成長の仕組みに似ています。生きている組織はこのように、内側から広がり成長しようとする力と、外からの制約の緊張関係によって形作られます。この振る舞いをシミュレートする古典的なアルゴリズムは[Georgy Voronoi](https://en.wikipedia.org/wiki/Georgy_Voronoy)の名前をとって名付けられました。
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### ボロノイアルゴリズム
|
|
|
|
|
|
|
|
|
|
ボロノイ図をセルラーノイズから作図するのは見た目よりも簡単です。現在のピクセルにどの点がもっとも近いかという追加の情報を記録すれば良いのです。そのために ```m_point``` という名前の ```vec2``` を使います。距離だけではなく、その点固有の識別子として座標を記録します。
|
|
|
|
|
ボロノイ図をセルラーノイズから作図するのは見た目よりも簡単です。現在のピクセルにどの点が最も近いかという追加の情報を記録すれば良いのです。そのために ```m_point``` という名前の ```vec2``` を使います。距離だけではなく、その点固有の識別子として座標を記録します。
|
|
|
|
|
|
|
|
|
|
```glsl
|
|
|
|
|
...
|
|
|
|
|
@ -189,9 +189,9 @@ for (int y= -1; y <= 1; y++) {
|
|
|
|
|
|
|
|
|
|
<a href="../edit.php#12/2d-voronoi.frag"><img src="2d-voronoi.gif" width="520px" height="200px"></img></a>
|
|
|
|
|
|
|
|
|
|
Inigoのボロノイについての実験は続きます。2014年には彼が[voro-noise](http://www.iquilezles.org/www/articles/voronoise/voronoise.htm)と呼ぶ、標準的なノイズとボロノイを徐々にブレンドできる関数についての記事を書きました。彼は言います。
|
|
|
|
|
Inigoのボロノイについての実験は続きます。2014年には彼が[voro-noise](http://www.iquilezles.org/www/articles/voronoise/voronoise.htm)と呼ぶ、標準的なノイズとボロノイを徐々にブレンドできる関数についての記事を書きました。
|
|
|
|
|
|
|
|
|
|
「似てはいるものの、グリッドが両方のパターンで使われる方法は異なります。ノイズはランダムな値を（バリューノイズのように）補完や平均、もしくは（グラデーションノイズのように）平滑にしますが、ボロノイは最も近い特徴点への距離を計算します。スムースなバイリニア補完と最小値の評価は全く違う処理です。いや、本当にそうでしょうか。この2つをもっと一般化された形で組み合わせることはできないのでしょうか。もしできるならノイズとボロノイ図は、グリッドに基づくより一般的なパターン生成方法の特殊な例とみなせるのではないでしょうか。」
|
|
|
|
|
>似てはいるものの、グリッドが両方のパターンで使われる方法は異なります。ノイズはランダムな値を（バリューノイズのように）補完や平均、もしくは（グラデーションノイズのように）平滑にしますが、ボロノイは最も近い特徴点への距離を計算します。スムースなバイリニア補完と最小値の評価は全く違う処理です。いや、本当にそうでしょうか。この2つをもっと一般化された形で組み合わせることはできないのでしょうか。もしできるならノイズとボロノイ図は、グリッドに基づくより一般的なパターン生成方法の特殊な例とみなせるのではないでしょうか。
|
|
|
|
|
|
|
|
|
|
<a href="../edit.php#12/2d-voronoise.frag"><canvas id="custom" class="canvas" data-fragment-url="2d-voronoise.frag" width="520px" height="200px"></canvas></a>
|
|
|
|
|
|
|
|
|
|
|
kynd
8 years ago