見出し画像

Unity上の発光表現とZepeto 3Dアイテムの発光表現について (Emission, Post Processing, HDR)

前回。

前回紹介した発光表現のいくつかを、設定方法と共に説明していきます。

Emission

左:Emission無効、右:Emission有効
(環境の明るさを落として、より光って見えるようにしています)

直訳では"放射"とか"排出"とか。環境の明るさに左右されずに指定した発色できる、といった感じです。暗い部屋でEmissionを設定することで、相対的に光っているように見えます。

逆に環境が明るいと、あまり光っている感じになりません。また設定したオブジェクトの周りの空間や壁に滲み出るような光はなく、オブジェクトそのものが発色しているような表現になります。

どちらもEmission有効。左は周囲が明るく発光している感が弱い。
左: Environment Lighting:1.0, Environment Reflections:1.0
右: Environment Lighting:0.5, Environment Reflections:0.5

Emission設定方法

MaterialにStandardシェーダーでEmissionをチェックし、色を選択すればよいです。図の設定では、AlbedoにBA-90のテクスチャを設定し、Emissionを有効にした上で写植記号BA-90のmaskを置き、白色の部分だけemissionの効果が得られるようにしています。

EmissionはMaterialで設定
MainテクスチャとMaskテクスチャ
あとはオブジェクトにMaterialを適用するだけです

ZEPETOでのEmission

Materialに設定すればよいだけなので、World内のオブジェクトにも3DアイテムのオブジェクトにもMaterialで設定できます。3Dアイテムとして設定しWorldに持ち込んだ場合も、Worldの環境によって無効になることは基本的にありません。ただし上述の通り、明るい環境では特に光っている感じが薄くなります。

Post Processing(bloom)とHDR

Emission + HDR有効 + bloom(Intencity:10, Threthold:1)
左のBA-90はbloomがかからないようThretholdで調整。
右のBA-90はbloomの光がにじみでてて神々しい。

前回の記事で紹介したbloomはPost Processingのエフェクトの一つです。Emissionだけよりも実際に光っている感じがします。

HDRでRGB 0-1.0を超えた明るい色を指定し、Post Processingで実際の画面に描画する前にフィルターと効果をかけて光が滲んでいるように見せている、と理解すればよいかと思います。正確な説明は下記のUnityマニュアルを参照してください。

グラフィックスの内部表現で 0 ~ 1 範囲外の値を使えるようにすることは High Dynamic Range (HDR) レンダリングの根本的な要素です。

https://docs.unity3d.com/ja/2018.4/Manual/HDR.html

Post Processing (ポストプロセス) は、画像を画面に表示する前に、カメラの画像バッファにフルスクリーンのフィルターと効果を適用する処理です。

https://docs.unity3d.com/ja/2019.4/Manual/PostProcessingOverview.html

ZepetoCameraの差し替え

HDRとPost ProcessingはCameraへの設定が必要になります。

以降の設定方法は、ZEPETO公式の下記チュートリアルが完了していることを前提として説明しています。ZEPETOのWorldでは、アバターの制御を管理するコンポーネントZepetoPlayersの中でCameraを指定しているため、ZepetoPlayersオブジェクトが設置されていることが前提となります。

HierarchyのZepetoPlayersを選択しInspectorを見ると、Camera > Prefabの値に、ZepetoCameraが設定されています。これはZEPETOのPackageに含まれるZepetoCameraのprefabになります。ZEPETOのWorld環境でPlayを実行すると、GameビューのCameraはこのZepetoCameraの設定になります。

Camera > prefab に ZepetoCameraが指定されている

これから、このデフォルトのZepetoCameraをHDRやPost Processingが使えるCameraに差し替えていく作業をします。

イチからCameraを作成していくよりも、デフォルトのZepetoCameraをカスタムした方が楽なのでそうします。ZEPETOのWorld環境でPlayすると、ZepetoPlayers > ZepetoCamera > CameraParent >ZepetoCameraが生成されますので、末端のZepetoCameraをAssetsにドラッグ&ドロップしましょう。

