[Noise 入門 #12] Voronoi / Worley Noise — 「距離」が描く細胞の幾何学

はじめに

これまでのノイズ（Perlin/Value）は「グリッドの勾配」を補間して作る “滑らかで煙のような世界” でした。 しかし、自然界には「細胞」「石畳」「鱗（うろこ）」「ひび割れ」といった、境界線がはっきりしたパターン が存在します。

第12回では、「点と距離」 を使って生成される Cellular Noise（細胞状ノイズ）、通称 Voronoi（ボロノイ） や Worley Noise を解説します。

この記事で得られる知識

1. Gradient vs Cellular: Perlin系との決定的な違い（「勾配」ではなく「距離」で描く）。
2. アルゴリズムの直感理解: 空間に「種（Seed）」を撒き、最も近い種までの距離を測るだけ。
3. 距離関数の魔法:

• Euclidean（ユークリッド距離）：自然な細胞、泡。
• Manhattan（マンハッタン距離）：回路基板、未来都市のような四角いパターン。
• Chebyshev（チェビシェフ距離）：より機械的なブロック。

Worleyの深淵: （第1近傍）だけでなく、（第2近傍）や を使うと、なぜ「クリスタル」や「石垣」に見えるのか？

前回の記事：

[Noise 入門 #11] Procedural Water — ノイズで海面を波立たせる（Gerstner Wave vs Noise）

Noise 入門シリーズ第11回。手続き型で生成する水面表現の核心に迫ります。FBMによるランダムな揺らぎと、Gerstner Waveによる物理的な『尖り』を持つ波の作り方を比較・融合し、Shaderで海を作る手法をまとめます。

https://humanxai.info/posts/noise-intro-11-procedural-water/

1. 導入：雲から「個体」へ

これまでの連載（#01〜#11）では、私たちはひたすら Perlin Noise（およびその派生である FBM / Domain Warping） を武器に戦ってきました。

Perlin Noise の本質は「滑らかな勾配」です。 グリッドの交点にベクトルを配置し、それらを補間することで、煙、雲、流体、緩やかな地形、そして波といった 「連続的な自然（Continuous Nature）」 を描くのには最強の道具でした。

しかし、自然界を見渡してみると、滑らかに混ざり合うものばかりではありません。

• ひび割れた乾燥地帯（Cracked Mud）
• 爬虫類の鱗や、キリンの模様（Biological Patterns）
• 顕微鏡で見た植物の細胞（Cells）
• 石畳やモザイクタイル（Stone Pavement）

これらは境界線がくっきりとしており、「個々に分かれた構造（Discrete Structures）」 を持っています。 これを Perlin Noise で作ろうとすると、コントラストを上げたり step 関数で無理やり二値化したりと、かなり苦しい調整が必要になります。しかも、どうしても「無理やり作った感」が出てしまい、自然な幾何学模様にはなりません。

「勾配」を捨て、「距離」を測れ

そこで登場するのが、今回解説する Voronoi（ボロノイ） や Worley Noise（ワーリーノイズ）、総称して Cellular Noise（細胞状ノイズ） と呼ばれる手法です。

これまでのノイズとは、根本的にアプローチが異なります。

• Perlin Noise: 隣り合う 「勾配ベクトル」 を混ぜ合わせる。
• Voronoi / Worley: 空間に散らばった 「点」 までの 「距離」 を測る。

アプローチを「混ぜる」から「測る」に変えるだけで、世界は一気に有機的な「個体」の集合へと変化します。 今回は、このシンプルにして奥深い「距離のアルゴリズム」の世界へ足を踏み入れましょう。

2. アルゴリズム図解：「一番近いコンビニを探せ」

「空間をボロノイ図（Voronoi Diagram）で分割し、最近傍点までのユークリッド距離をスカラー場として出力する……」

……なんて言葉を聞くと、ブラウザを閉じたくなりますね。 でも安心してください。Voronoi / Worley Noise がやっていることは、実は 「一番近いコンビニを探す」 という日常的な行動と全く同じです。

このアルゴリズムは、以下の3つのステップで成り立っています。

Step 1: 空間に「特徴点（Feature Point）」を撒く

まず、何もない平原（2D空間）に、ランダムに 「点」 を打ちます。 これが 「コンビニ」 だと思ってください。

• ある店は座標 に。
• 別の店は座標 に。

この「点」が、細胞の 「核（Core）」 になります。

Step 2: ピクセルごとに「距離」を測る

次に、画面上の すべてのピクセル（あなた） が、こう問いかけます。

「今の自分の場所から、一番近いコンビニはどこ？ そして、そこまでの距離は何メートル？」

ピクセル は、空間にあるすべての点をチェックし、その中で 最も小さい距離（Minimum Distance） を見つけ出します。

• A店までは 500m ($d = 0.5$)
• B店までは 120m ($d = 0.12$) ← これが最小！
• C店までは 800m ($d = 0.8$)

この場合、このピクセルの値は に決定します。

Step 3: 距離を「明るさ」に変換する

最後に、求めた「最短距離」をそのまま 「色（明るさ）」 に変換します。

• 距離が 0 に近い（コンビニの真上）

• 値は 0.0（黒）。つまり、細胞の「核」は暗くなる。

• 距離が遠い（店と店のちょうど中間）

• 値は大きくなる（白）。つまり、コンビニから離れれば離れるほど明るくなる。

結果：細胞模様の誕生

これを全ピクセルで実行するとどうなるでしょうか？

それぞれの「点」を中心とした、ぼんやりと広がる黒い円（球体） が生まれます。 そして、円と円がぶつかる場所（ある店と別の店の等距離地点）で、グラデーションが衝突し、「境界線（Ridge）」 が浮かび上がります。

これが、Voronoi / Worley Noise が作る 「細胞（Cell）」 の正体です。

複雑な流体シミュレーションをしているわけでも、生物学的な模倣をしているわけでもありません。ただ 「一番近い点はどこ？」 というシンプルなルールを適用した結果、自然界の細胞構造と同じ幾何学模様が、自動的に浮かび上がってくるのです。

（補足）実装上の「グリッド」の役割

※ここが実際のShaderコードへの架け橋になります。

しかし、シェーダーで「数千個の点」との距離を毎回計算するのは重すぎます（forループが爆発します）。 そこで、Worley氏が考案した賢い方法が 「グリッド（格子）を使う」 ことです。

1. 空間をグリッドで区切る（Perlin Noiseと同じ）。
2. 各グリッドの中に 1つだけ 特徴点をランダムに置く。
3. 距離を計算するときは、「自分のいるマス」と「隣接する8つのマス」（計9個の点）だけを調べればいい。

これで計算量は劇的に減り、無限に続く細胞パターンを高速に生成できるようになります。これを 「Worley Noise」 と呼びます。

3. 距離関数（Distance Function）で世界が変わる

Voronoi / Worley Noise の面白さは、アルゴリズムそのものよりも、「どうやって距離を測るか？」 というルール（距離関数）を変えた瞬間に爆発します。

中学校の数学で習った「三平方の定理（ピタゴラスの定理）」は、あくまで一つの測り方に過ぎません。 この「定規」を持ち替えるだけで、生成される模様は 「生物的な細胞」 から 「近未来的な回路」 へと、劇的に姿を変えます。

GLSLでは、たった1行のコードを書き換えるだけで、世界全体の物理法則を書き換えるような快感を味わえます。

① Euclidean Distance（ユークリッド距離）

「直線の距離」

$$d = \sqrt{(x_2 - x_1)^2 + (y_2 - y_1)^2}$$

• GLSL: length(diff)
• 特徴: 最も自然で、私たちが普段「距離」と呼ぶもの。
• 見た目: 真円、泡、細胞、石ころ。
• 用途: 生物の肌、水面の波紋、自然なひび割れ。

これが Voronoi の「デフォルト」です。全方向に等しく広がるため、境界線は滑らかな曲線を描きます。

② Manhattan Distance（マンハッタン距離）

「タクシーの距離」

$$d = |x_2 - x_1| + |y_2 - y_1|$$

• GLSL: abs(diff.x) + abs(diff.y)
• 特徴: グリッド状の道路を走るタクシーのように、斜めに突っ切れず、縦横にしか動けない世界の距離。
• 見た目: 45度回転した正方形（ダイヤモンド型）、ピラミッド、迷路、電子回路。
• 用途: SF的なパネルライン、メカニカルな装甲、デジタルなノイズ表現。

自然界には存在しない「カクカクした」鋭利な模様が生まれます。テクノロジー系の表現には最強の武器です。

③ Chebyshev Distance（チェビシェフ距離）

「王将（キング）の距離」

$$d = \max(|x_2 - x_1|, |y_2 - y_1|)$$

• GLSL: max(abs(diff.x), abs(diff.y))
• 特徴: チェスのキングのように、縦横も斜めも「1歩」として数える距離。
• 見た目: 軸に平行な正方形、ブロックノイズ、モザイク。
• 用途: 建築的な構造、ロボットの装甲、8bit風のエフェクト。

マンハッタン距離と似ていますが、こちらは正方形が「回転せず」に並びます。より無機質で、工学的な印象を与えます。

GLSLでの切り替えは「一行」だけ

実際のシェーダーコードでは、この部分を書き換えるだけです。

// ① Euclidean: 丸い細胞
float d = length(diff);

// ② Manhattan: テクノロジーなダイヤモンド
// float d = abs(diff.x) + abs(diff.y);

// ③ Chebyshev: ロボットな四角形
// float d = max(abs(diff.x), abs(diff.y));

たったこれだけで、生成されるテクスチャの意味が 「生物（Organic）」 から 「人工物（Artificial）」 へと切り替わります。 この「距離の定義」を自在に操れるようになると、Voronoi は単なる細胞模様生成器ではなく、「万能なパターンジェネレーター」 へと進化します。

4. Worley Noiseの真骨頂：$F_2 - F_1$

これまでの話（$F_1$：一番近い点までの距離）だけだと、生成される画像は少し奇妙です。 黒い点が並んでいるだけで、どちらかと言えば「細胞の核」や「タピオカ」のような集合体に見えます。

「これのどこが『石畳』や『ひび割れ』なんだ？」

そう思ったあなた。ここからが Steven Worley 氏の魔法 です。 彼が提唱したテクニックは、アルゴリズムにたった一つの変更を加えるだけで、画作りを一変させます。

「2番目」を探せ

さきほどの「コンビニ探し」で、一番近い店（）だけでなく、「2番目に近い店（）」 も同時に記録しておくのです。

そして、最後にこの計算を行います。

$$\text{Value} = F_2 - F_1$$

これは何を意味しているのでしょうか？

• セルの中心（核）にいる時：

• 一番近い店（$F_1$）は目の前（距離0）。

• 二番目に近い店（$F_2$）は遥か遠く。

• 差（$F_2 - F_1$）は 大きい（明るい）。

• セルの境界線（エッジ）にいる時：

• 一番近い店と、二番目に近い店が、ちょうど同じ距離 にある（中間地点）。

• つまり $F_1 \approx F_2$。

• 差（$F_2 - F_1$）は 限りなく 0 になる（暗い）。

境界線が「物理」になる

この $F_2 - F_1$ という値は、数学的には 「境界線までの距離（Distance to Border）」 を表します。

これを色として出力すると、あの「点」の集合体が、一瞬にして 「多角形のタイル」 に変わります。 境界線部分が鋭く削り取られ、まるでクリスタルや宝石の断面のような、美しい幾何学模様が浮かび上がるのです。

• $F_1$ だけ： 生物の核、ウィルス、水玉。
• $F_2 - F_1$： 石畳、乾燥した大地、亀の甲羅、キリンの模様、細胞壁。

「ノイズで石を作りたい」「ファンタジーの地図で国境線を引きたい」。 そう思った時、あなたの相棒になるのはこの $F_2 - F_1$ です。

5. 実装への展望 — 2Dの実験から3Dの実践へ

今回の記事では、Voronoi / Worley Noise のアルゴリズムの核心と、距離関数による幾何学的な変化に焦点を当てました。
GLSL のコードを見て、「意外と簡単じゃん」と思った方も多いはずです。

しかし、これはまだ「2D平面での可視化」に過ぎません。
このアルゴリズムが真の力を発揮するのは、3D空間や、他のノイズとの合成に応用した時です。

• 3D Voronoi: 空間を立体的に区切り、岩の内部構造や、スポンジのような多孔質の物体を作る。
• FBM × Voronoi: Perlin Noise の「滑らかさ」と Voronoi の「硬さ」を混ぜ合わせ、リアルな「岩肌」や「ひび割れた大地」を生成する。
• Domain Warping × Voronoi: 細胞そのものを歪ませて、エイリアンの皮膚のようなグロテスクで有機的なテクスチャを作る。

次回以降、これらのテクニックを実装レベルで深掘りしていきます。

なぜ今、Voronoiなのか？（シリーズ上の位置付け）

最後に、なぜシリーズ第12回というこのタイミングで、Perlin Noise から離れて Voronoi を学ぶのか。その理由を整理しておきましょう。

第12回を境に、あなたの手元には 「滑らかさ（Gradient）」 と 「構造（Distance）」 という、相反する2つの強力な武器が揃いました。

これらを使い分けることで、「気体・液体」だけでなく、「固体・生物」までもが、数式だけで生成できるようになります。

次回は、いよいよこの Voronoi Noise を駆使して、GLSLで具体的なテクスチャ表現（岩、金属、細胞）を作る実践編に入ります。