3D Nodes

The Toolbox for 3D scenes provides the following items:

A "Show Controls as Big Icons/List" is available in the upper right corner. If this button is used, a different presentation mode - as icons instead of a text list of items - will be made available (see the image below).

Create 3D Nodes

Following items can be used to create a new node in the scene graph:

	Group: Represents a parent container for nodes or other groups. Candera::Group
	Light: Different types of light could be added to illuminate the scene objects. Read more... Candera::Light
	Camera: To be linked to a render target, where the render result of the camera will be drawn. Read more... Candera::Camera
	Reflection Camera: Creates a reflection of a specific camera on a given reflection plane. Read more... Candera::ReflectionCamera
	Stereo Camera: Creates the effect of stereo 3D. Read more... Candera::StereoCamera
	Sky Box: A type of mapping that gives the user the feeling of immersion into a large environment. Read more... Candera::SkyBox
	Billboard: A textured or colored 2D area. Candera::Billboard
	Planar Shadow: Provides the possibility to "throw" some shadows on a configurable planar surface. Read more... Candera::PlanarShadow
	MorphingMesh: A mesh that stores weight values for morphing. Read more... Candera::MorphingMesh
	LodNode: A node which accommodates multiple nodes, each of them representing a certain, predefined level of detail. Read more... Candera::LodNode
	PointSprite: Displayed as a flat square polygon which is always facing the camera (screen-aligned). It can be textured and scaled to simulate perspective. Candera::PointSprite
	Canvas: A node which acts as a surface. Read more... Candera::Canvas
	CanvasGroup: A node which can contain other canvas nodes. Read more... Candera::CanvasGroup
	CanvasSprite: A node which represents a solid object, offering the possibility to render a texture, a flat colored rectangle or other visual effects. Read more... Candera::CanvasSprite
	CanvasText: A node which facilitates displaying text on Canvas. Candera::CanvasText

Create a new 3D node by drag & drop

New scene nodes are named like the item type, for more than one item suffixed with a number.

Refer to the Properties panel for inspecting all properties specific for the type of node. Tooltips are available to explain the purpose of the property. Refer also to the Properties Overview listing the Tooltip descriptions.

Types of Light

Different kinds of light sources are available:

Ambient Light

Ambient light illuminates the scene from all directions. The light intensity is the same everywhere in the scene.
Position and direction of an ambient light source have no effect.

Directional Light

Directional light corresponds to sunlight in the real world. Illuminates all objects in the scene from the same direction, and with a constant intensity.
Position and attenuation of a directional light source have no effect.

Point Light

Point light casts equal omnidirectional illumination from the position of the light source. The intensity of light coming from a point light source can diminish with distance.
The direction of a point light has no effect.

Spot Light

Spot light casts a light cone from a position centered around a direction.
A spot light has both: a direction and a position.

Light Properties

Please refer to section Light Gizmos for more details on how to edit lights by using gizmos.

Light properties that can be edited from the Properties panel (Some properties are only applicable depending on the selected light type):

Light properties that can be edited in ShaderParamSetter:

One of the most spectacular types of environment mapping is the so called "sky box". This type of mapping gives the user the feeling of immersion into a large environment. The name is related with one of its first usages into pc games industry, especially in relationship with clouds and sky projected into a 3D level of a computer game.

It is possible to create this type of virtual environment by using the SkyBoxMesh from toolbox. Associated with a camera, this mesh will be placed on every renderization on the same position as camera's position. When a skybox is attached to a camera, any of the clear color properties will not be taken into consideration.

The sky box should only be seen if the active camera is the same one with that camera to which the sky box is attached.

Do the following steps to configure the SkyBoxMesh:

Canvas

Canvas is a node that acts as a surface which allows the user to introduce 2D content in a 3D scene. Canvas nodes can have appearances, just like normal 3D nodes so the user can achieve complex visual effects by using appropriate shaders, materials and textures.

Canvas, CanvasGroup, CanvasSprite and Canvas Text (placed under the "Canvas Nodes" section of the Toolbox) behave like normal nodes when it comes to transformations and selection. Bounding box will be rendered for each of them. They can be translated, rotated, scaled. Canvas acts as a surface. CanvasGroup nodes, CanvasSprite nodes and Canvas Text nodes can be inserted into it.

For each Canvas object, a new editing camera is added in the scene camera list and becomes available in "Canvas" category. This camera can be selected and exhibits a special behavior: is automatically oriented towards the canvas, regardless of canvas transformations, so that the Canvas and its children will always appear like they would be viewed from a "Front" camera. A Canvas camera provides an orthographic projection.

Canvas Sprite

CanvasSprite is a node that represents a solid object, offering the possibility to render a texture, a flat colored rectangle or other visual effects, depending on its appearance configuration.

Four new shaders will be available in the default solution for configuring the CanvasSprite:

A new uniform setter template will be available in the default solution for configuring CanvasSprite: CanvasTransShaderParamSetter.

Canvas Text

Canvas Text is a node that allows the creation of 2D texts on a Canvas in a 3D scene. When Canvas Text node is selected, specific properties become available in the Properties panel.

In this way the text can be set as desired.

The Canvas automatically batches Canvas Texts together to minimize the amount of draw calls. To achieve high batching rates, it is crucial that the user shares Appearances, Render Order Ranks, Render Order Bins, and Scope Masks between Canvas Texts as much as possible. Only Canvas Texts with the same properties can be batched together.

