AnyPortrait > マニュアル > URPアウトラインシェーダーの作成

URPアウトラインシェーダーの作成


1.3.5

AnyPortraitの「マテリアルライブラリ」機能を利用すると、さまざまな「シェーダ(Shader)」を適用できます。
Unityの「URP(Universal Render Pipeline)」などの他のレンダリングパイプラインもサポートしているため、さまざまなテクニックを試すことができる利点があります。
このページでは、ユーザーの要求でURP環境でキャラクターの「アウトライン」を描くテクニックを実装するプロセスについて説明します。


このページでは、URPの特徴、そしてAnyPortraitのような「Transparentマテリアル」を持つ複数のメッシュがレンダリングされるシステムについてどのように悩みながら実装したかを見ることができます。
次の説明がアウトラインやさまざまな技術を実装するのに役立つことを願っています。


このページを読む前に、次のページを先に読むことをお勧めします。
- マテリアルライブラリ
- Universal Render Pipeline
- 「Shader Graph」でマテリアルを作成




アウトラインレンダリングを実装するためのアプローチ




アウトラインシェーダを実装するさまざまな方法がありますが、ここでは透明度を比較する簡単な方法を使用します。
レンダリングされるどのピクセルが次の条件を満たす場合、そのピクセルは「アウトライン」に対応すると見なすことができます。
- レンダリングされるピクセルの色は透明でなければなりません。
- 周囲の不透明なピクセルが存在します。


上記のようにテクスチャの色をサンプリングするときに、周囲の透明度を一緒にサンプリングする方法で、アウトラインが描かれるべき部分を簡単に見つけることができます。




この手法をすぐにシェーダとして適用すると、上記のような問題に遭遇します。
左は1つのメッシュ、主に「Sprite Renderer」での輪郭の様子です。
通常、アウトラインが描かれているのがわかります。
しかし、右側の場合、つまりAnyPortraitで作成されたキャラクターに対応するシェーダを適用すると、奇妙な結果を見ることができます。
内部の各メッシュにもアウトラインが生成されてしまったのです。




AnyPortraitのように複数のメッシュがある場合は、単純にシェーダ1つでアウトラインを抽出することはできません。
この問題は、他の2Dアセットや複数のメッシュを持つ3Dキャラクターでも同じように見えることがあります。




したがって、この問題を解決する最も簡単な方法は、少し後ろに同じキャラクターを配置してレンダリングすることです。
この方法は最も直感的であり、「Post Processing」を使用しない限り、2Dと3Dの両方で普遍的に使用される方法です。


このアプローチを実施するためには、次の方法が考えられる。
1. キャラクターを複製して後ろに配置するか、最初にレンダリングするようにした後、元と同じように動かす方法
2. 「マルチパスレンダリング(Multi-Pass Rendering)」を利用して、キャラクター1つが2回レンダリングされるようにする方法


もちろん、「1」の方法は最も便利な方法です。
この方法で実装したい場合は、AnyPortraitの「同期機能」が役に立ちます。


このページでは「2」のアプローチを実装します。
キャラクターを複製しないため、CPUリソースを消費する必要はなく、同期されていない動きによって発生する問題を予防することができ、最良の選択でしょう。


残念なことは、URP のような SRP では基本レンダリングパイプラインとは異なり、マルチパスレンダリングを基本的にサポートしないということです。
したがって、URP環境では、「ステンシル(Stencil)」と「LightMode」を利用してマルチパスを再現する方法を利用します。


参考 1
私たちのテストでは、古いAndroidデバイスで「ステンシル」が動作しないことがわかりました。
現在のほとんどの機器では、ステンシルが動作すると判断されます。


参考 2
このページは「12.1.1」バージョンのURPに基づいて書かれています。
URPは、バージョンによってはコードや機能に互換性がない場合があります。




シェーダグラフを修正してアウトラインシェーダを作成




説明用に構成された例です。
URP 2D Lit」 マテリアルが適用された4つのキャラクターが配置されています。
適用されたマテリアルのシェーダを修正してアウトラインシェーダにしましょう。






キャラクターを選択して「マテリアルライブラリ」を開きます。
(1) 現在適用されているURPのマテリアルプリセットを選択します。
(2) 変更するシェーダ資産を交換します。




対象となるシェーダアセットは次のとおりです。


- プロジェクト環境が「Gamma Color Space」の場合: 「Gamma > Basic Rendering > Alpha Blend


- プロジェクト環境が「Linear Color Space」の場合: 「Linear > Basic Rendering > Alpha Blend






