3Dコンテンツにステンシルを適用する

レンダーパスとステンシルバッファを使用して、3Dコンテンツにステンシルを適用し、Kanzi がコンテンツの選択された領域のみをレンダリングするようにします。

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

3Dコンテンツにステンシルを適用し、ステンシルで定義された領域のみをレンダリングするには:

  1. ステンシルとして使用したいノードを作成します。例えば:

    1. ステンシルとして使用したい形状のメッシュをインポートします。メッシュの使用 を参照してください。

      ../../_images/stencilmesh-thumbnail-in-library.png
    2. Model ノードを作成し、それに Stencil という名前を付け、Properties で Mesh プロパティをインポートしたメッシュに設定します。

  2. ステンシルを適用したい3Dノードを作成します。

    例えば、連絡先のリストを表示する Grid List Box 3D ノードを作成します。

  3. 作成したノードをスケールおよび配置して、ステンシルとして使用したいノードが、ステンシルを適用したいノードの表示したい領域をアウトラインするようにします。

    ../../_images/stencil-positioned-behind-contacts-list.png
  4. ステンシルとして使用したいノードにタグを付けます。ノードにタグを付ける を参照してください。

    例えば、Stencil ノードにタグ Stencil を付けます。

    ../../_images/stencil-properties-tags.png
  5. Tag Filter リソースを作成し、Stencil ノードを選択します。また、Tag Filter リソースを作成し、Stencil ノード以外のすべてのノードを選択します。Tag Filter の使用 を参照してください。

    例えば、これらの Tag Filter リソースを作成します。

    • Stencil Filter と Properties で Included Tags に Stencil タグを追加します。

    • Content Filter と Properties で Excluded Tags に Stencil タグを追加します。

    ../../_images/stencil-filter-properties.png ../../_images/content-filter-properties.png
  6. ステンシルを適用します:

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

      Group レンダーパスを使用して、コンテンツにステンシルを適用するレンダーパスをまとめます。

      ../../_images/create-group-render-pass1.png ../../_images/stencil-render-pass-in-library.png
    2. Library > Rendering > Render Pass Prefabs > Stencil レンダーパスで Clear レンダーパスを作成し、Properties で Clear Stencil プロパティを追加して、それを 0 に設定します。この方法で、ステンシルバッファのすべてのピクセルに値 0 を書き込んでステンシルバッファをクリアします。この手順の後半では、ステンシルバッファを使用してレンダリング領域を Stencil ノードの形状に制限します。

      ../../_images/clear-render-pass.png ../../_images/clear-render-pass-clear-stencil-set-to-0.png
    3. Node Tree で、Stencil ノードとステンシルを適用したいノードを含む Viewport 2D ノードを選択し、Properties で Render Pass Prefab プロパティを Stencil レンダーパスに設定します。

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

      この時点では、Stencil レンダーパスはまだスクリーンに何も描画しません。

      ../../_images/scene-set-render-pass-property.png
    4. 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 ノードだけをレンダリングするように設定します。

        ../../_images/draw-stencil-in-library.png ../../_images/draw-stencil-properties.png ../../_images/stencil-in-preview.png
      2. Library > Rendering > Render Pass Prefabs > Stencil レンダーパスで Pipeline State レンダーパスを作成して Stencil Write という名前を付け、Draw Stencil レンダーパスを Stencil Write レンダーパスにドラッグします。

        このレンダーパスを使用して、ステンシルバッファに書き込みます。

        ../../_images/stencil-write-created-in-library.png ../../_images/stencilwrite-in-library.png
      3. Library > Rendering > Render Pass Prefabs > Stencil レンダーパスで Stencil Write を選択し、Properties で以下を追加して設定します。

        • Color Write Mode から None へ

          この方法で、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のままにします。

        ../../_images/stencilwrite-in-library.png ../../_images/stencil-write-properties.png
  7. ステンシルを適用したいノードをレンダリングします。

    例:

    1. Library > Rendering > Render Pass Prefabs > Stencil レンダーパスで Gather Lights レンダーパスを作成します。

      このレンダーパスを使用して、Stencil レンダーパスプレハブを使用する Viewport 2D ノード内で、連絡先リストを照らす Light ノードを収集します。

      ../../_images/gather-lights-render-pass-in-library.png
    2. Library > Rendering > Render Pass Prefabs > Stencil レンダーパス > Gather Lights レンダーパスで Draw Objects レンダーパスを作成して Draw ContactsList という名前を付け、Properties で Object Source プロパティを追加して Content FilterTag Filter に設定します。

      Kanzi は、Stencil ノードを除くすべてのノードを Viewport 2D でレンダリングします。Kanzi は、Content Filter が Stencil タグを持つノードを除外するため、Stencil ノードをレンダリングしません。

      ../../_images/draw-contactslist-in-library.png ../../_images/draw-contactslist-properties.png ../../_images/contactslist-in-preview-start.png
    3. Library > Rendering > Render Pass Prefabs > Stencil レンダーパスで Pipeline State レンダーパスを作成して Stencil Test という名前を付け、Gather Lights レンダーパスを Stencil Test レンダーパスにドラッグします。

      次のステップでは、Stencil Test レンダーパスを使用して、この手順で以前にステンシルバッファに書き込んだ領域に対して、Draw ContactsList レンダーパスのレンダリングを制限します。

      ../../_images/stencil-test-created-in-library.png ../../_images/stencil-test-in-library.png
    4. Library > Rendering > Render Pass Prefabs > Stencil レンダーパスで Stencil Test を選択し、Properties で以下を追加して設定します。

      • Stencil Test Function から Equal へ

      • Stencil Function Reference Value を 1 に

      この方法では、ContactsList ノードのレンダリング領域をステンシル値が1のピクセルに制限するため、レンダーパスは ContactsList ノードが Stencil ノードと重なる部分のみを描画します。

      ../../_images/stencil-test-in-library.png ../../_images/stencil-test-properties.png

