シェーダー基礎

Appearance

第04回 半透明表現と UV アニメーション ​

前回: 第03回 テクスチャーサンプリングと UV / 次回: 第05回 TextMeshPro と SDF

今回の授業内容 ​

  • 半透明を使うためのGraph設定を理解する
  • AlphaとAlpha Clipの違いを比較する
  • テクスチャーとマスクから透明度を作る
  • Timeを使ってUVをスクロールする
  • フリップブックによるコマ送りを実装する
  • 速度をマテリアルから調整できるようにする

Alphaを使った半透明表現 ​

色と透明度を出力する ​

半透明の描画を行うシェーダーを作るには最終的な色だけでなく透明度も出力する必要があります

Shader Graph では Alpha へ値を接続することでピクセルごとの透明度を指定できます

ただしマテリアルや Graph の設定が不透明のままだと Alpha の値を変えても透明にはなりません

値の計算と描画設定の両方が必要です

Surface TypeをTransparentにする ​

  1. Shader Graph を開く
  2. Graph Inspector を表示する
  3. Graph Settings を確認する
  4. Surface Type を Transparent にする
  5. 必要に応じて Blending Mode を選ぶ
  • 半透明の見え方は Graph 側だけでなくマテリアル側の設定にも影響されます

0から1で透明度を表すAlpha ​

半透明な球体の表示例 1
半透明な球体の表示例 2

Alpha = 1 は完全に不透明です

Alpha = 0 は完全に透明です

0 と 1 の間の値を使うと背景が透けて見える半透明になります

RGBとAlphaを持つテクスチャー ​

Alpha 付きの草テクスチャー
草テクスチャーの Alpha チャンネルを白黒で表示した画像
上: 色と Alpha を持つ PNG 下: Alpha チャンネルを白黒で表示出典: para, OpenGameArt.org, CC0

前回触れたように、PNGやTGAなどはRGBに加えて透明度を表すAlphaチャンネルを持てます

Shader Graph では Sample Texture 2D から RGB と A を別々に取り出せます

RGB は色へ、A は Alpha へつなぐと画像の透明部分をシェーダーに反映できます

しきい値で切り抜くAlpha Clip ​

Alpha Blending で草を表示した例
Alpha Blending と Alpha Clip の併用例
Alpha Clip のみの例
半透明, 半透明 + Alpha Clip, Alpha Clip の例出典: para, OpenGameArt.org, CC0

Alpha Clip はアルファがしきい値未満の部分を描画しないようにする設定です

葉っぱやフェンスのように、 形をくっきり切り抜きたい表現に向いています

影を落とす範囲をはっきりさせられる、 無駄な描画を減らせるなどのメリットがありますが、表示品質に影響があります

色と透明度を別画像で扱う ​

別画像を Alpha マスクとして使う Shader Graph の例
別の画像をAlphaとして適用している例白黒画像の R 成分をAlphaとして使っているが問題なくマスクとして機能している

PNG や TGA などの画像フォーマットでは RGB に加えて透明度を表す A を持てます

これらの画像形式は便利ですが、 シェーダーで Alpha を使う要件ではありません

シェーダーでは別画像や計算式として用意した Alpha を扱うことも可能です

UVアニメーション ​

時間でテクスチャーを読む場所をずらす ​

テクスチャーそのものを動かすのではなく UV の読み取り位置を時間でずらします

Offset に時間変化を加えることで画像が流れているように見えます

炎、煙、雲、水、魔法の流れなど連続的な変化を作るときに使います

Timeノードで経過時間を使う ​

Time ノードの例

Time ノードはシェーダー内で時間の値を使うためのノードです

例えば時間をそのまま UV に足すと一定方向へスクロールします
速度や方向を調整したい場合は Time に Float の係数を掛けてから Offset に入れます

外部コードなしでアニメーションを作れる非常に便利で強力なノードです

時間をUVに加えるスクロール ​

UV スクロールを作る Shader Graph の例
Timeに係数を掛けて適用している例横方向にだけスクロールさせるためにX成分だけを使用

text
UV = 元のUV + 時間 * スクロール速度

Texture Color = Sample Texture 2D(Texture, UV)

Base Color = Texture Color.rgb
Alpha      = Texture Color.a

実際の Shader Graph では UV、Time、Multiply、Add、 Sample Texture 2D などの各ノードをつなぎます

フリップブックアニメーション ​

1枚のテクスチャーに複数コマを並べる ​

炎のフリップブックテクスチャー
出典: highwizard, OpenGameArt.org, CC0

フリップブックはいわゆるパラパラ漫画の意味 1枚のテクスチャーに複数コマを並べたものです

シェーダーでは時間に応じて読み取るコマを切り替えます

