3D Nodes

Contents list

• 3D Toolbox
  
• Light
  
• Camera
  
• Reflection Camera
  
• Stereo Camera
  
• Stereo Camera Side by Side
  
• Sky Box
  
• Planar Shadow
  
• Morphing Mesh
  
• Level of Detail (LOD)
  
• Canvas
  

3D Toolbox

The Toolbox for 3D scenes provides the following items:

Create 3D Nodes

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

3D Nodes

Canvas Nodes

12	Canvas: A node which acts as a surface. Read more... Candera::Canvas
13	CanvasGroup: A node which can contain other canvas nodes. Read more... Candera::CanvasGroup
14	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
15	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.

Back to the menu

Light

Types of Light

Different kinds of light sources are available:

1 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.

2 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.

3 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.

4 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:

Back to the menu

Camera

Refer to the Properties panel for inspecting all properties specific for a 3D camera.
Tooltips are available to explain the purpose of the property.

Please refer to section Camera Manipulation for details on how to manipulate cameras.

Camera Render Strategy

Camera, Reflection camera and LeftEye/RightEye (StereoCamera) objects have a property (available in Properties panel) called "RenderStrategy" that only affects the processing of that camera and its nodes.

Per default "none" is selected as camera render strategy, which means the nodes will be rendered inside a render pass according to the defined render order.

Benchmark Render Strategy

Select "Benchmark" as render strategy to split a render call into several passes.

In a render pass, only that part of the scene graph is rendered, which node's benchmarks are beyond a given threshold. In the next render call, rendering will resume at the previous stop point, until it is complete.

Two properties are relevant to achieve this behavior:

 Occlusion Culling

Select "Occlusion Culling" as render strategy to have a new property available in property grid: QueryType.

The render strategy uses a dynamic property (QueryProperty) per node to determine if an occlusion query should be issued or not. It also stores the query result for that node in that property.

Back to the menu

Reflection Camera

Reflection camera is a special item in the Toolbox that can be added in scenes only under camera nodes using drag & drop.

The camera will have some modified properties after adding a reflection camera on it. After the reflection camera is removed, the camera may still have some modified properties which have been previously required for the reflection camera.

Configure the properties "Mirror Plane Direction" and "Mirror Plane Distance" to visualize the reflection plane.

The reflection will not be rendered in predefined views (Perspective, Orthogonal). Depending on the desired visual effect, set the proper values for the properties: IsColorClearEnabled and SequenceNumber.

Camera Render Strategy

Both Camera and Reflection camera objects have a property (available in Properties panel) called "CameraRenderStrategy" that only affects the processing of that camera and its nodes.

Per default "none" is selected as camera render strategy, which means the nodes will be rendered inside a render pass according to the defined render order.

Back to the menu

Stereo Camera

To use the StereoCamera object two Camera objects have to be assigned as the left and the right eye. Only cameras that have no parent, or their parent is the StereoCamera itself, are allowed to be set as eyes. If they have no parent, they'll automatically get assigned as children of this StereoCamera. On these cameras position, lookAtVector, upVector and the projection get set automatically with respect to the StereoCamera objects setting.

A StereoCamera object is available in the Toolbox. In order to use it, the user should drag it on a scene. After this first step, a StereoCamera object will become available in the Scene Tree.

A LeftEye camera and a RightEye camera will be assigned to the StereoCamera. The LeftEye camera and the RightEye camera may be configured from the properties panel as any other camera. The properties specific for the StereoCamera may be configured from the Properties panel that is available when the StereoCamera is selected. Those are:

Eye separation controls the interaxial offset of the two Camera objects positions relative to the StereoCamera's position. Here for both camera's the position is set to half of the separation in +X and -X direction.

Convergence distance is the distance from the camera to the plane on which both projections would produce the same image, and therefore no parallax occurs.

Without a special designed hardware the only possibility to check the Stereoscopy on SceneComposer is to link every Eye Camera to a different Render Target. For instance, it is possible to associate the LeftEye with a Left Render Target and the RightEye with a Right Render Target. The association of any Eye Camera should be done by following the usual two steps:

Both Render Targets are expected to be kept grouped under the same Display as it can be noticed in the image above.

Back to the menu

Stereo Camera Side by Side

One of the Stereoscopic Camera configurations is the so called "side by side" (SBS) configuration. This type of configuration is based on display that combines the left and right eye images into a single image by squeezing the two together horizontally.

To facilitate the creation of SBS configuration, SceneComposer provides a built in configuration that can be used.

First drag and drop a Stereoscopic Camera from the Toolbox in a 3D scene. Second, right click on the Stereo Camera in the Scene Tree. Select "Camera Side-by-Side Configuration" from the context menu.

If a RenderTarget already includes cameras, you can not choose it. So, remove cameras in the RenderTarget and select "Camera Side-by-Side Configuration" menu to be appeared its dialog. After a display and a render target are created, select the Render Target. After this step click "OK".