Some of the most important Canvas Text properties are the following:

Alignment: The text has a property for horizontal alignment. This property aligns the text within Text::Size. If no Text::Size is set, the Layout::Size is used. The layout has a horizontal and vertical layout alignment property which is used to align the ‘block’ of the measured text within the Layout::Size. The defined layout alignment can be propagated to the text alignment when the text alignment is set to ‘Auto’.
Otherwise, it is possible to right align the text within Text::Size but left align this block of right aligned text within Layout::Size. The properties will be inverted if the layout direction is set to ‘right to left’.

Word wrap and truncation: Both properties prepare a text for use cases in which they do not fit into a size. Therefore, enabling one of them forces the text to fit into the provided smallest size (Layout::Size or Text::Size).

For many other details see the chapter Canvas Text - Size Property.

Canvas Text Outline

By using this feature, it is possible to use shader effects such as Outline on any canvas text node on a 3D scene. This property allows the user to add an outline on any canvas text on a 3D scene.

To use the "Canvas Text Outline" feature, it is mandatory to use an Appearance Collection that has set "RefTransColor_RefColorTextAlpha" as shader.

In order to obtain such a collection, first, in "Solution Explorer" copy the "CanvasText" appearance collection which can be found in "References > SCL:ConstructionKit > Resources > Appearances > CanvasText" from "Templates" into your solution. After this step, in "Solution Explorer" rename the copied "CanvasText" appearance collection (e.g.: "AppearanceCollectionWithOutlineShader") then in Properties select the "CanvasText" tab and under the "Appearance" section set "RefTransColor_RefColorTexAlphaOutline" as shader program.

From now on it is possible to use this appearance collection to set an outlined canvas text. The color and width properties are available under "Shader parameters" section (see the image above). To see how this works, first, when "AppearanceCollectionWithOutlineShader" is selected in "Solution Explorer", modify the u_outline Color as follows: X=1.00/Y=0.00/Z=1.00/W=1.00 then set the u_outline Width to be "4". Create a 3D scene and in it drag and drop from Toolbox a Canvas node with a Canvas Text in it. In Scene Tree select the "CanvasText" node and drag and drop on it - from "Solution Explorer" - the "AppearanceCollectionWithOutlineShader". In Scene Tree select again the "CanvasText" node then in Properties modify the "Outline Width" to be at least 1 or 2.

In this way the outline of the text can be set as desired.

Canvas Layouter

The functionality of 3D Layout for canvas nodes is similar with that of the layouters known from SceneComposer 2D scenes. By using this feature a Canvas Group is able to align its nodes (group, sprite, or text) according to the configured layouter.

It's not possible to animate the same property for parent and child nodes. Group nodes are resolved and all properties are applied on their child nodes. Either animate the parent group property or the child properties.

The settings for this feature can be done through a category with the same name available in the Properties panel. To acces it, first, a Canvas Group - included in a Canvas - has to be selected:

By using this feature a Canvas Group is able to align its nodes - group, sprite, or text - according to the configured layouter. The available layout types are identical with those used for the 2D layouters:

Baseline Layouter

The layout type "Baseline" realizes a stacked laying out in the horizontal direction. It behaves similar to the Horizontal Stack Layouter. The major difference consists in its given reference: it aligns the objects to a line instead of aligning them to the client area. The main purpose of this layouter is to align different sizes formatted texts along the same baseline. For instance, if the center is chosen for alignment, the baseline of the text will be aligned to the given line (= baseline offset). The order of the elements is given by the order of the child nodes within the layouted group.

Configure the Baseline Layouter by following these steps:

Grid Layouter

In a Grid layout, every node part of the layouted canvas group is assigned to a cell of the grid. A Grid Layout Editor is available to configure the grid and to arrange nodes in the grid's cells by drag & drop operation.

 Configuring the Grid Layouter:

Optional: Use the buttons "+","-" to configure the desired number of rows and columns in the "Grid layout editor" dialog, if not done already in the Properties panel.

 Arrange the nodes of the group in the grid's cells by drag & drop operation.

Configure width and height for rows and columns by editing the values on the border of the grid. Values within the range [0...1] are considered as percentages and values greater than 1 as dimensions.

Confirm the layouter configuration by pressing the "OK" button of the dialog "Grid layout editor".

Call the Do-Layout command using the shortcut keys "Ctrl+L" or from the "Edit" > "Do-Layout" menu.

Overlay Layouter

The layout type "Overlay" arranges the objects by laying out them on top of each other or by aligning the nodes according to their general layout properties. The order of the elements is given by the order of the child nodes within the layouted group.

Configuring the Overlay Layouter:

Stack Layouter

The layout type "Stack" realizes a stacked laying out either in horizontal or vertical direction. The order of the stack elements is given by the order of the child nodes within the layouted group.

Configuring the Stack Layouter:

DockPanel Layouter

The "DockPanel" layout provides a layout area within it is possible to arrange canvas child elements around the edge of the screen based on four direction: Top, Bottom, Left, and Right.

This type of layout arranges the elements by laying out them in the remaining space after the previous element was set. To dock an element to the center of the panel, it must be the last child of the panel.

Configure the DockPanel Layouter by following these steps: