自作Shaderを使わずに暗転をする

こんばんは。ハツェです。 今回の記事は、VRChat Advent Calendar 2019のうちの一つとなっています。 昨日の記事は、かやのみちゃさんのAmplify Shader Editorに入門してみたでした！
今回紹介するのは、難しいShaderのあれこれを使わずにポストエフェクトで暗転ギミックを作ろうという話です。
目次

何を使うのか

今回使っていくのは、皆さんおなじみPost Processing Stack v2です。
誰でも手軽にポストエフェクト出来るので最強ですよねー
今回はそのPost Processing Stack v2（以降PPS）を使って暗転を作っていきます。 イベントなどで、場面転換する際には必須だと思いますので、良ければ参考にしてみてください。 そんなわけでつらつらと書いていきます。一応PPSを使ったことがない人でも分かるように書いていこうと思います。
今回PostProcessingの使い方については説明いたしません。詳しく知りたい方は公式のマニュアルをお読みください。

その⓪：PPSを用意する

導入方法がUnity2017とUnity2018以降で異なるので、合わせて紹介していきます。

Unity2017でPPSを使用する場合

PPSv2を使用する場合は、Unity2017.2以降のバージョンで導入してください。
まず、以下のサイトよりSource Codeをダウンロードします。バージョンは最新のもので大丈夫でしょう。 github.com
ダウンロードしたら展開後、フォルダごとAssetsの中に入れてください。そうすると自動でコンパイルが始まります。

Unity2018以降で使用する場合

Unity2018.1以降では、Package Managerという機能が追加されています。 これを用いてUnity上からインストールすることが可能となっています。
インストールの方法としては、PackageManagerを開き、PostProcessingの場所を開いてInstallのボタンを押すということだけです。

その①：PPSをシーンに適応させる

まずは、PPSの設定をします。今回はVRCSDKが導入されている状態を前提とします。（説明のために使用するUnityは2018.4.12fで行いますが、Unity2017・2018共に操作は同じです）

i. PostProcessingLayersを追加する