In the Render Targets panel both "eyes" associated with the Stereo Camera will be displayed.

Sky Box

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.

Usually you need to specify only texture to show skybox (CubeMap Texture). And you do not need to specify VertexBuffer and Shader. But if you want to specify your own SkyBoxMesh:

Back to the menu

Planar Shadow

To configure it the following steps have to be taken:

The AlignmentNode property exposes Candera's automatic alignment behaviour. When the alignment node is set, Candera automatically aligns the shadow plane to the alignment node (which usually is the shadow receiver).

Related with the planar shadow there are many other important aspects:

Back to the menu

Morphing Mesh

Shape Morphing

Shape Morphing allows a smooth transition from an origin 3D model shape into a destination shape at runtime, e.g. to change a cube to a sphere. In contrast to model blending a single shape is rendered at every point in time which actually forms the morphed model. This model supports virtually all features of regular models.

CGI Studio supports not only a single shape being morphed into another but allows contributing multiple models to the resulting shape. The degree of contribution of a single model to the result is controlled by "morph weight" attribute of the regarding model.

Morphing of multiple models can be used for various fancy effects such as 'chaotic' vertex movement, explosion effects, and simple particle effects.

Technical Background

Geometries (vertex buffer) of different shapes supposed to be morphed are combined into a special, single vertex buffer for "Morphing Mesh" nodes including all vertex buffer attributes such as position, normals, texture coordinates per original vertex. This combined vertex buffer is uploaded to GPU, the regarding vertex attributes can be accessed in vertex shader. Uniforms applied to vertex shader during rendering by Candera include morphing weights for all contributing shapes. The vertex shader calculates the vertex attributes of the resulting shape by adding all regarding vertex attributes of single shapes multiplied by morphing weight.

For example, the vertex position is calculated in vertex shader as

Vertex Position = Vertex Position 0 * Morph Weight 0 + Vertex Position 1 * Morph Weight 1;

Other vertex attributes that are subject to morphing calculation are normals, bi-normals, and in special cases, texture coordinates. This calculation moves the vertices between the corner points of the model according to their morph weight.

If color or textures are subject of morphing as well, the resulting color needs to be calculated in an according fragment shader considering morph weights.

Prerequisites

3D models need to be prepared for shape morphing. For each "corner" shape, a single model needs to be provided. All models contributing to a morphed shape need to have homologous vertices. This means that all models must have the same number of vertices and the vertices must "semantically correlate". For instance a vertex of model 1 addressed by a certain index is located in a front face. The vertex of model 2 with the same index need to be located on the corresponding front face of the second model, and not, e.g. on a back-side face.

Create a MorphingMesh

To create a MorphingMesh at least one .fbx file has to be imported. Choose "Import > Import Resources..." from the menu. This will open the "Import Resources" dialog. Browse to your FBX file an click [ Open ] to import the file.

To import the FBX file in Import dialog click "Select Files..." button.

 Configuring shape morphing in SceneComposer:

Configure Morphing Weights

In order to get the desired morphing effect, select the morphing mesh in the right side of the Scene Tree panel and set the weight of each morphing mesh item in the Properties panel accordingly.

By default, after creating morphing mesh items, the morph weight of the first item is set to 1.00, while morph weights for all other items are set to 0.00.

Wireframe Line Width

Morphing Shader

The reference shaders for morphing:

support morphing between maximal 2 vertex buffers.

Back to the menu

Level of Detail (LOD)

With Level of Detail, 3D render performance can be improved by using low polygon models for far away objects and high polygon models only for objects near to the camera.

Create a LodNode

Using the level of details concept in SceneComposer:

Configure Lod Levels

Each child of a LodNode must be associated to a specific LodLevel by configuring following properties:

While the index is given by the order of the LodNode children in the scene graph, lower and upper bound can be configured either in the Properties panel or in the "Configure Level of Detail" dialog. For this, use the context menu item "Configure Level of Detail" on the selected LodNode in Scene Tree panel:

First of all, the "Level of Detail" dialog allows to specify the Lower Bound and the Upper Bound for any child part of the LodNode.

The same operation can be done in the Properties panel, whenever a LodNod child is selected in the Scene Tree panel:

Configure LodNode

Select the LodNode in the Scene Tree panel to edit the following LoD node properties in the Properties panel:

The preview type property can be edited in the Level of Detail Configuration dialog, too.

Discrete LoD Render Strategy

Select "Discrete" for the Level of Detail render strategy to configure a stepwise transition between the several Lod levels.

After choosing "DistanceToCamera" Lod criterion, the LoD level will be switched depending on the distance of the LodNode to the camera.

Blend Lod Render Strategy

Select "Blend" for the Level of Detail render strategy to configure a smooth alpha blending transition between the several Lod levels. In this case, following additional properties can be specified:

Again, after choosing "DistanceToCamera" Lod criterion, the LoD level will be switched depending on the distance of the LoDNode to the camera.

Back to the menu

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_RefColorTexAlpha" 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:

Back to the menu