Noise & irregularity

Periodic / Tileable Noise

周期ノイズ

端がつながるノイズで継ぎ目のない素材を作る。

10 / 10

Interactive demo

Preparing the demo…

Periodic / Tileable Noise

Drag to orbit, Ctrl/⌘ + scroll to zoom. Use two fingers on touch screens.

This explanation is currently available in Japanese.

ひとことで

一定の周期で端と端がぴったりつながるように作ったノイズです。テクスチャとして並べても継ぎ目が見えず、スクロールしてもループしても破綻しません。ゲームの素材の多くはタイリング(繰り返し貼り付け)が前提なので、手続き的にテクスチャを作るときの必須テクニックです。

ゲームでの使いどころ

  • タイリングテクスチャの生成:地面、岩、雲、水面のノーマルマップなど、繰り返し貼る素材をノイズから焼き出すとき。
  • UV スクロールする素材:炎や水の模様をUV スクロールで流し続けても、1 周したところで途切れません。
  • ループするアニメーション:時間方向を周期にすると、何秒かでぴったり元に戻るエフェクト素材(ループ GIF、フリップブック)を作れます。
  • 円柱・トーラス状のワールド:横方向がつながったマップ(例:惑星を一周できるストラテジー)の地形生成。

しくみ

格子ベースのノイズ(パーリンなど)では、格子点ごとに勾配ベクトルや乱数を決めています。周期 PP のノイズを作るには、格子座標を周期で折り返してからハッシュするだけです。

g(i,j)=gradient(hash(i mod P,  j mod P))\mathbf{g}(i, j) = \text{gradient}\big(\text{hash}(i \bmod P,\; j \bmod P)\big)

こうすると x=0x = 0 の格子点と x=Px = P の格子点が同じ勾配を持つため、両端の値も傾きも一致します。fBm として重ねる場合は、各オクターブの周期も周波数と同じ倍率で増やします(周波数 2 倍なら周期も 2 倍)。周期が整数でないと格子点が一致しないので、周期は整数にします。

もう 1 つの方法は、高次元の円周上を回るやり方です。2D のタイルを作るとき、xx を円 (cos⁡2πu, sin⁡2πu)(\cos 2\pi u,\, \sin 2\pi u)、yy も別の円に写し、4D ノイズで評価します。周期の自由度が高く、任意の格子を持たない関数(simplex 等)にも使えますが、次元が倍になるぶん計算は重くなります。

実装のポイント

  • ずらし(オフセット)も周期で:層ごとにオフセットを加える場合、オフセットを整数にしないと周期性が崩れます。
  • ブラーや後処理もラップして:生成後にぼかしや法線計算をするときは、端の画素が反対側の端を参照するようにします。

つまずきやすい点

  • 周期が見えてしまう:継ぎ目は消えても、同じ模様が規則的に並ぶこと自体は隠せません。遠景で目立つなら、テクスチャボミングやワン・タイル、別スケールのノイズの重ね合わせで反復感を崩します。
  • 普通のノイズの切り出しで済ませる:画像の端をクロスフェードして無理につなぐ方法もありますが、コントラストが落ちてぼやけた帯ができます。
  • 周期が小さすぎる:周期 2 などでは、格子の勾配の組み合わせが少なく、模様が単調になります。

デモで試すこと

  1. 「タイルの作り方」を通常のノイズを切り出すに切り替え、「タイルの境目を表示」をオフにしてください。境目に沿って段差が走るのが見えます。
  2. 周期ノイズに戻すと、同じ模様を 9 枚並べているのに、つなぎ目がどこにあるか分からなくなります。
  3. 「模様をスクロール」をオンにすると、タイル内の模様が流れ続けても端で途切れないことを確認できます。

References

Curl-Noise for Procedural Fluid Flow ↗

A general reference for this subcategory.