プロシージャル生成の数学（補間ノイズ）

Q: プロシージャル生成の数学（補間ノイズ）とは何ですか？

格子点 x = 0, 1, 2, \ldots にそれぞれランダムな値 v_0, v_1, v_2, \ldots が割り当てられているとき、格子点の間の任意の位置 x = i + t（ただし 0 \le t \le 1）における値を「補間関数」によって連続的に求める。 最も単純な「線形補間（Linear Interpolation, Lerp）」は次式で定義される。 \text{lerp}(v_i, v_{i+1}, t) = v_i + t(v_{i+1} - v_i) = (1-t)v_i + t\, v_{i+1} より自然な曲線を得るための「スムーズステップ補間」は、t をそのまま使う代わりに、次の緩和関数 S(t) を通してから線形補間の式に代入する。 S(t) = 3t^2 - 2t^3, \qquad \text{smooth}(v_i, v_{i+1}, t) = (1-S(t))v_i + S(t)\, v_{i+1}

Q: プロシージャル生成の数学（補間ノイズ）は社会やプログラミングでどのように使われていますか？

ゲーム地形生成における1次元補間ノイズの実装: 少数のランダムな制御点から、線形補間またはスムーズステップ補間によって連続的な地形の高さ関数を生成する。実際の3Dゲームエンジン（Unity, Unreal Engine等）の地形生成やクラウドシェーダーでは、この考え方を2次元・3次元・多オクターブ（複数周波数の重ね合わせ）に拡張したパーリンノイズ／シンプレックスノイズが使われている。

ランダムな制御点を滑らかにつなぐ補間関数が、自然に見える地形・テクスチャを生み出す仕組み

この単元の発見をシェア

3行要約（Key Takeaways / AIOサマリー）

1: プロシージャル生成ノイズ（パーリンノイズなど）は、格子点にランダムな値を置き、それらの間を「補間関数」でつないで連続的な値を作る技術
2: 単純な直線補間（線形補間）は折れ線状のカクカクした変化になるが、滑らか補間（スムーズステップ・コサイン補間）を使うと自然な丘や谷のような滑らかな曲線になる
3: この滑らかな補間曲線こそが、ゲームの地形・雲・木目テクスチャなど、自然物のランダムだが滑らかな見た目を生成する数学的な核心部分

なぜこれを学ぶのか？ — 現実社会とテクノロジーでの価値

Purpose & Motivation

なぜ生まれたのか？

プロシージャル生成ノイズ（パーリンノイズなど）は、格子点にランダムな値を置き、それらの間を「補間関数」でつないで連続的な値を作る技術

身につく武器・思考力

単純な直線補間（線形補間）は折れ線状のカクカクした変化になるが、滑らか補間（スムーズステップ・コサイン補間）を使うと自然な丘や谷のような滑らかな曲線になる

実社会・ITでの活躍現場

•ゲーム地形生成における1次元補間ノイズの実装
•ITシステム・アルゴリズム実装における論理設計
•データ分析やシミュレーションにおける数理モデリング

Layer 1 — 直感・シミュレーター

「規則を変更」ボタンで格子点上のランダムな制御値を再生成し、スライダーで補間方式（線形補間 ↔ スムーズ補間）を切り替えてみよう。同じ制御点でも、補間関数を変えるだけで生成される曲線の印象がガラッと変わることが確認できる。

補間方式: 線形補間寄り0%

線形補間（カクカク）スムーズステップ（滑らか）

💡 補間関数の役割:

オレンジの点が格子点上のランダムな制御値、青い曲線がその間を補間した結果です。線形補間は $\text{lerp}(v_i, v_{i+1}, t) = (1-t)v_i + t\,v_{i+1}$ で直線的につなぎますが、スムーズステップ補間は $S(t) = 3t^2 - 2t^3$ を介することで両端の傾きが0になり、滑らかにつながります。

↑ スライダーを右に動かすほど、カクカクした折れ線が滑らかな丘陵のような曲線に変わっていきます。これを2次元・3次元に拡張し、値の代わりに勾配ベクトルを使ったものが「パーリンノイズ」で、ゲームの地形やテクスチャ生成の基盤技術です。

直感チェック！ミニクイズ

制御点の間を単純な「線形補間（直線でつなぐ）」ではなく「スムーズステップ補間」でつなぐと、生成される曲線にはどのような変化が起きるか？

Layer 2 — 定義・受験・証明

定義

格子点 $x = 0, 1, 2, \ldots$ にそれぞれランダムな値 $v_0, v_1, v_2, \ldots$ が割り当てられているとき、格子点の間の任意の位置 $x = i + t$ （ただし $0 \le t \le 1$ ）における値を「補間関数」によって連続的に求める。

最も単純な「線形補間（Linear Interpolation, Lerp）」は次式で定義される。

\text{lerp}(v_i, v_{i+1}, t) = v_i + t(v_{i+1} - v_i) = (1-t)v_i + t\, v_{i+1}