Playして生成されたZepetoCameraをAssetsにドラッグ&ドロップ
親のZepetoCameraと間違えないこと

AssetsフォルダにZepetoCamera.prefabが生成されたら、再度Playを押してGameビューを停止して大丈夫です。その後、ZepetoCamera.prefabはリネームしておきましょう。ここではZepetoCameraCustom.prefabとしました。

ZepetoCameraCustom.prefabにリネーム

ZepetoPlayersに戻りましょう。HierarchyからZepetoPlayersを選択し、Inspectorを開きます。CameraをカスタムしたZepetoCameraCustomに変更します。この設定により、PlayしたときにGameビューで使用されるCameraは、ZepetoCameraCustomに変更されます。

ZepetoCameraCustomはデフォルトZepetoCameraと同じ設定であるため、現時点では何の変化もありません。これから環境設定やZepetoCameraCustomの設定変更とコンポーネントの追加を行い、発光させる効果を加えていきます。

ZepetoCameraからZepetoCustomCameraに変更

Post Processing (bloom)設定方法

Post Processingの環境を設定してから、bloomの効果を追加していく流れになります。まずはPost Processingの設定から。

まずは、Built-inのPost Processingのパッケージをインストールする必要があります。Window > Package Managerと開き、Post Processingを探します。見つからない場合は、上部の Packages: ********▼を Unity Registryに変更して探して下さい。チェックマークが付いてなければ未インストールですので、右下のInstallボタンからインストールします。結構時間がかかります。

画像はインストール済みの状態

続けて、Assets内のZepetoCameraCustom.prefabを選択し、Inspectorの下部からAdd Compornentして、Post-Process Layerを追加します。

ZepetoCameraCustomにPost-process Layerを追加。
(見栄えのためCameraのCompornentは縮めています)

Post Processing用のLayerを追加していきます。画面上部のLayers▼ > Edit Layers… を選択し、User Layerのどれかにpost processing用のレイヤーとして名前を入力しておきます。下記の例ではUser Layer 9 に"post-processing"という名前を入力しました。

User Layer 9 に post-processing を入力

Assets内のZepetoCameraCustom.prefabを再度選択します。Inspectorから、Post-prcess Layerのコンポーネントにある、Layerを選択します。User Layerに入力した名前が一覧に追加されていますので、それを選択します。

Layerのプルダウンに先ほど登録したLayerが追加されているので選ぶ

Hierarchyの +▼ を選択して、3D Object > Post-process Volumeを選択。SceneにPost-process Volumeを追加します。

Post-process Volumeを追加

作成したPost-process Volumeのinspectorを開き、Profileの右にあるNewを選択します。Post-process Volume Profileが設定されたことを確認したら、続けて下にあるAdd effect > Unity > Bloomを選択します。

Post-process Volume Profileを追加したのち、bloomを追加

Bloomの左側のチェックマーク、右側のOn(デフォルトのテーマではOnが濃い灰色、Offが薄い灰色になっている状態が、ONを示します。)を確認します。IntensityとThresholdを有効にして、値を入力します。Layerも忘れずにpost-processingに変更しておきます。

Layerをpost-processingに。Intensityには10, Thresholdには1を入力。
その他も有効に。

入力値の意味は以下の通りです。
Intensity: Bloomフィルタの強さ。大きいほど強い光になります。
Threshold: 指定した値よりも低い明るさのピクセルはBloom効果を除外します。

Thresholdは黒(RGB:0,0,0)を0, 白(RGB:255,255,255)を1と考えて、明るさの閾値を指定します。Thresholdには1以上の値も指定でき、後述のHDRで白以上の明るさを指定することができます。閾値を調整することで、オブジェクトの明るさの程度によって、光を滲ませたり滲ませなかったり、という設定ができます。