ステンシルテスト関数

Stencil Test Function プロパティを使用して、Stencil Function Reference Value をステンシルバッファ内の値と比較します。

これらの操作を使用できます:

Stencil Test Function

ディスクリプション (Description)

オールウェイズ (Always)

常にパス

イコール (Equal)

値が等しい場合は合格

より大きい (Greater)

Stencil Function Reference Value がステンシルバッファの値より大きい場合はパスします。

Greater or Equal: 大なりまたは等しい

Stencil Function Reference Value がステンシルバッファの値以上であればパスします。

少ない

Stencil Function Reference Value がステンシルバッファの値より小さい場合はパスします。

Less or Equal: 以下

Stencil Function Reference Value がステンシルバッファの値以下の場合はパスします。

決して

常に失敗する

ノットイコール (Not equal)

Stencil Function Reference Value がステンシルバッファの値と異なる場合はパスします。

Stencil Function Mask プロパティを使用して、Stencil Function Reference Value とステンシルバッファ内の値に対してビット単位の AND 演算を実行し、それらを Stencil Test Function と比較することができます。この方法により、ステンシルバッファ内の特定のビットのみを変更することができます。デフォルトで、Stencil Function Mask が 255 に設定されている場合、すべての Stencil Test Function 操作はバッファ内のすべてのビットを読み書きします。

例えば、Stencil Function Mask を2に設定すると、Kanzi Studio はステンシル参照値とステンシルバッファ値の2番目のビットのみを保持します。この方法で、ステンシルバッファの異なるビットを使用して、画面上の異なる要素をマスクすることができます。

ステンシル操作

Stencil Fail Operation、Stencil Pass Depth Fail Operation、および Stencil Pass Depth Pass Operation プロパティを使用して、ステンシルおよび深度テストの結果に応じてステンシルバッファの値を設定します。デフォルトで Kanzi Studio は現在の値を保持します。

これらの操作を使用できます:

オペレーション (Operation)

ディスクリプション (Description)

減少させる (Decrease)

ステンシル値が0より大きい場合、1減少させます。

ラップを減らす

デクリースと同じですが、現在の値が0の場合、ステンシルバッファの最大可能値、通常は255に値を設定します。

増加 (Increase)

ステンシル値が最大値より低い場合、1増加させます。

ラップを増やす

増加と同じですが、最大値を超えた場合は、値を0に設定します。

反転

値にビット単位の反転を適用します。

保持

現在の値を保持します。

リプレイス (Replace)

ステンシル値を Stencil Function Reference Value プロパティの値に置き換えます。

ゼロ

ステンシル値を0に設定します。

関連項目

レンダリング

チュートリアル: 3Dコンテンツにステンシルを適用する

タグの使用

Tag Filter の使用

メッシュの使用