【Unity Shader Graph】ゼルダBOTW風トゥーンシェーダーの調整

## はじめに
本記事はUnity Shader Graphの使用を前提とし、海外でかの有名なRoystan氏が制作した「ゼルダの伝説 ブレス オブ ザ ワイルド」スタイルのトゥーンシェーダーを新しいUnityバージョンで制作する注意点とカスタマイズできるところについて。

## 前提条件
- Roystan氏のトゥーンシェーダーをUnity Shader Graphで制作したこと

## 対象者
- チュートリアルに沿って実装上手く行かなかった方
- だいぶ新しいUnityバージョンでRoystan氏トゥーンシェーダーを制作した方
- 今YouTubeのチュートリアル動画でRoystan氏のトゥーンシェーダーを制作している方

## 使用環境

- Unity 2022.3.17f1
- Universal Render Pipeline（URP）

## Shader Graph全体図
- 見るチュートリアルと制作の都合によって全体図変わりますが、一応自分のグラフを載せておきます

![スクリーンショット 2024-04-18 200423.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3770983/63570131-acc1-7ddf-4a5b-f4f3a31b7b7d.png)

![スクリーンショット 2024-04-18 195717.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3770983/3954204b-d375-be99-7653-b6e6277f481e.png)

![スクリーンショット 2024-04-17 000257.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3770983/a8fe88b1-a046-8229-c070-96751d944016.png)

![スクリーンショット 2024-04-17 000315.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3770983/42494fb3-46c1-53a6-4ad9-fb8dc3fd4024.png)

![スクリーンショット 2024-04-17 000349.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3770983/c58632c0-91e9-3f65-ffff-258b2b925fd5.png)

▼Custom Function Node
![スクリーンショット 2024-04-18 195736.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3770983/3c0623ae-d05a-9d17-02e9-3c3d1b4a923a.png)

▼Custom Function NodeをSub-graphに変換
![スクリーンショット 2024-04-17 000204.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3770983/f47ae119-c13a-1e7a-51e4-37207e8e7133.png)


## チュートリアル動画と違うところとカスタマイズ
- Vector1とFloat：
旧バージョン（Unity 2019など）だと「Vector1」のパラメータが存在しますが、新しいUnityバージョンだと「Vector1」を「Float」に変更する必要がある

![スクリーンショット 2024-04-17 012206.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3770983/e83fb5c5-4ed8-c445-90e9-7d184768415a.png)


- 必要に応じてRender Faceの調整：
例えば、ユニティちゃんKAGURA(URP)の服アクセサリーには両面とも描画する必要がある

![スクリーンショット 2024-04-17 015614.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3770983/950eaf6a-eebc-5771-6600-e83e2fe8f460.png)


▼Both適用前：

![スクリーンショット 2024-04-17 015550.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3770983/b9018e7f-174c-7a57-bc1a-6895aa19d37d.png)


▼Both適用後：

![スクリーンショット 2024-04-17 015628.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3770983/2b626419-3eb8-2998-3a21-546c6e12689c.png)


- Alpha Clippingの実装：
旧バージョンを使用する方には慣れないかもしれませんが、旧バージョンの「Unlit マスターノード」の設定は「Fragment」ノードの「Graph Settings」にあります。

![スクリーンショット 2024-04-17 010136.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3770983/187af880-7af1-6653-53df-6b55e9ae7d1d.png)

▼Alpha Clippingを有効化

変更前：
![スクリーンショット 2024-04-17 023343.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3770983/08f084aa-2ecf-ff92-2237-c1ceb9361657.png)

変更後（テクスチャのAlpha値をマスターノードのAlpha値に繋ぐ）：
![スクリーンショット 2024-04-17 005916.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3770983/9602900d-baf1-8cda-a61d-3e527ef00f93.png)

▼マッピングするTexture
![スクリーンショット 2024-04-18 201047.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3770983/c6b5b09a-70b9-6827-f177-726db3969ae0.png)

▼Alpha Clipping実装前：
![スクリーンショット 2024-04-18 201318.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3770983/daa0cf52-8b70-e123-7a59-c9a0ac730ebd.png)


![スクリーンショット 2024-04-17 001559.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3770983/ba067e7d-b651-a92e-4bca-296c244a9af3.png)

▼Alpha Clipping実装後：
![スクリーンショット 2024-04-18 201303.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3770983/b5823909-14ab-eaad-bfff-c1ba78e4a8d5.png)


![スクリーンショット 2024-04-17 001520.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3770983/2c892f11-3da8-72cb-d2fb-80fd864647bc.png)



## 最終成果物
▼ユニティちゃんをゼルダBOTW風に仕上げた
![スクリーンショット 2024-04-17 001501.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3770983/545ec810-6193-3868-f304-2a338a3a2174.png)

![スクリーンショット 2024-04-17 014821.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3770983/e0f421c8-7b5b-b49a-7bbe-fc54d8a1957e.png)

![ton-world.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3770983/d8a5003c-c1fe-f000-996e-3c12c3abeb4f.gif)


## おわりに
Unity 新しいLTSバージョンを使用する方やプロジェクトによってUnityのバージョンをアップデートする必要のある方たくさんいらっしゃると思います、Unityバージョンアップする度に仕様変更の対応はUnity使用者の皆さんにとって大変な作業だと思いますので、この記事を読んで同じ悩みを抱えている方のお役に立てれば幸いです。

## 参考記事
Toon Shader
https://roystan.net/articles/toon-shader/

Zelda's Toon Shader in Unity
https://www.youtube.com/watch?v=dyiLJ1PFhM0

## ライセンス
![imageLicenseLogo.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3770983/358e74c9-e502-038a-04d4-8d134d7b5ac9.png)

この作品はユニティちゃんライセンス条項の元に提供されています