対象となる「シェーダグラフ」アセットをコピーして別のパスに貼り付けます。
このシェーダグラフアセットは「コード生成用」としてのみ使用される予定です。




コピーしたシェーダーグラフアセットを開きます。
(1)+ボタン」を押して「Float」タイプの属性を追加します。




(2) 追加したプロパティの名前を「LineThickness」に設定します。 (シェーダコードには「_LineThickness」と定義されています。)
(3) シェーダグラフを保存します。




(1) 再度シェーダグラフアセットを選択します。
(2) Inspectorの「View Generated Shader」ボタンを押します。
すでにコードが生成されている場合は、「Regenerate」ボタンを押してから「View Generated Shader」ボタンを押します。




スクリプトエディタが開き、シェーダグラフから生成されたシェーダコードを表示できます。
このコードを使用して新しいシェーダを作成します。
(1) Ctrl + A を押してすべてのコードを選択します。
(2) Ctrl + C を押して選択したすべてのコードをコピーします。




コピーしたシェーダコードを貼り付けるシェーダアセットを新しく作成します。
適切なパスでマウスを右クリックして「Create> Shader> Unlit Shader」をクリックして新しいシェーダーアセットを作成します。
このアセットは、シェーダグラフではなく、基本の「シェーダアセット(Shader)」でなければなりません。






作成したシェーダーアセットを開きます。
Unlit方式の簡単なシェーダコードを見ることができます。
このコードを使用するのではなく、現在のクリップボードに保存されている「シェーダグラフからコピーしたコード」をここに貼り付けて修正してみます。
(1) Ctrl + A を押してすべてのコードを選択します。
(2) Ctrl + V を押してクリップボードに保存されているコードを貼り付けます。




(1) シェーダグラフから生成された一時コードが (2) シェーダアセットに貼り付けられた結果です。
もちろん、2つのコードは完全に同じです。
それでは、シェーダーアセットを修正してみましょう。
(これからはシェーダグラフとシェーダグラフで生成されたコードはもう使用されません。)




(1) シェーダの名前を変更します。
(2) 「SubShader」の構文内に以下のコードを作成して追加します。
上記の画像で指している場所に追加するだけです。



コードの詳細な説明はそれぞれのコメントを参照してください。
上記のコードをシェーダコード内に追加すると、次の画像のようになります。




特にここで注目すべき点は、「Light Mode」と「CBUFFERの構文」です。


(1) URPは「Light Mode」を使用してレンダリングされるパスを区別します。
このプロパティを使用して、文字がレンダリングされる前にステンシルを作成するパスを最初に実行させます。
ここで作成した「Light Mode」の名前である「SetStencilPass」を覚えておきましょう。


(2) URPを含む「SRP」は、レンダリング性能を向上させるためにマテリアルの特性が似ている場合、少ないドローコールでもできるだけ多くのオブジェクトをレンダリングします。
この特性を「SRP Batcher」と呼びます。
SRP Batcher」を動作させるには、シェーダコード内のすべてのプロパティ構文、つまり「CBUFFER_START ~ CUBFFER_END」内のコードが同じである必要があります。




(1) 完成したシェーダーアセットを選択します。
(2) 問題なく作成した場合は、「SRP Batcher」属性が「compatible」であることがわかります。




キャラクターを開き、このシェーダを適用してみましょう。
(1) マテリアルライブラリを開き、このマテリアルセットの名前を変更します。
名前を変更するのは、このマテリアルセットをプリセットで保存して他のキャラクターにも簡単に適用するためです。
(2) 先ほど作成したシェーダーアセットを「Alpha Blend」項目に適用します。




前の手順で追加したプロパティ「_LineThickness」を指定してみましょう。
(1)Add Property」ボタンを押します。
(2) 名前を「_LineThickness」に設定します。
(3) タイプは「Float」に設定します。
(4) アウトラインの太さはテクスチャ座標系である「UV」を基準とするため、1以下の非常に小さい値を入力します。
まだ適切な値がわからないので、適度に小さい値を入力してください。




このマテリアルセットを適用するには、プリセットで作成して他のキャラクターにもすばやく設定できます。
(1)Register as a Preset」ボタンを押します。
(2) プリセットで追加されたものが表示されます。






Bakeを実行します。




他のキャラクターにも同じことをしなければなりませんが、保存したプリセットを使うと面倒なプロセスを減らすことができます。
別のキャラクターを開き、マテリアルライブラリを実行します。
(1)Make Material Set」ボタンを押して新しいマテリアルセットを追加します。
(2) 上記の手順で作成したアウトラインレンダリング用のプリセットを選択します。
(3)Select」ボタンを押します。




