Dynamic Directional Shadows

How to set up dynamic directional shadow casting in Kanzi 3.9

Overview

This tutorial explains how to configure dynamic directional shadows in Kanzi 3.9. You will:

• Configure a material type to receive directional shadows.
• Create a shadow map render pass that renders the scene from the light's perspective.
• Set up the main render pass to project the shadow map onto shadow-receiving objects.
• Configure the scene camera and occluder objects.

Prerequisites

• A scene containing at least one mesh object and a floor plane.
• A directional light in the scene.
• A material type based on the PBR PhysicallyBased shader (or any shader that supports the KANZI_SHADER_RECEIVE_DIRECTIONAL_SHADOW preprocessor definition).

Tag Occluder Objects

1. In the Library window, go to the Tags Section and Create a new tag and rename it “Occluder”
2. Under the Rendering>Object Sources create a new “Tag Filter” and rename it “Occluder”
   1. On The Occluder Object Source add Occluder tag under the section for “Included Tags”
3. Select each mesh in the scene that should cast or receive shadows.

4. In the Properties panel, add the Occluder tag to each mesh.

   

Part 1: Configure the Material Type

Enable shadow receiving on the material type by setting the appropriate preprocessor definition.

1. In the Kanzi Studio Library, select your material type.
2. In the Properties panel, scroll to Preprocessor Definitions.

1. Set the following definition:

1. After editing the preprocessor definitions, the material type becomes invalid and any materials that use it turn red in the viewport. In the material type Properties panel, click Sync with Uniforms to recompile.

Part 2: Create the Shadow Map Render Pass

The shadow map render pass renders the scene depth from the directional light's point of view into a depth texture. The main render pass then reads this texture to determine which surfaces are in shadow.

2.1  Create the Render to Texture Pass

1. In the Render Pass tree, create a Render to Texture Render Pass. Rename it DirectionalShadowPass.
2. On the DirectionalShadowPass, set the following properties:

2.2  Create & Add Custom Properties to the DirectionalShadowPass

Create and Add the following custom properties to the DirectionalShadowPass. These properties are referenced by bindings elsewhere in the render graph.

*Optional: Add a category to easily organize the properties you are creating. This will organize them into a section on the nodes we edit later. 
*Optional: Create a folder to organize the properties, the NameSpace and Name of the properties will be adjusted slightly to reflect this. This can keep the project library organized in large projects.

1. Bind the DirectionalShadowMap texture property to the DirectionalShadowPass output: select Result Depth Texture in the Properties panel and drag it into the Bindings panel targeting the DirectionalShadowMap property.
   1. Binding Mode: ToSource

   2. Push Target: ##Template

      

2. Create two bindings that bind the Height and Width properties of the pass to the ShadowMapSize custom property. Use the following binding syntax,

{##Template/ShadowMapSize}

2.3  Configure the Clear Render Pass

The DirectionalShadowPass  contains a Clear Render Pass child by default.

1. Select the Clear Render Pass under DirectionalShadowPass.
2. Remove the Clear Color 0 property. The shadow map only requires depth information; clearing color is unnecessary.

2.4  Create the Draw Occluders Pass

1. Remove the Gather Lights Render Pass from under the DirectionalShadowPass. Lighting is not needed when rendering depth only.
2. Create a Draw Objects with Material Render Pass under DirectionalShadowPass. Rename it DrawOccluders.
3. On DrawOccluders, create a binding for the camera property:

Expression:  {##Template/ShadowCamera}

1. Create a binding for LightProjectionMatrix on the DrawOccluders pass. This matrix combines the light's projection and view transforms:

   Binding Mode: To Source

   proj = {@./DrawObjectsRenderPass.ProjectionMatrix}
   view = {@./DrawObjectsRenderPass.CameraMatrix}
   proj * view

2.5  Create the Depth-Only Material Type

The DrawOccluders pass requires a dedicated material type that writes only depth — no lighting or color output.

1. Create a new material type named DepthOnlyProjectedMaterial.
2. Assign the following vertex and fragment shaders:

Vertex shader  (DepthOnly.vert):

#version 300 es
precision highp float;
in vec3 kzPosition;
uniform highp mat4 kzProjectionCameraWorldMatrix;
void main()
{
    gl_Position = kzProjectionCameraWorldMatrix * vec4(kzPosition, 1.0);
}

Fragment shader  (DepthOnly.frag):

#version 300 es
void main()
{
    // No color output. Depth is written automatically.
}

1. Assign the DepthOnlyProjectedMaterial material type to the Material property of the DrawOccluders pass.

Part 3: Create the Main Render Pass Group

Wrap the shadow map pass and the main scene pass inside a group render pass so they execute in the correct order.

1. Create a new Group Render Pass. Rename it ShadowExampleRenderPass.
2. Add a Clear Render Pass as the first child of ShadowExampleRenderPass. This clears the framebuffer from the previous frame.

3. Move the DirectionalShadowPass to be a child of ShadowExampleRenderPass.

   

1. Add a Gather Lights Render Pass as the next child of ShadowExampleRenderPass. This collects all lights in the scene.
2. Under the Gather Lights Render Pass, add a Draw Objects Render Pass.

3.1  Bind Shadow Properties on the Draw Objects Pass

The Draw Objects pass must pass the shadow map and the light projection matrix to the material uniforms. Create the following bindings on the Draw Objects pass:

Part 4: Update Material Type Uniform Bindings

The material type uniforms must be bound to the render pass properties so that every object drawn with this material receives the correct shadow data.

1. In the Kanzi Studio Library, select the PhysicallyBased material type.
2. Expand the Bindings section.
3. Update the following two bindings:

Part 5: Configure the Scene

1. On the Viewport 2D apply the ShadowExampleRenderPass to the RenderPass Prefab property.

5.2  Create the Shadow Camera

1. Add a Camera node to the scene and child it directly under the Directional Light node that casts shadows.
2. Rename the camera DirectionalShadowCamera.
3. Set the following properties on DirectionalShadowCamera:

1. Select the Viewport 2D and then open the menu for Dictionaries.
2. Click the +Create Resource Dictionary button in the Dictionaries window
3. With the Viewport 2D selected drag and drop the DirectionalShadowCamera into the Dictionaries Window. This creates a resource reference that can be found by the Render Pass that exists on the Viewport 2D.
4. Select the DirectionalShadowPass prefab (under the ShadowExampleRenderPass) and click the + for the ShadowCamer.

5. Change the property drop down to <Relative> and write in #DirectionalShadowCamera

   

5.3  Adjust Shadow Bias

Shadow bias prevents self-shadowing artifacts (shadow acne). On your material, set: