[Noise 入門 #05] Fractal Brownian Motion（FBM）— ノイズを“自然界の複雑さ”へ進化させる

はじめに

前回の #04 では Perlin Noise の内部アルゴリズム（グリッド・勾配ベクトル・fade補間）を整理した。

しかし、Perlin Noise をそのまま使うと──

  • 模様が単調
  • “自然らしさ” が足りない
  • 地形や雲に使うと のっぺり する

この問題を解決するのが Fractal Brownian Motion（FBM）。

FBM は「ノイズを重ねるだけ」で自然界の複雑さを作り出す魔法。

この記事では、FBM を 図・式・コードで直感的に理解する。

前回の記事：

1. FBM は何を解決する技術か？

まず 1オクターブ（単発）の Perlin Noise を見る。

（画像：1オクターブ Perlin Noise）

1オクターブ Perlin の特徴

  • 模様が単調で、のっぺりしている
  • スケール（細かさ）が全部同じ
  • “自然っぽさ” がほとんど出ない
  • 地形に使うと、テスト版みたいな平凡な地形になる

Perlin Noise だけだと、自然界の持つ “階層性（大きな形＋中くらいの形＋細かい形）” が作れない。

そこで 複数の Perlin を積み重ねて自然界の複雑さを作る技術 —— それが Fractal Brownian Motion（FBM）。

2. FBM の考え方：ノイズを“積み重ねる”だけ

FBM（Fractal Brownian Motion）の本質はとてもシンプル。

「周波数の違うノイズを、何層も重ねるだけ」

式にすると次の形になる。

FBM = （低周波ノイズ） + （中周波ノイズ） + （高周波ノイズ） + …

構成要素（3つだけ）

FBM を作るパラメータは、たったの 3 種類。

名前 役割
frequency（周波数） ノイズの細かさ
amplitude（振幅） その層が結果に与える強さ
octave（オクターブ数） 何層積み重ねるか

FBM の層構造イメージ

（画像：FBM の層構造の図）

FBM が生むもの

「大きな形」＋「中くらいの形」＋「細かい形」 を同時に持つ複雑な模様

これは自然界とまったく同じ構造。

  • 雲
  • 山
  • 海の波
  • 岩肌
  • 草むら
  • 煙や炎
  • 魔法エフェクトの“揺れ”

自然物はすべて「粗い特徴」と「細かい特徴」を多層で持っている。 FBM はこの構造を 数学的に再現する方法 だ。

3. FBM の図解（1オクタ → 4オクタ）

FBM の理解で最も重要なのは 「層を重ねると何が変わるのか」 を視覚で捉えること。

1オクターブ（＝ただの Perlin Noise）

これは “生の Perlin” の表情。

  • 模様が均質で単調
  • ゆるく連続するが、自然の複雑さはない
  • ゲームに使うと “のっぺりした地形” になる

（画像）

4オクターブ（＝FBM）

Perlin を 4層重ねるだけ で、模様の性質が劇的に変わる。

  • 大きな山（低周波）
  • 中くらいの凹凸（中周波）
  • 細かなざらつき（高周波）
  • 全体の“自然物らしい”複雑さが生まれる

（画像）

FBM の一番の特徴

“粗 → 中 → 細” の情報を全部同時に持てる。

自然界のテクスチャはすべてこの構造。 Perlin だけだと絶対に出せない リアル感・複雑さ が FBM で一気に作れる。

必要なら、 👉 #4 「GLSL で FBM を書く最小コード」 👉 #5 「FBM の派生（Turbulence / Ridge / Billow）」

…も続けて Markdown 化できるよ。

4. 数式（直感で理解できる形にする）

FBM の本質は 「周波数を上げながら、影響を下げて足し算する」 これだけ。

数学が苦手でも、この式だけ覚えれば十分。

for i in octave:
    value += noise(p * frequency) * amplitude
    frequency *= 2
    amplitude *= 0.5

直感で読むとこうなる

  • frequency × 2 → 細かいノイズになる（模様が細部化）

  • amplitude × 0.5 → その層の“存在感”を弱める

これはまさに 「大きな形 → 中くらい → 細かい形」 の重ね掛け。

たとえるなら “和音構造”

音楽で「ド」を鳴らしながら、 少し小さな音で「ミ」「ソ」を重ねると和音が生まれる。

FBM も同じで：

  • 低周波（太い形）
  • 中周波（ほどほどの形）
  • 高周波（細かい形）

を重ねることで、自然のテイストが生まれる。

FBM のキモ

frequency（細かさ）を上げる → 形の密度が増す

amplitude（影響力）を下げる → 破綻しない複雑さになる

ただの足し算なのに “自然界の複雑さ” が再現できる。 FBM が神技術と呼ばれる理由はこれ。

5. JavaScript で FBM を書いてみる

ここでは 「Perlin Noise 関数 noise(x, y) が既にある」 前提で、 FBM の実装だけを最小コードで示す。

🔧 FBM（Fractal Brownian Motion）の実装例

function fbm(x, y, noise) {
  let value = 0.0;
  let amplitude = 0.5;
  let frequency = 1.0;

  for (let i = 0; i < 4; i++) {
    value += noise(x * frequency, y * frequency) * amplitude;
    frequency *= 2.0;   // 周波数アップ（細かくなる）
    amplitude *= 0.5;   // 振幅ダウン（影響を弱める）
  }
  return value;
}

解説（最小限で“本質だけ”）

  • frequency *= 2 → 模様が細かくなる

  • amplitude *= 0.5 → その細かい層の影響を弱める

  • value += ... → ノイズの層を重ねていく

オクターブ数は 4 が黄金比

  • 1〜2 → 単調すぎる
  • 3〜4 → 自然な模様
  • 6〜8 → 重くなる（GPU でもコスト上昇）

一般的には 4 オクターブで十分自然になる。

2D FBM をそのまま地形・水・雲に使える

  • 地形の高さ
  • 水の揺らぎ
  • 雲のdensity
  • 風の流れ（Velocity）
  • パーティクルの動き

全部この 5行のループ が基礎になる。

6. GLSL で使う（Three.js ShaderMaterial 向け）

JavaScript と同じく、GLSL でも FBM の本質は 5行のループだけで書ける。

FBM（GLSL 版）

float fbm(vec2 p) {
    float value = 0.0;
    float amp = 0.5;
    float freq = 1.0;

    for (int i = 0; i < 5; i++) {
        value += noise(p * freq) * amp;
        freq *= 2.0;   // 周波数を倍に（細かく）
        amp *= 0.5;    // 振幅を半分に（影響を弱める）
    }
    return value;
}

JavaScript 版と完全に同じ構造

  • frequency（細かさ）を倍にしながら
  • amplitude（影響）を半分にしながら
  • ノイズを足し合わせるだけ。

GLSL でも同じ。 “パターン生成の黄金比”がこの書き方。

この FBM がそのまま以下に使える

  • 霧（Fog）
  • 雲（Cloud）
  • 水（Water）
  • 火（Fire）
  • 炎のノイズ揺らぎ
  • 地形生成（Terrain）
  • プラズマエフェクト
  • 魔法陣・エネルギー波

全部この FBM をベースにして組み立てる。

7. Three.js / R3F での実戦例

FBM は “自然らしさ” を作るための中心技術。 あなたがすでに実装している機能のほぼ全てが、FBM と相性が最高に良い。

地形生成（NoiseTerrain）

const height = fbm(x * 0.01, z * 0.01, noise);

低周波で “山の形” を作り、 高周波で “岩肌や細かい凹凸” を足していける。

雲（CloudDome）

float n = fbm(uv * 2.0 + time * 0.1);

FBM を使うと：

  • 大スケールの雲の塊
  • 小スケールの雲のさざ波

この二つを同時に作れて、一気に映画のような雲になる。

水面の揺れ（Waves）

pos.y += fbm(uv * 3.0 + time * 0.3) * 0.2;

水の “細かい揺れ + 大きなうねり” が同時に表現できる。 水のノイズは FBM の代表例。

Fog（霧）

霧も FBM を加えるだけで “分厚さ・複層感” が生まれる。

float fogLayer = fbm(worldPos.xz * 0.1 + time * 0.05);

GrassField（風になびく草）

float sway = fbm(vec2(id * 0.5, time * 0.4));
offset += sway * 0.1;

草の揺れは FBM + 時間で自然に。

あなたの実装している以下の機能はすべて FBM の得意領域

  • Terrain（地形）
  • CloudMaterial（雲）
  • Lake（水）
  • Fog（霧）
  • GrassField（草の揺れ）

どれも “自然物” だから、 FBM が完全に中心技術になる。

8. FBM が“圧倒的に強い”理由まとめ

FBM（Fractal Brownian Motion）は、 「Perlin を積み重ねるだけ」なのに自然界の表現力が一気に跳ね上がる ― そのシンプルさと強さが本質。

FBM が強い理由

  • Perlin の弱点（単調さ）を瞬時に克服できる
  • “自然界らしさ” を劇的に増強できる
  • 地形・雲・水・炎・煙・霧・波紋 ― あらゆる自然表現の核になる
  • Three.js / GLSL のどちらでも簡単に組み込める
  • Procedural World（生成世界）の基礎技術として欠かせない

FBM は 「自然の階層構造をコードで再現する技術」。 だからこそ、森・山・大地・風・雲・空・水 ― 自然物の“すべて”を生成できる。

ひと言でいうと？

FBM を理解した瞬間、ノイズは “道具” から “武器” へ進化する。

もう「Noise を使う側」ではなく “世界を作る側” に立つための鍵になる。

9. 次回予告：#06 Domain Warping（神領域）

FBM を理解すると、次に必ず触れるのが Domain Warping。 これは“ノイズの入力座標そのものを歪ませる”技術で、 自然界でもゲーム表現でも最強クラスの手法になる。

Domain Warping × FBM を組み合わせると、表現力が一気に跳ね上がる。

Domain Warping で作れる世界（ほんの一部）

  • 魔法陣の回転エフェクト
  • 炎の揺らぎ・上昇煙
  • 雲の渦・乱気流
  • ブラックホールの吸い込み・重力歪み
  • 空間が波打つ“時空変形”表現
  • プラズマ・電気エフェクト

これらはすべて 「座標をノイズで揺らす」 という たった1つのコンセプトで作られている。

なぜ“神領域”なのか？

Domain Warping は：

  • ノイズを“絵”ではなく“世界”に変える
  • 物理・光学・自然構造と相性が良い
  • シンプルなのに結果が異常に美しい
  • 三次元・四次元にも拡張できる

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

次回の Noise #06：Domain Warping では、 図解つきで “座標をねじると何が起きるのか？” を解説する。