Using the Viewport nodes¶

Use the Viewport nodes to set the size of a render target surface onto which content is projected.

Viewport 2D is a special node because it can render both 2D nodes, such as Image, Page, Button 2D, and a Scene, which is a 3D node. When you create a new Kanzi Studio project, the project has a Viewport 2D with a Scene that contains a Camera and a Directional Light.

Creating a Viewport 2D node¶

To create a Viewport 2D node:

In the Node Tree press Alt and right-click a 2D node where you want to create a Viewport 2D node and select Viewport 2D.

Note that you can create a 3D node only inside 3D nodes, and 2D node only inside 2D nodes.
Add content to the Viewport 2D node you created.

For example:
- In the Node Tree press Alt and right-click the Viewport 2D and select Scene.
  
  Kanzi Studio creates a Scene that contains a Camera and a Directional Light.
- In the Prefabs click , select Scene, from the Prefabs drag that Scene to the Node Tree, and drop it on the Viewport 2D node.
  
  Kanzi Studio instantiates the Scene as a prefab in the Viewport 2D node.

Controlling how Kanzi renders a Viewport 2D node¶

You can control how Kanzi renders a Viewport 2D node with the Foreground Hint property:

None tells Kanzi to render the background brush after rendering the Viewport 2D node. Use it when the content of the Viewport 2D node is opaque.
Translucent tells Kanzi to render the background brush before the content of the Viewport 2D node. Use it when the content in the Viewport 2D node is alpha blended.
Occluding tells Kanzi not to render the background brush. Use it when the entire Viewport 2D node is filled with 3D content.

Setting the appearance of a Viewport 2D node¶

You can control how Kanzi renders a Viewport 2D node. See Controlling how Kanzi renders a Viewport 2D node.

To set the appearance of 2D nodes:

You can fill 2D nodes with a solid color, a texture, or a material. See Adjusting the appearance of 2D nodes.
You can rotate a 2D node around all three axes to create a 3D perspective effect. See Creating a 3D perspective effect for 2D nodes.
You can apply custom rendering to 2D nodes to create post-processing effects. See Applying custom rendering to 2D nodes.

Using the Viewport 2D node in the API¶

To create a Viewport 2D node, attach it to the RootPage node, and add to it either a Scene node or 2D content:

// Create a Viewport 2D named Viewport 2D and add it to the RootPage.
Viewport2DSharedPtr viewport2d = Viewport2D::create(domain, "Viewport 2D");
rootNode->addChild(viewport2d);

// To render 3D nodes in a Viewport 2D you need to add a Scene to the Viewport 2D.
// Create a Scene named Scene for 3D nodes and add it to the Viewport 2D.
SceneSharedPtr sceneNode = Scene::create(domain, "Scene for 3D nodes");
viewport2d->setScene(sceneNode);

// Create a Camera named Camera and add it to the Scene.
CameraSharedPtr camera = Camera::create(domain, "Camera");
sceneNode->addChild(camera);

// Create a Point Light named Point light and add it to the Scene.
LightSharedPtr light = Light::createPoint(domain, "Point light");
sceneNode->addChild(light);

// Create a Box mesh named Box and add it to the Scene.
Model3DSharedPtr box = Model3D::createCube(domain, "Box", 1.0f, ThemeBlue);
sceneNode->addChild(box);

For details, see the Viewport2D class in the Kanzi Engine API reference.

Viewport 2D property types and messages¶

For a list of the available property types and messages for the Viewport 2D node, see Viewport 2D.