[URP の落とし穴] Unity は URP で RenderTexture を使用して、UI で透明なカメラ背景を持つポストプロセス シーンをレンダリングします。

ヒント:記事作成後に目次を自動生成することもできますが、生成方法については右のヘルプを参照してください。


序文

最近、プロジェクトの開発に Unity の URP ユニバーサル パイプラインを使用するという要件があり、そのシナリオの 1 つは UI に動的キャラクター モデルを表示する必要があり、背景は透明でした。最初にこの要件を聞いたときは、非常に単純なことのように思えましたが、Rendertexture を使用してカメラ視点の内容を通常のパイプラインで出力し、RawImage に入力することで簡単に解決できます。しかし、URP では自由度を反映するために、プログラマブル パイプライン (SRP) の、Unity は正式に RenderTexture を使用して PostProcessing のレンダリングを行うと、デフォルトですべてのアルファ値が 1 を返します。簡単に説明すると、PostProcessing では Rendertexture で半透明のチャネルが表示されなくなったためです。


1. 実装アイデア

多くの情報を検索した結果、いくつかの解決策も見つかりました。個人的にテストした結果、それらはすべて役に立たなかったものの、次のようなアイデアも得られました。アルファを出力するには、2 台のカメラを使用します。1 台のカメラは PostProcessing レンダリングをオンにし、1 台のカメラは PostProcessing をオンにしません。Shader を使用して、2 台のカメラで出力された RenderTexture のピクセルを乗算してフィルタリングします。 PostProcessingでレンダーテクスチャの背景を描画し、最後に出力について説明します UI上に画像を表示することができます。

2. 開発環境

Unity2021.3.13f1c1
URP12.1.7
増幅シェーダー エディター v1.9.1.5

3. 利用手順

1. ピクセルフュージョン用のシェーダーを作成する

シェーダーを作成するには、ASE サードパーティ製シェーダー ビジュアル エディターを選択しました (シェーダーの初心者に適した簡単な操作)。

  1. UI 上に表示したいので、UI のデフォルト シェーダーを作成します。 Create/Amplify Shader/UI/Default;
  2. 原理は比較的単純なのでここでは詳しく説明しませんが、以下の図を参照してください。ここに画像の説明を挿入します

2. レンダリング カメラを作成する

  • 基本的なカメラを作成します。このカメラは後処理効果をレンダリングしません。背景タイプは単色に設定され、色のアルファは 0 に設定されます。ここに画像の説明を挿入します
  • 後処理カメラを作成し、背景タイプを単色に設定し、色のアルファを 0 に設定します。ここに画像の説明を挿入します

3. レンダーテクスチャの作成

前の手順で 2 つのカメラの Rendertexture を作成して、カメラによってレンダリングされたコンテンツを出力し、それをカメラの OutputTexture にドラッグし、両方の Rendertexture の Colorfomat を R16G16B16A16_SFLOAT に変更します。

4. Rawimageを素材としてレンダリングする

  • 画像をブレンドするシェーダーを作成するここに画像の説明を挿入します

  • 素材ボールを RawImage にドラッグすることについての話
    ここに画像の説明を挿入します

5.エフェクト表示(UI背景が黄色)

  • [基本的なレンダーテクスチャのみが表示され、透明な背景は通常ですが、後処理効果はありません]

PostProcessなしですが、透明な背景は正常です

  • [PostProcessingのRendertextureのみが表示され、PostProcessing効果は正常ですが、背景の透明化が失敗します]ここに画像の説明を挿入します
  • [2 つのレンダーテクスチャを融合した最終的な効果]ここに画像の説明を挿入します

要約する

URP はパフォーマンスとパフォーマンスに重点を置いた Unity のレンダリング パイプラインです。ますます多くのシナリオで使用されていますが、ますます多くの落とし穴も明らかにされています。Unity の公式ニュースによると、URP は後続のバージョンでデフォルトのレンダリング パイプラインとして使用される予定です。私たちもゆっくりとUnityと仲良くなって開発していきます。

おすすめ

転載: blog.csdn.net/weixin_43559607/article/details/132354524