最初、ReferenceCamera（通常はMainCamera）にPostProcessingLayersコンポーネントを追加します。 追加した後は、下記画像のように設定してください。（PPSについては既知であるという方は独自の設定で大丈夫です）
(Unity2017で作業している場合には、PostProcessingというレイヤーを新規で作る必要があります。）

ReferenceCameraがどのカメラであるかは、VRC_SceneDescriptorから確認できます。
もし何も設定されていない場合には必ずPostProcessingLayersが付いたCameraをReferenceCameraに設定してあげてください。その設定が出来ていない場合、ワールドとしてアップロードした際にPPSが反映されません。

ii. PostProcessingVolumesを追加する

Hierarchyを右クリックして新規にPost-process Volumeを追加します。

そしたら、VolumeのレイヤーをPostProcessingにしましょう。
これは、先ほど作ったPostProcessingLayersの部分で設定したレイヤーにVolumeのレイヤーを合わせる必要があるためです。レイヤーを合わせないとPPSが適応されません。（PostProcessingLayersを独自の設定にした人は、指定したレイヤーをVolumeのレイヤーにしておきましょう）

レイヤー設定後、Is Globalにチェックを入れてNewのボタンを押してProfileを作りましょう。 そうするとProfileがシーンフォルダ内の[シーン名]_Profilesの中に作られます。
これでPPSの適応は完了です。Add effect...のボタンからBloom等のエフェクトを追加して設定するとポストエフェクトがかかるようになります。

その②：暗くするポストエフェクトを作る

ここからは、実際に暗転装置を作っていきます。さきほど作ったものはデフォルトで使うポストエフェクトという位置づけにします。

i. 暗転用のVolumeを作る

まず、先ほどとは別の新たなVolumeを作り、以下のように設定しましょう。
Is Globalのチェックが外れているのと、Weightが0、Priorityが1になっていることにご注意ください。
また、Newのボタンを押して新たにProfileを作ります。Profileの名前は任意でよいです。今回はBlackoutという名前にしました。

その後、Add efect...からColor Gradingを選び、下図のように設定します。
設定するのはModeとBrightnessだけですね。

これで暗転させるためのVolume設定は出来ました。

ii. 暗転させる範囲を指定する

ワールド全体が暗転するという仕組みでも良いのですが、それでは支障が出るといった場合も少なくないと思います。そのために、PPSv2では範囲指定が可能となっています。
暗転させるための範囲指定は、VolumeについているIs TriggerのついたColliderで行えます。
Colliderの形状は問わないため、Box・Capsule・Meshなどなど、どの形状でも大丈夫です。
ColliderのSizeを調整して指定したいエリアを囲う様にColliderを配置してあげましょう。

その③：暗転を行うスイッチを作る

さて、ここまでで暗転そのものの仕組みは作れました。ここからはVRChat上で起動できるスイッチを作っていきます。

i. アニメーションを作る

まず、暗くする設定をしたVolumeを選んでAnimationを作ります。保存する場所は任意で大丈夫です。今回、名前はStartにしました。

そしたら、２秒のところでVolumeのWeightが1になるようにキーフレームを打ちます。

キーフレームを入れた後、左上のアニメーションファイルの名前の部分をクリックしてCreate New Clip...を選択して新たにアニメーションファイルを作成します。ここではEndという名前にしました。

新しいアニメーションファイル作成後、０秒にWeightが1、２秒にWeightが0のキーフレームをそれぞれ打ちます。
そしたら、保存してあるアニメーションファイルをクリックしてそれぞれLoop Timeのチェックを外します。

ii. Animatorを作る

さて、ここからはAnimatorでアニメーション制御を作ります。Animatorに慣れていない人はここで少し苦労するかもしれませんがゆっくりやっていきましょう。
ここまで正しくできていたら暗転用のVolumeを選択してAnimatorタブを開くと以下のようになっているはずです。
AnimatorはUnity左上から、Window>Animation>Animatorで開けます。
そしたら、Animator内で右クリックした後、Crate StateからEmptyを選択します。

作成したNew Stateを右クリックしてSet as layer Default Stateをクリックします。
次に、同じNew Stateを右クリックしてMake Transitionをクリックし、後にStartをクリックして矢印を繋げます。

そしたら、Animator左上部のParametersをクリックし、その右にある+マークを押してTriggerを選択してトリガーを二つ作ります。名前はそれぞれOnとOffにしました。


その後、New State→Startの矢印をクリックして、以下の画像の通りに設定します。
Has Exit Timeのチェックを外すのと、Conditionsの+マークを押してOnにすることの二つですね。

そしたら今度はEnd→Startへの矢印を作成し、上の画像と同じように設定します。
最後、Start→Endへの矢印を作成し、以下のように設定します。今度はOnではなくOffですね。

お疲れ様です！これでAnimatorの設定は完了しました。

iii. VRC_Triggerの設定をする

長くなってきた暗転作業もいよいよ終わりに近づいてきました。最後はスイッチそのものを作成しましょう。
今回は簡単に小さなCubeをスイッチ替わりにしようと思います。
まず、スイッチにしたいオブジェクト（今回はCube）にVRC_Triggerをつけます。
そしたら、On IntaractでAlways Unbufferedにしましょう。以下のようにしてください。

そしたら、Actionの右下にある+マークからBasic Events>Animation Triggerを選びます。

Receiversに暗くする仕組みを作ったVolumeをドラック&ドロップし、一番下のTriggerの名前をOnにします。大文字小文字も読み取られるため、必ずAnimatorでつけたOnと全く同じ名前になるようにしてください。

そしたら、今度はこのスイッチのVRC_Triggerの下にあるのをCustomにしてAddのボタンを押します。

そしたら以下の赤線部を変更しましょう。

最後に、On Intaract側のトリガーのActionを開き、右下の＋マークからBasic Events>Active Custom Triggerを選択してReceiverの部分に今のスイッチをドラック&ドロップします。

これで全ての設定が完了しました。

完成！

これでアップロードすると、指定した領域内でスイッチをインタラクトすると、シームレスに暗転して元に戻るはずです。 もし何かうまくいかないなどの質問がありましたら、この記事のコメントもやツイッターで質問もらえば回答します。

明日の記事は、タービンさんの記事になります！お楽しみに！