より自然な曲線を得るための「スムーズステップ補間」は、 $t$ をそのまま使う代わりに、次の緩和関数 $S(t)$ を通してから線形補間の式に代入する。

S(t) = 3t^2 - 2t^3, \qquad \text{smooth}(v_i, v_{i+1}, t) = (1-S(t))v_i + S(t)\, v_{i+1}

公式・数理モデル

\text{lerp}(v_i, v_{i+1}, t) = (1-t)v_i + t\, v_{i+1}, \qquad S(t) = 3t^2 - 2t^3

証明・導出

スムーズステップ関数 $S(t) = 3t^2 - 2t^3$ が「滑らかさ」を生む理由は、区間の両端での微分係数（傾き）にある。

$S(t)$ を微分すると、

S'(t) = 6t - 6t^2 = 6t(1-t)

これより端点での傾きを調べると、

S'(0) = 6 \cdot 0 \cdot 1 = 0, \qquad S'(1) = 6 \cdot 1 \cdot 0 = 0

すなわち $t=0$ と $t=1$ の両方で傾きがちょうど $0$ になる。これは「補間曲線が格子点に速度ゼロで滑らかに接続される」ことを意味し、隣り合う区間の補間曲線をつなげても折れ点（傾きの不連続）が生じない。

一方、線形補間 $\text{lerp}(v_i, v_{i+1}, t) = v_i + t(v_{i+1}-v_i)$ の傾きは区間内で常に一定値 $(v_{i+1}-v_i)$ であり、隣接区間との境界（格子点）で傾きが急変するため、曲線全体としては「角」を持つ折れ線になる。

さらに $S(0)=0,\ S(1)=1$ が成り立つため、両端点では $\text{smooth}(v_i,v_{i+1},0)=v_i$ 、 $\text{smooth}(v_i,v_{i+1},1)=v_{i+1}$ となり、制御点そのものの値は線形補間と変わらず正確に通過する。つまりスムーズステップは「通過点は変えずに、つなぎ方（速度）だけを滑らかにする」補正関数である。

押さえておきたいポイント

線形補間は計算が軽い反面、格子点で傾きが不連続になり「カクカクした」見た目になる
スムーズステップ（または五次関数によるさらに滑らかな版、コサイン補間）は両端で傾き0になり、自然な曲線を生む
1次元のこの補間を2次元・3次元の格子に拡張し、各格子点に「値」ではなく「勾配ベクトル」を割り当てたものがKen Perlinの考案した「パーリンノイズ」であり、映画・ゲームの地形やテクスチャ生成の標準技術
補間関数の選択はコンピュータグラフィックスにおける「見た目の自然さ」と「計算コスト」のトレードオフを体現する典型例である

参照基準・学習指導要領との対応

本トピックの内容・数理モデルは、文部科学省学習指導要領（算数・数学・情報）および国際標準カリキュラムに準拠し、エンジニアリング現場の実装事例と照らし合わせてMath World Lab編集部により検証・作成されています。

Layer 3 — 工学応用・現場実装

ゲーム地形生成における1次元補間ノイズの実装

少数のランダムな制御点から、線形補間またはスムーズステップ補間によって連続的な地形の高さ関数を生成する。実際の3Dゲームエンジン（Unity, Unreal Engine等）の地形生成やクラウドシェーダーでは、この考え方を2次元・3次元・多オクターブ（複数周波数の重ね合わせ）に拡張したパーリンノイズ／シンプレックスノイズが使われている。

1// スムーズステップの緩和関数: S(t) = 3t^2 - 2t^3
2function smoothstep(t: number): number {
3  return 3 * t * t - 2 * t * t * t;
4}
5
6// 格子点上の制御値を補間して、連続的な地形の高さを返す
7function interpolatedNoise(
8  controlPoints: number[],
9  x: number,
10  mode: "linear" | "smooth"
11): number {
12  const i = Math.floor(x);
13  const t = x - i;
14
15  const v0 = controlPoints[i % controlPoints.length];
16  const v1 = controlPoints[(i + 1) % controlPoints.length];
17
18  const factor = mode === "smooth" ? smoothstep(t) : t;
19  return v0 + factor * (v1 - v0);
20}
21
22// 8個のランダムな制御点（例: 地形の高さのシード値）
23const controlPoints = Array.from({ length: 8 }, () => Math.random() * 10);
24
25// x = 0 〜 8 の範囲を0.1刻みでサンプリングして地形プロファイルを生成
26const terrainProfile = Array.from({ length: 80 }, (_, k) => {
27  const x = k * 0.1;
28  return {
29    x,
30    linear: interpolatedNoise(controlPoints, x, "linear"),
31    smooth: interpolatedNoise(controlPoints, x, "smooth"),
32  };
33});
34
35console.log("地形プロファイル（先頭5点）:", terrainProfile.slice(0, 5));