ステップ2 - ステンシルを適用する¶
このステップでは、レンダーパスと Stencil ノードを使用して、ContactsList ノードの選択された部分のみを表示します。
レンダーパスを使用して、最初に Stencil ノードの形状をステンシルバッファに書き込みます。次に、ステンシルテストを使用して、Stencil ノードがカバーし、ステンシルバッファに書き込んだ ContactsList ノードの部分のみを画面に描画します。
ステンシルバッファは、現在のフレームバッファ内の画像であり、Kanzi がレンダリングするピクセルを制御するために使用できます。レンダーパスを使用して、ステンシルバッファの値に応じて、コンテンツ内の特定のピクセルを破棄またはレンダリングします。この方法で、ステンシルとして使用するノードの形状にレンダリング領域を制限できます。ノードの形状はステンシルの隙間として機能し、コンテンツのどの部分が表示されるかを決定します。
ステンシルを適用するには、
Library > Rendering Alt を押しながら右クリック Render Pass Prefabs で、Group Render Pass を選択し、Stencil Render Pass と名付けます。
Group Render Pass を使用して、コンテンツにステンシルを適用するレンダーパスを収集します。
Library > Rendering > Render Pass Prefabs > Stencil Render Pass で Clear Render Pass を作成し、Properties で Clear Stencil プロパティを追加し、0 に設定します。これにより、ステンシルバッファ内のすべてのピクセルに値 0 を書き込むことでステンシルバッファをクリアします。この手順では後でステンシルバッファを使用して、Stencil ノードの形状にレンダリング領域を制限します。
Node Tree で RootPage > Viewport 2D ノードを選択し、Properties で Render Pass Prefab プロパティを Stencil Render Pass に設定します。
この方法で、Kanzi を設定して、Viewport 2D ノードを Stencil Render Pass を使用してレンダリングします。
Stencil Render Pass はまだ画面に何も描画しないため、Preview では Viewport 2D ノードが空です。
Stencil ノードの形状をステンシルバッファに書き込む:
Library > Rendering > Render Pass Prefabs > Stencil Render Pass の中に Draw Objects Render Pass を作成し、Draw Stencil と名付け、Properties で Object Source プロパティを追加し、それを Stencil Filter Tag Filter に設定します。
Object Source プロパティを使用して、Draw Objects Render Pass にレンダリングしたいノードのみを渡します。
ここで、Stencil Render Pass を設定して、Stencil ノードのみをレンダリングします。
Library > Rendering > Render Pass Prefabs > Stencil Render Pass で Pipeline State Render Pass を作成し、Stencil Write と名付け、Draw Stencil レンダーパスを Stencil Write レンダーパスにドラッグします。
このレンダーパスを使用して、ステンシルバッファに書き込みます。
Library > Rendering > Render Pass Prefabs > Stencil Render Pass で Stencil Write を選択し、Properties で追加して設定します。
Color Write Mode から None へ
この方法で、Stencil ノードを見えなくします。
Depth Write Enabled を無効にする
この方法で、Draw Stencil レンダーパスが Stencil ノードをデプスバッファに書き込むのを防ぎます。
Stencil Test Function から Always へ
このプロパティを使用して、ステンシルテストがステンシル参照値をステンシルバッファ内の値とどのように比較するかを制御します。テストを常に通過させるには、プロパティを Always に設定します。
この方法で、Draw Stencil レンダーパスが Stencil ノードをステンシルバッファに書き込みます。
Stencil Function Reference Value を 1 に
Stencil Function Reference Value を1に設定することにより、Draw Stencil レンダーパスがステンシルバッファに値1を書き込むようにします。
Stencil Pass Depth Pass Operation から Replace へ
この方法で、ステンシルバッファの現在の値を Stencil Function Reference Value プロパティの値に置き換えます。
Stencil Write Enabled を有効にする
この方法で、Stencil ノードの形状を値1でステンシルバッファに書き込み、それ以外の場所は値0のままにします。
連絡先のリストをレンダリングします。
Library > Rendering > Render Pass Prefabs > Stencil Render Pass の中に Gather Lights Render Pass を作成します。
このレンダーパスを使用して、Stencil Render Pass レンダーパスプレハブを使用する Viewport 2D ノード内で、連絡先リストを照らす Light ノードを収集します。
Library > Rendering > Render Pass Prefabs > Stencil Render Pass > Gather Lights Render Pass の中に Draw Objects Render Pass を作成し、Draw ContactsList と名付け、Properties で Object Source プロパティを追加し、それを Content Filter Tag Filter に設定します。
Kanzi は現在、ContactsList ノードと Directional Light ノードをレンダリングします。しかし、Kanzi は Stencil ノードをレンダリングしません。なぜなら、Content Filter が Stencil タグを持つノードを除外しているからです。
Library > Rendering > Render Pass Prefabs > Stencil Render Pass の中に Pipeline State Render Pass を作成し、Stencil Test と名付け、Gather Lights Render Pass レンダーパスを Stencil Test レンダーパスにドラッグします。
次のステップでは、Stencil Test レンダーパスを使用して、この手順で以前にステンシルバッファに書き込んだ領域に対して、Draw ContactsList レンダーパスのレンダリングを制限します。
Library > Rendering > Render Pass Prefabs > Stencil Render Pass で Stencil Test を選択し、Properties で追加して設定します。
Stencil Test Function から Equal へ
Stencil Function Reference Value を 1 に
この方法では、ContactsList ノードのレンダリング領域をステンシル値が1のピクセルに制限するため、レンダーパスは ContactsList ノードが Stencil ノードと重なる部分のみを描画します。
次の作業¶
このチュートリアルでは、3Dコンテンツにステンシルを適用して、Kanzi がコンテンツの選択された領域のみをレンダリングする方法を学びました。これで、次のことができます。
レンダーパスを使用して3Dコンテンツにブルーム効果を適用する方法を学びます。チュートリアル: ブルームエフェクトを作成する を参照してください。
List Box ノードを使用して、データソースからデータを受け取る連絡先リストを作成する方法を学びます。チュートリアル: Grid List Box を使用して連絡先リストを作成する を参照してください。
Kanzi でデータソースを定義し、データソースから Kanzi アプリケーションのデータを取得する方法を学びます。チュートリアル: データソースからアプリケーションデータを取得する を参照してください。
関連項目¶
Kanzi のレンダーパスについて詳しく知るには、レンダリング を参照してください。