ステップ2 - ステンシルを適用する¶

このステップでは、レンダーパスと Stencil ノードを使用して、ContactsList ノードの選択された部分のみを表示します。

レンダーパスを使用して、最初に Stencil ノードの形状をステンシルバッファに書き込みます。次に、ステンシルテストを使用して、Stencil ノードがカバーし、ステンシルバッファに書き込んだ ContactsList ノードの部分のみを画面に描画します。

ステンシルバッファは、現在のフレームバッファ内の画像であり、Kanzi がレンダリングするピクセルを制御するために使用できます。レンダーパスを使用して、ステンシルバッファの値に応じて、コンテンツ内の特定のピクセルを破棄またはレンダリングします。この方法で、ステンシルとして使用するノードの形状にレンダリング領域を制限できます。ノードの形状はステンシルの隙間として機能し、コンテンツのどの部分が表示されるかを決定します。

ステンシルを適用するには、

Library > Rendering Alt を押しながら右クリック Render Pass Prefabs で Group レンダーパスを選択し、Stencil レンダーパスという名前を付けます。

Group レンダーパスを使用して、コンテンツにステンシルを適用するレンダーパスをまとめます。
Library > Rendering > Render Pass Prefabs > Stencil レンダーパスで Clear レンダーパスを作成し、Properties で Clear Stencil プロパティを追加して、それを 0 に設定します。この方法で、ステンシルバッファのすべてのピクセルに値 0 を書き込んでステンシルバッファをクリアします。この手順の後半では、ステンシルバッファを使用してレンダリング領域を Stencil ノードの形状に制限します。
Node Tree で RootNode > Viewport 2D ノードを選択し、Properties で Render Pass Prefab プロパティを Stencil レンダーパスに設定します。

この方法で、Kanzi が Stencil レンダーパスを使用して Viewport 2D ノードをレンダリングするように設定します。

Stencil レンダーパスはまだ画面に何も描画しないため、Preview では Viewport 2D ノードが空になっています。
Stencil ノードの形状をステンシルバッファに書き込む:
1. Library > Rendering > Render Pass Prefabs > Stencil レンダーパスで Draw Objects レンダーパスを作成して Draw Stencil という名前を付け、Properties で Object Source プロパティを追加して、それを Stencil Filter Tag Filter に設定します。
  
  Object Source プロパティを使用して、Draw Objects レンダーパスにレンダリングさせたいノードだけを渡します。
  
  ここでは、Stencil レンダーパスが Stencil ノードだけをレンダリングするように設定します。
2. Library > Rendering > Render Pass Prefabs > Stencil レンダーパスで Pipeline State レンダーパスを作成して Stencil Write という名前を付け、Draw Stencil レンダーパスを Stencil Write レンダーパスにドラッグします。
  
  このレンダーパスを使用して、ステンシルバッファに書き込みます。
3. Library > Rendering > Render Pass Prefabs > Stencil レンダーパスで 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のままにします。
連絡先のリストをレンダリングします。
1. Library > Rendering > Render Pass Prefabs > Stencil レンダーパスで Gather Lights レンダーパスを作成します。
  
  このレンダーパスを使用して、Stencil レンダーパスプレハブを使用する Viewport 2D ノード内で、連絡先リストを照らす Light ノードを収集します。
2. Library > Rendering > Render Pass Prefabs > Stencil レンダーパス > Gather Lights レンダーパスで Draw Objects レンダーパスを作成して Draw ContactsList という名前を付け、Properties で Object Source プロパティを追加して Content Filter Tag Filter に設定します。
  
  Kanzi は現在、ContactsList ノードと Directional Light ノードをレンダリングします。しかし、Kanzi は Stencil ノードをレンダリングしません。なぜなら、Content Filter が Stencil タグを持つノードを除外しているからです。
3. Library > Rendering > Render Pass Prefabs > Stencil レンダーパスで Pipeline State レンダーパスを作成して Stencil Test という名前を付け、Gather Lights レンダーパスを Stencil Test レンダーパスにドラッグします。
  
  次のステップでは、Stencil Test レンダーパスを使用して、この手順で以前にステンシルバッファに書き込んだ領域に対して、Draw ContactsList レンダーパスのレンダリングを制限します。
4. Library > Rendering > Render Pass Prefabs > Stencil レンダーパスで 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 アプリケーションのデータを取得する方法を学びます。チュートリアル: データソースからアプリケーションデータを取得するを参照してください。

ステップ2 - ステンシルを適用する¶

次の作業¶

関連項目¶