はじめに
今回の #03 は “ノイズの形をどう決めるか?” を扱う。
これは あらゆるノイズ(Perlin / Simplex / FBM / 水・雲)に共通する本質。
前回の記事:
- #02:ノイズを作る数学(グリッド/勾配/補間)
[Noise 入門 #02] ノイズを作る数学の基礎 — グリッド・勾配・補間を理解する
ノイズを実装するうえで必須となる数学の基礎を解説する入門記事。Value Noise と Perlin Noise の違い、グリッド構造、勾配ベクトル、内積、補間関数、frequency・amplitude といった概念を、Three.js・Shader 実装 …
https://humanxai.info/posts/noise-intro-02-math-basics/- #01:ノイズとは何か?(ランダムとの違い)
[Noise 入門 #01] ノイズとは何か?— 滑らかな乱数の正体を理解する
JavaScript・Three.js・Shader へ進む前に、まず『ノイズとは何か?』を徹底的に理解する入門回。自然の“ゆらぎ”を作る数式としてのノイズの本質、ランダムとの違い、周波数や振幅などの最低限の概念を整理する。
https://humanxai.info/posts/noise-intro-01-what-is-noise/1. ノイズは「設定パラメータ」で性質が決まる
ノイズはランダムではない。
“性質をコントロールするためのパラメータ” が明確に存在する。
しかも、このパラメータは どんなノイズ(Perlin / Simplex / FBM / Curl / Worley)でも必ず共通している。
ノイズの理解は、この 5つの概念 を押さえるだけで一気に開ける。
ノイズを形作る 5つのパラメータ
1. Frequency(周波数)
ノイズの「細かさ」を決める。 低いほど大きくゆらぎ、高いほどザラザラ細かくなる。
2. Amplitude(振幅)
ノイズの「強さ」を決める。 地形なら高さ、雲なら濃さ、炎なら揺れ幅。
3. Octave(階層)
ノイズを“重ねる”回数。 複数レイヤーを積むことで複雑さやリアリティが生まれる(これが FBM)。
4. Lacunarity(ラキュナリティ)
レイヤーを追加する時に frequency をどれだけ増やすか。
倍々で細かくするか、緩やかに変えるか。世界観が変わる。
5. Gain(ゲイン)
レイヤーを追加する時に amplitude をどれだけ減衰させるか。
雲なら柔らかく、岩なら力強く、といった“表情”が決まる。
重要ポイント:ノイズは“本質的に全部この形”
Perlin Noise も Simplex Noise も、FBM も、Three.js の雲や地形や炎も──
内部構造はすべてこの 5つのパラメータの組み合わせでできている。
だからこそ、これを理解すると:
- 他人のノイズコードが読める
- ShaderMaterial のノイズが自由に調整できる
- 雲・炎・Fog・水・地形が好きな“表情”で作れる
- FBM や Domain Warping が理解できる土台ができる
ノイズ学習はここから一気に楽になる。
2. Frequency(周波数):細かさを決める
ノイズの Frequency(周波数) は、 模様の「細かさ」を決める最重要パラメータ。
これは音の「低音・高音」と同じで、 “波がゆっくりか、細かく震えているか” の違いに過ぎない。
低周波(Low Frequency)
- 大きく、ゆったりうねる
- 雲・海・霧・風景の“広い揺らぎ”に向く
- 地形生成では「山脈・大地の形」を作る層
→ 世界の“形”を作るレベル
高周波(High Frequency)
- 模様が細かくザラザラする
- 砂・岩・ノイズテクスチャ・炎のディテールに向く
- 地形では「表面の細かい凹凸」を与える層
→ “質感”を作るレベル
1行で世界観を変える式
ノイズの周波数調整はたったこれだけ:
noise( x * frequency )
JavaScript(Three.js)でも:
const value = noise(x * frequency);
これを 1.0 → 2.0 → 4.0 → 8.0… と変えるだけで 雲 → 海 → 岩肌 → 砂 → 炎 と完全に別物になる。
Three.js / Shader 実装で必ず通る道
- Fog
- CloudDome(あなたが実装中のやつ)
- NoiseTerrain
- CloudMaterial
- 水面ノイズ(water)
- 炎(fire)
- 砂・岩テクスチャ
- Procedural skybox
これらは全部、frequency の値を変えるだけで表情が変わる。
周波数を理解するとノイズが“設計できる”
Frequency をいじると:
- ゆっくり → “自然”
- 細かい → “人工的・攻撃的”
- 混ぜる → “リアルな世界”
この段階で既に、あなたの Three.js / Shader のスキルと ノイズ学習が完全に噛み合っている。
3. Amplitude(振幅):ノイズの強さ
Amplitude(振幅)は、 ノイズの「強さ」や「高さ」「濃さ」 を決めるパラメータ。
Frequency が“細かさ”なら、 Amplitude は “どれだけ揺れるか・盛り上がるか” を決める。
振幅が大きい(High Amplitude)
- 起伏が激しい
- 山の高さ・雲の濃淡が大きく変わる
- 岩や火のように“攻撃的なノイズ”になる
- 動かすと揺れ幅が大きくなる
→ “ダイナミック”な印象を作る
振幅が小さい(Low Amplitude)
- 表面がなめらか
- 雲・霧・地形の揺らぎが控えめ
- ノイズの存在感が薄くなる
→ “自然で優しい” 印象を作る
式:ノイズに強さを掛けるだけ
float value = noise(x) * amplitude;
JavaScript(Three.js)でも同じ:
const value = noise(x) * amplitude;
Amplitude を 0.2 → 0.5 → 1.0 → 2.0 と変えるだけで 世界の“性格”が即座に変わる。
Amplitude が支配する“作品の性格”
Amplitude は、あなたが今作っている:
- CloudMaterial(雲の濃さ)
- FogMaterial(霧の厚さ)
- CloudDome(空のゆらぎ)
- NoiseTerrain(地形の起伏)
- ShaderMaterial(炎・水・煙)
- Procedural skybox(背景ノイズ)
これら全てに直接影響する。
特に、地形・雲・炎の“激しさ”は amplitude で決まる。
Amplitude は「ノイズの存在感」を調整するフェーダー
- Frequency → 模様の細かさ
- Amplitude → 模様の強さ
この2つが理解できると、 ノイズの“印象デザイン”が自在にコントロールできる。
4. Octave(オクターブ):複数レイヤーを重ねる
ノイズの Octave(オクターブ) は、 “ノイズを何層重ねるか” を決める概念。
1枚のノイズだけでは、模様は単調。 しかし 複数レイヤーを足し合わせると、 雲、煙、山脈、海、魔法エフェクト── “自然に見える複雑さ” が一気に生まれる。
オクターブの具体例
1オクターブ:普通のノイズ(単調)
大きな揺らぎはあるが、まだ“模様”としての深みは薄い。
4オクターブ:雲・水・霧っぽくなる
細かい揺らぎが追加され、自然らしいパターンが現れ始める。
8オクターブ:リアルな地形・火・煙
複雑さ・密度・連続性が高まり、写真のような質感が出る。
“自然に見えるものはすべて、複数のノイズの重ね合わせでできている。”
FBM(Fractal Brownian Motion)とは?
FBM = オクターブを重ねたノイズの正式名称。
つまり:
FBM ≒ noise の階層構造(multi-layer noise)
どのエンジンでも、どの Shader でも同じ意味。 Three.js / GLSL / Unity すべて共通。
なぜ“重ねる”と自然になるのか?
自然界の模様は 異なるスケールの変化が同時に存在している。
例:
- 雲:大きな塊 + 中くらいの揺らぎ + 細かい揺れ
- 山:大地の形 + 中規模の起伏 + 小さな岩肌
- 水:大きな波 + 細かいさざ波
- 炎:揺れ + ざわめき + 微振動
1レイヤーでは絶対に表現できない。 複数スケールのノイズを重ねることで、初めて“自然”が生まれる。
FBM の基本式(概念のみ)
float fbm(vec2 p) {
float value = 0.0;
float amp = 1.0; // amplitude
float freq = 1.0; // frequency
for(int i = 0; i < octaves; i++){
value += noise(p * freq) * amp;
freq *= 2.0; // lacunarity(周波数の増加率)
amp *= 0.5; // gain(振幅の減衰率)
}
return value;
}
この「周波数を上げつつ振幅を下げる」という構造が 自然界のフラクタル性と一致するため、リアルさが生まれる。
オクターブは“自然の再現”の心臓部
あなたがこれまで実装した:
- CloudMaterial(雲の層構造)
- NoiseTerrain(地形の細かさ・起伏)
- CloudDome(大気ノイズ)
- Fog / Smoke / Fire(多層ノイズ)
- ShaderMaterial の各種 VFX
全部が FBM(オクターブ構成)で動いている。
ノイズ=オクターブの設計。
FBM=複数レイヤーが世界を作る。
5. Lacunarity(ラキュナリティ):周波数の増え方
Lacunarity(ラキュナリティ) は、 「オクターブを重ねるとき、周波数をどれだけ増やすか」 を決めるパラメータ。
Octave(レイヤー数)が “層の数” なら、 Lacunarity は “層ごとの細かさの増え方”。
基本式
freq *= lacunarity;
FBM(Fractal Brownian Motion)を書く時は ほぼ必ずこの式が登場する。
lacunarity の値で世界がどう変わるか
lacunarity = 2.0(標準)
周波数が毎回 2倍。 最も自然で、雲・地形・霧など“普通の自然”を作るときはこれ。
1 → 2 → 4 → 8 → 16 …
lacunarity = 3.0(攻撃的・荒々しい)
周波数が毎回 3倍。 細かさが急速に増え、模様が急激に複雑になる。
- 岩の表面
- 雷・電撃
- 魔法エフェクト
- ざわつく水面
に向く。
1 → 3 → 9 → 27 → 81 …
lacunarity = 1.5(柔らかい・優しい)
周波数の上がり方がゆっくり。
- ふんわり雲
- 柔らかい霧
- ゆっくり動く大気
- ゆらめく水蒸気
に向く。
1 → 1.5 → 2.25 → 3.38 → 5.06 …
“自然に寄せたいときは小さめ” “迫力を出したい時は大きめ”
という黄金ルール。
Lacunarity が決めるもの
自然らしさ
- 小さいほど → 柔らかく連続
- 大きいほど → 激しく細かい
模様の成長速度
- lacunarity = 1.0 → ずっと同じスケール
- lacunarity < 2.0 → ゆるい成長
- lacunarity = 2.0 → 標準的な成長
- lacunarity > 2.0 → 急激な細密化
あなたの実装との相性(Three.js / Shader)
CloudMaterial
雲の「フワフワ度」は lacunarity を下げると一瞬で変わる。
Fog / Smoke
霧の柔らかさは 1.5〜1.8 がベスト。
NoiseTerrain
岩山・荒地は 2.3〜3.0 の高ラキュナリティが映える。
CloudDome
大気ノイズは 1.6前後 で地球っぽくなる。
lacunarity を変えるだけで、 あなたが目指す“雲・霧・地形の性格”が一気に決まる。
まとめ:Lacunarity は“細かさの成長曲線”
- 「どれだけ細かくなるか?」 → frequency
- 「その細かさがどれだけ速く増えるか?」 → lacunarity
ノイズの世界観を決めるのは この “増え方” の設計。
6. Gain(ゲイン):振幅の減衰率
Gain(ゲイン) は 「オクターブを重ねるとき、振幅をどれだけ減らすか」 を決めるパラメータ。
Octave が“層の数”、 Lacunarity が“細かさの増え方”なら、 Gain は “模様の強さがどれだけ残るか” を決める。
基本式
amp *= gain;
FBM(Fractal Brownian Motion)を作る時、 必ず出てくる必須パラメータ。
gain の値が作品の“性格”を決める
gain = 0.5(自然界の標準値)
- 振幅が半分ずつ減衰
- 全体が柔らかく、自然で美しい
- 雲・霧・山脈の“なめらかさ”が出る
- 動かすと心地よい揺らぎ
もっとも汎用的で“正しい自然”になりやすい。
gain = 0.8(荒々しい・ノイズが強く残る)
- 振幅の減衰が遅い
- 細かいノイズ成分がずっと残り続ける
- 岩・火・雷・砂・金属のような“攻撃的な質感”
- 力強い、ザラザラした模様
VFX・岩肌・炎・エネルギー系のエフェクトに最適。
gain = 0.3(すぐに静かになる・滑らか)
- 上位層の振幅がすぐに小さくなる
- 模様がすぐ落ち着き、柔らかくなる
- 雲・大気・霧・水蒸気のような“優しい質感”
環境ノイズ(雲・Fog・大気)の最高値域。
Gain が決めるもの:ノイズの“表情”
Gain は、 「細かい揺らぎがどこまで残るか?」を支配するパラメータ。
自然界の例でいうと:
- gain 高い → 荒れた岩のゴツゴツ感
- gain 低い → 雲や霧のふんわり感
つまり Gain は “質感の性格” を決める。
あなたの実装との相性(Three.js / Shader)
CloudMaterial
- gain = 0.3〜0.45 → ふわふわ雲
- gain = 0.55〜0.65 → 重厚な雲
Fog / Smoke
- gain = 0.35〜0.5 → 滑らかな霧
- gain = 0.6〜0.7 → 濃い煙
NoiseTerrain
- gain = 0.55〜0.75 → 岩肌・険しい地形
- gain = 0.35〜0.45 → 草原・優しい地形
CloudDome
大気の揺らぎは gain を 0.33 〜 0.5 で調整すると美しくなる。
まとめ:Gain は“振幅の衰え方=質感の方向性”を決める
- Frequency → 模様の細かさ
- Amplitude → 模様の強さ
- Octave → レイヤーの数
- Lacunarity → 細かさの増え方
- Gain → 強さの衰え方(質感)
この5つが噛み合うと、 ノイズは初めて“自然の模様”へと進化する。
7. まとめ:ノイズの“レシピ”が揃った
ここまでの 5つのパラメータ(frequency / amplitude / octave / lacunarity / gain)を理解すると、
ノイズがどのように形成されているか、その“設計図”が完全に読めるようになる。
そして――
ノイズの世界は たった 1つのレシピ を理解すれば成立する。
FBM(Fractal Brownian Motion)のレシピ
float fbm(vec2 p) {
float value = 0.0;
float amp = amplitude;
float freq = frequency;
for(int i = 0; i < octaves; i++){
value += noise(p * freq) * amp;
freq *= lacunarity; // 細かさの増え方
amp *= gain; // 強さの減衰
}
return value;
}
これは GLSL でも JavaScript(Three.js)でも Unity でも同じ。 書き方の「記法」が違うだけで、構造は完全に共通している。
つまり…
ノイズは “5つのパラメータ” がすべて。
- Frequency → 細かさ
- Amplitude → 強さ
- Octave → レイヤー数
- Lacunarity → 細かさの成長速度
- Gain → 振幅の衰え方(質感の性格)
この 5つが分かれば、すべてのノイズが理解できる。
Perlin Noise、Simplex Noise、FBM、雲ノイズ、水ノイズ、炎ノイズ、Fog、地形生成、Shader の VFX── 全部このレシピの応用で作られている。
“読める・作れる”段階に到達した
この記事であなたは:
- ノイズを“調整できる”レベルを超えて
- ノイズを“設計できる”レベルに入った
プログラム上のノイズは、 数学の教科書ではなく、体系化されたアートの道具だということがここで分かる。
8. 次回(#04〜)への橋渡し
#03 の後は、この5つを使って 実装へ突入。
Noise 入門 #04
Perlin Noise のアルゴリズムを図解で理解する
Noise 入門 #05
FBM(Fractal Brownian Motion)を自分で実装する
Noise 入門 #06
Three.js + ShaderMaterial で動くノイズを書く
💬 コメント