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

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

![01Blog18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2600369/a9d05e7e-3343-b361-4f39-140c6b5ec020.png)


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

# 手順

## １） 既存のShaderを使う

1. 透過処理されている画像(png形式）を用意<br><img width="200" alt="cat_image" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2600369/43abe22e-50a8-a64a-8d61-257a4891c776.png">

2. Unity > Project内の任意のフォルダーに入れます

2. Hierarchyの＋ボタン、または右クリックで3Dオブジェクトを作成します<br>今回はハリボテのように表示させたいのでQuadを作成します<br><img width="300" alt="quad_image" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2600369/5404121e-50dc-0e13-561c-9863132eede0.png">

2. Projectの＋ボタン、または右クリックCreateからMaterialを任意のフォルダーに作成します
わかりやすい名前にしておきます<br><img width="300" alt="material_image" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2600369/b6e2b26a-56b6-c364-5b05-5a48db5b0f7b.png">

5. Materialを適用させたいオブジェクトにアタッチさせます

6. 作成したMaterialを選んだ状態で、InspectorからShaderでUniversal Render Pipeline > 2D >Sprite-Lit-Defaultを選びます

7. DiffuseのTexture＞Selectから表示させたい画像を選ぶか、ドラッグしてアタッチします
7. 透過部分が透過されて表示されます。
※Shader Unlit > Transparentでも同じように表示されます。
<img width="600" alt="material_image" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2600369/239d1320-513b-2555-e079-7e3055d31828.png">

（基本的な手順は[とんプログラミング](https://programming.sincoston.com/unity-transparent-image/)を参照しています)

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

1. 最初の手順は(１)の手順１〜４まで同じです。
1. Projectの＋ボタン、または右クリックCreateからShader > Universal Render Pipeline > Unlit Shader Graphを任意の場所に作成します。お好きな名前をつけてください。<img width="400" alt="material_image" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2600369/ed201af3-b7b4-ef45-39ba-abaec21815f1.png">

1. MaterialのShaderを2で作成したものにします。<br><img width="400" alt="material_image" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2600369/013eb975-812b-2dd1-0c8b-544c9170388a.png">

4. 作成したShader Graphを開きます
Graph InspectorのGraph Settingタブ > Universal > SurfaceのプルダウンからTransparentを選びます
![01Blog8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2600369/b85f1f62-94df-f6c5-4c5c-2803226dcdb5.png)
5. 右クリックでCreate Node > Sample Texture 2D を作成<img width="400" alt="ST2D_image" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2600369/0250122a-66fd-c548-0efe-6615d1244a18.png">
5. Sample Texture 2DのRGBAとFragmentのBase Colorを繋げる
Save Assetをクリックして保存する<br><img width="400" alt="ST2D_image" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2600369/f1fc4e06-b58a-bff9-cb0b-302d43fd0b84.png">
7. Sample Texture 2DのTextureに表示させたい画像をアタッチします
これで画像が表示されました。ですが透過反映されていません<img width="400" alt="image1" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2600369/b29ffdcb-8d7c-b250-aa2a-e1b9443b679c.png">
8. 次に右クリックでCreate Node > Stepを作成
Sample Texture 2DのAとStepのInを繋げ、StepのOutとFragmentのAlphaを繋げます<img width="400" alt="image2" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2600369/be81530b-24e8-2762-d6aa-016eb3cdb926.png">
変更をSaveすると透過が反映されます
ただジャギーや髭が細いのが気になるので一手間かけます!<img width="400" alt="image4" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2600369/bff5b2a2-b44f-d012-0c52-8da809101669.png">
9. Blackboardウィンドウ（シェイダーの名前が表示されているウィンドウ）の「＋」ボタンをクリックしてVector2を作成
<img width="400" alt="image2" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2600369/3740e31d-d886-fe99-c59e-ac71408b8539.png"><br>とりあえず名前を「Cutoff」にします

10. Cutoffを選んでPropertyでXの値を0.2ぐらいにします
CutoffをドラッグしてStepのEdgeに繋げます
セーブして反映させます
![01Blog15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2600369/20229a99-ce52-6aa9-7aeb-1c37ed5ddeda.png)

11. 髭の線が太くなりました
ただ白いフチが出てしまったので値を調整などしてご自分の望むようにしてくださいませ
![01Blog17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2600369/4a1993e8-8e8b-7ca5-bec2-f97768693382.png)

（手順は[Unity公式YouTube](https://www.youtube.com/watch?v=9ZY9tnxlOEs)、[Unity Answers](https://answers.unity.com/questions/1660160/shader-graph-transparent-texture-problem-help.html)を参考いたしました）