Unity６でUIイメージのGlow（発光）効果を実現する手順

この技術資料は、Unityを使用してUIイメージやオブジェクトにGlow（発光）効果を適用する方法について解説します。具体的には、Global VolumeとBloomエフェクトの利用を通じて、簡単にGlow効果をシーンに実装します。

必要な準備

  • Unityのバージョン: Unity 6（またはそれ以降）
  • Render Pipeline: Universal Render Pipeline（URP）
  • プロジェクト設定:
    • Universal Render Pipeline（URP）の設定が既に適用されている必要があります。

手順

1. Canvas設定の確認

  1. Canvasを選択。
    • Render Modeを「Screen Space – Camera」に設定。
    • Render CameraにMain Cameraを指定。
    • Canvas Scalerの設定が適切であることを確認（通常は「Constant Pixel Size」）。

2. UIイメージのGlow設定

  1. 対象のUIイメージにEmissionExampleスクリプトをアタッチ。
  2. スクリプトのプロパティを調整:
    • Glow Color: 発光の色を設定（例: 緑）。
    • Glow Intensity: 発光の強度を設定（例: 2）。
using UnityEngine;
using UnityEngine.UI;

public class EmissionExample : MonoBehaviour
{
    public Color glowColor = new Color(1.0f, 1.0f, 0.5f); // 発光色
    public float glowIntensity = 2.0f; // 発光の強度

    void Start()
    {
        // マテリアルの発光色を設定
        GetComponent<Image>().material.SetColor("_EmissionColor", glowColor * glowIntensity);
    }
}

3. Global Volumeの追加

  1. GameObject > Volume > Global Volumeを作成。（Unity6では最初からあります）
  2. InspectorでGlobal Volumeを選択。
  3. Volume Profileを作成するため、Newをクリック。

4. Bloomエフェクトの設定

  1. Volume ProfileにBloomオーバーライドを追加。
    • Add Overrideボタンをクリック。
    • 「Post-processing」カテゴリからBloomを選択。
  2. Bloom設定:
    • Threshold: 0.9（発光のしきい値）。
    • Intensity: 2（発光の強度）。

確認と調整

  • GameビューでGlow効果が適用されていることを確認。
  • 必要に応じて、Bloomのしきい値や強度を調整して理想的なGlow効果を実現します。

注意事項

  1. URPが有効であることを確認してください。URPが無効の場合、Bloomエフェクトが正しく動作しません。
  2. Shader設定: UIイメージのマテリアルでURP対応のShaderを使用する必要があります。

補足情報

Glow効果は、特に視覚的なインパクトを強調する際に効果的です。UIの演出やゲーム内の重要なオブジェクトの強調に適用することを推奨します。

上記手順をもとに、シーン全体または特定のオブジェクトにGlow効果を適用できます。

MainCameraで3D描画とUIを共用する場合の影響と対策

1 影響

1.1 描画順

  • 3DオブジェクトとUIが同じカメラに統合されるため、描画順序の管理が重要。
  • 対策: Sorting LayerとOrder in Layerを使用してUIを手前に設定。

1.2 ポストプロセス効果

  • カメラに適用されるエフェクトがUIにも影響。
  • 対策:
    • UI専用レイヤーを設定し、ポストプロセス効果を除外。
    • 必要に応じて、UI専用のカメラを追加。

1.3 クリッピングプレーン

  • UIがカメラのクリッピング範囲外にあると描画されない。
  • 対策: CanvasのPlane Distanceを調整。

2 推奨構成

ケース1: UIが3Dオブジェクトと統合される場合

  • CanvasのRender ModeをScreen Space - Cameraに設定。
  • Sorting Layerで描画順を管理。
  • 必要ならポストプロセス効果を制御。

ケース2: UIと3Dを分離したい場合

  • UI専用のカメラを作成。
  • CanvasをOverlayモードに設定。

注意点と推奨事項

  1. ポストプロセス制御:
    • UIに不要なエフェクトがかかる場合はレイヤーで除外。
  2. クリッピング範囲の確認:
    • UIが見えない場合、クリッピング範囲を再調整。
  3. Canvas設定の最適化:
    • プロジェクトに応じて適切なRender Modeを選択。

まとめ

  • Glow効果の適用には、Global Volume と Bloom エフェクトが有効。
  • CanvasのRender Modeは、プロジェクト要件やUIと3Dオブジェクトの関係性を考慮して選択。
  • MainCameraを共有する場合、描画順序やポストプロセス効果の影響を管理する必要がある。

レイヤーを分けて影響範囲を切り分ける具体的な手順

  • 3DオブジェクトとUIを異なるレイヤーで管理し、ポストプロセス効果や描画の影響を制御。
  • 必要に応じて、専用のカメラを使ってさらに分離。

手順

1. レイヤーの設定

  1. 新しいレイヤーを作成
    • メニューバーで「Edit > Project Settings」を開く。
  2. Tags and Layersを選択。
    • 「User Layer」の空欄に、例えば「3DObjects」「UI」といった名前を入力して新しいレイヤーを追加。
  3. オブジェクトにレイヤーを割り当てる
    • 3Dオブジェクトを選択し、InspectorのLayerから「3DObjects」を選択。
    • UI（CanvasやUI要素）を選択し、同じく「UI」を選択。

