Raspberlyのブログ

Raspberlyのブログ

Unityネタをメインとした技術系ブログです。にゃんこ大戦争や日常なども。そろそろブログタイトル決めたい

【アセット紹介】Advanced Dissolve でディゾルブエフェクトを作る【Unity】

今回はアセットの紹介をしていきます。
紹介するのはAdvanced Dissolveです。
オブジェクトのディゾルブエフェクト(消滅エフェクト)を実装できるアセットです。

f:id:Raspberly:20190909151427p:plain

有料アセットですが、頻繁に50%オフセールが行われています。

 

 

去年のUniteTokyo2018で電脳少女シロ様にも紹介いただいたアセットです。

f:id:Raspberly:20190909110349p:plain

www.youtube.com



 

 

※この記事にはGifが多く使われています。軽量化していますが読み込みまで時間がかかる恐れがあります。

 

 

どんなアセット?

これはオブジェクトやTextMeshProをディゾルブさせるアセットです。
ディゾルブとは融解を意味し、オブジェクトの消滅や出現を表現できます。

モバイルやVR、LWRPにも対応しています。

f:id:Raspberly:20190909003621g:plain

f:id:Raspberly:20190909020523p:plain

f:id:Raspberly:20190909025203p:plain







 

 

サンプルシーンの確認

DemoとExampleが用意されています。

Demo

Demoシーンは別途インポートする必要があります。

f:id:Raspberly:20190904213430p:plain

f:id:Raspberly:20190904213645p:plain

f:id:Raspberly:20190904214137p:plain

アセットストアのイメージでも登場しているシーンを確認できます。

f:id:Raspberly:20190909003621g:plain

ちなみにUIのCanvasの設定で画面上に全て表示されません。

f:id:Raspberly:20190909003611p:plain


Sample

こちらもマスクを使ったディゾルブシーンがたくさんあります。

f:id:Raspberly:20190909032741g:plain

 

 

 

 

 

 

 

クイックスタート

付属のドキュメントに従ってとりあえず動かしてみます。
シーンを新しく作りましょう。

単純なディゾル

単純なディゾルブエフェクトから入ります。

スフィアの作成

CreateからSphereを作り、AdvancedDissolveShaderを使ったマテリアルを割り当てます。
この段階ではまだディゾルブエフェクトはでません。

f:id:Raspberly:20190908223243p:plain



マテリアルの作成

作るマテリアルはこんな感じ。シェーダーの種類はたくさんありますが、とりあえず今回は
VacuumShaders/Advanced Dissolve/Legacy Shaders/Bumped Diffuseを使います。

f:id:Raspberly:20190905225654p:plain

 

CutoutのSourceからCustom Mapを選択します。

f:id:Raspberly:20190905230930p:plain

Textureにはノイズの画像を設定します。
ノイズの画像は20種類ぐらいあるので好きなものを選びましょう。今回はD_1を使います。

f:id:Raspberly:20190905231320p:plain

これでディゾルブエフェクトがでます。
Mask/Dissolveのスライダーを動かすとシーンビューから確認できます。
テクスチャ、ブレンドマッピングモードは複数あります。

f:id:Raspberly:20190908230154g:plain

また、RenderFaceオプションで、前面だけあるいは背面だけレンダリングといったこともできます。
デフォルトだと両面レンダリングです。

f:id:Raspberly:20190908225836p:plain

 

 

動的なマスクディゾル

Planeを使って動的なディゾルブエフェクトを使うことができます。

マテリアルの設定

MaskのTypeをPlaneに変更します。

f:id:Raspberly:20190908230559p:plain

この時、描画が変になりますが仕様です。問題ありません。

f:id:Raspberly:20190908231535p:plain

動的なマスクはマテリアルエディター内にパラメータを持ちません。(一部を除く)
そのため別のスクリプトから更新してあげる必要があります。

Planeの作成

Create/3D Object/PlaneからPlaneをシーンビューに配置します。
真っ白いPlaneが出来上がりますが、少し見た目を整えます。

PlaneのMeshRendererからマテリアルを変更します。
アセットに付属しているMaskマテリアルを使いましょう。

f:id:Raspberly:20190908231916p:plain

f:id:Raspberly:20190908231843p:plain

Maskコンポーネント

シーン内に空のゲームオブジェクトを作成し、Controller_Mask_Planeコンポーネントをアタッチします。
このコンポーネントはTutorial_PlaneMask_Controllerに似ていますが、
複数のマテリアルを最大4つのマスクオブジェクトで同時に更新できます。

f:id:Raspberly:20190908232031p:plain

コンポーネントのMaterialsには、最初に作ったディゾルブ用にマテリアルを、
Plane1には先ほど作ったPlaneをそれぞれ紐づけます。

f:id:Raspberly:20190908232253p:plain

これで完成です。

Planeの位置よってディゾルブされているのがわかります。

f:id:Raspberly:20190908232645g:plain

 

ポストプロセスでもっと見た目をきれいに

