Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What is going on with this article?
@sudare222

【VRChat】PostProcessingを使ってワールドをより良くする

概要

「Lightingもある程度理解したし、(具体的になにすればいいか分かんないけど)なんかもっとワールドいい感じにしてー」みたいなのありますよね。私にはありました。
このPost-processingを使えば、より良い絵作りができると思います。完全に理解してオシャンティーなワールドを作りましょう。

解説について

・一応VRChatのワールド向けに書いていますが、それ以外でも使えると思います。
・今回の記事ではBloomとColor Gradingについて解説します。

環境

・Unity2018.4.20f1を使用
・VRCSDK2-2020.11.16.12.43_Publicを使用
・PostProcessingStack V2を使用

Post Processingってなに?

Post-processing(ポストプロセス)とはカメラの画像にフィルターとかエフェクトを適用する処理のことです。取り合えず、(適切に)使ったらなんかよりいい感じの絵になるやつだと思っておいてください。ただし、掛け過ぎると目に悪くなるので注意してください。詳しくはこれ読んで。
※以下からPost-processingのことを「PPS」と略します。

↑ これが


↑ PPS掛けるとこうなる(分かりやすくするためにキツめに掛けています)

1. PPSv2の導入方法

  1. Window → Package Managerを選択し、開きます。

  2. 導入可能なパッケージの一覧が表示されます。その中から「PostProcessingStack」を見つけてインストールを行います。

  3. 「PostProcessingStack」の横にチェックマークがついていれば、PPSの導入は完了です。

2. PPSを適用する前の準備

普通にめんどくさいので、ご機嫌がいい時にやりましょう。3ステップあり、遅くても20分も掛からないと思います。

2-1. レイヤーの設定を行う

Edit → ProjectSettings → Tags and Layersを選択し開きます。
もしくは適当なオブジェクトのInspectorにあるLayerをクリックし、AddLayerをクリックでもできます。
image.png

Unity2018では標準で「PostProcessing」というレイヤーがあるのでそれを使うのもありですし、自分で新たに作るのでもどちらでもOKです。今回は標準で用意されている「PostProcessing」のレイヤーを使用します。

2-2. MainCameraの設定を行う

Main Cameraをクリックし、AddComponent → Post-process Layerを追加します。
image.png

先ほど追加したPost-process Layerの設定を行います。TriggerにはMain Cameraを、Layerには先ほど設定したレイヤーを設定します。今回の場合だと「PostProcessing」というレイヤーを設定します。
image.png

次にPost-process Layerを設定したカメラ(今回だとMainCamera)をVRC World PrefabのReference Cameraに設定します。
image.png

2-3. 空のオブジェクトを作る

次にHierarchyのCreate → Create Emptyで空っぽのオブジェクトを作成します。名前は分かりやすく「PPS」とでも名付けておきましょう。
image.png

先ほど「PPS」と名付け追加した空のオブジェクトをクリックし、AddComponent → Post-process Volumeを追加します。
image.png

追加をしたら「Post-process Volume」の設定を行います。
まず、Is Globalにチェックを入れます。これにチェックを入れることでワールド全体にエフェクトが掛かります。逆に「ワールド全体に掛けたくない!」「一部の部屋にだけ掛けたい!」といった場合はチェックは外しましょう。PPSの切り替えやワールドの一部にだけ掛ける方法は後述します。
次にProfileの横にあるNewをクリックします。そうすることでProfileが新たに作成されます。このProfileを使って各種エフェクトの設定を行っていきます。
image.png

そして最後に、このPost-process Volumeを追加したオブジェクトのLayerを 2-1レイヤーの設定を行う で追加したレイヤーに設定します。(今回だと「PostProcessing」というレイヤー)
image.png

これでめんどくさい各種設定が終わりました!!

3.画面にエフェクトを掛ける

3-1. まず初めに

これからワクワクのPPSを使って画面にエフェクトを掛けていこうと思います。サンプルとして私のワールドで見ていこうと思います。下の図はPPSを一切掛けていない素の状態です。

Post-process VolumeのAdd effectをクリックしてください。すると「なんのエフェクト追加すんの?」と聞かれるので選択しましょう。まずはBloomを選択したいと思います。
image.png

選択をすると以下の様なものが出ると思います。
今回はさらにColor Gradingというものも使用するのでもう一度Bloomの項目の下にあるAdd effectをクリックして同様に追加します。
image.png

今回は具体的な数値などについては省きます。めんどくさいので……
Bloomについて簡単に説明すると「明るい部分をより光らせて、強調する」機能だとふんわり思ってもらえればいいと思います。
Color Gradingは色調補正をする機能だと思ってください。

3-2. Bloomってなに?

主に弄るであろうBloomの設定について雑に説明すると
Intensityは「Bloomの強さ」
Thresholdは「どの程度の明るさであるならばエフェクトを掛けるのか」
Diffusionは「光のにじむ強さ」

なのでこんな感じで数値を極端に弄ると……
image.png

こうなる↓(極端な例なのでマネしないで)
image.png
VRで入ると目が痛すぎて大変なことになるのであまりにも強くするのはやめときましょう。

