category -> | | | | | | | |

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に変更すると次のような見た目になる。

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