ここまででbloomの設定は完了しましたが、現時点ではまだどのオブジェクトも光りません。Thresholdに1を指定しており、1以上の明るさを持つMaterialを設定していないため、どのオブジェクトもBloomの対象になっていません。以降は、HDRの設定で1以上の明るさを持つMaterialを作成し、オブジェクトを光らせます。

HDR設定方法

Asset内のZepetoCameraCustom.prefabを選択するとInspectorが開きます。ここでZepetoCameraCustomの設定を変更していきます。CameraのHDRがOffに設定されているため、Use Graphic Settingsに変更します。

ZepetoCameraCustomのHDRを Off -> Use Graphics Settingsに変更

基本的にPCのデフォルトではUse HDRが有効になっていますが、念のため、Edit > Project Settings Graphicsから、Use HDRが有効になっているか確認しておきます。

Use HDRが有効になっていることを確認する。
Tierもチェックしておく。

モバイルなどの実機で確認する場合、デフォルトでUse HDRが無効であるため、有効にしておく必要があります。

iOSではUse HDRがデフォルトで無効なので、有効にしておく。
androidも同様。

これでHDRの設定は終わり。

1以上の明るさを放射するMaterial作成

HDRで1以上の明るさを指定したMaterialを作成します。Assets内で右クリックし、Create > Materialで新規Materialを作成し、Bloomなど適当な名前を付けておきます。作成したMaterialのInspectorを開き、上部のShaderからStandardシェーダーを選択します。

Albedoは表面の色やテクスチャをお好みで指定します。私は写植記号BA-90を光らせたかったので、AlbedoにはBA-90のテクスチャを指定しています。

Emissionは有効にし、発光させる部分が白、発光させたくない部分が黒のmaskテクスチャを指定しています。

Materialを設定していく

EmissionのColorですが、選択するとHDR Colorピッカーで色を入力できます。CameraのHDRを有効にし、HDRが使える環境になっていると、ここでIntensityが入力可能になり、白(255,255,255)よりも明るい色を指定できます。ここで大きい値を設定して、先のbloomで設定したThresholdの値を超える明るさを放射することでbloomのフィルタを通過して効果が適用され、光が滲み出ている効果がでます。

HDR Colorピッカーで明るい色を指定する

なおHDR Colorピッカーに値を入力すると、実際には設定される値が変わる場合があります。下記のマニュアルを参照。

オブジェクトを光らせる

ここまでに光らせるオブジェクトを作成していなければ、Hierarchyからオブジェクトを追加して、さきほど設定したMaterialを適用してください。

適当にオブジェクトを作ってMaterialを適用

光ることが確認出来たら、Post processing VolumeのIntensityやThresholdを変えてみたり、MaterialのEmissionのHDR Colorを変更してみたりするなど、色々と遊んで理解を深めるのも良いかと思います。

月がきれいですね

ZEPETOでのPost ProcessingとHDR

ここまでPost ProcessingとHDRを設定して気付いたかと思いますが、Post Processingの設定は、パッケージの導入、CameraへのPost Processing Layerの追加、SceneへのPost Processing Volumeの追加が必要です。HDRの設定は、Cameraの設定とGraphicsの設定が必要です。これらはWorld側でしか設定できません。3DアイテムのMaterialにEmissionやHDRを設定しても、持ち込んだWorldにこれらの設定が都合よく適用されているとは限りません。

このため、Post ProcessingやHDRでは、World内のオブジェクトを光らせることは出来ますが、3Dアイテムを光らせることは基本出来ないと考えてよいでしょう。

また、bloomで作られるエフェクトは光源ではないため、近くにあるオブジェクト(キャラクターや壁や床)を照らすことはありません。強く発光させすぎたり、過剰に使用すると、嘘くさい表現になります。

左(bloom): 強く発光しているように見えるのに顔や体に光が届いていない。偽りの光。
右(Light): 発光にともない顔や体が照らされる。真実の光。

次回

次回で最終です。GIを使用した発光表現とParticleを使用した表現を説明します。

この記事が参加している募集

メタバースやってます

この記事が気に入ったらサポートをしてみませんか?