シェーダー基礎

Appearance

第06回 ノイズ ​

前回: 第05回 TextMeshPro と SDF / 次回: 第07回 ベクトル演算とライティング

ノイズで 自然なムラを作る ​

規則的ではないのに 連続性のある表現 ​

きれいすぎるものは 意外と不自然 ​

前回の振り返り ​

形の境界を扱う表現「SDF」を学びました ​

  • 第05回では TextMeshPro から SDF の考え方に触れました
  • SDF は形の境界からの距離を持つデータです 前回授業では Smoothstep やしきい値を使うことで 形の切り抜き、輪郭、ぼかしを制御できました
  • 今回はノイズを使って 形や色に不規則な変化を加える方法を扱います

今回の授業で扱うこと ​

不規則な値をビジュアルに変える ​

  • ランダムとノイズの違い
  • パーリンノイズ、セルラーノイズの基本的な用途
  • Shader Graph のノイズ系ノード
  • ノイズをマスク、色、透明度、UV に使う考え方
  • しきい値と Smoothstep によるディゾルブ表現
  • 自然物、エフェクト、UI 演出に使える 不規則な変化の作り方

今回の授業内容 ​

パーリンノイズ、セルラーノイズ ​

  • ノイズの役割
  • ランダムとノイズの違い
  • Shader Graph のノイズ系ノード
  • ノイズのスケール、速度、しきい値
  • ディゾルブ表現
  • 授業内課題

ランダムとノイズ ​

乱数と、デザインされた乱数 ​

random
perlin
上は隣同士の関係が弱いランダム値の、 下は値がなめらかにつながるノイズの例

  • ランダム値は、単純に不規則な値です 隣の値との関係が弱く、脈絡がありません
  • 一方でノイズは ランダムさに空間的・時間的な つながりを持たせたもの です
  • ノイズは不規則ながらも連続性があるため、 雲、煙、炎、水面、地形のような 自然物の表現に向いています

ノイズと画像素材との違い ​

計算で作れるため調整しやすい ​

  • ノイズは、専用の画像素材を用意しなくても Shader Graph のノードや他の計算手法で生成できます
  • 画像素材は用意した時点の模様に固定されますが ノイズはスケール、速度、しきい値などのパラメーターを後から変更して 好みの表現に調整できます
  • 色ムラ、煙の揺らぎ、ディゾルブのマスクなどを自然に表現し調整するのに 計算だけで完結できるノイズは非常に有用です
  • 人力でのイラストレーションでは作るのが難しい表現を 数値調整だけで扱えるようになるのは非常に大きな利点です

ノイズの使いどころ ​

「自然な変化」で表現の幅を広げる ​

画像
地形生成ソフト Gaeaによる 地形生成の例 ノイズとシミュレーションで自然な起伏を作成できる Screenshot created with QuadSpinner Gaea. Gaea is a trademark of QuadSpinner.

  • 自然界には、完全な規則性のあるものは ほとんど存在しません
  • ですがノイズを使えば、規則的な形や色に 自然なムラや揺らぎを加えることができます
  • 例えば地形の起伏、雲の形、炎の揺らぎなどは ノイズを使うと自然に表現できます
  • ノイズは幅広い用途で自然な変化を 表現するために利用可能です

画像表現に有用なノイズ ​

よく使われるノイズの種類と特徴 ​

画像
左上から右に向かってホワイトノイズ、パーリンノイズ、フラクタルノイズ、ボロノイノイズの例

  • ホワイトノイズ: ざらつき、粒状感、グリッチ
  • パーリンノイズ: 雲、煙、水面、地形のような自然なムラ
  • フラクタルノイズ / fBm: 複数のノイズを重ねた細かなディテール
  • ボロノイ / セルラーノイズ: 細胞、石、ひび割れ、泡のような領域表現

Shader Graph のノイズ系ノード ​

画像無しでもノイズを作れる ​

  • Shader Graph には、いくつかのノイズ系ノードが用意されています
  • Simple Noise、Gradient Noise、Voronoi などのノードは UV 座標を入力してノイズ値を出力します
  • これらのノードを使うと、画像素材を用意せずに ノイズを生成して表現に利用できます
  • 計算の精度や設計から表現に制約がある場合もありますが、 調整のしやすさやリアルタイムでの変化を加える用途には非常に便利です

Simple Noise ノード ​

手軽なムラを作る ​

画像
Simple Noiseノード

Gradient Noise ノード ​

なめらかな変化を作る ​

画像
Gradient Noiseノード

Voronoi ノード ​

セル状の模様を作る ​

画像

ノイズ計算の参考資料 ​

代表的な論文と実装例 ​

スケール ​

模様の大きさを変える ​

  • ノイズは UV 座標を入力して値を作ります
  • UV を拡大して入力すると模様は細かく繰り返されます UV を小さくして入力すれば大きなゆるいムラになります
  • Shader Graph では Tiling And Offset や UV への Multiply で調整できます
  • 様々なスケール設定を試してみましょう

速度 ​

時間でノイズを動かす ​

  • Time を UV に足すとノイズの位置を時間で変化させられます
  • 位置だけでなくノイズの生成パラメーターにも時間を入れると より複雑な動きを作成可能です
  • ノイズを動かすことで 炎、煙、水面、オーラのような動きを表現できます
  • 時間経過でのノイズの操作は、有機的な動きを作るのに非常に有効な手法です 是非いろいろ試してみてください