PostProcessingStakを使ってディゾルブをきれいにします。

カメラの設定

カメラにPostProcessingStakc v2を設定します。

f:id:Raspberly:20190908235753p:plain
詳しくはこちら

tsubakit1.hateblo.jp

マテリアルの設定

EdgeからShapeをSmoothに、Intensityを2にします。
Shapeは好みでいいとおもいます。Intensityは値が大きければ大きいほど輝いて見えます。

f:id:Raspberly:20190908233611p:plain

これで完成です。 

f:id:Raspberly:20190909000210g:plain

Colorから色を変えることもできます。

f:id:Raspberly:20190909000242g:plain

 

Invertでマスクを反転

重要な機能としてInvertがあります。これはマスク処理を反転させる機能です。
マスクの外側にいるとディゾルブする状態マスクの内側にいるとディゾルブする状態の2つを作ることができます。

 

設定は非常に簡単です。
MaskコンポーネントのInvertにチェックを入れるだけです。
これによりマテリアルのInvertにも自動的にチェックが入ります
(というよりもマテリアルのチェックを手動で切り替えられなくなります)

f:id:Raspberly:20190909010202p:plain

試しに先ほど作ったディゾルブマテリアルを複製し、Maskコンポーネントももう一つ追加してInvertにチェックを入れます。

これでマスクの外側内側でディゾルブする対象を分けることができます。

f:id:Raspberly:20190909010432g:plain

これにより2つの世界を切り替えるといった表現も作れます。

 

 

 

 

 

 

 

実演 ユニティちゃんをディゾルブ 

ここから実践です。
ユニティちゃんをディゾルブしてみます。
アセットストアから「SDこはくちゃんズモデル」をインポートします。

 

マテリアルの設定

こはくちゃんズのマテリアルを編集します。
編集前に複製してバックアップをとっておくといいかもしれません。

f:id:Raspberly:20190909005620p:plain

基本的な設定はクイックスタートのマテリアルと一緒です。
シェーダーをVacuumShaders/Advanced Dissolve/Legacy Shaders/Bumped Diffuseに変えます。

f:id:Raspberly:20190909010816p:plain

この時、マテリアル全体が少し灰色っぽくなることがあります。
これはSurfaceInputのMainColorを真っ白にすることで解決します。

f:id:Raspberly:20190909011041p:plain

 

コンポーネントの設定

こちらもクイックスタートと同様にします。

f:id:Raspberly:20190909012059p:plain

 

あとはシーン内にユニティちゃんのプレハブを置くだけ。

f:id:Raspberly:20190909014432p:plain

これで完成です。とても簡単。
ユニティちゃんの消滅/出現エフェクトを作ることができました。

f:id:Raspberly:20190909014214g:plain



 

他の使い道

キャラクターモデルだけでなく、ステージの3Dモデルにも当然使えます。

2つの世界

こちら、「保健室+冬服」と「教室+夏服」の2つの世界をディゾルブで切り替えています。
保健室にはトーコちゃんが、教室にはマリエちゃんがいます。

f:id:Raspberly:20190909030723g:plain

f:id:Raspberly:20190909030810g:plain

InvertマテリアルInvertではないマテリアルを作り、それぞれを同じPlaneでディゾルブさせています。

教室と保健室のアセットはUTUTUYAさんのものを使わせていただいています。
少し前のほぼ半額セールの時に購入しました。

 

 

 

アセットによっては細かい設定が必要

物によってはマテリアルのシェーダーを差し替えるだけではうまくいかない場合もあります。

例えばThe Phantom Knowladgeのユニティちゃんのように元のマテリアルが少し複雑だと、
色がやテクスチャの設定が抜け落ちることがあります。↓の場合髪の色が白になっている。

f:id:Raspberly:20190909015253p:plain

こうなると手動でいろいろと設定しなければなりません。

 

 

 

 

 

描画を切る分軽くなるのか

ディゾルブされると画面上には描画されません。
オクルージョンカリングのように、軽くなっているように感じますが、
実はドローコールは普通に呼ばれています。プロファイラーを見ても軽くなっていません。

なのでディゾルブしたオブジェクトは、使わないのであればSetActiveなどで非アクティブ化したほうがいいでしょう。

 

 

 

 

 

まとめ

Advanced Dissolveを使うとノンコーディングでディゾルブエフェクトをつけることができる。

設定方法はマテリアルのシェーダーを差し替えるだけ。(ケースバイケース)

ただしドローコール自体は呼ばれている。

 

 

今回はPlaneのみでしたが、BoxやSphereなど特定のメッシュに合わせてディゾルブをかけることができます。

 

 

他のアセットの紹介記事はこちら↓

raspberly.hateblo.jp

 

 

 

 

他間違っている箇所、わかりにくい所がありましたらコメントにお願いします。

 

© Unity Technologies Japan/UCL
この記事に含まれている画像はユニティちゃんライセンス条項の元に提供されています