2. カメラの設定

  1. カメラの複製（オプション）
    • MainCamera を複製して新しいカメラを作成し、名前を例えば「UICamera」に変更。
  2. レイヤーマスクの設定
    • MainCamera:
      • InspectorのCulling Maskを「3DObjects」のみに設定。
    • UICamera（または既存のカメラを使う場合はそのカメラ）:
      • InspectorのCulling Maskを「UI」のみに設定。

3. ポストプロセス効果の制御

  1. Volume（グローバル設定）をレイヤーに分ける
    • Global Volume（ポストプロセス用オブジェクト）を追加し、それを「3DObjects」専用に設定。
    • Inspectorの「Volume」セクションでLayer Maskを「3DObjects」のみに設定。
    • UI用にはポストプロセスを無効化したり、専用のVolumeを設定可能。
  2. Bloomや他のエフェクトを適用
    • 3Dオブジェクト用のVolumeで必要なポストプロセス（例: Bloom、Depth of Field）を追加。
    • UI用のVolumeでは、エフェクトを除外またはカスタマイズ。

4. 描画順序の調整

  1. カメラの描画順を設定
    • UICamera を選択し、Inspectorの「Depth」を MainCamera より大きな値に設定（例: MainCameraが 0 の場合、UICameraは 1 に設定）。
    • Depthが大きいほど後に描画される。
  2. Clear Flagsの設定
    • MainCamera:
      • Clear Flags を「Skybox」または「Solid Color」に設定。
    • UICamera:
      • Clear Flags を「Depth Only」に設定し、背景のクリアをスキップ。

UnityのURP (Universal Render Pipeline) では、従来の「Depth」プロパティが存在しないため、異なる方法でカメラの描画順序を管理します。URPでは、カメラの「**Stacking（スタッキング）」機能を使用して、複数のカメラを統合的に扱います。以下に具体的な手順を説明します。

URPでのカメラの描画順序管理

1. カメラの「Base」と「Overlay」の設定

URPでは、カメラはBaseカメラとOverlayカメラに分けられます。

Baseカメラ

  • メインとなる描画処理を行うカメラです。
  • 通常、3Dオブジェクトの描画を担当します。

Overlayカメラ

  • Baseカメラの上に描画される追加のカメラです。
  • 通常、UIやエフェクトの描画を担当します。

2. Baseカメラの設定

  1. MainCamera（または3D用のカメラ）を選択。
  2. Inspectorで以下を設定：
  • Render Type を Base に設定。
  • Culling Mask で「3DObjects」レイヤーを選択。

3. Overlayカメラの設定

  1. UI用のカメラ（例: UICamera）を作成。
  2. Inspectorで以下を設定：
  • Render Type を Overlay に設定。
  • Culling Mask で「UI」レイヤーを選択。
  • このカメラはBaseカメラに依存して描画されます。

4. カメラスタックの設定

  1. MainCamera を選択。
  2. Inspectorの「Stack」セクションを確認。
  3. Add Cameras ボタンをクリックし、UICamera を追加。

5. 描画順序の確認

  • Baseカメラ（MainCamera）が最初に描画され、その後にOverlayカメラ（UICamera）が追加描画されます。
  • UICamera は MainCamera の上に重なる形でUIを描画します。

補足：URPにおける重要な注意点

  1. ポストプロセスエフェクト:
    • Baseカメラにポストプロセスエフェクトを設定すると、OverlayカメラのUIにも適用される場合があります。
    • 必要に応じて、ポストプロセスの設定を分離するか、特定のエフェクトを無効化します。
  2. Culling Mask:
    • カメラごとに正しいCulling Maskを設定し、不要なオブジェクトが描画されないようにします。
  3. UIのCanvas設定:
    • UICamera が使用される場合、Canvasの「Render Mode」は Screen Space - Camera に設定し、Render Camera に UICamera を指定します。

まとめ

URPでは従来の「Depth」プロパティの代わりに、「Base/Overlayカメラ」構成と「Camera Stacking」を使用して描画順序を管理します。この仕組みを活用することで、UIと3Dオブジェクトを効率的に分離し、柔軟な描画設定が可能です。

5. 最終確認と調整

  1. Gameビューで確認
    • UIが3Dオブジェクトに重ならず、意図した描画順序で表示されているか確認。
    • UIにポストプロセス効果が不要な場合、確実に適用されていないことを確認。
  2. 問題があれば調整
    • レイヤーマスクやカメラのDepth設定を微調整。
    • クリッピング範囲やCanvasのPlane Distanceを確認。

まとめ

  • レイヤーで3DオブジェクトとUIを分離することで、描画やポストプロセス効果を柔軟に制御可能。
  • 複数カメラを利用すると、完全に分離された描画環境が実現可能。
  • プロジェクトの要件に応じて設定を調整してください。

Post-Process,UI,Unity,URP

Posted by hidepon