シェーダー基礎

Appearance

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

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

半透明と UV アニメで シェーダー表現の 幅を広げる ​

シェーダーだけでも アニメーション できるよ ​

前回の振り返り ​

テクスチャーマップと UV を使って画像を表示しました ​

  • 前回は Sample Texture 2D を使い Shader Graph で画像を表示しました
  • UV が画像のどこを読むかを決める座標であり Tiling と Offset で読み取り位置を調整できることを学びました
  • 今回は UV に時間変化を加え、半透明の設定と組み合わせて シェーダーだけで動く表現を作ります

今回の授業の目的 ​

半透明と UV アニメーションを使えるようにする ​

  • Shader Graph で透明度を扱うための設定を理解します
  • Alpha と Alpha Clip Threshold の違いを整理します
  • Time と Offset を使って テクスチャーが流れる表現を作ります
  • エフェクト実習で扱う火花、煙、魔法表現につながる 基本的なシェーダー表現を身につけます

今回の授業内容 ​

ブレンド設定とスクロール制御 ​

  • 半透明を使うための Graph 設定
  • Alpha と Alpha Clip の違い
  • 透明度用テクスチャーとマスク
  • Time を使った UV スクロール
  • フリップブックによるコマ送り表現
  • スクロール速度と再生速度をプロパティ化する

半透明表現で必要なこと ​

色だけでなく透明度も出力する ​

  • 半透明の描画を行うシェーダーを作るには 最終的な色だけでなく透明度も出力する必要があります
  • Shader Graph では Alpha へ値を接続することで ピクセルごとの透明度を指定できます
  • ただしマテリアルや Graph の設定が不透明のままだと Alpha の値を変えても透明にはなりません
  • 値の計算と描画設定の両方が必要です

Graph 設定を確認する ​

Surface Type を Transparent にする ​

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

Alpha とは ​

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

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

  • Alpha = 1 は完全に不透明です
  • Alpha = 0 は完全に透明です
  • 0 と 1 の間の値を使うと 背景が透けて見える半透明になります

Alpha を持ったテクスチャー ​

RGB + A の4チャンネル ​

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

  • 前回触れたように、PNG や TGA などは RGB に加えて透明度を表す A を持てます
  • 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 を別画像で持つ ​

色と透明度を分けて扱う ​

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

  • PNG や TGA などの画像フォーマットでは RGB に加えて透明度を表す A を持てます
  • これらの画像形式は便利ですが、 シェーダーで Alpha を使う要件ではありません
  • シェーダーでは別画像や計算式として用意した Alpha を扱うことも可能です

UV アニメーションの考え方 ​

時間で読む場所をずらす ​

  • テクスチャーそのものを動かすのではなく UV の読み取り位置を時間でずらします
  • Offset に時間変化を加えることで 画像が流れているように見えます
  • 炎、煙、雲、水、魔法の流れなど 連続的な変化を作るときに使います

Time ノード ​

経過時間をシェーダー内で使う ​

Time ノードの例

  • Time ノードはシェーダー内で時間の値を 使うためのノードです
  • 例えば時間をそのまま UV に足すと 一定方向へスクロールします
  • 速度や方向を調整したい場合は Time に Float の係数を掛けてから Offset に入れます
  • 外部コードなしでアニメーションを作れる 非常に便利で強力なノードです

UV スクロールの最小構成 ​

時間を 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 をコマ単位の UV に変換する ​

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

  • 例えば横 5、縦 5 に並んだテクスチャーなら 1コマは 1 / 5 の幅と 1 / 5 の高さになります
  • 現在のフレーム番号から 読むコマの行と列を計算します
  • 元の UV を 1コマ分に縮小し 読みたいコマの位置へオフセットします
  • 専用のノードがありますので通常はそちらを 使いますが内部で上記の計算が行われています

フリップブック UV の計算方法 ​

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

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 などを使って組み立てます

スクロール方向をプロパティにする ​

X と Y の速度を分けて調整する ​

  • Vector2 プロパティでスクロール速度を持たせると 横方向と縦方向の速度を分けられます
  • (1, 0) なら右方向へ流れます
  • (0, 1) なら上方向へ流れます
  • (0.2, -0.5) のようにすれば 斜め方向へ流せます

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

密度と流れを別々に調整する ​

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

エフェクト実習との接続 ​

パーティクルの見た目を支えるシェーダー ​

  • エフェクト実習では Particle System で 発生、寿命、速度、サイズを制御します
  • シェーダー側では 色、透明度、テクスチャーの流れ、コマ送り、マスクを制御します
  • 火花やヒット表現では短い寿命と発光が重要です
  • 煙や炎ではフリップブックで形の変化を作ることがあります
  • 魔法表現では半透明、マスク、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 スクロール、 またはフリップブック再生を行っている
  • 速度や色、透明度などを マテリアル側から調整できる
  • スクリーンショットまたは動画に加えて、 何のエフェクト素材として作ったかを一言で説明する

この回の到達目標 ​

  • Shader Graph で半透明シェーダーを作成できる
  • Alpha と Alpha Clip の違いを説明できる
  • テクスチャーの Alpha を透明度として使える
  • Time を使って UV スクロールを作成できる
  • フリップブック用に UV をコマ単位で切り替える考え方を説明できる
  • エフェクト用途でシェーダーが担う役割を説明できる

今回のまとめ ​

半透明と UV アニメーションを組み合わせる ​

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

おつかれさまでした！ ​

次回予告 第05回 SDF とフォント描画 ​

距離と形の 意外な関係 ​

使用画像と出典 ​