UV のゆがみに使う ​

座標をノイズで操作する ​

  • ノイズ値を UV に足すと テクスチャーのサンプリング位置をずらせます
  • 小さく足せば水面や熱気のような揺らぎになります
  • 大きく足すと形が壊れやすいため Multiply で強さを抑えるのが基本です
  • 画像そのものを変えるのではなく 読み取る位置を変えるのがポイントです

SDF との接続 ​

ノイズを混ぜて形を崩す ​

画像
画像
SDF生成のUVにノイズを足した例と SDFの距離をノイズで評価した例 いずれも円の形状をノイズで崩せている

  • 前回扱った SDF は、輪郭からの距離で 形状を表現するものでした
  • この SDF の距離にノイズを足すと 輪郭がゆらいだ図形を作れます
  • また、UV から計算で画像を作る SDF 関数に ノイズの影響を加味すれば、炎やオーラなどの ゆらぎの表現を作ることもできます
  • SDF で形を決め、ノイズで形状を崩すコンボは 非常に強力です

実装例：水面のゆらぎ ​

ノイズを高さに使う ​

画像
簡素な水面のシェーダー例 ノイズを複数重ねることでより複雑な表現も可能

  • ノイズを Height Map として使い、 法線に変換して水面の揺らぎを作ります
  • Time を使ってノイズを動かせば 水面が流れるような表現になります

実装例：ディゾルブ表現 ​

ノイズで溶けるように消す ​

画像
パーリン+フラクタルノイズを グラデーションにマップした 徐々に燃え尽きるような表現の例

  • ノイズの値を Threshold でしきい値処理すると 値が低い場所から徐々に消えていく表現を 作ることができます
  • ノイズを加工した後に Sample Gradient で カラーグラデーションにマップすれば、 ゲームで有効なディゾルブ表現になります

実装例：Voronoi での有機表現 ​

ノード出力を色と法線に使う ​

画像
Voronoi ノードの出力加工例

  • Voronoi ノードのセル分割に色を割り当て、 グラデーションを加工後法線に変換すれば 細胞や石のような表現ができます
  • Shader Graph の Voronoi ノードは セル中心からの距離が遠景に出力されるため 等高線表現やエッジ分割には向きませんが 有機的な表現に便利です

実習 ​

ノイズノードを使って 様々な表現を作る ​

数値のムラを 弄り回してみよう ​

実習1 ​

ノイズを表示する ​

  1. URP Unlit Shader Graph を作成する
  2. UV を Simple Noise または Gradient Noise に接続する
  3. ノイズの出力を Base Color に接続する
  4. Scale を変更して模様の大きさを確認する
  5. Time と Tiling And Offset を使い ノイズをゆっくり動かす

実習2 ​

ノイズを透明度に使う ​

  1. Graph Settings で Surface Type を Transparent にする
  2. ノイズの出力を Smoothstep に接続する
  3. Threshold と Softness のプロパティを作成する
  4. Smoothstep の出力を Alpha に接続する
  5. Threshold を動かして 表示範囲が変わることを確認する

実習3 ​

ディゾルブの縁を作る ​

  1. 本体用の Smoothstep を作る
  2. 境界用に少し違うしきい値の Smoothstep を作る
  3. 2つの値を引き算して縁だけのマスクを作る
  4. 縁には明るい色を割り当てる
  5. Threshold を時間で変化させて 溶けるように消える表現を作る

実習4 ​

Voronoi を使った模様を作る ​

  1. Voronoi ノードを追加する
  2. Cell Density を調整する
  3. 出力値を Smoothstep で加工する
  4. 線の色と背景色を Lerp で混ぜる
  5. 魔法陣、結晶、ひび割れなどの表現に寄せてみる

授業内課題 ​

ノイズを使った 出現または消失マテリアルを 作成してください ​

どう消すのかに センスが問われる ​

課題の条件 ​

以下を満たしてください ​

  • Simple Noise、Gradient Noise、Voronoi のいずれかを使っている
  • ノイズの Scale をプロパティから調整できる
  • Threshold で表示範囲を変更できる
  • Smoothstep で境界の柔らかさを調整できる
  • 境界に色、発光、または濃淡の変化がある
  • スクリーンショットまたは動画で変化が確認できる

この回の到達目標 ​

  • ランダム値とノイズの違いを、 「つながりのある不規則さ」という観点で説明できる
  • Simple Noise、Gradient Noise、Voronoi の 見た目の違いと向いている用途を選べる
  • ノイズ値を色、透明度、UV、マスクの制御に使える
  • ノイズを使って、自然なムラやディゾルブ表現を Shader Graph で組み立てられる

今回のまとめ ​

ノイズで不規則さを制御する ​

  • ノイズは隣り合う値がつながった不規則なデータです
  • Shader Graph では Simple Noise、Gradient Noise、Voronoi などの ノイズ計算ノードが利用可能です
  • ノイズを閾値で加工するとマスクやディゾルブ表現に使えます UV に加味することで画像をゆがませることもできます
  • ノイズは自然物やエフェクト表現に欠かせない重要なツールです ぜひ活用してみてください

おつかれさまでした！ ​

次回予告 第07回 ベクトル演算とライティング ​

ここからが真の 3DCGの世界 ​