煙、炎、爆発のような形が変わる表現でよく使われます

UV スクロールが連続的に読む場所をずらす表現フリップブックは読む絵を切り替える表現です

全体UVをコマ単位のUVに変換する ​

Flipbook ノードを使った Shader Graph の例
Flipbook ノードの適用例

例えば横 5、縦 5 に並んだテクスチャーなら 1コマは 1 / 5 の幅と 1 / 5 の高さになります

現在のフレーム番号から読むコマの行と列を計算します

元の UV を 1コマ分に縮小し読みたいコマの位置へオフセットします

専用のノードがありますので通常はそちらを使いますが内部で上記の計算が行われています

コマ番号から読む範囲を決める ​

text
columns = 横のコマ数
rows    = 縦のコマ数

frame = floor(Time * fps) % (columns * rows)

cellX = frame % columns
cellY = floor(frame / columns)

flipbookUV = (UV + float2(cellX, cellY)) / float2(columns, rows)

実際の Shader Graph では専用ノードや Floor、Modulo、Divide などを使って組み立てます

UVアニメーションを調整する ​

X方向とY方向の速度を分ける ​

Vector2 プロパティでスクロール速度を持たせると横方向と縦方向の速度を分けられます

(1, 0) なら右方向へ流れます

(0, 1) なら上方向へ流れます

(0.2, -0.5) のようにすれば斜め方向へ流せます

Tilingとスクロールを組み合わせる ​

  • Tiling は模様の密度を決めます
  • Offset は読み取り位置を決めます
  • 密度を変えたいときは Tiling 動かしたいときは Offset を調整します
  • 同じテクスチャーでも密度と速度を変えるだけで炎、煙、水流のように印象を変えられます

パーティクルの見た目へ応用する ​

  • エフェクト実習では Particle System で発生、寿命、速度、サイズを制御します
  • シェーダー側では色、透明度、テクスチャーの流れ、コマ送り、マスクを制御します
  • 火花やヒット表現では短い寿命と発光が重要です
  • 煙や炎ではフリップブックで形の変化を作ることがあります
  • 魔法表現では半透明、マスク、UV スクロールが重要になります

実習：半透明で流れるテクスチャーを作る ​

ここまでに確認したAlphaとUVアニメーションを組み合わせて実装します

実習1：半透明シェーダーを作る ​

  1. URP Unlit Shader Graph を作成する
  2. Surface Type を Transparent にする
  3. Color プロパティを Base Color へ接続する
  4. Float プロパティを Alpha へ接続する
  5. マテリアルから透明度を変えて結果を確認する

実習2：テクスチャーのAlphaを使う ​

  1. Texture2D プロパティを追加する
  2. Sample Texture 2D で画像を読む
  3. RGB を Base Color へ接続する
  4. A を Alpha へ接続する
  5. 画像の透明部分が反映されるか確認する

実習3：UVスクロールを作る ​

  1. UV ノードを用意する
  2. Time にスクロール速度を掛ける
  3. 元の UV と時間変化を Add する
  4. 結果を Sample Texture 2D の UV へ接続する
  5. 保存してマテリアル上で動きを確認する

実習4：スクロール速度を調整できるようにする ​

  1. Vector2 の Scroll Speed プロパティを追加する
  2. Time * Scroll Speed を UV に足す
  3. (0.2, 0)、(0, 0.5)、(-0.3, 0.1) を試す
  4. 方向と速度がどう変わるか説明できるようにする

実習5：フリップブック表現を作る ​

  1. 横と縦にコマを並べたテクスチャーを用意する
  2. Columns、Rows、FPS のプロパティを追加する
  3. Time * FPS から現在のフレーム番号を作る
  4. フレーム番号から読むコマの位置を計算する
  5. UV を 1コマ分に縮小し、対象コマへオフセットする

授業内課題：Timeノードでアニメーションを作る ​

テクスチャーやマスクの透明度を時間で変化させ、用途を説明できるシェーダーにします

完成条件 ​

  • テクスチャーやマスクを使って形や濃淡に透明度を持たせている
  • Time を使って UV スクロール、 またはフリップブック再生を行っている
  • 速度や色、透明度などをマテリアル側から調整できる
  • スクリーンショットまたは動画に加えて、 何のエフェクト素材として作ったかを一言で説明する

今回のまとめ ​

  • 半透明表現では Alpha の計算と Surface Type などの描画設定をあわせて扱います
  • Alpha はやわらかい透明表現に向き Alpha Clip は形をはっきり切り抜く表現に向いています
  • Time で UV をずらすとテクスチャーを流れるように表示できます
  • フリップブックでは読み取るコマを切り替えます
  • この考え方はエフェクト制作でも有効です

使用画像と出典 ​