Prism レンダーグラフへのシャドウの追加

../../_images/car-shadows.png

以下の手順では、Prism レンダーグラフにさまざまなタイプのシャドウを追加する方法と、シャドウを落とすオブジェクトを定義する方法を説明します。

Prism グラフの概要については、まず Prism グラフ で基本的な Prism グラフの作成手順を参照してください。

シーンのセットアップ

シャドウをテストできる基本的なシーンを作成します。

  1. シャドウを落とすオブジェクトをシーンに追加します。

    この例では、Kanzi Studio の Asset Toolkit パッケージに含まれる地面のボックスと車のモデルを使用します。手元にある任意のオブジェクトを使用して進めることもできます。

  2. Asset Packages に移動し、アセットブラウズビューから Asset Toolkit > Car を選択します。マウスで車のモデルをシーンにドラッグアンドドロップします。

    ../../_images/drag-drop-car.gif

  3. シーン (Scene) > クリエイト (Create) > Box を右クリックで選択して、地面のボックスをシーンに追加します。

    ../../_images/create-box-ground.png

  4. プロパティ (Properties) パネルの Transform 3D プロパティを使用して、ボックスの位置とスケールを調整します。

    ../../_images/ground-box-transform.png

  5. シーンから地面のボックスを選択します。プロパティ (Properties) で メッシュマテリアル (Mesh Material) プロパティに移動し、Navigate to selected item ボタンをクリックして、モデルのマテリアルをハイライトします。

    ../../_images/select-model.png

  6. Material Type ドロップダウンメニューから SmartPhysicallyBased を選択して、マテリアルタイプ (Material Type) を切り替えます。

    これにより、マテリアル (Material) は Smart Physically Based Material タイプを使用するように切り替わります。これはシャドウを使用する最も簡単な方法です。スマートマテリアルを使用すると、シェーダー (Shader) の機能を必要に応じて簡単に有効化または無効化できます。スマートマテリアルの詳細については、スマートマテリアルを使用する を参照してください。

    ../../_images/select-smart-physically-based-material.gif

注釈

プロジェクト (Project) に Smart Physically Based Material タイプがまだない場合は、Library > Materials and Textures > Material Types で右クリックし、Create > Material Type > SmartPhysicallyBased を選択して作成できます。

新しいマテリアルタイプ (Material Type) を作成すると、対応するマテリアル (Material) もプロジェクト (Project) に自動的に追加されます。そのマテリアルを地面のボックスに使用します。

../../_images/create-smart-pbr-type.png

シャドウのマテリアルプロパティ

マテリアルタイプ (Material Type) では、シャドウ機能はデフォルト (Default) で有効になっていません。各シャドウタイプをサポートするには、シェーダーを有効にする必要があります。

  1. Material Type フィールドの Navigate to selected item をクリックして、ライブラリ (Library) で SmartPhysicallyBasedMaterial タイプを選択します。

    ../../_images/select-material-type.png

  2. Properties メニューの右下隅にある Add Properties ボタンをクリックします。Shadow for Directional Light、Shadow for Point Light、Shadow for Spot Light を有効にします。

    これで、スマートマテリアルがシャドウを受ける準備が整いました。

    ../../_images/select-shadow-properties.gif

ヒント

プロジェクト (Project) でスマートマテリアルを使用しない場合、カスタム (Custom) マテリアルでシャドウを有効にするには、マテリアルにプリプロセッサ定義を設定する必要があります。

Material Type を開き、Preprocessor Definitions セクションまでスクロールします。KANZI_SHADER_RECEIVE_SPOT_SHADOW、KANZI_SHADER_RECEIVE_POINT_SHADOW、KANZI_SHADER_RECEIVE_DIRECTIONAL_SHADOW の値を 1 に設定して、これらを有効にします。

これにより、マテリアルで対応する各シャドウタイプが有効になります。

../../_images/set-shader-preprocessor-definitions.png

Prism グラフの作成

  1. Library > Rendering > Prism Graphs に移動します。

  2. Prism Graphs フォルダを右クリックし、Create > Default Prism Graph を選択します。

    デフォルト Prism グラフは、ほとんどのレンダーグラフを新規作成する際の出発点として最適です。

    ../../_images/create-default-prism-graph.png

  3. グラフでレンダリングする Viewport 2D を選択します。ビューポートの Properties で Render Pass Prefab プロパティを見つけ、ドロップダウンから作成した Prism グラフを選択します。

    レンダリング結果は以前と同じに見えるかもしれませんが、作成した Prism グラフが使用されるようになりました。

    ../../_images/select-prism-graph.png

スポットシャドウ

  1. シーンオブジェクト上で Alt を押しながら右クリックして、オブジェクト作成メニューを開きます。Spot Light を選択して、新しいスポットライトを作成します。スポットライトを、オブジェクトを照らしてシャドウを落とす位置に移動します。

    ../../_images/create-spotlight.png

  2. Library で Prism グラフを ダブルクリック して開きます。

    ../../_images/open-default-prism-graph.png

  3. グラフに新しい Generate Shadow Map ノードを追加します。Light ドロップダウンからスポットライトを選択します。

  4. + アイコンをクリックして Shadows > Spot Shadow Map を選択し、Multi-Draw ノードに Spot Shadow Map プロパティを追加します。

  5. Generate Shadow Map ノードの出力ソケットを、Multi-Draw ノードの Spot Shadow Map ソケットに接続します。

    ../../_images/building-spotlight-graph.gif

    これでグラフが完成し、オブジェクトがスポットシャドウを落とすようになります。

    ../../_images/car-spot-shadows.png

