【Unity】URPのParticleシェーダでFlip-Book Blendingを使う

UnityのUniversal Render Pipeline(URP)のParticleシェーダでFlip-Book Blendingを使う方法についてまとめました。

Unity2020.3.15f2

Flip-Book Blending?

Flip-Bookとはいわゆるパラパラ漫画のことです。
Particle Systemではテクスチャシートを使ってFlip-Bookアニメーションをすることができます。

さらに、Flip-Bookのコマとコマの間をブレンドするFlip-Book Blendingというオプションもあります。
本記事ではURPのParticleシェーダでFlip-Book Blendingを使う方法についてまとめます。

ブレンドしないFlip-Bookアニメーションを作る

まず準備としてブレンドしないFlip-Bookアニメーションを作ります。
これに関しては以下の記事にも細かくまとめているので、詳細はこちらを参照してください。

light11.hatenadiary.com

ParticleSystemを一つ作り、Texture Sheet Animationを有効にしておきます。
今回はModeをGridにしてTilesを8x8に設定しておきます。

f:id:halya_11:20210831104227p:plain
Texture Sheet Animation

次にマテリアルを作成し、Universal Render Pipeline/Particles/Unlitシェーダをアサインします。
Base Mapには以下のサンプルテクスチャを入れておきます。

f:id:halya_11:20210831105634p:plain
サンプルテクスチャ

さらに、わかりやすいように以下のようにパラメータを変更しておきます。

  • Start Lifetime: 4
  • Max Particles: 1
  • Shape: OFF

これでFlip-Bookアニメをするようになりました。

f:id:halya_11:20210831110220g:plain
Flip-Bookアニメ

Flip-Book Blendingする

次にFlip-BookアニメをBlendingします。
まずMaterialプロパティのAdvanced > Flip-Book Blendingにチェックを入れます。

f:id:halya_11:20210831110646p:plain
Flip-Book Blending

次にParticle SystemのRendererモジュールからCustom Vertex Streamsを有効にし、TEXCOORD1.xにAnimBlendを渡します。

f:id:halya_11:20210831110906p:plain
AnimBlend

これでFlip-BookアニメがBlendingするようになりました。

f:id:halya_11:20210831111014g:plain
Flip-Book Blending

GPUインスタンシング + Flip-Book Blending

最後にGPUインスタンシングを有効にしつつFlip-Book Blendingする方法についてまとめます。
GPUインスタンシングの基本的な使い方については以下にまとめていますので、必要に応じて参照してください。

light11.hatenadiary.com

さてインスタンシングを有効にするために、Render ModeをMeshにして適当なメッシュを設定し、
RendererモジュールのEnable Mesh GPU Instancingにチェックを入れます。

f:id:halya_11:20210831111455p:plain
有効化

ここでさらに、Custom Vertex Streamsを編集します。
ここがかなりわかりづらいのですが、前節の通りGPUインスタンシングが無効の時にはAnimBlendを渡す必要があったのに対して、
GPUインスタンシングが友好の時にはINSTANCED1.xにAnimFrameを渡す必要があります。

f:id:halya_11:20210831111722p:plain
AnimFrame

これでGPUインスタンシングに対応しつつFlip-Book Blendingを適用することができました。

f:id:halya_11:20210831111910g:plain
GPUインスタンシング + Flip-Book Blending

関連

light11.hatenadiary.com

light11.hatenadiary.com