[Noise 入門 #06] Domain Warping — 座標をねじると世界が壊れる

はじめに

  • FBM は「出力を重ねる」技術だった
  • Domain Warping は「入力を壊す」技術である

ここで世界の見方が変わる。

これまでのノイズは：

$$value = noise(x, y)$$

しかし Domain Warping は：

$$\mathrm{value} = \mathrm{noise}\bigl(x + f(x,y),\; y + g(x,y)\bigr)$$

つまり──

ノイズは“値”を操作する技術ではない。
空間そのものを再定義する技術である。


前回の記事：

1. まず普通のノイズを思い出す

通常のノイズはこうだった：

$$value = noise(x, y)$$
  • 座標 (x, y) はそのまま
  • ノイズ関数が「値」だけを変える

空間は固定されている。
変化しているのは 高さ（値）だけ。

イメージとしては：

  • 地形の高さを決める
  • 明るさを決める
  • 色を決める

つまりこれは、

空間は動かさず、表面だけを揺らしている状態。

Domain Warping の式を出す

value = noise(
  x + noise(x, y),
  y + noise(x, y)
)

この瞬間に脳が止まる。

なぜなら：

  • ノイズの出力を
  • ノイズの入力に突っ込んでいる

つまり

ノイズで座標を歪ませてから、もう一度ノイズをかけている。

ここで一文：

もはや値を変えているのではない。
座標系そのものが揺れている。

2. Domain Warping の本質

やることはこれだけ：

nx = noise(x, y)
ny = noise(x + 100, y + 100)

value = noise(
  x + nx * strength,
  y + ny * strength
)

一見すると単純。

しかし、やっていることは根本的に違う。

なぜ “x + 100” なのか？

同じ座標で nx と ny を作ると、 両方向の歪みが相関してしまう。

だから入力をずらす。

ny = noise(x + offset, y + offset)

これで

  • X方向の歪み
  • Y方向の歪み

を独立させることができる。

何が起きているのか？

  1. ノイズで「歪みベクトル」を作る
  2. そのベクトルで座標を動かす
  3. 動かされた座標で再びノイズを計算する

つまり：

ノイズの出力を、次のノイズの“座標”に使う。

これが Domain Warping。

数学的に書くと

$$\mathbf{p} = (x, y)$$
$$\mathbf{warp} = (n_1(x,y), n_2(x,y))$$
$$value = n_3(\mathbf{p} + \mathbf{warp} \cdot strength)$$

ここで初めて読者が気づく。

これは「値の操作」ではない。

座標ベクトルの変形である。

3. 図解パート（超重要）

通常ノイズ

まっすぐなグリッドの上で、

$$value = noise(x, y)$$

を計算する。

空間は動かない。

+----+----+----+
|    |    |    |
+----+----+----+
|    |    |    |
+----+----+----+

↓

高さだけが変わる。

滑らかな丘や波になる。

空間は固定されている。
変わるのは「値」だけ。

Domain Warping

まずグリッドそのものを動かす。

$$(x, y) \rightarrow (x + f(x,y),; y + g(x,y))$$

各点がノイズで押される。

+----+----+----+
 \     \     \
  +----+----+----+
   \     \

↓

その「歪んだ座標」でノイズを計算する。

結果：

  • 渦が生まれる
  • 模様がちぎれる
  • 断層が出る
  • 乱流のような流れが出る

4. なぜ“神領域”なのか？

感覚ではなく、構造的に説明する。

① 規則性が消える

FBM は「自己相似構造」だ。

$$fbm(x,y) = \sum_{i} noise(2^i x, 2^i y)$$

だから、

  • 周波数が倍々に増える
  • パターンの階層構造が残る

つまりまだ“フラクタルの匂い”がある。

一方、Domain Warping は：

$$(x,y) \rightarrow (x + f(x,y), y + g(x,y))$$

座標そのものを非線形に歪ませる。

結果：

  • グリッド構造が崩壊する
  • 周波数の整列が壊れる
  • 自己相似が破れる

これは「重ねる」のではなく 空間構造を破壊している。

② 方向性が生まれる

通常ノイズはスカラー場。

Domain Warping はベクトル場を導入する。

$$\mathbf{w}(x,y) = \begin{pmatrix} f(x,y) \ g(x,y) \end{pmatrix}$$

このベクトルが流れを作る。

だから生まれる：

  • 渦
  • 流線
  • 重力的引き込み
  • 圧縮と拡張

ここで初めて「方向性」が生まれる。

③ 物理表現と相性が良い

自然界はスカラーでは動かない。

  • 空気は流れる
  • 水は流れる
  • 煙は拡散する
  • 重力は空間を曲げる

全部ベクトル場。

Domain Warping は

ノイズをベクトル場に拡張する

だから：

  • 煙が煙になる
  • 炎が炎になる
  • ブラックホールが“吸い込む”ように見える

一文でまとめるなら

FBM は複雑さを足す。 Domain Warping は空間を壊す。

ここが次元の違い。

5. FBM × Domain Warping

ここが真の強さ。

まずベクトルを作る：

warpX = fbm(x, y)
warpY = fbm(x + 100, y + 100)

value = fbm(
  x + warpX * strength,
  y + warpY * strength
)

ここで初めて、

  • 方向性
  • 渦
  • 非対称性

が生まれる。

なぜ FBM を使うのか？

通常の noise だと歪みが単調。

FBM を使うと：

  • 小さな歪み
  • 中くらいの歪み
  • 大きな歪み

が重なる。

つまり

“歪みそのものがフラクタルになる”

これが破壊力。

何が起きるか？

🌍 地形

断層が自然になる。 人工的な周期性が消える。

☁ 雲

ただのモヤが 乱流になる。

🌀 魔法陣

同心円が 渦に変わる。

🌊 水面

波が直線的でなくなり、 流れを持つ。

一文でまとめるなら

FBM は複雑さを作る。
Domain Warping は方向性を作る。

掛け合わせると、

複雑さを持った流れが生まれる。

これが自然に近づく理由。

6. 強さ（strength）で何が変わる？

Domain Warping の本質は：

$$\mathbf{p}' = \mathbf{p} + \mathbf{w}(\mathbf{p}) \cdot strength$$

つまり、

strength は「空間変形のスケール」。

🔹 小さい（0.05〜0.2）

  • 座標の微小な揺れ
  • 周波数構造は保たれる
  • 自然なディテール増加

用途： 地形の自然化、質感向上

🔹 中（0.3〜0.7）

  • 局所的な回転・圧縮が発生
  • 渦が見え始める
  • フラクタル構造が崩れ始める

用途： 雲、煙、炎、魔法陣

ここで初めて「流れ」が生まれる。

🔹 大（1.0以上）

  • 格子が激しく折れる
  • 折り返し（folding）が起きる
  • 断層・破断・崩壊

数学的には：

座標写像が単射でなくなる

つまり、 空間が重なり始める。

ここがカオス領域。

なぜ崩壊するのか？

変形量が

$$|\mathbf{w}(\mathbf{p})| \cdot strength$$

がグリッド間隔を超えると、

隣接関係が壊れる。

だから断層が生まれる。

一文でまとめるなら

strength は

“空間の安定性”を壊すノブ。

弱い → 補正 中 → 流れ 強い → 崩壊

ここで比較画像を並べると、本当に神記事になる。

  • strength 0.1
  • strength 0.5
  • strength 1.2

同じシードで。

読者は一瞬で理解する。

7. 3D / 4D への拡張

これまで扱っていたのは：

$$noise(x, y)$$

つまり 2次元関数。

3D へ拡張

$$noise(x, y, z)$$

z を入れると何が起きるか？

  • 地面ではなく“体積”になる
  • 面ではなく“空間”になる
  • 断面を切ると模様が変わる

体積雲や洞窟生成はこれ。

Domain Warping も同じ。

$$\mathbf{p}' = \mathbf{p} + \mathbf{w}(\mathbf{p})$$
$$value = noise(x', y', z')$$

これで空間そのものが歪む。

4D へ拡張（時間）

時間を入れる：

$$noise(x, y, z, t)$$

これはもう、

静止した模様ではない。

時間方向に連続した構造になる。

つまり、

  • 雲が流れる
  • 炎が揺れる
  • 水面が動く
  • ブラックホールが回転する

Domain Warping × Time

warpX = fbm(x, y, time)
warpY = fbm(x + 100, y + 100, time)

value = fbm(
  x + warpX * strength,
  y + warpY * strength,
  time
)

ここで重要なのは：

時間は「後付けアニメーション」ではない。

時間を含んだ4次元関数を
切り取って見ているだけ。

強く言い切るなら

ノイズは模様ではない。
時間を含んだ高次元関数である。

2Dは断面。
3Dは体積。
4Dは時間を含む世界。

8. Three.js との接続予告

理論はここまで。

次は実装。

Three.js では：

  • ShaderMaterial でノイズを直接書く
  • uniform float time; を用意する
  • useFrame で time を更新する
  • strength を GUI で動かして空間の崩壊を体験する

つまり、

数式がそのままピクセルを動かす世界に入る。

ここからはもう「読む」ではなく「触る」領域。

9. まとめ

Domain Warping は：

  • ノイズを“模様”から“空間操作”へ引き上げる
  • スカラー場をベクトル場に拡張する
  • 自己相似構造を破壊し、方向性を生む
  • FBM と組み合わせることで自然構造に近づく

そして何より重要なのはこれ。

ノイズは値を揺らす技術ではない。
空間そのものを変形させる技術である。

2D は断面。
3D は体積。
4D は時間を含む世界。

ここまで来ると、

数式は抽象ではない。
そのまま世界生成アルゴリズムになる。

最後に

ここから先は、数学とアートの境界線が消える。

次回は Three.js + Shader で
Domain Warping を実際に動かす。

理論を、世界にする。