シャドウの接地点の調整

シャドウが表面からわずかに浮いて見えることがあります。シャドウには、シャドウマップのデプス範囲を定義するニアプレーンとファープレーンの設定があります。これらの設定はどちらも、シャドウが表面にどのように揃うかに影響します。

これらの設定は、ライトソースに Camera Near、Camera Far、Shadow Bias プロパティを追加して調整できます。

../../_images/fix-foating-shadows.gif

ヒント

よくある問題として、シャドウに斑点やアーティファクトが現れるシャドウアクネがあります。これは多くの場合、シャドウマップの精度の問題が原因です。対応するライトタイプに Spot Shadow Bias、Point Shadow Bias、または Directional Shadow Bias を追加すると改善できます。

シャドウ解像度の調整

シャドウマップの解像度は Prism エディタで調整できます。

Generate Shadow Map ノードの + アイコンをクリックし、Width プロパティと Height プロパティを追加して値を調整します。

解像度を上げるとシャドウの品質が向上しますが、パフォーマンスが低下します。

../../_images/adding-size-properties.gif

ポイントシャドウ

ポイントシャドウはスポットシャドウとほぼ同じですが、空間内の一点からすべての方向にシャドウを落とします。

Kanzi における主な違いは、Prism グラフでのシャドウマップ解像度の設定方法です。

  1. Alt を押しながら Scene を右クリックします。Point Light を選択します。

  2. Library で Prism グラフをダブルクリックして開きます。

  3. グラフに新しい Generate Shadow Map ノードを追加し、Multi-Draw ノードに Point Shadow Map プロパティを追加します。

    Point Shadow Map ノードは、指定されたキューブマップのデプスを Multi-Draw パスに合成します。このノードのソケットには、インプットとしてキューブマップのデプステクスチャが必要です。

  4. Generate Shadow Map ノードの出力ソケットを、Multi-Draw ノードの Point Shadow Map ソケットに接続します。

  5. ライト (Light) ドロップダウンからポイントライトを選択します。

    ポイントシャドウを機能させるには、ライトのタイプが ポイントライト (Point Light) である必要があります。

    ../../_images/building-pointlight-graph.gif

スポットシャドウと同様に、Camera Near、Camera Far、Shadow Bias プロパティを光源に追加して、シャドウの外観を調整できます。詳細については、シャドウの接地点の調整 を参照してください。

これで Prism グラフが完成し、オブジェクトがポイントシャドウを落とすようになります。

../../_images/final-graph-spotlights.png ../../_images/car-point-and-spot-shadows.png

ポイントライトのシャドウ解像度を上げる

デフォルトの解像度を調整する必要がある場合は、Generate Shadow Map ノードのプロパティから解像度を上げることができます。

  1. Generate Shadow Map ノードの + アイコンをクリックし、Cubemap Resolution プロパティを追加します。

  2. シャドウの品質を上げるには、解像度を 256 などの高い値に上げます。

解像度の高いシャドウはパフォーマンスに影響する場合があることに注意してください。

../../_images/pointlight-shadow-resolution.png

ディレクショナルシャドウ

ディレクショナルシャドウは、太陽光やその他の遠くにある光源をシミュレートするためによく使用されます。

手順は他のシャドウタイプと同様ですが、ディレクショナルシャドウではシャドウ領域を定義するための追加のプロパティが必要です。

  1. シーン (Scene) を右クリックし、クリエイト (Create) > ディレクショナルライト (Directional Light) を選択します。

  2. ライトを選択し、プロパティ (Properties) パネルの右下にある アドプロパティ (Add Properties) ボタンをクリックします。ライトに Z Far、Z Near、Orthographic Plane Size プロパティを追加します。

    これらのプロパティは、シャドウがレンダリングされる領域を定義します。シャドウが必要な領域をカバーするようにこれらの値を調整します。Orthographic Plane Size はシャドウを落とす領域のサイズを定義し、Z Near と Z Far はデプスの範囲を定義します。

    ../../_images/select-directional-properties.gif

    ライトのプロパティを設定したら、Prism グラフでシャドウマップを設定します。

  3. Library で Prism グラフをダブルクリックして開きます。

  4. グラフに新しい Generate Shadow Map ノードを追加し、Multi-Draw ノードに Directional Shadow Map プロパティを追加します。

  5. Generate Shadow Map ノードの出力ソケットを Multi-Draw ノードの Directional Shadow Map ソケットに接続します。

  6. ライト (Light) ドロップダウンからディレクショナルライトを選択します。

    ディレクショナルシャドウを機能させるには、ライトのタイプが ディレクショナルライト (Directional Light) である必要があります。

    シャドウの解像度を調整する方法については、シャドウ解像度の調整 を参照してください。

    これでグラフが完成しました。

3 つのシャドウタイプすべてを設定した最終的な Prism グラフは次のようになります。

../../_images/complete-shadow-graph.png

これで、すべてのシャドウタイプがシーンに表示されます。

../../_images/car-spot-point-and-directional-shadows.png

関連項目

Prism グラフ

Prism グラフを作成する

Prism グラフによるブルームエフェクトの作成