シェーダー基礎

Appearance

第06回 ノイズ ​

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

今回の授業内容 ​

  • ランダム値と連続性のあるノイズを比較する
  • Simple Noise、Gradient Noise、Voronoiの特徴を理解する
  • スケール、速度、しきい値で模様を調整する
  • ノイズを色、透明度、UVの変化へ利用する
  • Smoothstepを使ったディゾルブを実装する

ノイズの役割と種類 ​

ランダム値とノイズの違い ​

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

ランダム値は、単純に不規則な値です
隣の値との関係が弱く、脈絡がありません
一方でノイズは ランダムさに空間的・時間的なつながりを持たせたもの です

ノイズは不規則ながらも連続性があるため、 雲、煙、炎、水面、地形のような自然物の表現に向いています

計算で作るノイズと画像素材の違い ​

ノイズは、専用の画像素材を用意しなくても Shader Graph のノードや他の計算手法で生成できます

画像素材は用意した時点の模様に固定されますがノイズはスケール、速度、しきい値などのパラメーターを後から変更して好みの表現に調整できます

色ムラ、煙の揺らぎ、ディゾルブのマスクなどを自然に表現し調整するのに計算だけで完結できるノイズは非常に有用です

人力でのイラストレーションでは作るのが難しい表現を数値調整だけで扱えるようになるのは非常に大きな利点です

自然な変化を作るノイズ ​

Gaea による地形生成例
地形生成ソフト 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で手軽なムラを作る ​

Shader Graph の Simple Noise ノード
Simple Noiseノード

Simple Noise は、雲や煙のような表現に適度な粒状感を加えるのに便利なノードです

入力する UV と Scale によってノイズの細かさが変わります

単色の面に情報量を加えるのに有用ですが自然物の揺らぎを表現するには表現力不足です

https://docs.unity3d.com/ja/Packages/com.unity.shadergraph@10.0/manual/Simple-Noise-Node.html

Gradient Noiseでなめらかな変化を作る ​

Shader Graph の Gradient Noise ノード
Gradient Noiseノード

Gradient Noise は、値の変化がなめらかで自然物の揺らぎに使いやすいノイズです

Scale を小さくすると大きなムラに、 大きくすると細かなムラになります

雲、煙、水面、炎のような表現で使いやすいノードです

https://docs.unity3d.com/ja/Packages/com.unity.shadergraph@10.0/manual/Gradient-Noise-Node.html

Voronoiでセル状の模様を作る ​

Shader Graph の Voronoi ノード

Voronoi は点同士の距離からセル状の模様を作るノードです

セルの大きさや形を調整できるほかセルの領域別の出力も可能です

ひび割れ、結晶、細胞、泡、魔法陣の模様など様々な表現に使えます

https://docs.unity3d.com/ja/Packages/com.unity.shadergraph@10.0/manual/Voronoi-Node.html

ノイズ計算の参考資料 ​

ノイズを制御する ​

スケールで模様の大きさを変える ​

ノイズは UV 座標を入力して値を作ります

UV を拡大して入力すると模様は細かく繰り返されます UV を小さくして入力すれば大きなゆるいムラになります

Shader Graph では Tiling And Offset や UV への Multiply で調整できます

様々なスケール設定を試してみましょう

時間でノイズを動かす ​

Time を UV に足すとノイズの位置を時間で変化させられます

位置だけでなくノイズの生成パラメーターにも時間を入れるとより複雑な動きを作成可能です

ノイズを動かすことで炎、煙、水面、オーラのような動きを表現できます

時間経過でのノイズの操作は、有機的な動きを作るのに非常に有効な手法です
是非いろいろ試してみてください

ノイズでUVをゆがめる ​

ノイズ値を UV に足すとテクスチャーのサンプリング位置をずらせます

小さく足せば水面や熱気のような揺らぎになります

大きく足すと形が壊れやすいため Multiply で強さを抑えるのが基本です

画像そのものを変えるのではなく読み取る位置を変えるのがポイントです

ノイズでSDFの形を崩す ​

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

前回扱った SDF は、輪郭からの距離で形状を表現するものでした

この SDF の距離にノイズを足すと輪郭がゆらいだ図形を作れます
また、UV から計算で画像を作る SDF 関数にノイズの影響を加味すれば、炎やオーラなどのゆらぎの表現を作ることもできます

SDF で形を決め、ノイズで形状を崩すコンボは非常に強力です

ノイズを利用した表現 ​

水面の高さを変える ​

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

ノイズを Height Map として使い、 法線に変換して水面の揺らぎを作ります

Time を使ってノイズを動かせば水面が流れるような表現になります

ディゾルブで溶けるように消す ​

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

ノイズの値を Threshold でしきい値処理すると値が低い場所から徐々に消えていく表現を作ることができます

ノイズを加工した後に Sample Gradient でカラーグラデーションにマップすれば、 ゲームで有効なディゾルブ表現になります

Voronoiを色と法線に使う ​

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 で境界の柔らかさを調整できる
  • 境界に色、発光、または濃淡の変化がある
  • スクリーンショットまたは動画で変化が確認できる

今回のまとめ ​

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