
Unity上の発光表現とZepeto 3Dアイテムの発光表現について (Emission, Post Processing, HDR)
前回。
前回紹介した発光表現のいくつかを、設定方法と共に説明していきます。
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の効果が得られるようにしています。



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

左の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) レンダリングの根本的な要素です。
Post Processing (ポストプロセス) は、画像を画面に表示する前に、カメラの画像バッファにフルスクリーンのフィルターと効果を適用する処理です。
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の設定になります。

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

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

ZepetoPlayersに戻りましょう。HierarchyからZepetoPlayersを選択し、Inspectorを開きます。CameraをカスタムしたZepetoCameraCustomに変更します。この設定により、PlayしたときにGameビューで使用されるCameraは、ZepetoCameraCustomに変更されます。
ZepetoCameraCustomはデフォルトZepetoCameraと同じ設定であるため、現時点では何の変化もありません。これから環境設定やZepetoCameraCustomの設定変更とコンポーネントの追加を行い、発光させる効果を加えていきます。

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を追加します。

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

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

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

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

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

その他も有効に。
入力値の意味は以下の通りです。
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に変更します。

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


モバイルなどの実機で確認する場合、デフォルトで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テクスチャを指定しています。

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

なおHDR Colorピッカーに値を入力すると、実際には設定される値が変わる場合があります。下記のマニュアルを参照。
オブジェクトを光らせる
ここまでに光らせるオブジェクトを作成していなければ、Hierarchyからオブジェクトを追加して、さきほど設定した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で作られるエフェクトは光源ではないため、近くにあるオブジェクト(キャラクターや壁や床)を照らすことはありません。強く発光させすぎたり、過剰に使用すると、嘘くさい表現になります。

右(Light): 発光にともない顔や体が照らされる。真実の光。
次回
次回で最終です。GIを使用した発光表現とParticleを使用した表現を説明します。