紙・布・御札が燃えるシェーダー【VRChat想定】

VRChat で利用することを目的に作られた、紙が燃える表現のシェーダーです。

注意点として Unity 2022.3 のプロジェクトかつ Shader Graph, Post Processing のパッケージがインストールされていて

サードパーティ製の VRChat 用の Shader Graph を利用できることが動作の条件です。

※下記導入手順に従わない手順でインポートし、動作不良が発生した場合について、対応しかねるケースがございます、あらかじめご了承ください。

（特に VRChat 以外のゲームプロジェクトで利用したり、異なる Unity バージョンで利用したり、URP などの異なる描画パイプラインで利用し、期待通り描画されないなどのケースについては、残念ですが、お問い合わせ一つ一つに対処しきれませんので、ご自身の Unity 力を鍛えて課題をクリアしてください）

導入手順

前提：VCC 経由で作られた Unity 2022.3 のプロジェクトを対象とします

１．Unity 公式の Shader Graph のインストール

メニューの Window > Package Manager を開いて

左上の＋ボタンの右側の Packages:In Project をクリックし、In Project から Unity Registry に選択を切り替えます

下部へスクロールし Shader Graph の項目を選択し、右側のパネルの右上に表示される Install ボタンを押します

しばらくビルド処理が走り、終了後に Packages:In Project のパッケージ一覧に Shader Graph が追加され、緑のチェックマークが付いていればインストール成功です

２．Unity 公式の Post Processing のインストール

メニューの Window > Package Manager を開いて

左上の＋ボタンの右側の Packages:In Project をクリックし、In Project から Unity Registry に選択を切り替えます

下部へスクロールし Post Processing の項目を選択し、右側のパネルの右上に表示される Install ボタンを押します

しばらくビルド処理が走り、終了後に Packages:In Project のパッケージ一覧に Post Processing が追加され、緑のチェックマークが付いていればインストール成功です

３．VRChat 用の Shader Graph のインストール

https://github.com/z3y/ShaderGraph をブラウザで開き、Installation の手順を参考にインストールします。

VRChat Creator Companion (VCC) で Settings メニューを開き、Packages タブを選択し、Add Repository ボタンを押して、URL の欄に

https://z3y.github.io/vpm-package-listing/index.json

を記入し、Add ボタンを押します。

追加出来たら、z3y's packages が有効になるようにチェックボックスがONとなっていることを確認します（OFF ならばチェックを入れます）

ここまで準備ができたら、自身のアバター用の Project を VCC で選び、Manage Packages より、Shader Graph Target(z3y) の項目の + ボタンを押して、Project にインストールします。

Packages:In Project のビューで Shader Graph Target (z3y) が追加され、緑のチェックマークが付いていればインストール成功です

４．本パッケージのインポート

紙・布・御札が燃えるシェーダー【VRChat】 https://simplestar-game.booth.pm/items/5367690 (※本パッケージ) をプロジェクトにインポートします

５．サンプルシーンを再生

Assets/Tools/SimplestarGame/VRChat/Shader/紙が燃えるシェーダー/紙が燃えるサンプルシーン.unity

再生を押してください

製品サムネイルと同じシーンが再生できれば、動作確認は完了です

シェーダーパラメータの説明

- 下から燃える： -1 に設定すると上から燃える、0 に設定すると一斉に燃える、1 に設定すると下から燃えるようになります

- 燃え具合： 0 ~ 1 の値を指定。0 は燃えていない状態で 1 に近づくにつれ徐々に燃えるようになり、1 で完全に燃え尽きます

- 模様の細かさ：燃えていく場所の模様の細かさを指定します。大きな値になるほど細かくなり、小さい値を指定すると模様がおおざっぱになります

- 模様の横オフセット：常に同じ燃え方はつまらないため、横に模様をずらして、新しい燃え模様を指定できます。バリエーションを持たせたり、気に入った模様がありましたら切り替えると良いでしょう

- 模様の横スケール：主に横方向にオブジェクトをスケール倍している場合、燃え模様が縦に伸びたりしてアスペクト比が不自然になります。この値を使っていい感じにスケールを合わせてください

- 模様の面積：燃えている箇所の模様の面積を広げたり、狭めたりできます。お好みで表現してみてください

- 火の明るさ：エミッションカラーの値の大きさで、Bloom が効いたワールドなどで火の明るさ表現として、お好みで指定してください

- 紙のテクスチャ：サンプルでは御札のテクスチャを貼っていますが、任意のテクスチャをご指定ください

- テクスチャオフセット：サンプルのように、余白を持つテクスチャを利用した際は、オフセットを使ってテクスチャの位置をずらします

- テクスチャタイリング：テクスチャのタイリング値です、オフセットを与えるだけだと余白が映る場合があるため、調整用に使ってください

- 燃え残る：チェックを入れると次の燃え残りマスクの白い部分が燃え残るようになります

- 燃え残りマスク：サンプルでは御札の文字に合わせて白く残した部分が燃え残ります。衣服の燃えてほしくない場所などを白く塗ることで、指定した生地だけは燃え残るように表現することができます。ん－、使い方次第のテクスチャです。

利用規約

・自作発言、無改変状態での再配布は禁止です

・誹謗中傷、政治的発言目的での利用を禁止します

・クレジット表記は不要です

バージョン情報

2023/12/24 Ver1.03 製品公開

トラブルシューティング

Post Processing でエラーが起きた場合

Main Camera にアタッチされている Post-process Layer を作り直すと解決することがあるようです。

Layer 指定には Default を含めるとサンプルシーンの御札の Bloom が有効化されます

z3y / ShaderGraph のインストールで詰まる場合その１

Unity 起動時に「An error occurred while resolving packages: No 'git' executable was found.」と表示される場合

環境変数の Path に git.exe のパスを通して

Windows を再起動すればエラーが発生しなくなると思われます

Windows のコマンドプロンプトを起動して、git と打ってコマンドが認識されるよう

https://gitforwindows.org/

git for windows をインストールすると解決できると思います

z3y / ShaderGraph のインストールで詰まる場合その２

github の README に従って VCC経由の Add Repository 手順を試された場合

VCC 上のエラーメッセージでは

Failed to load repository data from https://z3y.github.io/vpm-package-listing/. The URL is invalid or does not contain a valid repository listing.

Check out the documentation for more information.

Failed to get Repository Listing from https://z3y.github.io/vpm-package-listing/

が赤文字で出る

json パスではなく、以下の途中のパスを指定したのではないでしょうか？

https://z3y.github.io/vpm-package-listing/

正しくは

https://z3y.github.io/vpm-package-listing/index.json

を指定します。

こちらを指定するとコミュニティリポジトリとして追加でき、Package Manager 経由でなくても VCC 経由で簡単に Shader Graph Target (z3y) をプロジェクトにインストールできます。