Unity粒子テレポートシェーダー

関連ページ 以前作った 分割テレポートシェーダー は自分の中で妥協して作ったものでした。
そこから研究を重ね、もともと作りたかった挙動である画像を粒子化してテレポートさせるシェーダーが作れました。
大枠の作りは分割テレポートシェーダーと一緒なので、内容が被っている部分は説明を省いている箇所があります。
なので事前に分割テレポートシェーダーの記事を見ることが必須になっています。
まず実装結果のサンプル動画は次の通り。技術的には ドット欠けシェーダー の知識を応用しています。

内部にいくつか設定を用意していて、粒子の大きさを変えたり、色やバラつきも変更が出来ます。
実装がやや複雑なため、BitTeleportControllerというC#側の仲介スクリプトを作っておきました。
必要なシェーダー、マテリアル、C#スクリプトをまとめてUnityPackage化して、こちら にアップロードしてあります。
BitTeleportControllerではTweenという機能を使ってアニメーションを実装しています。
このため、あらかじめ DOTween をアセットストアからインポートしておくが必要あります。
テレポート演出させたい画像に対しては、残念ながら強い制約があります。
この辺りの注意点は分割テレポートシェーダーと全く一緒です。 だいたいの部分は分割テレポートシェーダーと内容が一緒になります。
BitTeleport.UnityPackageをインポートすると、Projectに3つのファイルが追加されます。

BitTeleportControllerはBitTeleportマテリアルを参照し、BitTeleportマテリアルはBitTeleportシェーダーを参照しています。
まずはBitTeleportControllerを、ImageコンポーネントがアタッチされたGameObjectにアタッチします。
するとBitTeleportController内のReset関数によって、自動でメンバ変数の「Target」と「Canvas」に代入が実行されます。

UnityのPlayボタンを押して実行状態にし、BitTeleportControllerを右クリック、すると下の方にデバッグコマンドが出てきます。

DebugDoTeleportがテレポートアニメーションの再生、DebugUndoTeleportがテレポートアニメーションの逆再生になります。
BitTeleportController内にDoTeleportとUndoTeleportがpublic関数として用意してあります。
他のC#スクリプトからこの関数にアクセスし、アニメーションを実行できます。
アニメーションの設定は分割テレポートシェーダーと違う所がいくつかあります。
まず分割テレポートにあったSetSliceCount関数が削られていて、その代わりSetBitRoughnessとSetScattering関数が追加されています。
SetBitRoughnessは、テレポートする際の粒子の粗さを調整できます。
BitTeleportController内では初期値が100に設定されてあります。
左から順に1, 100, 200を設定した動画は次の通り。小さすぎると、演出として分かり辛いかもしれないです。

SetScatteringは、テレポートする際の粒子のバラつき具合を調整できます。
BitTeleportController内では初期値が2に設定されてあります。
左から順に1, 5, 10を設定した動画は次の通り。また違いを分かりやすくするためアニメーションのdurationを10秒に変更しています。

アニメーション完了までの時間はほぼ変わらないですが、粒子が上に登っていく速度が違うため結果的にバラつき具合異なって見えます。
続いてSeColorについて。このシェーダーは転送が進むにつれて画像が単一色に変化するが、その色を変更できます。
この辺りの設計は分割テレポートと全く一緒でコードは次の通りです。
試しに変化色を赤に変え、ついでにroughnessを50に変更すると次のような見た目になります。

血が滴るような、吸血鬼っぽさが演出出来てちょっとカッコイイ。
次のコードを呼ぶことで単一色の変化していく効果を切ることもできます。