自己発光マテリアルを使用した表現

上の図を見ると「極端に光っているところとそうでないところがあるけど、何が違うの?」となる方がいる思いますが、これはPPSの設定の違いではなく、マテリアルの設定の違いです。間接照明の表現だったり、スポットライトの表現に使えると思います。
(左側Bloomなし / 右側Bloomあり)
image.png

この光の表現を行うには自己発光マテリアルが必要になります。
設定は簡単で、まずはStandardシェーダーのマテリアルを作成します。そしてEmissionにチェックを入れれば自己発光マテリアルの完成です。
image.png

発光する色を指定したい場合はEmission下のColorを、発光する強さ変えたい場合はIntensityを弄りましょう。
自己発光マテリアルの発光度合い(強さ)だけを強くしたい場合は、Bloom側のIntensityを強くするのではなく、自己発光マテリアル側のIntensityを調整することをおすすめします。
Global Illuminationは通常のライトと同様でRealtimeとBakedがあり、ライティングが分かる方ならこの説明で分かる思います。分からない方は軽量化のためBakedにしちゃいましょう。
image.png

3-3. Color Gradingってなに?

Color Gradingは画面の色調補正をする機能です。
Color Gradingは弄れば多少分かると思うのでさらに雑に説明すると
Colorf Flterは「設定した色を画面全体に掛ける」
Saturationは「彩度の調整」
Contrastはそのまんま「コントラストの調整」
Post-exposure(UV)は「画面の明るさの調整」
で値をマイナス方向へ弄れば、睡眠ワールドのナイトモードとして使えると思います。

なのでこんな感じで数値を極端に弄ると……
image.png

こうなる↓
image.png

こちらもあんまり極端に弄ると目に悪くなるので気をつけてください。

3-4. 参考例

私がVRChatで公開している「SleepSoundHouse」のPPSの設定例を示します。あくまで参考例ですので、自分で色々試行錯誤してみてください。これが正しいわけではないです。多分もっといい設定がある……

image.png

(左側PPSなし/右側PPSあり)
PPS1.jpg

Bloomで間接照明やライトの光を軽く強調させ、Color Gradingで薄くオレンジ色の色調にしています。

以上でPPS(BloomとColor Grading)の基本的説明は以上になります。PPSには他にも様々なエフェクトやフィルターがありますが、VRでは非推奨・非対応なものがほとんどなので、使う機会はないと思います。
PPSを理解して、ワールドに設定するとめちゃくちゃ雰囲気がよくなるので是非覚えてくださいねー。

4.ワールド内で複数のPPSを使い分けたい・切り替えたい

ここからは応用編です。
VRChatのワールドでボタンを押すことでナイトモードが起動したり、違う部屋に移動すると掛かっているPPSが違うことがあると思います。ここからはその導入方法について書こうと思います。

⚠注意点

PPSの各種設定は各オブジェクトごとに設定されているのではなく、あくまでもProfileで管理・設定されているので複数の違うPPSを掛ける場合はその数ごとにProfileを作る必要があります。なので、さらに新しく違う効果のPPSを作る場合はProfileも新たに作成してください。
image.png

4-1. PPSのON/OFFをする

PPSのON/OFFをするのに特に難しいことは必要なく、原理としてはミラーのON/OFFと全く一緒です。説明2-3の空のオブジェクトを作る で作成したPost-process Volumeを追加したオブジェクトをVRC_TriggerのSetGameObjectActiveでオンオフするだけです。何もPPS側で弄る必要はありません。VRC_Triggerの使い方については自分で調べてください。

4-2. ワールド内で複数のPPSを同時に使い分ける

同じワールドで部屋ごとに違うPPSが使われていることがあると思います。ここではその導入方法を説明します。
初めに使い分けたいPPSのIs Globalのチェックを外し、Add ComponentからColliderをアタッチします。Colliderの形はなんでもOKです。
このCollider内にカメラが入るとそのPPSが適応されます。
BlendDistanceを設定することで距離に応じた強さでPPSが適応されます。

しかし、このままだとアタッチしたコライダーが通常通り動作し、衝突してしまうので、「部屋に入れなーい」といった状況になります。次に、そうならないための設定を行います。
Edit → ProjectSettings → Physics → Layer Collision Matrix を開きます。そしてPPSのコライダーが衝突しないように、Post-process Volumeが追加されているオブジェクトのレイヤーのチェックを外します。(今回は「PostProcessing」というレイヤー)とりあえず、以下の様に全部外していいと思います。
image.png
以上で設定は完了です。
下のGIFを見てもらうとカメラがCollider内に入った時にだけ、PPSが有効化されていることが分かると思います。
Videotogif.gif

ちょっとした補足

もしかするとUnityのSceneでPPSが適応された結果が見えない場合があるかもしれませんが、その場合はScene上部にある風景画(?)のアイコン横の▼をクリックしてPost Processingsにチェックが入っているか確認してください。
image.png

参考記事

Unity ルックデヴ講座 Post Processing Stack v2編
UnityDocumentation Emission

1
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
1
Help us understand the problem. What is going on with this article?