Step 1 - Prepare the nodes in your project

Before you can create reflections, you have to prepare the nodes for which you want to create reflections. In this step you use the Instantiator node to create a visual copy of the nodes for which you want to create reflections, and create a reflection plane. You use tags to mark the nodes in your project either as origin or a reflection. In the next step of the tutorial you use these tags to collect the nodes with two tag filters and pass each to a different render pass for rendering and culling.

Assets for the tutorial

The starting point of this tutorial is the <KanziWorkspace>/Tutorials/Reflections/Start/Reflections.kzproj Kanzi Studio project.

You can find the completed tutorial in the <KanziWorkspace>/Tutorials/Reflections/Completed directory.

Prepare the nodes in your project

To prepare the nodes in your project:

  1. In Kanzi Studio open the project stored in <KanziWorkspace>/Tutorials/Reflections/Start.

    In the project the Empty Node 3D node Content contains a Trajectory List Box 3D node with several Empty Node 3D nodes that contain 3D models, and lights. In this tutorial you create the reflection of these nodes.

    ../../_images/start8.png
  2. In the Node Tree select the Content node, which groups the Trajectory List Box 3D and lights, and in the Properties set the Tags property to Origin.

    Here you tag the nodes for which you want to create reflections.

    When you have more than one node and you want to create a reflection for all nodes, you can group them under the same node, and tag their parent node. For example, by tagging the Content node you tag all its descendant nodes.

    ../../_images/select-nodes1.png ../../_images/tagging-origin.png
  3. Create the Instantiator node from the node for which you want to create a reflection:

    1. In the Node Tree press Alt and right-click the Content node, select Instantiate Into an Instantiator, and rename it to Reflection.

      You use the Instantiator node to create a visual copy of the nodes in the Content node for which you want to create reflections.

      ../../_images/instantiate-into-an-instantiator.png ../../_images/reflection-node-in-project.png
    2. In the Node Tree select the Reflection node, and in the Properties add and set:

      • Tags to Reflection

        You use the Reflection tag in the next step of this tutorial to pick for rendering only the Instantiator node Reflection that represents the reflections.

      • Render Transformation property fields:

        • Scale Uniform to disabled

        • Scale Y to -1

          By setting the Scale Y property field you create the mirror reflection of the nodes in the Content node by flipping the Reflection node on the y axis.

        • Translation Y to -0.6

          With the Translation Y property field you control the distance between the origin and its reflection.

      ../../_images/reflection-node-in-project.png ../../_images/empty-node-transformation.png ../../_images/reflection-scale-set.png
  4. Create the reflection plane:

    1. In the Node Tree in the Scene node create a Plane node, name it Reflection Plane, and in the Properties add and set:

      • Tags to Origin

      • Mesh Material to VertexPhongMaterial

      • Blend Intensity to 0.7

        With Blend Intensity you adjust the reflection level: the lower the value the stronger the reflection.

      • Blend Mode to Alpha: Premultiplied

      • Ambient Color to the color that you want to use for the Reflection Plane

      ../../_images/reflection-plane.png ../../_images/reflection-plane-material-properties.png

      Tip

      In Kanzi Studio you can apply color in hexadecimal format to all properties that set a color. In a tool that you use to set the color, copy the hexadecimal code of a color, in Kanzi Studio in the Properties right-click the color swatch of the property for which you want to use that color, and select Paste Color in Hex Format.

      ../../_images/paste-hex3.png
    2. Rotate, scale, and position the Reflection Plane between the origin and reflection nodes.

      You can do this either in the Preview using the Node tool image0, or in the Properties by adding and setting the Render Transformation property. For example, in the Properties add the Render Transformation property and set these property fields:

      • Scale Uniform to disabled

      • Scale X to 1.4

      • Rotation X to -90

      • Translation Y to -0.3

      ../../_images/reflection-plane-transform-3d.png ../../_images/end-of-step-11.png

< Introduction | Next step >

See also

To learn more about how to use tags in Kanzi Studio, see Using tags.