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

2 / 4 画像のAlphaと切り抜きの比較 ​

このステップの目的

色と透明度の入力を分け、しきい値で残す部分を決めます。

RGBとAの接続 ​

Sample Texture 2DのRGBはBase Color、AはAlphaへつなぎます。半透明を確認したGraphを複製して比較用とし、片方をOpaque+Alpha Clippingへ変更します。Alpha Clip Thresholdを0.5に設定します。

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 へつなぐと画像の透明部分をシェーダーに反映できます。

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

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

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

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

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

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

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

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

別画像を Alpha マスクとして使う Shader Graph の例
別の白黒画像のR成分をAlphaへ接続し、表示範囲のMaskとして使った例です。

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

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

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

条件を変えた確認 ​

Alphaが0.2、0.6の部分を、しきい値0.5で切り抜くとどちらが残りますか。しきい値を上げたとき、表示範囲は増えるか減るか予想してください。

予測と結果の照合

0.6の部分が残ります。同じAlphaに対してしきい値を上げると、残る範囲は狭くなります。半透明の濃淡と、画素を残す判定を区別します。

以後はTransparentのGraphを使い、Alpha Clippingを無効にします。切り抜き用の複製は比較用に保存します。

チェックリスト
  • RGBとAを別の出力へ接続できる。
  • 半透明としきい値による切り抜きを同じ画像で比較した。