mushroom log

不完全勉強メモ

カスタムマスクで演出する(力技回答)

Discordチャンネル回答用。結果的にだいぶ脳筋で解決することにしました。

質問内容をざっくりいうと、以下のような遷移エフェクトのマスクを作りたいがどうすればいいか、ということでした。ここまでにマスク画像を使った解決策を考えてみましたが、下記エフェクトでは中央の四角の枠が、正方形からスタートして長方形に変形したのち回転を交えて拡大する、という動きをしているので、マスク画像の閾値で制御する方法ではちょっと対応できないとのことでした。そこで代わりの解決策を考えてみることにしました。

f:id:noume:20201226224649g:plain

PostProcess Materialを使う

まずはMaterial DomainをPostProcessにしたポストプロセスマテリアルを作ります。ポスプロとはこれまた大雑把に言うと、レンダラーが色々計算して仕上げてきた絵に後乗せ加工する自動Photoshopみたいなやつです。詳しい説明やどのように設定するのか、といったことは公式ドキュメント読んでみてください。

f:id:noume:20201226210245p:plain

SceneTextureノードの「PostProcessInput0」のチャンネルを指定します。これがレンダラーの上げてきた完成絵です。ここに色なりテクスチャなりを合成した絵を作って、Lerpでブレンドします。

CustomDepthを使う

さてこのブレンドのマスクに何を使うか、といったところなんですが、マテリアル上だけでこねこねすると数式的なやつとか説明とかが大変になりそうなので、もっと手っ取り早い解決策を探すことにしました。で、ポスプロを使ったことで閃いた、もっと簡単な方法を説明しようと思います。

まず板をレベルに配置します。そして以下のようにレンダリング設定を変更します。

f:id:noume:20201226210746p:plain

この板に影を落としてほしくないのでついでにCast Shadowもきっておきます。

f:id:noume:20201226210850p:plain

この時点で、見た目上は全く透明な板ができあがります。

f:id:noume:20201226210945p:plain

そして、さきほどのポスプロマテリアルに次のようなノードを追加します。

f:id:noume:20201226211053p:plain

CustomDepthというのは、ざっくりいうと、指定した(上のレンダリング設定でRender CustomDepth Passにチェックを入れた)オブジェクトだけを抜き出したチャンネルを作る、マスク用に便利な機能です(もちろん詳しい話は公式ドキュメントをお読みください)。するとこの時点で先ほどのシーンが、こんな形に板部分だけ抜き取ったような絵ができあがっています。

f:id:noume:20201226211320p:plain

あとは気合で調整

この時点でお判りでしょうが、あとはこのマスク代わりの板切れをどうコントロールするかだけの問題になります。カメラを置いたその前で、スケールをかけたり回転させたり出したり消したり、といったことを通常のBPやシーケンサでちょいちょいやるだけ、ということになるので、マテリアルでUVどうこうするよりは直感的ですよね。四角いマスクだけでなく、任意の形のメッシュを準備し、CustomDepthに書き出すようにすれば、自由な形でマスキングできます。

https://twitter.com/noume_ri/status/1342889896227160064?s=20

↑ 雑に動かしてみた感じが上記。リニアなアニメしかしてないので、ちゃんとイーズ調整したらしゃきっとすると思います。

https://twitter.com/noume_ri/status/1342889896227160064?s=20

細かく言えばレンズの歪みが無視できなかったり、サンプルにあった枠がなかったり、というのがありますが、手軽さとカスタマイズ性を優先した例として挙げてみます。

 そしてもっといい解決策があれば教えてください。