More than 1 year has passed since last update.

【Unity】３Dオブジェクトに透過処理された２D画像の透過部分を反映させる

Last updated at 2022-03-24Posted at 2022-03-23

はじめに

今回は３Dオブジェクトに透過処理された２D画像を透過部分を反映させるやり方を説明します。
基本のキなのでご存じの方も多いと思いますが、Shader Graphについてはまとめている記事が少なく私は苦労しました。
同じように困っている方の参考になれば幸いです。

この記事ではMacOS Monterey 12.0にインストールしたUnity 2020.3.20f1を使っています。
URP (Universal Render Pipeline)テンプレートからプロジェクトを作っています。

手順

１）既存のShaderを使う

透過処理されている画像(png形式）を用意
Unity > Project内の任意のフォルダーに入れます
Hierarchyの＋ボタン、または右クリックで3Dオブジェクトを作成します
今回はハリボテのように表示させたいのでQuadを作成します
Projectの＋ボタン、または右クリックCreateからMaterialを任意のフォルダーに作成します
わかりやすい名前にしておきます
Materialを適用させたいオブジェクトにアタッチさせます
作成したMaterialを選んだ状態で、InspectorからShaderでUniversal Render Pipeline > 2D >Sprite-Lit-Defaultを選びます
DiffuseのTexture＞Selectから表示させたい画像を選ぶか、ドラッグしてアタッチします
透過部分が透過されて表示されます。
※Shader Unlit > Transparentでも同じように表示されます。

（基本的な手順はとんプログラミングを参照しています)

２）Shader GraphでShaderを自作する場合

最初の手順は(１)の手順１〜４まで同じです。
Projectの＋ボタン、または右クリックCreateからShader > Universal Render Pipeline > Unlit Shader Graphを任意の場所に作成します。お好きな名前をつけてください。
MaterialのShaderを2で作成したものにします。
作成したShader Graphを開きます
Graph InspectorのGraph Settingタブ > Universal > SurfaceのプルダウンからTransparentを選びます
右クリックでCreate Node > Sample Texture 2D を作成
Sample Texture 2DのRGBAとFragmentのBase Colorを繋げる
Save Assetをクリックして保存する
Sample Texture 2DのTextureに表示させたい画像をアタッチします
これで画像が表示されました。ですが透過反映されていません
次に右クリックでCreate Node > Stepを作成
Sample Texture 2DのAとStepのInを繋げ、StepのOutとFragmentのAlphaを繋げます
変更をSaveすると透過が反映されます
ただジャギーや髭が細いのが気になるので一手間かけます!
Blackboardウィンドウ（シェイダーの名前が表示されているウィンドウ）の「＋」ボタンをクリックしてVector2を作成

とりあえず名前を「Cutoff」にします
Cutoffを選んでPropertyでXの値を0.2ぐらいにします
CutoffをドラッグしてStepのEdgeに繋げます
セーブして反映させます
髭の線が太くなりました
ただ白いフチが出てしまったので値を調整などしてご自分の望むようにしてくださいませ