[Noise 入門 #01] ノイズとは何か？— 滑らかな乱数の正体を理解する

はじめに

Youtubeのコーディング系配信があればよく見てるのですが、昨晩、ゲーム系エンジニア？の人が、C++言語でノイズを生成するコードを作成していて、 私もThree.jsでゲーム実装する過程で、ノイズが地形生成をする際に使えることを知ってて、それで興味を持ち見ていました。

ノイズで地形を作る事や、4点ベジェで曲線を実装したことをコメントに書いたりもしたのですが、実装の邪魔になりそうだったので途中で立ち去ってます。

技術系の話題ってほんと語れる人が物凄く少ないので、日頃の欲求不満が出そうだったので…。

尚且つ、ゲーム配信する人は多いですが、開発配信する人は驚くほど少ないですし、絶滅危惧種レベル。まあ、人気がないし地味だし、難解だったりするので皆普通見ないですね…。Youtubeは娯楽目的の人が多い。

とは言いつつ、配信内容をＡＩに話すと即理解して、ノイズについての色々情報を教えてくれ、聞けば聞くほど面白く奥深い世界である事が分かり、一夜明けた朝になってもその熱は冷めなかったので、シリーズ記事化して見ようと思います。

例によって個人用の学習記事でしかないです。

1. ノイズとは何か？

多くの人は “ノイズ＝ランダム” だと思っている。

しかし、CG やゲーム開発の世界で使われるノイズは 全く別物 だ。

一言でいえば、ノイズとは：

「連続性（smoothness）を持つ乱数関数」
「自然の“ゆらぎ”を数式で作り出すための道具」

である。

ランダム（Math.random）との決定的な違い

要素 ランダム ノイズ
値の並び バラバラ 隣同士が滑らかにつながる
規則性 無い “ゆらぎ”という規則性がある
使い道 乱数 自然模様・地形・炎・雲・水…

ランダムは「点の集合」。
ノイズは “連続した関数” なので、
線になり、面になり、3D空間の模様にもなる。

ノイズは “自然っぽさ” の正体

自然界には完全なランダムは存在しない。
風の揺らぎ、波のうねり、雲の形、岩の模様…
どれも “連続した変化” を持っている。

ノイズは、その “自然っぽさ” を数学で再現するための技術だ。

ノイズを構成する最小要素（本当にここだけでいい）

ノイズは以下の要素を組み合わせた“関数”でできている：

  • 周波数（frequency）：細かいか、粗いか
  • 振幅（amplitude）：どれだけ強く変化するか
  • 補間（interpolation）：どう滑らかに繋ぐか
  • 勾配（gradient）：方向性を持つ
  • オクターブ（octave）：複数レイヤーを重ねる

式にするととてもシンプルになる。

noise(x * frequency) * amplitude

これが “自然に見える模様” の根っこになる。

ノイズは「模様を作る工場」でもある

ノイズを 2D / 3D に拡張すると、 テクスチャも地形も作れてしまう。

  • 1D → ゆらぐ値（波・アニメーション）
  • 2D → 模様、雲、炎、水
  • 3D → 立体的な風、煙、ボリューム雲

ゲーム制作・CG・Unity・Three.js・Shader… どの世界でもノイズは欠かせない。

ノイズは “ランダムの進化形”

ランダム → 値がバラバラ ノイズ → 滑らかに続く乱数（自然のモデル）

この違いを理解した瞬間、 「なぜ Perlin / Simplex / FBM が必要なのか」 が腑に落ちる。

このセクションのまとめ

  • ノイズは「滑らかにつながる乱数関数」
  • 自然現象の“ゆらぎ”を作るために発明された
  • 周波数・振幅・補間・勾配などの最小構成で成り立つ
  • ゲーム・CG・WebGL・Three.js における根幹技術

2. ノイズの歴史：なぜノイズは生まれたのか？

ノイズの話を始めるとき、必ず登場する人物がいる。 Ken Perlin（ケン・パーリン）。

CG史に名を刻む伝説的エンジニアだ。

彼がノイズを生み出した理由は、たった1つ。

「コンピュータの映像が“不自然すぎる”から。」

1980年代のCGは “人工物” すぎた

当時のCGは：

  • 完全にツルツル
  • 規則的すぎる模様
  • 均一すぎて不自然

いわゆる “CG臭さ” が消えなかった。

映画『TRON（1982）』の制作に関わっていたパーリンは、 “自然界のゆらぎ” が再現できないことに強い違和感を覚えていた。

トロン (映画) - Wikipedia

トロン (映画) - Wikipedia

世界で初めて全面的にコンピューターグラフィックスを導入した映画として話題を集め、コンピューターの内部世界を美麗な映像とプログラムの擬人化という手法で表現した点が特徴といえる。興行収入はまずまずだったが、カルト的な人気を博したため、その後フランチャイズ化されている。

https://ja.wikipedia.org/wiki/%E3%83%88%E3%83%AD%E3%83%B3_(%E6%98%A0%E7%94%BB)

人間の目は “自然のゆらぎ” を見抜いてしまう

自然には必ず揺らぎがある。

  • 雲の変化
  • 水の揺らぎ
  • 岩の模様
  • 木の幹のザラつき
  • 地面の凹凸
  • 霧の揺れ

これらには 「滑らかに変化する規則性」 があり、 完全なランダム（雑音）とは違う。

CGにこの“ゆらぎ”が無いので、不自然に見える。

Perlin が気づいた本質

Ken Perlin が発明したのはこういう考え方だ。

「自然界はランダムではなく、
滑らかに変化する乱数 だ。」

ランダムは点の集まり。
ノイズは 連続したカーブ・模様 を作る。

この考え方が Perlin Noise (1983) という形で誕生した。

Perlin Noise は一瞬で映画業界の標準に

Perlin Noise は 1987年、アカデミー科学技術賞 を受賞した。

パーリンノイズ - Wikipedia

パーリンノイズ - Wikipedia

パーリンノイズ（英: Perlin noise）とは、コンピュータグラフィックスのリアリティを増すために使われるテクスチャ作成技法。擬似乱数的な見た目であるが、同時に細部のスケール感が一定である。このため制御が容易であり、各種スケールのパーリンノイズを数式に入力することで多彩なテクスチャを表現できる。パーリンノイズによるテクスチャは、CGIで自然な外観を物に与えるためによく使われる。

https://ja.wikipedia.org/wiki/%E3%83%91%E3%83%BC%E3%83%AA%E3%83%B3%E3%83%8E%E3%82%A4%E3%82%BA

理由は単純。

CGが一気に“自然らしく”なったから。

  • 雲
  • 炎
  • 岩肌
  • 地形
  • 霧
  • アニメのエフェクト

すべてに応用できる。

その後、改良版 Simplex Noise が誕生

Perlin から約20年後、 より高速・高品質な Simplex Noise (2001) が登場。

  • 高次元対応
  • GPUで高速
  • ブロックノイズが少ない
  • 負荷が軽い

Three.js や Unity の “内部ノイズ” は、多くが Simplex を元にしている。

ノイズの歴史 = CGの「自然」への挑戦

まとめると、ノイズの歴史はこうだ。

  • 1980年代：CGが人工的すぎる
  • Ken Perlin「自然のゆらぎを数学で作る」
  • Perlin Noise が映画文化を変える
  • Simplex がゲーム業界の標準になる
  • 現代の Procedural 技術の核になる

今日のノイズ技術は、 「自然を数学で再現したい」という欲望 から始まった。

まとめ

  • ノイズはCGを自然にするために発明された
  • Perlin Noise はアカデミー賞を獲るほど革命的
  • Simplex はその高速版で、Three.js/Unityでも標準
  • ノイズ＝“自然界の揺らぎ” の数学モデル

3. ノイズを理解するための最低限の数学

ノイズは「数学の塊」でできているが、 最初に理解すべきポイントは たったの5つ だけ。

難しい公式は一切いらない。 この5つが分かれば、Perlin も Simplex も FBM も理解できる。

① 周波数（frequency）— 模様の細かさを決める

周波数が上がるほど：

  • 細かい模様になる
  • カクカク変化する
  • 変化が速くなる

式で書くとこうなる。

noise(x * frequency)

Three.js や Shader で frequency *= 2 すると、 模様が細かくなる のはこの性質。

② 振幅（amplitude）— 揺らぎの大きさ

振幅はノイズの“高さ”。

  • 小さい → 静かな揺らぎ
  • 大きい → 激しい揺らぎ

式はシンプル。

noise(x) * amplitude

水の揺れ・雲の濃さ・炎の強さ… 全部 amplitude で決まる。

③ 補間（interpolation）— ノイズを“自然に見せる”ための魔法

ノイズは格子（grid）上で値を持つ。 その間を どう滑らかに繋ぐか が重要。

エンジニアがよく使う補間：

✔ 線形補間（lerp）

簡単だけど硬い。

✔ smoothstep

Three.js/GLSLで標準。

✔ quintic（Perlin が使う）

超滑らか。自然な揺らぎになる。

補間関数はノイズの美しさを決める“隠れた心臓部”。

④ 勾配（gradient）— 自然界の方向性を作る

Perlin Noise が革命だった理由は 勾配ベクトル（gradient） を使ったから。

  • 各格子点に「方向ベクトル」を置く
  • 入力点との距離ベクトルと dot する
  • その結果を補間してつなぐ

これで自然な“方向の揺らぎ”が生まれる。

炎が上に揺れる、雲が流れる、 そういう“方向性”を持つノイズは gradient が鍵。

⑤ オクターブ（octave）— ノイズを重ねて複雑さを作る

ノイズを1つだけ使うと“単調”になる。 複雑で自然な模様は、ノイズをレイヤー状に重ねて作る。

total = 0
for each octave:
    total += noise(x * frequency) * amplitude

オクターブを重ねることで：

  • 雲がリアルになる
  • 水の波紋が複雑になる
  • 地形が自然になる
  • 魔法エフェクトが豪華になる

これが FBM（Fractal Brownian Motion） の基礎。

セクション3まとめ

ノイズを理解する上で必要な数学は5つだけ。

  • 周波数（frequency）
  • 振幅（amplitude）
  • 補間（interpolation）
  • 勾配（gradient）
  • オクターブ（octave）

この5つを押さえた瞬間、 Perlin Noise の仕組みが“丸裸”になり、 次のステップ（Simplex / FBM / Domain Warping）まで見通せる。

4. ノイズの種類マップ（全体像）

ノイズと言っても、その種類は1つではない。 むしろ 自然界のパターンを作るために発明された “アルゴリズムの森” が広がっている。

ここでは、この記事の中心となる 「ノイズ世界の地図」 を整理する。

この地図を持つことで、 Perlin → Simplex → FBM → Domain Warping と進むシリーズの流れが一気に理解できる。

【レベル1：基礎ノイズ（Fundamental）】

Value Noise（バリューノイズ）

最も基本的なノイズ。 格子点に値（スカラー）を置き、補間して滑らかにする。

  • シンプル
  • 方向性なし
  • Perlin の前身
  • 勉強用に最適

用途： 基本の揺らぎ、模様生成の基礎

【レベル2：Perlin 系（Gradient Noise）】

Perlin Noise（パーリンノイズ）

Ken Perlin が発明した、CG革命の中心。 格子点に 勾配ベクトル（gradient） を置くのが特徴。

  • 自然な揺らぎ
  • 方向性を持つ
  • 地形 / 雲 / 炎 など万能
  • ノイズの“標準”

用途： 雲・炎・水・岩・木目・地形

Improved Perlin（改良版パーリン）

Perlin 氏本人が後から改良。 ブロックノイズが軽減され、より滑らか。

  • Smoothstep より滑らかな補間
  • GPU向け最適化

【レベル3：Simplex 系（高速系ノイズ）】

Simplex Noise（シンプレックスノイズ）

Perlin の改良版。 高次元に強く、計算が速い のが特徴。

  • 三角形/四面体で空間分割
  • 高次元ノイズ（4D）に強い
  • Three.js と Unity の内部でよく使われる
  • スマホでも軽い

用途： 水・雲・風・煙・ゲームのエフェクト全般

【レベル4：距離系ノイズ（Voronoi / Worley）】

Worley Noise（ワーリーノイズ / Voronoi Noise）

ランダムな点からの距離で模様を作る。 蜂の巣（ハニカム）に似た特徴的な形状。

  • 細胞模様（Cellular）
  • 血管のような模様
  • 鱗・岩・液体パターン

用途： マーブル模様、川の分岐、岩、細胞模様、エフェクト背景

【レベル5：複合系（Fractal / Turbulence）】

FBM（Fractal Brownian Motion）

複数のノイズを“レイヤー状に重ねる”手法。

  • ノイズを合成して複雑化
  • 雲や煙に必須
  • 水の揺らぎにも最適
  • GPU負荷に要注意

用途： 雲、煙、炎、水、地形、魔法エフェクト

Turbulence（乱流ノイズ）

ノイズの “絶対値” を合成して乱流を発生させる。

  • 炎の揺れ
  • 魔法の渦
  • パーティクルのランダム性

【レベル6：ベクトル場ノイズ（流体 / 風）】

Curl Noise（カールノイズ）

流体シミュレーションでよく使われる。 ノイズから 渦（vortex） を生成する。

  • 炎の立ち上る揺らぎ
  • 風の流れ
  • 煙の流体っぽい挙動
  • 3Dパーティクルの動きに最適

用途： 炎、煙、魔法、風のシミュレーション

【レベル7：UV / Domain 歪み（Warping）】

Domain Warping（ドメインワーピング）

ノイズ界の“神領域”。 ノイズの入力座標を 別のノイズで歪ませる。

例：

warp = noise(x, y)
result = noise(x + warp, y + warp)

これにより：

  • 雷光
  • プラズマ模様
  • 空間歪み
  • 魔法エフェクト
  • SF UI
  • オーロラ
  • ブラッドムーン
  • カオス模様

全部作れる。

プロのVFXはほぼ Domain Warping を使う。

まとめ

ノイズの世界は、以下の7系統に分類できる。

  1. Value Noise（基礎）
  2. Perlin（勾配ノイズ）
  3. Simplex（高速・高次元ノイズ）
  4. Worley / Voronoi（距離系）
  5. FBM / Turbulence（複合系）
  6. Curl（流体）
  7. Domain Warping（神領域）

5. ノイズは何に使われているのか？（実用例）

ノイズは「自然界のゆらぎを数学で作る技術」だ。 そのためゲーム・CG・映画・VFX のほぼ全領域に使われている。

ここでは “ノイズが無いと成立しない” 実用例 をまとめる。

① 雲（Cloud）— Perlin + FBM の王道

雲はノイズの王道例。

  • Perlin Noise
  • FBM（複合ノイズ）
  • 透明度マップ（Alpha）
  • 時間でアニメーション

これだけで“空一面の雲”が作れる。

Three.js / ShaderMaterial でも 20 行ほどで作れるレベル。

② 炎（Fire）— Turbulence + Domain Warping

炎は “乱流（Turbulence）” の代表。

  • noise の絶対値
  • FBM で複雑化
  • UV を上方向に流す
  • Warping で揺れを追加

ゲームの炎、魔法エフェクト、焚き火の揺らぎは ほぼすべて ノイズ + アニメーション でできている。

③ 水（Water）— Normal / Distortion / Fresnel

水面には 3 種類のノイズが使われる。

  • Normal map（Perlin）
  • UVの歪み（Domain Warping）
  • 深度による色変化
  • Fresnel 反射

Three.js でもよく見る「水面シェーダー」は 内部がほぼノイズの塊。

④ 岩・大地・地形（Terrain）— FBM + Ridge Noise

地形生成は 複数ノイズの合成 が基本。

  • FBM
  • Ridge Noise
  • Domain Warping
  • Voronoi 分割で川の流れ
  • 3D Perlin で洞窟生成

Minecraft・Valheim・No Man’s Sky の “自動生成ワールド” は全部ノイズ。

⑤ 霧・煙（Smoke / Fog）— Curl Noise（流体系）

煙や霧の揺らぎは ベクトル場ノイズ（Curl Noise） が最適。

  • 渦（vortex）が自然に生まれる
  • パーティクルが流体っぽく動く
  • 炎の周りの煙に最適

映画やゲームの流体シミュレーションで必須。

⑥ 風（Wind）— 動くベクトル場

草・木・葉っぱの揺れは 「ノイズで作った風ベクトル場」で表現される。

  • Perlin Noise
  • Simplex Noise
  • Curl Noise

自然な“風のランダムゆらぎ”が作れる。

⑦ 魔法エフェクト（Magic / VFX）— Warping の宝庫

魔法エフェクトは Domain Warping の独壇場。

  • 雷のジグザグ
  • プラズマ
  • 黒い渦
  • エネルギー流動
  • SF UI
  • 空間の歪みエフェクト

ノイズのパラメータを動かしただけで “超ハイクオリティな魔法表現” が作れる。

⑧ UI・デザイン（Glitch / Scanline / Distortion）

UIもノイズで一気に化ける。

  • Glitch（画面ノイズ）
  • Scanline
  • CRT歪み
  • TVエラー風
  • ぼかし・揺らぎ

普通のUIが“動きのあるアート”になる。

⑨ Procedural Texture（模様生成）

ノイズだけで作れる模様は無限。

  • 大理石（Marble）
  • 木目（Wood Ring）
  • レザー
  • ブラッドムーン
  • 雷紋
  • 砂 / 雪

“テクスチャを作らず、コードで作る時代” が来ている。

まとめ

ノイズは、ゲーム・CG・VFX のあらゆる場面で使われる。

  • 雲
  • 水
  • 炎
  • 霧
  • 地形
  • 魔法
  • UI
  • Procedural texture
  • 風・煙・流体

自然界の“揺らぎ”の99%はノイズで再現できる。 だからノイズを理解することは、 “世界を創造する技術” を手に入れることと同じ。

6. まとめ — ノイズは「自然を生む数学」である

この記事では、ノイズの本質を“基礎層”として整理した。

ノイズはランダムではなく、 「連続性を持つ乱数関数」 そして “自然のゆらぎ” を再現するための数学的モデル である。

今日理解した 5つのコア概念

  • 周波数（frequency）：模様の細かさ
  • 振幅（amplitude）：揺らぎの強さ
  • 補間（interpolation）：滑らかさの源
  • 勾配（gradient）：方向性を与える
  • オクターブ（octave）：複雑さを作るレイヤー

この 5つが理解できれば、 Perlin も Simplex も FBM も “内部が見える” ようになる。

ノイズは巨大なアルゴリズムの森

ノイズの種類は 1 つではなく、 用途に応じて発展した 森のような体系 を持つ。

  • Value Noise
  • Perlin
  • Simplex
  • Worley / Voronoi
  • FBM
  • Turbulence
  • Curl Noise
  • Domain Warping（神領域）

この記事では「地図」を提示した。

そして用途は無限

  • 雲
  • 水
  • 炎
  • 地形
  • 霧・煙
  • 魔法エフェクト
  • 流体シミュレーション
  • UI / デザイン
  • Procedural Texture

自然界の99%はノイズで再現できる。

この連載の方向性：自然をコードで作る旅

Noise シリーズは “世界を創造する技術 = Procedural Generation” を学ぶ旅だ。

JavaScript + Three.js + Shader を軸に進めるので、 全てブラウザで実行でき、動画化も簡単。

次回（Noise #02）：Perlin Noise の内部構造を完全に理解する

次のテーマはノイズ界の王者：

Perlin Noise — 勾配・補間・グリッド・方向性のすべて

数学的な説明を最小限に抑えつつ、 “実際に Three.js で動くデモ” まで踏み込む。

Noise #02 から、いよいよ 本格的なノイズの世界 に入っていく。