🐷

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

2024/04/19に公開

はじめに

本記事は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

スクリーンショット 2024-04-18 195717.png

スクリーンショット 2024-04-17 000257.png

スクリーンショット 2024-04-17 000315.png

スクリーンショット 2024-04-17 000349.png

▼Custom Function Node
スクリーンショット 2024-04-18 195736.png

▼Custom Function NodeをSub-graphに変換
スクリーンショット 2024-04-17 000204.png

チュートリアル動画と違うところとカスタマイズ

  • Vector1とFloat:
    旧バージョン(Unity 2019など)だと「Vector1」のパラメータが存在しますが、新しいUnityバージョンだと「Vector1」を「Float」に変更する必要がある

スクリーンショット 2024-04-17 012206.png

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

スクリーンショット 2024-04-17 015614.png

▼Both適用前:

スクリーンショット 2024-04-17 015550.png

▼Both適用後:

スクリーンショット 2024-04-17 015628.png

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

スクリーンショット 2024-04-17 010136.png

▼Alpha Clippingを有効化

変更前:
スクリーンショット 2024-04-17 023343.png

変更後(テクスチャのAlpha値をマスターノードのAlpha値に繋ぐ):
スクリーンショット 2024-04-17 005916.png

▼マッピングするTexture
スクリーンショット 2024-04-18 201047.png

▼Alpha Clipping実装前:
スクリーンショット 2024-04-18 201318.png

スクリーンショット 2024-04-17 001559.png

▼Alpha Clipping実装後:
スクリーンショット 2024-04-18 201303.png

スクリーンショット 2024-04-17 001520.png

最終成果物

▼ユニティちゃんをゼルダBOTW風に仕上げた
スクリーンショット 2024-04-17 001501.png

スクリーンショット 2024-04-17 014821.png

ton-world.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

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

Discussion