(1) 追加したマテリアルセットを選択します。
(2)Default Material」ボタンを押して「ON」状態にします。
(3) 作成したシェーダアセットが適用された状態であることを確認します。




これをすべてのキャラクターに同じように行います。




アウトラインレンダリングシェーダを作成して「Renderer Data」を設定


次のタスクは、ステンシルを認識して実際にアウトラインレンダリングになるようにすることです。
かなり複雑なステップを経るので、一つずつやってみてください。




アウトラインが描画されるオブジェクトを区別するためにレイヤーを追加します。
(1)Project Settings > Tags and Layers」を選択します。
(2)Layers」に新しいレイヤーを追加します。 ここでは、「OutlineCharacter」という名前のレイヤーを追加しました。




(1) キャラクターをすべて選択します。
(2) キャラクターのレイヤーを設定したばかりの「OutlineCharacter」に変更します。
(子オブジェクトのレイヤーも一緒に変更します。)




先のプロセスで作成したシェーダは、アウトラインになる位置にステンシルに保存する役割をします。
まだアウトラインをレンダリングするシェーダとマテリアルは作成していません。
アウトラインをレンダリングするシェーダを作成しましょう。
Projects」タブで右クリックし、「Create > Shader Graph > URP > Unlit Shader Graph」を選択して新しいシェーダグラフを作成します。






(1) 生成されたシェーダグラフを開きます。




(1)OutlineColor」という名前の「Color」プロパティと、「ZBias」という名前の「Float」プロパティを追加します。
OutlineColor」プロパティはアウトラインの色を意味し、「ZBias」はアウトラインがキャラクターより少し後ろにレンダリングされるようにします。




上記のようにシェーダグラフを作成します。
珍しい点は、「World」座標系に基づいて「ZBias」だけレンダリング位置を後方に移動させることです。
(新しいタブで開くと、元のサイズの画像を見ることができます。)




アウトラインを描く「Pass」で利用するアウトラインマテリアルを作りましょう。
(1) 新しい「マテリアル(Material)」を作成して選択します。
(2) マテリアルのシェーダを直前に作成したアウトラインシェーダに変更します。
(3)アウトラインカラー」と「ZBias」を設定します。 ここでは「ZBias」を「1」に設定しました。




次にURPの「Renderer Data」を修正するステップです。
(1) プロジェクトに適用された「Universal Render Pipeline Asset」を選択します。
(2)Renderer List」で現在適用されている「Renderer Data」が表示されます。
この「Renderer Data」の設定を修正して特殊なレンダリング「Pass」を追加してみましょう。




(1) 現在適用されている「Renderer Data」を選択します。
(2)Add Renderer Feature」ボタンを押します。




(3)Render Objects」を選択して追加します。




追加された「Render Objects」に「アウトラインに対応する領域にステンシルを設定する」の役割を与えてみましょう。
上記のように設定します。


(1) 名前を適切に設定した後、「Event」を「BeforeRenderingOpaques」に設定します。
不透明なメッシュが描画される前に、アウトライン領域にステンシルを設定するためです。
イベントの名前がほとんど似ているため、混乱しやすいので注意してください。


(2)Queue」を「Transparent」に設定し、「Layer Mask」の値を先に設定した「OutlineCharacter」に変更します。
これで、AnyPortraitキャラクターに対してこのレンダリングイベントが動作します。


(3)LightMode Tags」の「+ボタン」を押し、「SetStencilPass」と入力します。
上記で作成したシェーダのコードから登場した「SetStencilPass」がここで使われています。


(4) アウトライン領域にステンシルを設定するには、「Overrides」項目を開き、次のように設定します。
- 「Stencil」を有効にします。
- 「Value」はゼロ以外の値を指定します。 ここでは「5」に設定し、以下のStencilプロパティでも同じに設定する必要があります。
- 「Compare Function」を「Always」に設定します。
- 「Pass」を「Replace」に設定します。
アウトラインが描画される位置のステンシルには、「5」という値が書き込まれます。




同様に、「Add Render Feature」ボタンを押して、「Render Objects」をもう1つ追加します。
このレンダリングイベントは、「ステンシルを認識してアウトラインを描く」の役割を果たします。


(1) 名前を適切に設定した後、「Event」を「AfterRenderingOpaques」に設定します。
他の不透明なメッシュが描かれた後、輪郭を描きたいのです。


(2)Queue」を「Transparent」に設定し、「Layer Mask」の値を「OutlineCharacter」に設定してステンシルを認識する準備をします。


(3)Overrides」を開き、「Material」の前に作成した「アウトラインマテリアル」をここに設定します。
このレンダリングパスが動作するときは、キャラクターのマテリアルではなく、アウトラインマテリアルが代わりに使用されます。


(4)Depth」、「Write Depth」を有効にし、「Depth Test」をデフォルト値の「Less Equal」に設定します。
Depth Test」を行うと、ピクセル単位でアウトラインが他のオブジェクトに隠れるかどうかが決まります。


(5) 最初に動作するレンダリングイベントで作成されたステンシル値を認識し、その部分のみをレンダリングするように設定します。
- 「Stencil」を有効にします。
- 「Value」を前に設定した値(ここでは「5」)と同じ値に設定します。
- 「Compare Function」を「Equal」に設定します。
- 「Pass, Fail」をすべて「Keep」に設定します。




設定がすべて完了したら、上記の結果を見ることができます。
やや粗いですが、アウトラインが見えます。




アウトラインの太さを補正


アウトラインはレンダリングされますが、まだきれいではありません。
輪郭の太さやメッシュの形状を変更して結果を補正しましょう。




キャラクターを選択して「マテリアルライブラリ」を開きます。
(1)_LineThickness」の値を調整して、アウトラインの太さを適切に修正します。
この値は「UV」座標系に基づいているため、テクスチャのサイズによって適切な値の範囲が異なります。




アウトラインの太さを修正すると、かなりきれいな結果が現れました。




上記のように、メッシュに余白がほとんどないため、アウトラインが描画されるスペースがない可能性があります。
メッシュを修正する必要があります。
(可能であれば、アニメーションを作成する前に事前に修正しておくことをお勧めします。)




上記のようにアウトラインが描画されるようにメッシュを変更します。




これで、アウトラインが正常に描かれているのがわかります。




アウトラインが適切に補正された結果です。




アウトラインマテリアル設定による違い


アウトラインマテリアル」には「OutlineColor」、「ZBias」プロパティがあります。
このプロパティで結果がどのように変わるかを見てみましょう。




(1)アウトラインマテリアル」を選択します。
(2)OutlineColor」を「赤色」に変更してみました。
(3) アウトラインの色が「赤色」に変わることがわかります。




次に「ZBias」による結果です。
ZBias」値が小さすぎると、アウトラインがキャラクターのメッシュに近いところに描画されます。
この場合には、キャラクター内部のメッシュ間でも現れる問題が発生します。


ZBias」値が大きすぎる場合、アウトラインはキャラクターメッシュから遠い距離の後ろに描画されます。
この場合、輪郭がキャラクターの間に現れない問題が発生します。


実際にキャラクターを配置してみて、「ZBias」を適切に設定してください。




アウトラインは不透明なマテリアルで、Z位置に基づいてレンダリングするかどうかを決定します。
この特性は、他のメッシュと同様にレンダリングされた場合でも、アウトラインが常に非表示になる、または常に表示される問題を回避する利点があります。




しかし、他のオブジェクトのZ位置がキャラクターに非常に近い場合、「キャラクターは見えますが、アウトラインは見えない状態」があるかもしれません。
キャラクターとオブジェクトのZ位置を適切に指定することをお勧めします。




レンダリングプロセス


「Multi-Pass」レンダリング手法は、レンダリングパフォーマンスを大幅に低下させる問題があります。
ただし、URPを含む「SRPの最適化機能」(SRP Batcher)が正常に動作する場合は、その負担を少し減らすことができます。
レンダリングがどのように処理されるかを詳しく見てみましょう。




Unityの「Frame Debugger」を実行します。
(1) アウトラインを含むURPのレンダリングプロセスを見ることができます。
(2) ステンシルの設定処理です。 1回の「SRP Batch」しか記録されていないことがわかります。
(3) ステンシルを認識して輪郭を描く過程です。 同様に、1回の「SRP Batch」が記録されました。
(4) キャラクターメッシュが実際に描かれる過程です。


SRP Batcher」が動作している場合、ステンシルの設定とアウトラインの描画プロセスは、合計2回の「SRP Batch」のみで動作します。
描画回数が多くないだけに最適化だけがうまくいけば、レンダリング性能に対する負担が大きくないことがわかります。




上の画像はレンダリングプロセスを1つずつ示しています。
1. ステンシルを設定する段階では 1 回のレンダリング過程を経ますが実際に描かれることはありません。
2. すべてのキャラクターの輪郭が一度に描かれます。
3. 数回のレンダリングを経てキャラクターのレンダリングが完了します。