# Scene Design # Manage Scenes # Create a New Scene #### Create a New Scene There are several options how to create a scene: Use the menu item "New Scene" from the "Scene" menu:

Use the toolbar button "Add a new scene":

Add a new scene via shortcut: > Use "Ctrl+2" for a new 2D scene. > Use "Ctrl+3" for a new 3D scene. Left click in the Solution Explorer and use the context menu: Select "Add" > "New Item".

--- #### Scene Templates Scene templates are supported in SceneComposer. A scene created by the user can be made template by checking its IsTemplate property. This property is available as a check-box in the Properties panel. The dialogue used to create new scenes allows the user to select an existing template or import.

The dialogue used to create new scenes allows the user to select an existing template or import. If there are many scenes - 2D or 3D - created as templates, any of them can be selected and used as a template.

If necessary, it is possible to save a new perspective layout, which will be based on the current perspective. Also the possibility to delete a perspective was added. ##### Scene Properties Following properties must be specified for a new Scene:

- **"Location":** The folder which will contain the new scene within the solution. - **"Name":** Scene name - **"Export Always":** If this option is ticked, the scene will always be exported to the asset during asset generation.

These properties can be modified in the Properties panel, when the scene is selected in the Solution Explorer or in the Scene Tree. ##### Create a Scene from Template A new **3D Scene** can also be created from template via the "Add Scene From Template" context menu of the imported scene from the "Imports" panel or in the Solution Explorer:

A new scene named after the template scene is created, which can be edited as a user-defined scene. --- #### Scenes List All the scenes part of a solution are listed in the Scenes List.

Select a scene from this list to open the scene in the Scene Editor.

- Template scenes are listed in the Imports category - And user defined scenes in the Scenes category.

Only user-defined scenes can be edited in SceneComposer.

# Delete a Scene Right click on a scene in the Solution Explorer or in Scene Tree panel and select "Delete" from the context menu.

If some items part of the scene are used in an animation, the "Delete Items" dialog will list the paths of all animations using items from the given scene, and the user will have the possibility to select a resolution strategy for all of them or just for some specific usage item(s).

# Refresh a Scene After certain modifications, it might be required to refresh a scene explicitly to be rendered with updated properties. For refreshing a scene press F5 or use the menu item "Refresh Scene" from the "Scene" menu or the Toolbar button "Refresh scene".

# Scene Tree Editing # Scene Tree UI This section explains the User Interface of the Scene Tree panel.

No.	Name	Description
1	Navigation button	This button is enabled when multiple scenes are displayed. The button has a back (left arrow) and forward (right arrow) function. Clicking the triangle button at the bottom right of each arrow button displays the display history.
2	Lock button	This button is enabled when a node is selected in the scene tree. Pressing the button locks the selected node. For details, please refer to [here](https://doc316en.candera.eu/books/scene-design/page/locking-ui-elements). When a lock is set, the lock icon is displayed. The child node icons will be displayed in grey.
3	Rendering button	This button is enabled when a node is selected in the scene tree. This button is used to set whether or not the node will be rendered at design-time and run-time. If rendering is disabled, child nodes will also not be rendered. If rendering is disabled, the rendering disabled icon will be displayed.
4	Transparency	This function is enabled when a node is selected in the scene tree. This sets the local alpha transparency (Alpha Value) of the selected node. The effective alpha value is combined with the material alpha value of the node.
5	Search field	Searches for items in the scene tree and extra scene tree. Nodes containing the input keywords are highlighted.
6	Scene tree	The nodes that make up the scene displayed in the Scene Editor panel are displayed in a tree.
7	Extra scene tree	The behaviour set for the selected node is displayed here.
8	Rendering disabled icon	If rendering is disabled using Rendering button, the rendering disabled icon will be displayed.
9	Lock icon	If the node is locked using Lock button, a lock icon will be displayed. If the locked node has child nodes, these will also be displayed with a lock icon (greyed out).
10	Annotation	The status of each node is displayed using four-colour icons. - Orange : If a node has a behaviour set - Blue : If a node has an animation property set - Yellow : If a script is set for the node - Red : If an error/warning/message is displayed for a node
11	Fusion	Displays the Fusion panel for the node currently selected in the scene tree.

# Create Nodes #### Create Nodes from Toolbox Drag an item from the Toolbox and drop it

- either into the Scene Tree to sort the node properly into the scene graph - or directly into the render view of the Scene Editor to create the node on a specific display coordinate.

When adding a node to the scene tree, note the following:

1. The new node will be created as the last child of the node on which the node is dropped. 2. To modify the scene tree structure, hold the "Ctrl" key while moving the node along the scene tree to the desired position. The dragged node will be positioned below the node it was dropped on. 3. Moving a node along the scene tree without keeping the "Ctrl" key pressed will move the selected node inside the node it was dropped on.

--- #### Create Nodes from Imports Drag an item from a user-defined import (a template scene node) and drop it to Scene Editor or Scene Tree.

**Scene Editor:** Drop the template scene node in the Scene Editor to create an instance of this node at the given location. The new scene node will be created at the top level of the scene graph. **Scene Tree:** As an alternative, the template scene node from Imports can also be dropped to the Scene Tree. This way it is possible to hierarchically sort the new node into the scene graph.

Bitmaps from Imports can only be dropped on an already existing RenderNode or BitmapNode. In this case, a BitmapBrushAlphaBlend effect will be created on that node referencing the given bitmap.

When adding a node to the scene tree, note the following:

1. The new node will be created as the last child of the node on which the node is dropped. 2. To modify the scene tree structure, hold the "Ctrl" key while moving the node along the scene tree to the desired position. 3. Moving a node along the scene tree without keeping the "Ctrl" key pressed will move the selected node inside the node it was dropped on.

##### Properties of Nodes Created from Imports All node properties of a selected node are displayed in "Properties" panel. For nodes created from imports, additional properties are available:

- Import Path: Specifies the path to the imported artifact that serves as the source - Status: > OK: Template exists and type matches > New: Parent instance item is linked to a template which was modified by adding new children > Missing: Template item cannot be found

# Manage Nodes #### Copy, Move Scene Nodes Scene nodes are all the items which form a scene. They can be toolbox scene nodes or template scene nodes created from the "Imports" panel. Sometimes during solution creation one scene needs to be split into more separate scenes, or many elements from different scenes need to be combined to keep the Solution clean and manageable. Instead of creating the nodes again they could be copy-pasted in as many other scenes as necessary. First, right-click on the desired node in the Scene Tree and from the contextual menu select "Copy".

Second, switch to the desired scene and right-click on the main node in the Scene Tree. Then select the Paste option. The desired element will be copied into the selected scene. Another similar possibility is to get the desired nodes by using Cut option and to paste them into the new scene. The usual combos are available: Ctrl + c for Copy, Ctrl + x for Cut and Ctrl + v for Paste. Upon copy/cut/paste operations, the SceneComposer will allow any operation and display a set of errors/warnings depending on the raised violations (e.g. missing references, bad paths and so forth).

It is possible to select and to cut/copy/paste two or more Nodes only if they are at the same level in the scene hierarchy. By using Ctrl + C shortcut it is possible to copy the path of any selected object together with all the properties to the clipboard. The path can be copied directly in the Properties panel.

--- #### Clone, Delete, Rename Scene Nodes ##### Clone Clone a scene node via the "Clone" context menu. The clone of the item will have the same name as the item, suffixed by a number, and will be placed in the same group or scene.

If there is necessary to realize many clones of the same item, the "Multiple Clone" option should be used. As can be seen in the image below, the user has just to specify the "Base Name" of all the clones and how many copies are needed.

When cloning (or pasting a node) the name of the new node will automatically check if there is already a number at the end of the name. If there is a number this should be increased automatically. For instance, if an existing "Node\_1" (or "Node1") is cloned the name of the clone will be "Node\_2" (or "Node2") and not "Node\_1\_1" (or "Node1\_1").

: The duplication of the item names is incremented based on the numeric suffix with our without an \_ separator.

To duplicate an item into the selected location hold left shift while drag and dropping an item. Upon dropping a copy of the item will be created in the target location. Currently duplicating as a child of itself is not supported.

##### Delete Delete a scene node via the "Delete" context menu.

- If the item is not used anywhere, a simple prompt to confirm the deletion will appear. - If the item is used in an animation, the "Delete Item" dialog will be open and list the paths of the items from the animation where the scene node is used. The "OK" button is disabled so the scene node cannot be deleted.

##### Rename Rename a scene node via the "Rename" context menu.

- Item is not used anywhere; the renaming will take place as the user presses Enter key after editing. - Item with same name already exists (in the same location); warning message pops up.

Properties of the instance items can also be modified in the user defined scene. Properties that have been changed can be reset to their value in the template item by clicking the "revert" button on the left of the property to be restored.

: The first change of a property from the value from the template will cause the name of the property and its value to appear in bold in the "Properties" panel of the main view.

##### Reset Node Structure Groups which have been created from a template item (an imported scene graph) can be reset to the template structure with the context menu "Reset Structure" on the group: Deleted or modified group elements will be restored to the default structure. --- #### Multi-Selection and Comparison of Nodes For multi-selection of nodes, press the Ctrl key while left clicking all the desired elements to select. When the last desired element is selected the Ctrl key can be released. Another way is to use one of select options from the Scene Tree context menu for multi-selection:

- Select Leaf Nodes - Select Children - Select All Descendants

**Examples:**

After the multi-selection operation it is possible to copy, move or delete all selected items as desired. # Locking UI Elements In different circumstances it could be useful to have the possibility to avoid any type of accidental SceneComposer solution modification. SceneComposer offers the locking option to provide the possibility to avoid such unfortunate mistakes. Locking is available via context menu for all items excepting folders. To lock a selected item the user has to right click on that item. From the context menu it is possible to select the "Lock" option.

The locking state of the items can be: unlocked or locked (directly or by an ancestor). The item icon is decorated in such a way that it is clearly indicate if it is locked. The properties (including the name) and the structure of locked items cannot be changed using direct means (properties panel, scene tree etc.) Another way to lock a selected item is to check the "Is Locked" checkbox in Properties.

The re-import of content used by locked items is not possible. If it is necessary to unlock a sub-item it is possible to use the "Force Unlock" option from the context menu. When the "Force Unlock" option is used not only the sub-item is unlocked, the parent node is unlocked as well.

Generally speaking this feature is a soft lock mechanism. References used by a node can be modified, but not the locked object directly. For instance, if a node which has associated a texture that uses a bitmap is locked, the bitmap still can be modified so, in this way, the locked node can be modified. # Bitmap Preview #### Use Bitmap Preview Whenever a Bitmap is selected - for example from the "Imports" panel, "Scene Tree" panel or "Solution Explorer" panel - a preview of the selected Bitmap is displayed in the "Properties" panel in addition to the specific Bitmap properties.

Image properties in the properties panel also show a preview of the image as a tooltip when they are hovered over with the mouse.

# Flipped Bitmaps The platform definition has been extended and defined via meta-info if the bitmaps shall be flipped or not for 2D and 3D. Each bitmap written into the asset specifies the info if flipped or not (the new attribute) SceneComposer writes the bitmap data in the flipped or not flipped data format depending on the platform's specification. A new property (Origin) is available for bitmaps to configure the layout of the pixels in the asset.

If the option PlatformDependent is selected, the following verifications will be performed:

- Bitmap is used only in 2D content, the platform setting for the 2D engine will be used; - Bitmap is used in 3D content, the platform setting for the 3D engine will be used; - otherwise the imported content will be exported without any flipping.

# Pivot Hint Pivot Hint is a property of a Bitmap which allows to set the coordinates of a point that will be used as default Pivot Point for the RenderNode that uses the Bitmap. The example hereafter presents the situation of replacing the Hour Needle Image on an AnalogClock control with a bitmap having or not having set the Pivot Hint.

# Including Solution Items in Scene Explorer #### Creation Solution items can be added in the Scene Explorer via copy-paste or drag-and-drop. The image below exemplify the adding (by drag-and-drop) the Text Control into the Solution Explorer:

When the solution items are copied in Scene Explorer the class is copied, not the instance.

After adding the solution item (Text control, in our case) in the Solution Explorer the newly created copy is shown in the destination folder (1) from Solution Explorer and also in the Controls panel in the Category *Common* (2). Also, in the case of the controls and behavior building blocks, the solution item becomes active (3) and its content is shown in the Scene Tree. Following solutions items support this feature:

- controls - behavior building blocks - templates - shader fragments - shader programs - render targets

#### Usage Once the solution item is copied in the Solution Explorer it can be edited and then instantiated in the Scene Tree. As exemplification, the *Category* property was changed to "MyControls" and the control TextNode2D properties were changed to show a different text and color:

# Isolated Editing For a graphic designer or a technical artist, sometimes it is very useful to have the possibility to shape a single graphic object without seeing the whole scene context. For instance, the designer needs to switch to a special context where only one object (e.g. car) is visible and can be edited. To address this need, SceneComposer allows to edit a single object within the regarding scene hiding all other rendered elements and temporary set the edited object in the view center. To use this feature, in SceneTree having multiple objects selected, right click > Isolated Edit - this will enter in a special Single Editing Mode, where a scope is applied to the selection.

Another possibility to enter in a special Single Editing Mode is to use the "Isolated Edit" button which is placed in the Toolbar near the "Active Rendering" button.

All objects will be rendered with the built-in scope. Turning off this mode can be realized from the toolbar, this mode being highlighted. In this way more complex scenarios can be applied. If you refresh the current scene or switch to another scene, the isolated edit mode will be automatically turned off. # Usage and Dependencies #### Find Usage & Dependencies Use this feature by opening a SceneComposer solution to activate and select the Graph Dependencies panel.

- Activate the panel by selecting "View" > "Editors" > "Graph Dependencies". - The graph panel represents in a visual form the **nodes** and the **connections** that unify them.

The edges that link the nodes show the dependencies that exist among the items. The layout graph panel can be docked in SceneComposer.

: By using the "Export" button the user is allowed to export the "Dependency Graph" as an .xml file with nodes based on items types and names.

After the Graph Dependencies panel is selected, right-click on the scene and select "Dependencies" or "References" from the context menu (see below).

If the "Dependencies" option is selected, the graph will become visible inside the Graph Dependencies panel. If the "References" option is selected, the current selected scene will become visible inside the Graph Dependencies panel. When the current selected scene is pressed, two option are displayed as two buttons near the selected scene icon: "Show the dependencies of this node" and "Show the references where this object is used".

On the left side of the panel there is a cursor, which allows to establish the dimensions of the graph. There are several different possibilities to set the dimensions of the graph:

- By using the 1:1 button (the graph will have an optimal dimension) - By using the "Fill" button (the graph will fill the whole panel) - By using the cursor (the dimensions should be set in a range between 0 and 100.00) - By using the combo Ctrl + Mouse Wheel

At the same time, there are some combinations that can be seen in the next figure:

On the top side of the Graph Dependencies panel there are some other possible options. First, it is possible to select the desired layout type of the graph by using the "Pick Layout Type" list. There are several different algorithms to display the graph:

- Bounded FR - Circular - Compound FDP - Efficient Sugiyama - ISOM - KK - Lin Long - Tree

The most common one from all these graph types is the Efficient Sugiyama.

The second menu list available on the top of the Graph Dependencies panel allows to filter the desired category of items displayed: "Select a Filter Category". There are several available categories:

- Animations - Bitmaps - Controls 3D - Controls 2D - Display - Scene 3D - Scene 2D - Shaders - Shader Programs - Vertex Buffers

By left-clicking on a node in the graph two buttons will appear in the right corner:

- "Show references" which will display the usage of an item in a graph with navigation and scene tree synchronization - "Show all dependencies" which will display all the dependencies of an item in a graph

Another given possibility is to move the graph in the Graph Dependencies panel. For example, if the "Scene" category is selected, you will be able to see the relationships between the main scene and all the scenes associated with those imported .fbx that are used in the main scene. It is possible to select and to move the whole graph; to do this, just left click somewhere near the graph and hold down the left button of the mouse. On this way, it is possible to move the entire graph in any desired place inside the panel. If just one of the scenes is selected by clicking on it, it will be possible to move just that element.

: When a category with many elements is filtered by using the specific menu list, the graph will not be centered and the only visible elements can be some peripheral parts of the tree.

To center the graph, first, the "Fill" button has to be used. After this, the "1:1" button will center the graph instantly. Last but not least, even though the filter category is used to show a specific category, it is possible to choose one or many elements that do not pertain to that category to be shown. To obtain this effect let's suppose that the Scene category was previously selected. By right-clicking on any scene displayed in the graph, there is a "Pinned" option available in the context menu.

In the case of the main scene, these "Pinned" option is enabled. For any other secondary scene this option is disabled. If this option is enabled, the graph will display all the elements of that category, plus the "pinned" elements from the previous category.

--- #### Activation of Items Referenced If necessary, it is possible to activate items referenced through paths. The Activate button will load the item in the property grid and in others panels linked to the type of the item. This feature is available for any referenced item as can be seen in the examples below. For a TextStyle referenced by a text node:

For a Bitmap referenced by a bitmap node:

For a Render target referenced by a camera:

# Locking/Unlocking the Properties Panel Some behaviors like e.g. the ForwardValue behavior have a property TargetNode. The appropriate TargetNode can be assigned by pressing the respective icon button, which will open the "Choose Item" dialog as shown in a [Behavior example](https://doc316en.candera.eu/books/controls-and-behaviors/page/examples-using-predefined-behaviors#bkmrk-5.-select-the-forwar). There is an alternative - possibly more comfortable - way to configure the TargetNode via drag & drop. Like various DCC tools and Game Development Platforms, Scene Composer employs a locking and unlocking method for the Properties panel to significantly enhance the workflow efficiency for designers. This method the user to lock the properties panel on the top right side of the property panel and move SCItems via drag and drop into the property fields. The value that is being copied into the fields is the path (if the field requires it) or the name of the item. #### How to use the Locking/Unlocking method 1. Select the target node from the scene tree, and then select the behavior displayed in the extra scene tree.

2. Click the Lock button in the upper right of the properties panel for the selected behavior to lock the properties panel. - While locked, the properties of the object selected when locking will be displayed and maintained.

3. In the scene tree, select the node you want to set as the TargetNode, and drag and drop it onto the \[TargetNode\] in the Properties window, where it will be displayed in step 2.

4. Click the Lock button in the top right of the Properties panel again to unlock the Properties panel.

**Limitation:** Drag&drop to Properties panel doesn't work for external (windows) files.

# 3D Scene Design # 3D Nodes #### **3D Toolbox** 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: **3D Nodes**

1	Group: Represents a parent container for nodes or other groups. [Candera::Group](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_group.html "The class Group is a scene graph node that stores a set of Nodes as its children. The parent-child re...")
2	Light: Different types of light could be added to illuminate the scene objects. [Read more...](#bkmrk-light) [Candera::Light](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_light.html "A Node that represents different kinds of light sources. Light sources are used to determine the colo...")
3	Camera: To be linked to a render target, where the render result of the camera will be drawn. [Read more...](#bkmrk-camera) [Candera::Camera](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_camera.html "A Camera provides Modelview and Projection matrices. Camera is a Transformable.* The eye point is set...")
4	Reflection Camera: Creates a reflection of a specific camera on a given reflection plane. [Read more...](#bkmrk-reflection-camera) [Candera::ReflectionCamera](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_reflection_camera.html "A ReflectionCamera represents a reflected view of an associated source camera (See function SetSource...")
5	Stereo Camera: Creates the effect of stereo 3D. [Read more...](#bkmrk-stereo-camera) [Candera::StereoCamera](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_stereo_camera.html "A StereoCamera is a controller of two assigned Camera objects, used to realize the effect of stereosc...")
6	Sky Box: A type of mapping that gives the user the feeling of immersion into a large environment. [Read more...](#bkmrk-sky-box) [Candera::SkyBox](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_sky_box.html "A SkyBox is an axis aligned cube in world-space, which is used to display the background environment ...")
7	Billboard: A textured or colored 2D area. [Candera::Billboard](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_billboard.html "The class Billboard represents a Plane that can align towards camera automatically, according to the alignment type set. Thus, Billboards are quite often used as "imposters" pretending to be a 3D geometry by showing a 2D image that is always facing the camera. In order to relief distinction between Billboard and PointSprite see following comparison: + Billboards support rectangular dimension and non-uniform scale, + Billboards support different rotation techniques (see Alignment), whereas PointSprites are aligned according to CenterEyeAlignment, exclusively. + Billboards take local rotation and scale into account (see class Transformable), whereas PointSprites ignore Transformable parameters others than position. + PointSprites have a performance advantage due to less geometry (one instead of 4 vertices). Overall recommendation: Use PointSprites for spherical shapes like particles, lens flares, sparkles, dust which are screen aligned (see Billboard::CameraUpAlignment). Further, use Billboards for world up oriented clouds, text, or yaw axis aligned trees, and signs, etc. Note: The Billboard - because of absent normals - does not support lighting. Belows sketch depicts the layout of a Billboard. W U:0,V:1 +-----+ U:1,V:1 H \| X \| Legend: texture coordinates: U,V; Width: W, Height: H, Local Center: X U:0,V:0 +-----+ U:1,V:0.")
8	Planar Shadow: Provides the possibility to "throw" some shadows on a configurable planar surface. [Read more...](#bkmrk-planar-shadow-0) [Candera::PlanarShadow](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_planar_shadow.html "PlanarShadow implements a simple technique to simulate shadow casting. Basically a PlanarShadow node ...")
9	MorphingMesh: A mesh that stores weight values for morphing. [Read more...](#bkmrk-morphing-mesh) [Candera::MorphingMesh](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_morphing_mesh.html "MorphingMesh is a Mesh that stores weight values for morphing, and activates them as uniforms at rend...")
10	LodNode: A node which accommodates multiple nodes, each of them representing a certain, predefined level of detail. [Read more...](#bkmrk-level-of-detail-%28lod-1) [Candera::LodNode](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_lod_node.html "LodNode represents a Node which accommodates multiple nodes, each of them representing a certain...")
11	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](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_point_sprite.html "PointSprite represents a GL point primitive. The size (glPointSize) of the point is calculated by def...")

**Canvas Nodes**

12	Canvas: A node which acts as a surface. [Read more...](#bkmrk-canvas-0) [Candera::Canvas](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_canvas.html)
13	CanvasGroup: A node which can contain other canvas nodes. [Read more...](#bkmrk-canvas-0) [Candera::CanvasGroup](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_canvas_group.html)
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...](#bkmrk-canvas-sprite-0) [Candera::CanvasSprite](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_canvas_sprite.html)
15	CanvasText: A node which facilitates displaying text on Canvas. [Candera::CanvasText](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_canvas_text.html "CanvasText represents a text node within a 3D Canvas object.")

Create a new 3D node by drag & drop

- on the Scene Tree to sort the node properly into the scene graph - directly into the render view of the Scene Editor to create the node on a specific display coordinate.

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](https://doc316en.candera.eu/books/appendix/page/properties-overview "Properties Overview") listing the Tooltip descriptions. #### **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](https://doc316en.candera.eu/link/133#bkmrk-camera-gizmos%C2%A0 "3D Nodes") 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):

- **Type:** The type of a light source can be changed at any time. This might be useful for switching to a simpler lightning model. Illumination is enabled, if light has rendering enabled and if the node is in the same scope as the light. - **Ambient Color:** defines the ambient color component that illuminates the ambient color component of the material. - **Diffuse Color:** illuminates the diffuse color component of the material. It is ignored if type of light is Ambient. - **Specular Color:** defines the specular color component that illuminates the specular color component of the material. Ignored if type of light is Ambient. - **Direction:** defines the direction of the light. It is ignored if type of light is Ambient or Point. - **Range:** defines the range from light to geometry in world space where illumination is applied. It is ignored if type of light is Ambient or Directional. - **Intensity:** The intensity factor for the diffuse color of the light. Ignored if type of light is Ambient. - **Enable Attenuation:** Enables or disables the attenuation of light. The greater the distance of an object's geometry to the light, the less illumination is applied. This property will be ignored if the light type is Ambient or Directional. - **Constant Attenuation Factor:** defines the constant attenuation factor of the light. The attenuation equation is: 1 / (constant + (linear \* distance) + (quadratic \* distance^2)). It is ignored if type of light is Ambient or Directional. - **Linear Attenuation Factor:** defines the linear attenuation factor of the light. It is ignored if type of light is Ambient or Directional. - **Quadratic Attenuation Factor:** defines the quadratic attenuation factor of the light. It is ignored if type of light is Ambient or Directional. - **Spot Angle:** defines the spot angle of the light cone in degrees. It is ignored if type of light is Ambient, Directional, or Point. - **Spot Exponent:** the distribution of the light within the spot light cone. It is ignored if type of light is Ambient, Directional, or Point.

Light properties that can be edited in ShaderParamSetter:

- **CoordinateSpace:** defines the coordinate space for lighting calculations in shader. It has two possible options: > Object - Light is transformed into object space to calculate vertex illumination > World - vertex and normal are transformed into world space to calculate vertex illumination. Object space is less computation intensive and is preferred. However, to assure accurate illumination of non-uniform scaled objects, lighting in world space is indicated.

#### **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](https://doc316en.candera.eu/link/133#bkmrk-camera-manipulation%C2%A0-0 "3D Scene Editor") 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:

- **"Render Benchmark":** A render measure value of the node, given an average time required to rendered that node. Render benchmarks can be calculated by CGI Analyzer and imported into SceneComposer. - **"Benchmark Threshold":** Only nodes with an accumulated node render benchmark value smaller than or equal to the given threshold will be rendered during a single render call. Otherwise rendering is paused and the remaining nodes will only be rendered in the next step.

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

Occlusion culling render strategy applies only to OpenGLES 3.0 platforms.

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. #### **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. #### **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 and - Convergence distance

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.

: The stereo camera configuration is hardware dependent and it reflects the way in which the stereo effect is achieved in hardware. Without a special designed hardware it is not possible to properly display any stereo content. Stereo hardware most commonly provides the viewer True 3D visuals by interlacing or overlapping the two video outputs on the same display unit.

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:

- Create a Display and two Render Targets. [Read more...](https://doc316en.candera.eu/books/display-configuration/page/add-a-new-render-target) - Associate every of the two cameras to one specific display (RighEye Camera to the R Render target and LeftEye Camera to the L Render target). [Read more...](https://doc316en.candera.eu/books/display-configuration/page/link-a-camera-to-a-render-target)

Both Render Targets are expected to be kept grouped under the same Display as it can be noticed in the image above. #### **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.

The Viewport property is automatically set. Practically speaking, all the cameras are automatically configured. The dimension of the render target is the only setting that has to be configured manually.

#### **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.

: The sky box cannot be manipulated by using gizmos and its bounding box cannot be displayed when it is selected.

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:

- If the Render Mode is used, Enable Depth Write and Enable Depth Test have to be set as "false"; - An adequate CubeMapTexture with six sides has to be set as texture; - In Appearance the Shader Program that must be selected is RefTransCubeMap\_RefCubeMapTex;

#### **Planar Shadow** To configure it the following steps have to be taken:

- Set the light property (the source which will generate the shadow of the object) - To set the display it is mandatory for the render target to contain a stencil buffer (stencil bits = 8) - Shadow plane might be configured by using the PlaneDistance and PlaneDirection properties. Please, note that the shadow is on object by itself so its color (material) or render mode can be changed. - The default shader is adequate for the renderization process.

The AlignmentNode property exposes Candera's automatic alignment behavior. When the alignment node is set, [Candera](http://dev.doc.cgistudio.at/APILINK/class_candera.html "[DataBinding_RefTypeSample]") 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:

- The shadow cannot be edited by using gizmos (translate, rotate, scale); - The shadow bounding box is the only selection indicator; - The correct renderization is related with a stencil buffer; - It is not possible to add children on shadows; - The shadow is a mesh; so, a vertex buffer can be associated. If the user will explicitly associate a vertex buffer, the shadow can render with that vertex buffer just if the "IsAutoVertexBufferEnabled" property is deactivated.

#### **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.

It is possible to import FBX files in SceneComposer by dragging them on "Solution Explorer" panel.

Configuring shape morphing in SceneComposer:

- Create a "MorphingMesh" in a scene by drag and drop from the 3D Toolbox. - Drag and drop all vertex buffers having the same amount of vertices, which shall be used for morphing to the MorphingMesh.

The vertex buffers can be dragged just from the Solution Explorer to the MorphingMesh

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

: The sum of the weight of all morphing mesh items part of a MorphingMesh must be 1.00 to get correct morph behavior.

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

When a wireframe vertex buffer is applied to a morphing mesh and the “Wireframe Enabled” option is enabled from the context menu in the scene tree, the properties item “Line Width” is added to the Morphing Mesh. This specifies the line width of the Morphing mesh when it is rendered as wire.

- The actual line width is determined by rounding the specified width to the nearest integer. - If the setting is less than “1”, it is always set to “1”.

##### Morphing Shader The reference shaders for morphing:

- RefTransLight1Morph\_RefColor and - RefTransLight1Morph\_RefColorTex

support morphing between maximal 2 vertex buffers. #### **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:

1. Create a lod node item called "LodNode" in a scene by dragging it from the Toolbox and dropping it to the scene. 2. Add children (for example: 2 Billboards) to the LodNode, providing models for each desired lod level. Note that each child node needs to have an own RenderMode attached.

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

- index, - lower bound of visibility range and - upper bound of visibility range.

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:

- LoD render strategy, - LoD criterion and the - preview type

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:

- Enable Depth Bias - Opaque and Transparent Render Order Bin

Again, after choosing "DistanceToCamera" Lod criterion, the LoD level will be switched depending on the distance of the LoDNode to the camera. #### **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:

- RefCanvasTrans\_RefTex - RefCanvasTransLight1\_RefColor - RefCanvasTransLight1\_RefColorTex - RefCanvasTransUniDiffuseMat\_RefCanvasUniDiffuseMat

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](https://doc316en.candera.eu/books/layouter/page/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 access it, first, a Canvas Group - included in a Canvas - has to be selected:

: In order to get the best perspective on a scene where canvas groups/nodes are used, a special canvas camera is available (see the image below).

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 - Grid Layouter - Overlay Layouter - Stack Layouter - DockPanel Layouter

The "Ctrl+L" command is a shortcut for the "Do Layout" operation. Please, note, that in the case of 3D Canvas layouter, this command will update the position and scale' values for the selected object.

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

1. Select the Canvas Group holding the nodes to be layouted in the Scene Tree panel 2. Choose LayoutType "Baseline" from the Properties panel 3. Set any value for property Base Line Offset in the Properties panel, depending on the desired laying out

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

1. Select the Canvas Group holding the canvas nodes to be layouted in the Scene Tree panel 2. Choose LayoutType "Grid" from the Properties panel 3. Optional: Set the number of rows and columns of the grid by editing the properties RowCount and ColumnCount in the Properties panel 4. Use the context menu item "Configure Layouter" on the selected Group in the Scene Tree panel to open the "Grid Layout Editor" dialog

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:

1. Select the Canvas Group holding the canvas nodes to be layouted in the Scene Tree panel 2. Choose LayoutType "Overlay" from the Properties panel

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

1. Select the Group holding the nodes to be layouted in the Scene Tree panel 2. Choose LayoutType "Stack" from the Properties panel 3. Choose "Horizontal" or "Vertical" value for property Arrangement in the Properties panel, depending on the desired laying out

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

1. Select the Canvas Group holding the canvas nodes to be layouted in the Scene Tree panel 2. Choose Layout Type "DockPanel" from the Properties panel 3. For any canvas node inside the Canvas Group a new property will become available: "Dock Side". Select it and choose any of the fours available laying outs: "DockLeft", "DockTop", DockRight", "DockBottom".

# Node Attachments #### **Node Attachments Toolbox** ##### Create 3D Node Attachments A node can have an appearance attached, having up to four children. Following items from the Toolbox can be used to configure attachments for 3D nodes:

1	Appearance: Its attributes define the distinctive visualization of a geometry like Mesh, Billboard, and PointSprite. [Candera::Appearance](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_appearance.html "The class Appearance groups following render attributes: Material, Textures, RenderMode, and Shader. Render attributes define the distinctive visualization of a geometry like Mesh, Billboard, and PointSprite. Further, render attributes can be shared across multiple objects, which conserves memory and enables sharing of appearance characteristics. An Appearance object is mandatory for any object in order to get rendered. Per default all render attributes are initialized to null, which is a valid setting. If the Appearance is activated, all render attributes that are set become activated. If no RenderMode is defined (null), then the default RenderMode is used instead;.")
2	Material: Describes the color attributes of an object's surface. It is primarily used for lighting computations. [Candera::Material](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_material.html "The class Material describes the color attributes of an object's surface and is primarily used for li...")
3	RenderMode: An appearance component that encapsulates polygon-level and per-fragment compositing render attributes. [Read more...](#bkmrk-render-mode) [Candera::RenderMode](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_render_mode.html "The class RenderMode is an Appearance component that encapsulates polygon-level and per-fragment comp...")
4	Uniform Setter: A setter associated to a given node in a 3D scene to generate special effects. [Candera::GenericShaderParamSetter](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_generic_shader_param_setter.html "GenericShaderParamSetter bundles uniform shader parameters that are calculated by Candera...")
5	Texture: A collection of textures. Up to 16 on ES3.0 builds and up to 8 on ES2.0 builds. On ES3.0 builds, additional auto-uniform samplers u\_Texture–u\_Texture15 and u\_CubeMapTexture–u\_CubeMapTexture15 are available for binding the 1th–16th textures. On ES2.0, only u\_Texture–u\_Texture7 and u\_CubeMapTexture–u\_CubeMapTexture7 are available. [Candera::Texture](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_texture.html "Texture encapsulates a TextureImage and a set of attributes specifying how it is applied to a vertex'...")
6	Cube Map Texture: A particular type of environment mapping. [Read more...](#bkmrk-cube-map-texture) [Candera::GenericShaderParamSetter](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_generic_shader_param_setter.html "GenericShaderParamSetter bundles uniform shader parameters that are calculated by Candera...")
7	Render Order Bin: Is used to configure a non-default render order for all the 3D objects in a scene graph. [Read more...](#bkmrk-render-order-bins) Candera::RenderOrderBin

Create a new attachment by drag & drop an attachment type from the Toolbox on the desired 3D node in the Scene Tree panel. **Apply Appearance Template to Multiple Nodes** It is possible to apply an attachment to multiple nodes at once: When all the desired nodes are selected, drag and drop the attachment on the multi-selected nodes.

#### **Render Mode** ##### Configure Render Mode If no "Render Mode" is associated to an object, SCHost will automatically apply the values set in the Default render mode configuration (the default render mode). Otherwise, if a render mode instance already exists on a specific node, note the following: In the Properties panel, the RenderMode properties provide a checkbox on the left side with two states:

- **"Inherited"** (the value is inherited from the default render mode) and - **"Not Inherited"** (the value set by the user is the one considered).

If the property value is set to Inherited, the property will be read only and the value will be taken from the DefaultRenderMode (Configuration > Default Render Mode). Only if the checkbox is unchecked (meaning that the property does not inherit from the default render mode configuration) the property will be editable.

A new Render Mode added to a node will have all properties set to "Inherited". A RenderMode created based on an imported Scene will have all properties set to "Not Inherited".

#### **Cube Map Texture** ##### Cube Mapping Cube mapping is one of the most spectacular types of the so called environment mapping. In SceneComposer this type of mapping can be done by using the CubeMapTexture from the Toolbox. First, a mesh and a collection of six images of a cubical environment map have to be imported. The mesh will be dragged in a 3D scene. The Appearance has to be contained:

- Material - does not require any special setting; - Render Mode - the FrontFaceCulling property has to be selected; - One of the specific shaders available for the CubeMapTexture (e.g. RefTransCubeMap... shader) - in Appearance the Shader Program that must be selected is RefTransCubeMap\_RefCubeMapTex; - UniformSetter - The uniform setter required by the chosen shader has to be checked

`CubeMapTexture` supports **up to 16 slots on ES3.0 builds** and **up to 8 on ES2.0 builds** (each slot maps to `u_CubeMapTextureN`).

The main feature that has to be used is CubeMapTexture which has to be dragged and set as texture. Six specific properties will become available for this type of texture: Positive X Image / Negative X Image / Positive Y Image / Negative Y Image / Positive Z Image and Negative Z Image. Any of the imported images has to correspond to one of these properties.

: Any of the imported six images has to be vertically flipped to get the desired map. (This step is mandatory because of the OpenGL standard that stores its textures "reversed".)

Any model can be placed inside the environment (in our case, a cube) and set as a reflective map. One of the best examples is to place a sphere inside the cube environment and to use the RefTransCubeMapReflection\_RefCubeMapTex shader. The setting of the properties will be almost the same as in the Cube mapping case. The UniformSetter properties which have to be enabled are ModelMatrix4, NormalModelMatrix3 and ModelViewProjectionMatrix4. The same six images can be used for the sphere as six textures displayed as an unfolded cube.

By placing the sphere in an environment some complex and spectacular scenes can be created.

#### **Render Order Bins** Render Order Bins are containers for items to sort them for rendering. For a detailed description of the [Candera](http://dev.doc.cgistudio.at/APILINK/namespace_candera.html "[DataBinding_RefTypeSample]") Render Order concept, refer to [Application and Widget Development Tutorial](https://doc316en.candera.eu/books/candera). The Render Order Bins collection is displayed in the RenderOrderBins Panel. It can be enabled by choosing "View - Scene - Render Order Bins" menu option.

There are two predefined Render Order Bins: **Opaque** and **Transparent**. Per default, all objects part of a scene are sorted into that bins according to their render attributes. Both default bins are protected, meaning that they are under control of [Candera](http://dev.doc.cgistudio.at/APILINK/namespace_candera.html "[DataBinding_RefTypeSample]") and cannot be deleted.

---

##### Configure a New Render Order Bin To specify a non-default render order, create a new Render Order Bin by drag & drop from the Toolbox into the RenderOrderBins collection.

- To **assign items** to the new Render Order Bin, drag items from the scene graph in the "Scene Tree" panel to the Render Order Bin; these items will appear as children of the Render Order Bin. - Modify **Render Order Bin Rank:** All the bins are sorted according to the Render Order Bin Rank which is visible as a "read only" field in the Properties panel. If there are many bins dragged from the Toolbox inside the "Render Order Bins" panel, their ranks will be automatically assigned to each of them according with their order. Every time when the user manually rearranges the order of the bins in the "Render Order Bins" panel, their rank is updated. - If property **Enable Sorting** is checked for the Render order bin, a proper **Render Order Rank Criterion** must be chosen to define the strategy how the render order shall be calculated. > If the selected order criterion is "DistanceToCamera" or "ReverseDistanceToCamera", the "Distance Function" will become available. The mentioned function determines how the distance from camera to any node is calculated. > In case a (Reverse) Render Order Rank Criterion is selected, specify the ranks of the nodes part of a bin on the node property "Render Order Rank". > If the selected order criterion is "BatchOrderCriterion", the "SortbyShaderandRenderMode" and "SortbyAppearance" modes will become available. This criterion produces a render order containing series of nodes that can then be batched by the Renderer to maximize usage of Geometry Instancing.

In order to check the "BatchOrderCriterion" the following steps should be followed:

- Open/create an OpenGL ES 3.0 Solution; - Import an .fbx object; - Create a 3D scene containing the object and a camera (do not activate occlusion culling render strategy); - Create a display, a render target and set the camera to render on the display; - Clone some meshes and apply a different appearance to them; - Set up so that shared appearance meshes are not adjacent. Example: CAM < MESH1 MESH2 MESH3 MESH4 MESH5 MESH6 (odd number meshes have shared appearance, others have a different appearance); - For the Opaque render order bin, enable sorting; - Sorting by ReverseDistanceToCamera will reduce the number of Instances (0) and increase the Draw Calls (6) (see the "Display Render Statistics" in SceneComposer); - Sorting by BatchOrder will draw increase the number of Instances (3) and reduce the Draw Calls (4).

: The previous step will lead to the desired results *just* if a RenderMode object will be associated with every item placed in the Render Order Bin by dragging it from the toolbox panel ("Toolbox" > "Attachments") inside the Appearances section of the Scene Tree. After this operation, the properties "Enable Depth Write" and "Enable Depth Test" which are associated with every RenderMode associated to the items have to be set as in the image below.

- A Render Order Bin can be **cloned, deleted or rename** like any other scene node. **Remove items** from a bin with the "Remove From Bin" context menu.

**See also:**

- [Candera::DistanceToCameraOrderCriterion](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_distance_to_camera_order_criterion.html "class DistanceToCameraOrderCriterion compares two Node's distances to the camera. A render order bin ...") - [Candera::CameraOrderCriterion](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_camera_order_criterion.html "Abstract class CameraOrderCriterion implements different distance functions to determine the distance...")

#### **Node Attachment Templates** SceneComposer allows saving any node attachment (Appearance, Material, Render Mode or Texture) as a template to enable reuse for other nodes. Templates are also listed in the Templates panel.

---

#### Save as Template Select a node which contains an appearance, material, render mode, or texture in the Scene Tree and save the selected node attachment as a template with the context menu item "Save as Template".

Alternatively directly select the node attachment in the right side of the Scene Tree and use the regarding context menu item to save the selected attachment as template:

In the "Add New Template" dialog, specify the template location and template name. Tick the checkbox "Is Instance Sharing Enabled" to allow sharing of a template instance across several nodes (refer to the chapter [Shared Node Attachments](#bkmrk-shared-node-attachme) for more details).

The new template will be displayed in the Templates panel. This panel contains all node attachment templates grouped by type:

--- #### Appearance Wrapper In some circumstances it could be necessary to expose for the user just those properties which should be modified to get a desired setting of an object. For instance, if the object is a button used in an interface, we can suppose that the only properties which have to be modified by the user are "Font", "Text" and "Status". But if the appearance of the object has many other properties, it could be overwhelming for the user to understand exactly which properties have to be modified to get the desired result. So, it is easy understandable why is necessary to provide a concept which will allow replacing a node attachment with an object which exposes only some properties of a regular node attachment. This Appearance Wrapper feature allows to expose only some properties of an appearance attached to a node or the properties pertaining to its containments (material, render node, shader, uniform setter, texture). In this way, the goal mentioned above - the user will be able to see and modify just the exposed properties - is fulfilled. When a template object is created from an existing appearance attached to a node, in the "Add New Template" dialog an Is Encapsulated check-box becomes available. If this check-box is enabled, all the properties associated with the template will not be visible for the user in the properties panel when the template will be used. Only the "Generic" category of properties will be available in the Properties panel. If the user needs only some of encapsulated properties to be visible, this operation should be done by righting click on the template which has all the properties encapsulated. From the context menu the "Configure Properties" should be chosen. The "Configure Properties" dialog provides the possibility to select which encapsulated properties will become visible in the Properties panel. This operation could be done by using the "IsChecked" boxes available in the dialog. When a template with exposed properties is used, all the properties will become visible in the "Public Properties" category of the Properties panel.

---

#### Use a Template Use a template by dragging it from the Templates panel and dropping it on the desired parent in the Scene Tree:

- An appearance template on a node, - material, render node and texture on a Appearance.

It's possible to apply the same template to many multi-selected nodes at once. After all the desired nodes are selected, drag and drop the template on the multi-selected nodes.

If a drag operation is performed between two panels and the destination item is part of a multiple selection, all the items in the selection will be affected.

The template will replace the existing node attachment by an item linked to the template. In case the template allows instance sharing, the Shared Instance Id used for the node is displayed in brackets.

##### Edit a Node Attachment Template Edit a node attachment template in the Properties panel after selecting a template in the Solution Explorer panel or in the Templates panel. Any change in the template will be reflected in all the nodes using it. #### **Shared Node Attachments** Shared node attachments refer to instances of appearances, materials, render modes, or textures which are being shared between nodes.

The appearance sharing is only supported for appearance collections.

There are several options: **Prevent sharing of a template:** Disable the property "Is Instance Sharing Enabled" of the node attachment template. In this case, each time such a template is applied to a node, a new instance of the template will be created for this node. **Share exactly one instance of a template:** Enable the property "Is Instance Sharing Enabled" of the node attachment template and use only the default value "0" for the node attachment property "Shared Instance Id". In this case, each time such a template is applied to a node, the same template instance will be shared among all nodes. **Share more than one instance of a template:** Enable the property "Is Instance Sharing Enabled" of the node attachment template and specify as much distinct values for "Shared Instance Id" as instances are required.

---

#### Enable Instance Sharing Whenever a new node attachment is created and about to be shared, enable the property "Is Instance Sharing Enabled":

This property can be also set in the Properties panel after selecting an existing template from the Templates panel.

---

#### Specify Shared Instance Ids Node attachments from scenes which are linked to templates having "Is Instance Sharing Enabled" set to true will get a new property "Shared Instance Id" to indicate which shared instance of the node attachment to use:

- If Shared Instance Id is set to -1 a new unshared instance will be created (please, note, that when the Id =-1 even if the template is shared it will be used as if it is not shared), - Otherwise a shared instance will be created and reused by all nodes having the same Shared Instance Id for that node attachment type. - Default value for Shared Instance Id is 0 to indicate that the first shared instance of the template is used.

##### Edit Shared Instance Ids: The Instance Id of a node attachment can be edited in the Properties panel of the node attachment. For an overview of all nodes using a shared node attachment template, use the Instance Id Editor from the context menu of the node attachment template:

Refer to the Node Attachments Optimization Wizard for optimizing existing scenes regarding node attachments. It is possible to export a .csv file with all the shared items by using the "Export to CSV" button which can be seen in the figure above. #### **Node Attachment Optimization** SceneComposer provides a wizard to automatically detect node attachments which could be replaced by shared node attachments templates. It is possible to create new node attachment templates, which can be used for the optimization, if no proper node attachment templates exist yet. Selected node attachment candidates can be replaced by shared node attachment templates by the wizard. ##### Invoke Node Attachment Optimization Wizard Invoke the node attachment optimization wizard from the context menu of any folder in Solution Explorer panel, or from a scene in the Scene Tree:

In the Node Attachment Optimization Wizard, select either the entire solution, or a specific scene or location within the solution as root location for the wizard. Further, the type of node attachments to optimize can be selected.

Press the "Next" button to start optimization analysis for the first type of node attachment. ##### Optimization Analysis Results During optimization analysis, the wizard detects all nodes with identical properties regarding the selected type of node attachment, and suggests proper node attachment templates to share between those nodes. As a result of the analysis, the wizard provides a list of node attachment template candidates, which could be shared among several nodes, as well as the number of nodes which would benefit from sharing the same template. If no proper node attachment template candidate exists yet, the nodes which could share their attachments are listed under the name "( Empty )".

Select "Include already optimized" to include node attachments that have been previously optimized in the list.

---

#### Apply Node Attachment Optimizations Select the node attachment sharing candidates you want to optimize by

- ticking the checkbox in the left side of the result list and - pressing the arrow button to expand the details for the selected candidate:

Now all fields to apply the optimization are editable:

- Tick **"Create new"** if no proper node attachment template exists yet. The wizard will create the proper template in the Templates panel. - Tick **"Use existing"** and select the desired node attachment template from the combo box.

In the list below, specify which nodes should share the given node attachment template. The numbers displayed in the right side of each node represents the SharedInstanceId to be used. Apply the changes by pressing the **"Apply changes"** button from the upper right corner of the wizard dialog. Repeat the optimization for all node attachment types which have been selected in the initial wizard step:

- Appearance - Material - RenderNode - Texture

#### **Appearance Editor** The Appearance Editor offers a visual editing and comparison mode for several appearances. Go to "View" > "Editors" > "Appearance Editor" to activate the Appearance Editor panel. Drag and drop node attachment templates from the Templates panel to the Appearance Editor:

Each of the node attachment template displayed in the Appearance Editor can be selected and then edited using the Properties panel. All changes applied in the Properties panel will be reflected in the Appearance Editor.

It is possible to apply the same appearance to many multi-selected nodes at once. After all the desired nodes are selected, drag and drop the appearance on the multi-selected nodes.

: If a drag operation is performed between two panels and the destination item is part of a multiple selection, all the items in the selection will be affected.

# 3D Scene Editor The "Scene Editor" is the main panel of the application in which scenes and animations are displayed ("render view"). It is the only panel that cannot be closed. This page describes the five types of interactions that are possible with the render view. See Also : [3D Editing Helpers ](https://doc316en.candera.eu/books/preferences/page/3d-editing-helpers "3D Editing Helpers") --- #### General By default, only one Scene Editor is displayed (Scene Editor (0) only). You can display up to four Scene Editors (Scene Editor (0) to (4)) as needed. You can show or hide them from the menu bar \[ View > Editors > Scene Editor \]. - Scene Editor menu on the Menu Bar

- The \[ Display Scene Editor \] icon on the toolbar

When you click the \[ Display Scene Editor \] icon, four icons will appear for toggling the visibility of the Scene Editor. Please refer to the table below for details on each icon.

	The Scene Editor (0) is displayed.
	The Scene Editors (0) and (1) are displayed.
	Scene Editors (0) through (2) are displayed.
	Scene Editors (0) through (3) are displayed.

When a display setting not listed in the table above is applied in the Scene Editor menu on the Menu Bar, the \[ Display Scene Editor \] icon will display "Custom".

Displaying multiple Scene Editors is useful when you want to check a 3D model from multiple directions at the same time.

Additionally, scene editors (1) to (3) support floating display. By using floating display, you can display any scene editor on a separate display.

If the displayed Scene (or Control) is updated, it will be reflected in all Scene Editors.

--- The following is an explanation of the scene editor tool icons. #### Camera Manipulation The Camera combo box provides following camera views for a 3D scene:

- **"Perspective" camera:** It offers an approximate representation of the image as it is seen by the eye. A default light is used when the scene doesn't contain any object of type light. Scene Editor provides a [navigation panel ](#bkmrk-navigation-panel%C2%A0)on the bottom right so the objects can be viewed from all sides. - **"Orthogonal" cameras** with the subcategories Front, Rear, Top, Bottom, Left and Right: Orthogonal projection is a means of representing a three-dimensional object in two dimensions. - **Scene cameras:** Further, each camera part of the scene is listed in the combo box. If a scene camera is selected, the scene is displayed from that camera's perspective. Scene cameras are created by dragging an item of type "Camera" from the Toolbox panel and dropping it into the Scene Tree or Scene Editor panel.

: The scene has to contain an object of type Light to ensure proper lighting in the scene.

In scene camera view, the camera properties can only be edited in the "Properties" panel.

Perspective Camera (Editor):

Orthogonal Cameras:

Scene Camera View

The Aspect Ratio and the Aspect Autofit properties are available for Camera 3D. If the Aspect Autofit property is set to true (when the checkbox available for Aspect Ratio property is checked), the aspect of the camera will be calculated based on the width and height of the render target. Otherwise, if the checkbox available for Aspect Ratio is left unchecked, the aspect of the camera will be calculated based on the resolution of the display.

: Both properties are available under the name of the first property - Aspect Ratio.

##### Camera Panning and Zooming The scene content displayed in the Scene Editor can be modified like this:

- **Panning:** Move the mouse while holding the middle mouse button down - **Zooming:** Rotate the mouse wheel forward for zooming in and backward for zooming out

Enable panning and zooming also for scene cameras with a preference option:

- Tick **"Enable scene camera manipulation"** in the "Editor Preferences" dialog opened from File-Preferences menu option.

##### Orient Camera to Selected Object Sometimes it is quite difficult to locate in a 3D scene a new added object. This feature provides new control to active camera: orienting it to a selected object.

This feature is available only for "Perspective" camera.

First select the object in the Scene Tree. After this the "Perspective" camera will be oriented towards the selected object, by pressing the "O" key. The position of the camera remains unchanged; the only thing that changes is its orientation. The reference of the orientation is the geometric center (or "centroid") of the selected object. ##### Rotate Perspective Camera around Selected Object The object can be seen from different angles by rotating the Perspective Camera around a selected object. After the desired object is selected in the Scene Tree, the camera can rotate around it by holding down the Ctrl key and using Rotate camera.

On the Perspective Camera Scope menu, the "Selection" option should be chosen.

##### Camera Look-At Node When this property is set the camera is automatically oriented towards the look-at-node. Up direction and look-at direction are not shown anymore in property grid. Look-at direction is discarded.

---

#### Camera Preview Thumbnail Even though the current selected camera is the Perspective camera, it is possible to see the content displayed by another camera in the thumbnail available in property grid. If the camera is not associated to a render target, the preview will be done on a fixed size virtual render target surface:

- 100x100px for 3D cameras

If the camera is associated to a render target, the preview will be generated:

- on a surface of the same aspect ratio as the render target, and then reduced to a thumbnail image - for 3D cameras

The camera preview thumbnail will be displayed in the property grid by selecting the camera whose perspective should be viewed in the Scene Tree.

The "Alpha Blend Factor" and the "Alpha Destination Blend Factor" in the Default Render Mode Configuration should be set properly. For instance, the former value could be InverseSourceAlpha and the latter value could be DestColor.

##### Reset Camera Use the "Reset Camera" button left to the Camera combo box to reset the selected view to the default location and orientation.

#### **Camera Sequence Editor** When many cameras are associated to the same Render Target, editing of the camera sequence can be done in two different ways. The first one is done by following these four steps:

- In the Render Targets panel select one camera associated to the respective render target; - Press the F3 key on your keyboard; in this way, the (0) sequence number which is placed next to the name of the camera between round brackets will become editable; - Choose and write the desired sequence number; - Press the Enter key.

The second way to edit the sequence of all cameras associated with the same Render Target is based on the usage of button "Go to Camera Sequence Editor view" which is placed in the Render Targets panel right to the Search field.

When this button is selected, a window with all the cameras from the entire solution is displayed. The filter button "Show only associated cameras" on the left allows to filter just those cameras which are associated to a render target. In the list displayed, every camera has an associated field where the sequence number can be edited. Unfiltered list in Sequence Camera view:

Filtered list in Sequence Camera view:

: When a previously created solution is converted, the user is asked if the sequence numbers have to be changed or not. If the user declines, the sequence numbers will not be updated. FTCCmd.exe does not provide this option. It will not change sequence numbers when converting the solution.

#### **Context Resource Pool** A Context Resource Pool (CRP) is used to share resources among different Context Providers. It allows grouping of render targets and associated device objects (Shaders, Texture Images, Vertex Buffers, etc.) in a common pool. The Context Resource Pool is accessible via Render Targets panel by using the specific button as can be seen in the image below.

Each platform has some rules and restrictions related to CRPs, for example on some platform multiple displays can share the same CRP, while on some other platform a CRP is required for each Window Surface. SceneComposer displays the relationship between CRPs, Displays, Window Surfaces and Frame Buffer Objects in the Render Target Explorer panel (main view and an additional CRP view). Depending on the platform, the texture render targets (frame buffer objects) may have an Owner property of type render target reference or CRP. The Owner property is available in the Properties panel (see the image below).

If the type of the Owner property is render target reference, the owner must be a display render target (window surface). If the type of the owner property is CRP (integer value in SceneComposer), the possible values will be obtained from the available displays. If the Owner property is available for a render target but it is not set by the user, the render target will be considered orphan. #### **Camera Group** Camera group feature offers extended support for display visualization. They can be added in a camera group to allow the user to enable or disable any of them (solution with many cameras). How to create a "CameraGroup":

- Via "Add" > "New item" option by using the Scene Explorer context menu. Creates a Camera group in a folder specified by the user during this process.

After creating a CameraGroup, it will be visible in the "Camera Group Explorer View". A camera group is a flat list of camera groups identified by a unique name. Any camera from any scene can be dragged from the Scene Tree inside the group.

Another way to add a camera to the group is by using the context menu: right click on a camera and select the "Add Camera To Camera Group" option.

Any camera inside the group can be locked or unlocked, enabled or disabled. Initially, all newly added cameras are ordered alphabetically. It is possible to change this order manually by dragging the cameras in the desired position.

A camera can belong to multiple groups, but its state is unique, meaning that enabling the camera in one group will enable it in all groups and also in the Render Target panel where it is associated to a render target. If a group is disabled or enabled, all the cameras inside it will be disabled or enabled. If one or many from those cameras are members of another group, the second group will be enabled or disabled too.

When a camera is a added into a Camera Group it will become a member of an array where all the other cameras are included. If one of those cameras added into a Camera Group is removed, the "Delete Items" panel will become available and the user will have the possibility to use the "Remove Array Item" resolution. In this way, the selected camera will be removed from the array of cameras contained by the Camera Group. #### **Camera Gizmos** For a camera object the following properties can also be edited by using gizmos, not only from the Properties panel: ##### LookAtVector Editing is done by click-and-drag the front of the camera as it can be seen in the image bellow and the current look at vector will be rotated by a free rotation alt-azimuthally model, using both X and Y mouse movement.

##### Up Direction Editing is done by click-and-drag the ring around the camera body (which is highlighted with yellow when selected). The current up-vector will be rotated around the world looking-at direction, obtaining a "rolling" effect considering the Y mouse movement.

##### Projection For Perspective view a wireframe frustum is provided, constructed to suggest fov,znear and zfar; for Orthographic view a wireframe rectangular prism is provided, constructed to suggest width, height, znear, zfar; for Generic projection no impersonator is provided.

#### **Light Gizmos** For a light object the following properties can also be edited by using gizmos, not only from the Properties panel: ##### Direction Editing is done by click-and-drag on the direction arrow. The direction vector will be rotated by a free rotation alt-azimuthally model, using both X and Y mouse movement.

##### Range For light of type Point the range is suggested by a set of n concentric circles laid at an exponential step (1, 2, 4, 8, etc.). For light of type Spot the range is suggested by the length of the wireframe cone. Editing (spot and point) is done by click-and-drag on the centered light source object (yellow sphere) and the range value will be modified using a combination of X and Y movement.

##### Spot Exponent Editing is done by click-and-drag on the top part of the spot cone (as it can be seen in the image bellow), and the spot exponent is modified using Y movements (up movement increases the value of property spot exponent and down movement decreases it).

##### Spot Angle A wireframe cone is provided and the editing is done by click-and-drag on the cone, the spot exponent value is modified using a combination of Y movements.

#### **Picking and Transforming Items**

In the Scene Editor, an item can be picked by clicking on it. After picking, the bounding box of the item is displayed together with the XY axes, and it is selected in the "Scene Tree" panel:

: **Groups** cannot be picked in the render view; they need to be selected in the "Scene Tree" panel. The "Scene Editor" and "Scene Tree" panels are synchronized in terms of the selected item.

---

#### Interaction Modes: Selection, Edit the margin of objects inside a layout, Translate, Rotate, Scale These interaction modes are available for 3D scenes in the Toolbar: ##### Select When the button "Select" is enabled, the selected object will be highlighted in the Scene Editor but can't be transformed. ##### Edit the margin of objects inside a layout For more information about this, please refer to [Adorners](https://doc316en.candera.eu/books/scene-design/page/adorners). ##### Translate In this mode, a translation gizmo is represented by an axis coordinate system, having three arrows handles pointing in the directions of the corresponding axis (x, y, or z). For combined operations (translate xy, xz, ..), more rectangle handles positioned on the center and aligned to the corresponding axis combination are provided. Editing is done by click-and-drag a specific arrow handle or a specific rectangle handle.

For translation mode three options are available:

- **"Only object"** will move only the object selected and - **"Object and Children"** will move the selected object with its children.

##### Rotate In this mode, a rotation gizmo is represented by a set of circles, each corresponding to a plane (xy, xz, yz). Editing is done by click-and-drag a specific circle.

Usually the object is freely rotated except the situations when the rotation angle is close to a fixed angle controlled by a tolerance. The tolerance defines the range between two multiple values where the object can freely rotate without being snapped.

- the fixed angle values shall be multiples of 45 - the angle snapping tolerance shall be 22.5 degrees.

Edit the object with a fixed angle by enabling this option using the button placed near active rendering button.

In Translate mode, another feature is the "Translation System" that allows choosing between Parent and View reference system. When Parent system is selected, the reference system is the coordinate system of the scene. Otherwise, the reference system is the coordinate system of the selected object. In both cases, the object can be moved by using the arrow keys.

##### Scale In this mode, a scale gizmo is represented in a similar way as the translation gizmo. For the combined operations (xy, xz, yz), rectangle handles are provided. For the combined (xyz) mode, a sphere handle is provided (located in the center of the gizmo). Editing is done by click-and-drag a specific arrow, a specific rectangle or the sphere.

Move the mouse while pressing left mouse button to translate, rotate, or scale the selected object in the render view. The modification of the properties is also reflected in the "Properties" panel for the selected item.

---

#### Editing Aids Move from a selected element to another one by using the Tab key. First in the Scene Editor an element would be selected by Left click on it. After this all the elements placed at the same level (in the same group) can be selected by using the Tab key.

: In complex 3D scenes is not possible to select some objects just by Left clicking on them. For instance, in a tunnel scene, if the user is trying to select the car by Left clicking on it, just the "hardware" element will be selected - which is in the front of any other elements. To select the car, right click on it and select any element placed in the ray of the "car" group.

After the selection is done, it is possible to tab all the selected elements situated at the same level. By using the Shift key + Tab all the elements can be selected in an ascendant order. Another possibility is to tab selected elements on the same (visual) ray. This option can be done by holding down the Left key and then use the Tab key. To get the ascendant direction the same combination is available: Shift key + Tab (when the Left mouse button is holding down). ##### Move Elements with Arrows Keys Any element can be moved/scaled/rotated by using arrows. After the selection of the object use the Left, Right, Up and Down arrows to get the desired results. ##### Unselect an Item The camera cannot be manipulated and vice versa when an item is selected. Unselect an item by hitting the **Esc** key. Please refer to section [3D Editing Helpers](https://doc316en.candera.eu/books/preferences/page/3d-editing-helpers) for further information. #### **Navigation Panel** SceneComposer provides a navigation panel which allows the user to manipulate the predefined perspective and orthogonal cameras using gizmos.

[1](https://doc316en.candera.eu/uploads/images/gallery/2023-02/04-3d-navigation-2.PNG)	Rotates the camera around the geometrical center of the scene
[2](https://doc316en.candera.eu/uploads/images/gallery/2023-02/04-3d-navigation-3.PNG)	Rotates the camera and does not affect the camera position
[3](https://doc316en.candera.eu/uploads/images/gallery/2023-02/04-3d-navigation-4.PNG)	Translates the objects on XYZ axes
[4](https://doc316en.candera.eu/uploads/images/gallery/2023-02/04-3d-navigation-5.PNG)	Makes zoom out, zoom in

# Vertex Buffer Editor Imported Geometry can be managed and configured in either ArrayBuffer or IndexBuffer format, depending on its Geometry Topology. ArrayBuffer offers higher rendering performance (cache efficiency and sequential read) but consumes more memory since vertices cannot be shared. To configure these two types of Vertex Buffer elements, select the vertex buffer in the Solution Explorer, and then configure the VertexGeometry (vertex attribute statuses) within the \[Vertex Buffer\] category in the \[Properties\] panel.

Within the Vertex Buffer, each Property Item has a status of Imported (available), Removed (deleted), Regenerated/Generated (added), or Missing (not set). All selected Float32-type vertex attributes within the vertex buffer can be converted to Float16 if necessary, with convertible patterns indicated in parentheses. When \[Is Indexed\] is enabled, the vertex buffer can be converted to an index array buffer by selecting the optimal index size. Depending on the vertex count, 8-bit, 16-bit, or 32-bit index buffers will be generated, and a valid buffer type can be specified via the BufferType property in the AssetData section. When importing a glTF file that contains positions, UVs, and normals but lacks tangents, tangents will be automatically generated using the MikkTSpace algorithm. With MikkTSpace support in the Vertex Buffer Editor, the “Generated MikkTSpace” and “Regenerated MikkTSpace” options can now be selected for the Tangent and BiNormal Property Items, improving rendering quality when applying normal maps and ensuring consistency across tools. The editable items are listed in the table below.

Normal	- When attribute is not included: Missing, Generated (Float16), Generated (Float32) - When attribute is included: Imported (Float32), Imported (Float32 => Float16), Regenerated (Float16), Regenerated (Float32), Removed
BiNormal/Tangent	- When attribute is not included: Missing, Generated MikkTSpace (Float16), Generated MikkTSpace (Float32), Generated (Float16), Generated (Float32) - When attribute is included: Imported (Float32), Imported (Float32 => Float16), Regenerated MikkTSpace (Float16), Regenerated MikkTSpace (Float32), Regenerated (Float16), Regenerated (Float32), Removed

The selectable items in the \[Properties\] panel vary depending on whether the imported file contains the respective vertex attributes.

- If the respective vertex attribute is not included in the imported file (Missing status), \[Generated\] can be selected. - If the respective vertex attribute is included in the imported file (Imported status), \[Regenerated\] and \[Removed\] can be selected.

If the import data and the property settings do not match, an error message will appear in the [Output Panel](https://doc316en.candera.eu/books/solution-handling/page/output). As with other properties, the settings can be reset using the arrow button on the left of each property (Please refer to the figure below). When settings are changed, values such as Vertex Stride, Vertex Count, and Vertex Format are updated and reflected within the \[Vertex Buffer\] category in the Properties panel.

# Shader Configuration

The Solution option allows for [Default Shader Configurations](https://doc316en.candera.eu/books/solution-handling/page/default-shader-config).

#### **Add a New Vertex or Fragment Shader** Shaders are software programs that include instructions on how the graphics processing unit (GPU) should render certain images on the screen. A shader program consists of two types of shaders:

- Vertex Shaders - Fragment (or Pixel) Shaders

There are following options to create a new (empty) shader, which can later be combined into appropriate shader pairs or programs. Use the "Shader" > "New shader" menu option

In the Shaders panel, use the context menu option "New Shader" of any node within the "Shaders" category:

In the "Add New Shader" dialog, specify the shader location, shader name, and shader type.

After creating the shaders, the shader instructions need to be added in the Shader Editor. #### Import Vertex and Fragment Shaders It is also possible to import already existing shaders. For information about how to import a Vertex or Fragment shader please refer to section [How to Import Resources](https://doc316en.candera.eu/books/import-of-resources/page/how-to-import-resources "Import Shaders"). #### **Add a New Shader Program** Fragment and vertex shaders are combined into shader pairs or programs which can then be applied to node appearances. Create a new shader program: Use the "Shader" > "New Shader Program" menu option.

Use the context menu option "New Shader Program" of any node within the shader program category from the Shaders panel.

Specify location and name and the desired shader pair consisting of one fragment shader and one vertex shader in the dialog "Add New Shader Program".

Tick the "Export Always" checkbox to always include the shader program to the generated assets. #### **Shader Editor** Edit shaders in the "Shader Editor". Use the menu option "View" > "Editors" > "Shader Editor" to make the panel visible.

Open shaders in Shader Editor for editing:

- Select a vertex or fragment shader in the Shaders panel - Select a shader program in the Shaders panel

The selected shader(s) are displayed in the Shader Editor panel (in both cases) like this:

- The vertex shader in the left side and - The fragment shader in the right side.

Shader requirements - including the number of lights, materials and textures - are displayed in a tab in the Property Grid when a shader program is selected. The tab also contains the available attributes and uniforms.

On OpenGL ES 3.0 targets, up to **16** texture units are supported (CANDERA\_MAX\_TEXTURE\_UNIT\_COUNT = 16). On OpenGL ES 2.0, **8** texture units are guaranteed unless ES extensions are enabled.

---

#### Shader Editor Features The context menu of the Shader Editor provides "Cut", "Copy", "Paste", "Delete", "Select All" functions for editing shader instructions:

On pressing \[Ctrl+ Space bar\], a list with helper functions is available for shader programming:

Compile the edited shader using the platform's shader compiler The compilation result is reported in the "Shader Compiler Errors" panel. This can be opened via menu item "View" > "Shader Compiler Errors". For further information please refer to section [Compile Shaders](#bkmrk-compile-shaders%C2%A0 "Compile Shaders"). #### **Compile Shaders**

Shader compilation is triggered in the following situations:

1. During shader editing, if requested via menu item "Shader" > "Compile Shader" or by pressing F7 key, the selected shader or shader program will be compiled using the platform's shader compiler. 2. During scene editing, when the scene dependencies are generated, the shaders will be compiled using an internal shader compiler (so called "builtin://DefaultShaderCompiler"). 3. During asset generation, depending on the selected shader compiler type, the shaders will be compiled using platform's shader compiler (Target) or internal shader compiler (Simulation).

The compilation result can be seen in the "Problems Browser" panel. For further information please refer to section [Problems Browser](https://doc316en.candera.eu/books/solution-handling/page/problems-browser "Problems Browser").

After successful shader compilation, a regarding message is displayed. #### **Shader Parameters** SceneComposer offers the necessary support to define shader parameters for uniform and attribute values. For every shader, [Candera](http://dev.doc.cgistudio.at/APILINK/namespace_candera.html "[DataBinding_RefTypeSample]") supplies a list of uniforms and their corresponding types. Uniforms are set via UniformSetters.

- A new category named "Shader Parameters" is loaded for every node, after choosing a Shader Program from Properties panel. - The available uniforms are displayed and desired values can be set for them after choosing a proper Uniform Setter from the "Uniform Setter" property list.

When a shader is edited in the Shader Editor panel and new uniforms are created, those uniforms will only be listed in the Shader Parameters section of the node properties after successful shader compilation. If the shader program is faulty (e.g. compile error), the previously retrieved uniforms are presented in read-only mode. #### **Instanceable Shaders** Instanceable shaders are integrated into SceneComposer. They have "Inst" in their names and are special shaders used for instanced draw. When using an instance-able shader, uniforms that are declared as arrays in the shader, will not be exposed as an array in the SceneComposer view. Instead it has to be exposed as a single value. When an instanceable shader is selected, the property grid will display the Max Instance Count value (represents the maximum number of element that the shader can render in a batch render). Instanceable shader validations. In an instanceable shader, the following shall hold true:

- All uniforms (except certain auto-uniforms) are defined as arrays - an error will be emitted otherwise - The sizes of the array uniforms must be the same - an error will be emitted otherwise

List of auto-uniforms that must not be declared as arrays in instanceable shaders:

- "u\_PMatrix", // ProjectionMatrix4 - "u\_VPMatrix", // ViewProjectionMatrix4 - "u\_CamPosition", // CameraPosition - "u\_CamDirection", // CameraLookAtVector - "u\_Texture", // Texture - "u\_Texture1", // Texture1 - "u\_Texture2", // Texture2 - "u\_Texture3", // Texture3 - "u\_Texture4", // Texture4 - "u\_Texture5", // Texture5 - "u\_Texture6", // Texture6 - "u\_Texture7", // Texture7 - "u\_Texture8", // Texture8 - "u\_Texture9", // Texture9 - "u\_Texture10", // Texture10 - "u\_Texture11", // Texture11 - "u\_Texture12", // Texture12 - "u\_Texture13", // Texture13 - "u\_Texture14", // Texture14 - "u\_Texture15", // Texture15 - "u\_CubeMapTexture", // CubeMapTexture - "u\_CubeMapTexture1", // CubeMapTexture1 - "u\_CubeMapTexture2", // CubeMapTexture2 - "u\_CubeMapTexture3", // CubeMapTexture3 - "u\_CubeMapTexture4", // CubeMapTexture4 - "u\_CubeMapTexture5", // CubeMapTexture5 - "u\_CubeMapTexture6", // CubeMapTexture6 - "u\_CubeMapTexture7", // CubeMapTexture7 - "u\_CubeMapTexture8", // CubeMapTexture8 - "u\_CubeMapTexture9", // CubeMapTexture9 - "u\_CubeMapTexture10", // CubeMapTexture10 - "u\_CubeMapTexture11", // CubeMapTexture11 - "u\_CubeMapTexture12", // CubeMapTexture12 - "u\_CubeMapTexture13", // CubeMapTexture13 - "u\_CubeMapTexture14", // CubeMapTexture14 - "u\_CubeMapTexture15", // CubeMapTexture15 - "u\_Light\[0\].type", // LightType - "u\_Light\[1\].type", // LightType1 - "u\_Light\[2\].type", // LightType2 - "u\_Light\[3\].type", // LightType3 - "u\_Light\[4\].type", // LightType4 - "u\_Light\[5\].type", // LightType5 - "u\_Light\[6\].type", // LightType6 - "u\_Light\[7\].type", // LightType7 - "u\_Light\[0\].ambient", // LightAmbient - "u\_Light\[1\].ambient", // LightAmbient1 - "u\_Light\[2\].ambient", // LightAmbient2 - "u\_Light\[3\].ambient", // LightAmbient3 - "u\_Light\[4\].ambient", // LightAmbient4 - "u\_Light\[5\].ambient", // LightAmbient5 - "u\_Light\[6\].ambient", // LightAmbient6 - "u\_Light\[7\].ambient", // LightAmbient7 - "u\_Light\[0\].diffuse", // LightDiffuse - "u\_Light\[1\].diffuse", // LightDiffuse1 - "u\_Light\[2\].diffuse", // LightDiffuse2 - "u\_Light\[3\].diffuse", // LightDiffuse3 - "u\_Light\[4\].diffuse", // LightDiffuse4 - "u\_Light\[5\].diffuse", // LightDiffuse5 - "u\_Light\[6\].diffuse", // LightDiffuse6 - "u\_Light\[7\].diffuse", // LightDiffuse7

- "u\_Light\[0\].intensity", // intensity - "u\_Light\[1\].intensity", // intensity - "u\_Light\[2\].intensity", // intensity - "u\_Light\[3\].intensity", // intensity - "u\_Light\[4\].intensity", // intensity - "u\_Light\[5\].intensity", // intensity - "u\_Light\[6\].intensity", // intensity - "u\_Light\[7\].intensity", // intensity

- "u\_Light\[0\].specular", // LightSpecular - "u\_Light\[1\].specular", // LightSpecular1 - "u\_Light\[2\].specular", // LightSpecular2 - "u\_Light\[3\].specular", // LightSpecular3 - "u\_Light\[4\].specular", // LightSpecular4 - "u\_Light\[5\].specular", // LightSpecular5 - "u\_Light\[6\].specular", // LightSpecular6 - "u\_Light\[7\].specular", // LightSpecular7 - "u\_Light\[0\].position", // LightPosition - "u\_Light\[1\].position", // LightPosition1 - "u\_Light\[2\].position", // LightPosition2 - "u\_Light\[3\].position", // LightPosition3 - "u\_Light\[4\].position", // LightPosition4 - "u\_Light\[5\].position", // LightPosition5 - "u\_Light\[6\].position", // LightPosition6 - "u\_Light\[7\].position", // LightPosition7 - "u\_Light\[0\].direction", // LightDirection - "u\_Light\[1\].direction", // LightDirection1 - "u\_Light\[2\].direction", // LightDirection2 - "u\_Light\[3\].direction", // LightDirection3 - "u\_Light\[4\].direction", // LightDirection4 - "u\_Light\[5\].direction", // LightDirection5 - "u\_Light\[6\].direction", // LightDirection6 - "u\_Light\[7\].direction", // LightDirection7 - "u\_Light\[0\].halfplane", // LightHalfplane - "u\_Light\[1\].halfplane", // LightHalfplane1 - "u\_Light\[2\].halfplane", // LightHalfplane2 - "u\_Light\[3\].halfplane", // LightHalfplane3 - "u\_Light\[4\].halfplane", // LightHalfplane4 - "u\_Light\[5\].halfplane", // LightHalfplane5 - "u\_Light\[6\].halfplane", // LightHalfplane6 - "u\_Light\[7\].halfplane", // LightHalfplane7 - "u\_Light\[0\].attenuation", // LightAttenuation - "u\_Light\[1\].attenuation", // LightAttenuation1 - "u\_Light\[2\].attenuation", // LightAttenuation2 - "u\_Light\[3\].attenuation", // LightAttenuation3 - "u\_Light\[4\].attenuation", // LightAttenuation4 - "u\_Light\[5\].attenuation", // LightAttenuation5 - "u\_Light\[6\].attenuation", // LightAttenuation6 - "u\_Light\[7\].attenuation", // LightAttenuation7 - "u\_Light\[0\].spotCosCutoff", // LightSpotCosCutoff - "u\_Light\[1\].spotCosCutoff", // LightSpotCosCutoff1 - "u\_Light\[2\].spotCosCutoff", // LightSpotCosCutoff2 - "u\_Light\[3\].spotCosCutoff", // LightSpotCosCutoff3 - "u\_Light\[4\].spotCosCutoff", // LightSpotCosCutoff4 - "u\_Light\[5\].spotCosCutoff", // LightSpotCosCutoff5 - "u\_Light\[6\].spotCosCutoff", // LightSpotCosCutoff6 - "u\_Light\[7\].spotCosCutoff", // LightSpotCosCutoff7 - "u\_Light\[0\].spotExponent", // LightSpotExponent - "u\_Light\[1\].spotExponent", // LightSpotExponent1 - "u\_Light\[2\].spotExponent", // LightSpotExponent2 - "u\_Light\[3\].spotExponent", // LightSpotExponent3 - "u\_Light\[4\].spotExponent", // LightSpotExponent4 - "u\_Light\[5\].spotExponent", // LightSpotExponent5 - "u\_Light\[6\].spotExponent", // LightSpotExponent6 - "u\_Light\[7\].spotExponent", // LightSpotExponent7 - "u\_Light\[0\].range", // LightRange - "u\_Light\[1\].range", // LightRange1 - "u\_Light\[2\].range", // LightRange2 - "u\_Light\[3\].range", // LightRange3 - "u\_Light\[4\].range", // LightRange4 - "u\_Light\[5\].range", // LightRange5 - "u\_Light\[6\].range", // LightRange6 - "u\_Light\[7\].range", // LightRange7 - "u\_Light\[0\].enabled", // LightEnabled - "u\_Light\[1\].enabled", // LightEnabled1 - "u\_Light\[2\].enabled", // LightEnabled2 - "u\_Light\[3\].enabled", // LightEnabled3 - "u\_Light\[4\].enabled", // LightEnabled4 - "u\_Light\[5\].enabled", // LightEnabled5 - "u\_Light\[6\].enabled", // LightEnabled6 - "u\_Light\[7\].enabled", // LightEnabled7 - "u\_Light\[0\].cameraLookAtVector",// LightCameraLookAtVector - "u\_Light\[1\].cameraLookAtVector",// LightCameraLookAtVector1 - "u\_Light\[2\].cameraLookAtVector",// LightCameraLookAtVector2 - "u\_Light\[3\].cameraLookAtVector",// LightCameraLookAtVector3 - "u\_Light\[4\].cameraLookAtVector",// LightCameraLookAtVector4 - "u\_Light\[5\].cameraLookAtVector",// LightCameraLookAtVector5 - "u\_Light\[6\].cameraLookAtVector",// LightCameraLookAtVector6 - "u\_Light\[7\].cameraLookAtVector",// LightCameraLookAtVector7

#### **Shader Consistency Checker** Shader Consistency Checker refers to validations of the shader params (attributes and uniforms defined in shaders) based on some rules. Most shader param problems are reported for appearances of nodes after checking the vertex buffer of the mesh versus the shader program referenced by the appearance versus the uniform setter of the appearance.

Warning	Diagnostic	Possible resolutions
SemanticNotMappedToUniform, SemanticNotMappedToAttribute	This problem is reported when a uniform or attribute semantic is not mapped to any parameter name in the shader.	- change the attribute mapping
ShaderAttributeNotMappedToSemantic	This problem is reported when the shader contains an attribute which is not mapped to a semantic.	- edit shader in case the attribute was spelt incorrectly - change the attribute mapping
VBAttributeMissing	This problem is reported when an attribute defined in the shader has no matching data in the vertex buffer.	- generate the missing attribute (if possible) - select a different shader program or vertex buffer
VBAttributeTypeInvalid	This problem is reported when the type of the vertex data or the type of the attribute defined in the shader is invalid or there was an error retrieving them.	- select a different shader program or vertex buffer
VBAttributeTypeExtraChannels	This problem is reported when the vertex data contains too many channels compared to the attribute defined in the shader. For example an attribute is defined in the shader as a vector of 2 floats and the vertex data has a vector of 3 floats.	- regenerate the attribute from the vertex buffer (if possible) - edit the shader - select a different shader program or vertex buffer
VBAttributeTypePotentialPrecisionLoss	This problem is reported when there is a (potential) precision loss while loading the attribute data contained in the vertex buffer into the attributed defined in the shader. For example vertex data type is Float32 and the shade attribute type is Medium Float.	- change the precision of the attribute from the vertex buffer (if possible) - edit the shader - select a different shader program or vertex buffer
VBAttributeTypePrecisionWaste	This problem is reported when there is a "precision waste" while loading the attribute data contained in the vertex buffer into the attribute defined in the shader. For example vertex data type is Int8 and the shader attribute type is High Int.	- change the precision of the attribute from the vertex buffer (if possible) - edit the shader - select a different shader program or vertex buffer
VBAttributeTypeConversionToInt, VBAttributeTypeConversionToFloat	This problem is reported when there is a type conversion while loading the attribute data contained in the vertex buffer into the attribute defined in the shader. For example vertex data type is float and the shader attribute type is int.	- edit the shader - select a different shader program or vertex buffer
SemanticNotSupportedByUniformSetterButUsedByShaderProgram	This problem is reported when the semantic of a uniform defined in the shader is not supported by the uniform setter. Currently all semantic are supported.
SemanticNotEnabledInUniformSetterButUsedByShaderProgram	This problem is reported when the semantic of a uniform defined in the shader is not enabled in the uniform setter.	- enable the semantic in the uniform setter - enable flag auto activation for the uniform setter - select a different shader program or vertex buffer
SemanticEnabledInUniformSetterButNotUsedByShaderProgram	This problem is reported when the semantic of a uniform not defined in the shader is enabled in the uniform setter.	- disable enable the semantic in the uniform setter - enable flag auto activation for the uniform setter - select a different shader program or vertex buffer

#### **Generic ShaderParamSetter** Generate special effects by using a uniform setter associated to a given node in a 3D scene. This can be done by realizing a correspondence between the configuration proper to the UniformSetter and all the parameters of the available shaders. To get the desired effect, first, the UniformSetter from the Toolbox should be dragged in the the Scene extra-Tree over the node's Appearance.

A relationship between the semantics of the UniformSetter and all the properties of the shader should be established. The semantics of the UniformSetter contain specific values that could be activated/deactivated in direct relationship with the shader. In In \[ [Solution Option >Default Shader Params](https://doc316en.candera.eu/books/solution-handling/page/default-shader-params) \] from the menu bar allows to change the default names of all these values specific for the semantics of the UniformSetter.

For example, if under an appearance template we have a RefTransLight2SphereMap\_RefColorTex shader, as a first step it is necessary to open the Shader Editor panel and search all the uniforms required by this shader. As a second step, configure the semantic of the UniformSetter in order to create a correspondence between the shader required uniforms and enabled Uniforms in the generic UniformSetter category in the Properties panel.

Find all the semantic uniform values of the RefTransLight1SphereMap\_RefColorTex shader in the Shader Editor.

: The given uniform semantic of the UniformSetter in the Shaders Params Editor dialog have to be the same with Uniforms in the generic UniformSetter in the Properties panel.

---

#### Enable Auto Activation Property There is an option to avoid the detailed (i.e. manual) setting of the uniform setters by using the auto activation property. This is possible after the setting of the "Enable uniform setter auto activation" property in the Solution Option panel (section "General Configuration"). If this setting is used and the "Auto activation scope" property is set global, the "Enable auto activation" property will become active and all the activation flags will be determined when the asset is generated based on the auto uniforms which are defined in the shader program.

After this operation, a check box with the same name will become available in the Properties panel. This property specifies if the auto activation of the flags should be enabled based on the global values stored in the solution properties or locally in this item.

--- #### Multi-Pass Effect Configuration Another way of getting complex effects is combining multiple appearances. The fact that there are multiple appearances attached on the same node implies that the node is rendered with each appearance at a time. All the appearances are rendered sequentially.

For example, if two different appearances associated at the same node after the UniformSetters of the first appearance are set, the second appearance should be set. Every appearance can be configured by using its own properties panel. However, it is possible to see both appearances in the general Properties panel as different tags of it.

#### **Clone, Rename, Delete a Shader** Use the context menu of a shader program in the Shaders panel to trigger one of the following options:

- **"Clone"** will make a copy of the shader program. The name of the copy will be the name of the item suffixed with a number. - **"Delete"** will cause a "Delete solution item" dialog to appear. If the item is not used somewhere in the solution, it can be deleted by clicking "OK". If the item is used, the "Delete Solution Item" dialog will list the paths of the items where it is used, and the "OK" is disabled, making the deletion not possible. - **"Rename"** will cause a "Rename Solution Item" dialog to appear. The new desired name can be typed in the text box.

# 2D Scene Design # 2D Nodes #### 2D Toolbox The Toolbox for 2D scenes provides the following items:

: A "Show Controls as Big Icons/List" button 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 2D Nodes Following items can be used to create a new node in the scene graph:

1	2D Camera: To be linked to a render target, where the render result of the camera will be drawn. [Candera::Camera2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_camera2_d.html "A camera defines the view to the scene. At least one Camera2D has to be added to a 2D scene graph and...")
2	2D Group: Parent item for other nodes. Child nodes are located relative to the parent group. [Candera::Group2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_group2_d.html "The class Group2D is a scene graph node that stores a set of nodes as its children. The parent-child relationship between groups and nodes is bidirectional. Whereas a group can hold a group of nodes, a node can at most have one parent at a time. Cycles are prohibited. Changing the groups transformation or alpha value affects the children nodes of the group.")
3	Base Line Layout: Provides a stacked layout in the horizontal direction. [Candera::BaseLineLayouter](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_base_line_layouter.html "A BaseLineLayouter behaves similar to a Horizontal StackLayouter but instead of aligning the objects ...")
4	Dock Layout: Provides an area divided into five screens (Top, Bottom, Center, Left, Right). Nodes can be placed in the screens surrounding the Center screen. [Candera::DockPanelLayouter](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_dock_panel_layouter.html "The Dock Panel Layouter provides an easy docking of elements to the left, right, top, bottom or center of the panel. The dock side of an element is defined by the attached dynamic DockSide property. To dock an element to the center of the panel, it must be the last child of the panel.")
5	Grid Layout: Each node within the group will be positioned within a grid. [Candera::DockPanelLayouter](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_dock_panel_layouter.html "The Dock Panel Layouter provides an easy docking of elements to the left, right, top, bottom or center of the panel. The dock side of an element is defined by the attached dynamic DockSide property. To dock an element to the center of the panel, it must be the last child of the panel.")
6	Overlay Layout: Allow you to place nodes on top of each other to create a layered effect. [Candera::OverlayLayouter](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_overlay_layouter.html "OverlayLayouter sets sizes of all child elements to fulfill the given area.")
7	Stack Layout: Stacks nodes in the horizontal or vertical direction. [Candera::StackLayouter](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_stack_layouter.html "A StackLayouter stacks its elements either in horizontal or vertical order.")
8	RenderNode: Can be associated with any type of effect. [Candera::RenderNode](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_render_node.html "RenderNode is a 2D node that links to an effect chain. Therefore this is the only type of 2D node whi...")
9	BitmapNode: By default associated with a BitmapBrushAlphaBlend effect. Candera::BitmapBrushAlphaBlend
10	TextNode: By default associated to a TextBrushAlphaBlend effect. Candera::TextBrushAlphaBlend
11	Solid Color Node: By default associated to a TextBrushAlphaBlend effect. [Candera::SolidColorBrush](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_solid_color_brush.html "Output a rectangle filled with a solid color. The rectangle is transformed to the transformation spac...")
12	MVG Arc Node: can be used to display an arc
13	MVG Ellipse Node: can be used to display ellipse
14	MVG Path Node: can be used to display paths with a combination of instructions
15	MVG Rect Node: can be used to display rect.

For each of these types, 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](https://doc316en.candera.eu/books/appendix/page/properties-overview "Properties Overview") listing the Tooltip descriptions. About MVG nodes, please refer to [MVG Nodes](https://doc316en.candera.eu/link/1067#bkmrk-page-title) page. #### Position of 2D Nodes By using the so-called "Object Inspector" feature, it is possible to display the following properties of a 2D node: Position, Scale, Rotation and BoundingBox. This can be done by right-clicking on a 2D node and selecting the "Object Inspector" from the context menu.

The displayed data (visible in the "Object Inspector" panel) is always refreshed reflecting all the changes made by the user.

WorldPivotPosition, WorldPosition and WorldBoundingBox can also be displayed in the Scene Editor panel.

This feature is disabled by default and can be enabled in "Preferences" > "Editor" > "2D" > "World Transformations". Alternatively, it can be enabled in "View" > "2D Editing Utilities" > "World Transformations".

#### Adding Text to the 2D Scenes Text can be added to the scenes either by using a dedicated node called TextNode2D or by using a Render Node in conjunction with a text effect. ##### TextNode2D The image below shows how to drag and drop the TextNode2D from the Toolbox to the scene tree:

The TextNode2D default properties are set so that the node is displayed after it is added to the scene tree.

: Please consult [Text Style Palette](https://doc316en.candera.eu/books/solution-handling/page/text-style-palette) for detailed information about adding and editing styles.

##### Multi Line Text Input Sometimes it could be necessary to introduce a long text - structured in multiple, successive lines - into a text field. To support this, SceneComposer allows multi-line input in any text field within the Properties panel. To insert a newline press **Ctrl + Enter**. This will put the cursor at the beginning of the next line.

More text layout properties are available when "Enable Text Layout" is checked . ##### Text Layout Another category called "Text Layout" includes the following properties: TextAlignment, LineSpacing, Trimming, MultiLine and WordWrap.

**Multi-Line:** In some cases it may be necessary to render a multi-line text as a single line, ignoring any newline characters. This can easily be achieved by unchecking the "Multi-Line" property. The result is immediately visible in the Scene Editor.

This properties section is only visible if *Enable Text Layout* is checked. If it is unchecked, the default values of the properties will determine the way the text is rendered.

# Effects Effects describe the appearance of a RenderNode in a 2D scene. The number of effects may differ on each platform. A functional overview of each effect is provided in the table below (you can navigate to the detailed pages by using the links in the titles).

	Effect name	Description
1	[BitmapBrushBlend](https://doc316en.candera.eu/link/602#bkmrk-bitmapbrushblend)	Renders a bitmap image as source content and blends it with the destination (store) buffer.
2	[BitmapBrushColorBlend](https://doc316en.candera.eu/link/602#bkmrk-bitmapbrushcolorblen)	Renders a bitmap, modulates its color (e.g., RGBA factors) and blends the result with the destination buffer.
3	[BitmapBrushHslBlend](https://doc316en.candera.eu/link/602#bkmrk-bitmapbrushhslblend)	Renders a bitmap with hue/saturation/lightness adjustments and blends it with the destination buffer.
4	[BlurBitmapBrushBlend](https://doc316en.candera.eu/link/602#bkmrk-blurbitmapbrushblend)	Produces a blurred bitmap image (post filter) and blends it into the destination buffer.
5	[GlBitmapBrushColorMaskBlend](https://doc316en.candera.eu/link/605#bkmrk-glbitmapbrushcolorma)	Renders a bitmap using a color-based alpha mask and blends it with the destination buffer.
6	[GlBitmapBrushMaskBlend](https://doc316en.candera.eu/link/605#bkmrk-glbitmapbrushmaskble)	Renders a bitmap with an alpha mask (mask texture) and blends it with the destination buffer.
7	[GlDropShadowBitmapBrushBlend](https://doc316en.candera.eu/link/608#bkmrk-gldropshadowbitmapbr)	Draws a drop shadow for the input bitmap and blends both shadow and image with the destination buffer.
8	[GlDropShadowBitmapBrushColorBlend](https://doc316en.candera.eu/link/608#bkmrk-gldropshadowbitmapbr-0)	Draws a drop shadow and applies color modulation to the bitmap output before blending to destination.
9	[GlFlipBitmapBrushBlend](https://doc316en.candera.eu/link/607#bkmrk-glflipbitmapbrushble)	Flips the bitmap horizontally and/or vertically and blends it with the destination buffer.
10	[GlFlipBitmapBrushColorBlend](https://doc316en.candera.eu/link/607#bkmrk-glflipbitmapbrushcol)	Flips the bitmap, applies color modulation, and blends the result with the destination buffer.
11	[GlLinearGradientBitmapBrushBlend](https://doc316en.candera.eu/link/606#bkmrk-gllineargradientbitm)	Applies a linear gradient over bitmap/text content and blends it to the destination buffer.
12	[GlLinearGradientBrushBlend](https://doc316en.candera.eu/link/606#bkmrk-gllineargradientbrus)	Generates a linear-gradient brush as source pixels and blends it with the destination buffer.
13	[GlMultiTextureBrushBlend](https://doc316en.candera.eu/link/1191#bkmrk-glmultitexturebrushb)	Blends two bitmap inputs (multi-texture combine) and then blends the result to the destination buffer.
14	[GlOutlineBitmapBrushColorBlend](https://doc316en.candera.eu/link/609#bkmrk-gloutlinebitmapbrush)	Creates an outline from the image alpha (notably for bitmap-cached text), modulates color, and blends to destination.
15	[GlRadialGradientBrushBlend](https://doc316en.candera.eu/link/606#bkmrk-glradialgradientbrus)	Generates a radial-gradient brush as source pixels and blends it with the destination buffer.
16	[GlSolidColorBrushMaskBlend](https://doc316en.candera.eu/link/604#bkmrk-glsolidcolorbrushmas)	Fills with a solid color through an alpha mask and blends it with the destination buffer.
17	[MVGArcBrush](https://doc316en.candera.eu/link/1290#bkmrk-mvgarcbrush)	Renders a vector arc shape (MVG) as a brush output (source pixels).
18	[MVGEllipseBrush](https://doc316en.candera.eu/link/1290#bkmrk-mvgellipsebrush)	Renders a vector ellipse/circle (MVG) as a brush output.
19	[MVGPathBrush](https://doc316en.candera.eu/link/1290#bkmrk-mvgpathbrush)	Renders a vector path (MVG) as a brush output.
20	[MVGRectBrush](https://doc316en.candera.eu/link/1290#bkmrk-mvgrectbrush)	Renders a vector rectangle/rounded-rect (MVG) as a brush output.
21	[MirrorBitmapBrushBlend](https://doc316en.candera.eu/link/602#bkmrk-mirrorbitmapbrushble)	Renders a bitmap together with its mirror reflection and blends the combined output to destination.
22	[ShadowBitmapBrushBlend](https://doc316en.candera.eu/link/602#bkmrk-shadowbitmapbrushble)	Produces a shadow or glow around the bitmap and blends the effect and image with destination.
23	[ShearBitmapBrushBlend](https://doc316en.candera.eu/link/602#bkmrk-shearbitmapbrushblen)	Shears (skews) the image by X/Y shear angles and blends it with the destination buffer.
24	[SolidColorBrushBlend](https://doc316en.candera.eu/link/603#bkmrk-solidcolorbrushblend)	Generates a solid-color rectangle as source pixels and blends it with the destination buffer.
25	[SolidColorBrushColorBlend](https://doc316en.candera.eu/link/603#bkmrk-solidcolorbrushcolor)	Generates a solid-color rectangle, applies color modulation, then blends to the destination buffer.
26	[SolidColorBrushHslBlend](https://doc316en.candera.eu/link/603#bkmrk-solidcolorbrushhslbl)	Generates a solid-color rectangle with HSL correction and blends it with the destination buffer.

---

#### **Combined Effects**

The effects provided in SceneComposer are **combined effects**. They can be dragged from the toolbox and dropped onto a RenderNode.

##### Background information Combined effects are a combination of two or three basic effect types that are combined to an effect chain. The following three basic effect types are used to form this effect chain - **Brush Effect:** Acts as the input effect; it defines the source data for the node (e.g. SolidColorBrush, BitmapBrush) - **In-place Effect:** Multiple different in-place effects can be concatenated (e.g. ConstantAlphaEffect, MaskEffect) - **Blend Effect:** e.g. AlphaBlendEffect A correctly configured effect chain consists of the following

- a Brush effect at first - followed by an optional In-place effect - finished by a final Blend effect

For usability reasons, Scene Composer only provides combined effects in the Toolbox by default.

---

#### Use Combined Effects Several node types are already preconfigured with a specific combined effect. E.g when a BitmapNode is added to the scene graph, it is automatically linked to a BitmapBrushBlend combined effect For user-defined nodes, use the following 2D node type:

- **RenderNode:** Drag a combined effect from the Toolbox and drop it over the desired RenderNode in the Scene Tree panel.

Follow these steps to view and edit the effect: 1. Select the node in the left side of the Scene Tree panel. 2. The linked effect will appear on the right side. 3. Select the effect to display its properties in the Properties panel, where you can edit them.

# 2D Scene Editor The "Scene Editor" is the main panel of the application in which scenes and animations are displayed ("render view"). It is the only panel that cannot be closed. See Also : [2D Editing Helpers](https://doc316en.candera.eu/books/preferences/page/2d-editing-helpers "2D Editing Helpers") --- #### General By default, only one Scene Editor is displayed (Scene Editor -0 only). You can display up to four Scene Editors (Scene Editor -0 to -4) as needed. You can show or hide them from the menu bar \[ View > Editors > Scene Editor \]. - Scene Editor menu on the Menu Bar

- The \[ Display Scene Editor \] icon on the toolbar

When you click the \[ Display Scene Editor \] icon, four icons will appear for toggling the visibility of the Scene Editor. Please refer to the table below for details on each icon.

	The Scene Editor -0 is displayed.
	The Scene Editors -0 and -1 are displayed.
	Scene Editors -0 through -2 are displayed.
	Scene Editors -0 through -3 are displayed.

When a display setting not listed in the table above is applied in the Scene Editor menu on the Menu Bar, the \[ Display Scene Editor \] icon will display "Custom".

Additionally, scene editors (1) to (3) support floating display. By using floating display, you can display any scene editor on a separate display.

If the displayed Scene (or Control) is updated, it will be reflected in all Scene Editors.

--- The following is an explanation of the scene editor tool icons. #### Camera Manipulation The Camera combo box provides the following camera views for a 2D scene:

- **Editor camera:** A default camera named "Editor", which can be used to edit the scene including all scene cameras from an outer perspective. - **Scene cameras:** Further, each camera part of the scene is listed in the combo box. If a scene camera is selected, the scene is displayed from that camera's perspective. Scene cameras are created by dragging an item of type "Camera" from the Toolbox panel and dropping it into the Scene Tree panel.

In scene camera view, the camera properties can only be edited in the "Properties" panel.

##### Camera Panning and Zooming The scene content displayed in the Scene Editor can be modified like this when in Editor mode:

- **Panning:** Move the mouse while holding the middle mouse button down; or move the mouse while holding the <CTRL> and <SHIFT> keys and the left mouse button - **Zooming:** Rotate the mouse wheel forward for zooming in and backward for zooming out

To enable panning and zooming also for scene cameras, a preference option is available:

- Tick **"Enable scene camera manipulation"** in the "Editor Preferences" dialog opened from File-Preferences menu option.

It is possible to zoom any 2D scene oriented towards a point indicated by the cursor (similar with Google Earth zoom). By placing the cursor on any point in a 2D scene, when zooming operation is doing the whole scene towards that selected point. ##### Fit to Screen When zooming or panning the editor camera of a 2D scene or a 2D Control, parts of your scene or Control might get out of sight. To display the entire content of your 2D scene or 2D Control in the Scene Editor window, click the "Fit to Screen" button. All objects of the scene or control will become visible - even those outside the yellow viewport rectangle.

##### Reset Camera Use the "Reset Camera" button left to the Camera combo box to reset the selected view to the default location and orientation.

##### Camera Preview Thumbnail

Even though the current selected camera is the Perspective camera, it is possible to see the content displayed by other camera in the thumbnail available in property grid. If the camera is not associated to a render target, the preview will be done on a fixed size virtual render target surface:

- 512x512px for 2D cameras

If the camera is associated to a render target, the preview will be generated:

- on a surface of the same dimensions and then reduced to a thumbnail image - for 2D cameras

By selecting the camera whose perspective should be viewed in the Scene Tree, the camera preview thumbnail will be displayed in the property grid.

: The "Alpha Blend Factor" and the "Alpha Destination Blend Factor" in the Default Render Mode Configuration should be set properly. For instance, the former value could be InverseSourceAlpha and the latter value could be DestColor.

--- #### Picking and Transforming Items In the Scene Editor, an item can be picked by clicking on it. After picking, the bounding box of the item is displayed together with the pivot point, and it is selected in the "Scene Tree" panel:

: **Groups** cannot be picked in the render view; they need to be selected in the "Scene Tree" panel. The "Scene Editor" and "Scene Tree" panels are synchronized in terms of the selected item.

---

##### Interaction Modes: Selection, Edit the margin of objects inside a layout, Translate, Rotate, Scale In the Toolbar, the following interaction modes are available for 2D scenes:

##### Select When the button "Select" is enabled, the selected object will be highlighted in the Scene Editor but can't be transformed. ##### Edit the margin of objects inside a layout For more information about this, please refer to [Adorners](https://doc316en.candera.eu/books/scene-design/page/adorners).

##### Translate Three options are available for this mode:

- **"Pivot and Object"** will move the selected object with its pivot - **"Only object"** will move only the object selected and - **"Pivot only"** will move only the pivot of the selected object.

##### Scale The scale gizmo is represented in a similar way as the translation gizmo:

Move the mouse while pressing left mouse button to translate, rotate or scale the selected object in the render view. The modification of the properties is also reflected in the "Properties" panel for the selected item. The scale gizmo contains four controllers:

- the object itself - X axis controller - when dragging the axis, the object will be scaled on the local x axis - Y axis controller - when dragging the axis, the object will be scaled on the local y axis - Lock scaling controller - displayed on the lower right corner of the render node. When dragging it, the object will be scaled proportional on each axis.

##### Rotate In this mode, a rotation gizmo is represented by a circle:

- the fixed angle values shall be multiples of 45 - the angle snapping tolerance shall be 22.5 degrees.

##### Move Elements with Arrows Keys Any element can be moved/scaled/rotated by using arrows. After the selection of the object use the Left, Right, Up and Down arrows to get the desired results. ##### Unselect an Item The camera cannot be manipulated and vice versa when an item is selected. Unselect an item by hitting the **Esc** key. Please refer to section [2D Editing Helpers](https://doc316en.candera.eu/books/preferences/page/2d-editing-helpers "2D Editing Helpers") for further information. # 2D Laying Out Laying out is a feature specific to 2D scenes. Once a layout is applied to a 2D group, all children of that group will be affected by the given layout strategy.

If the user does not want any laying out support, thus normal editing procedure is applied and no laying out is set. If the user enables laying out for some nodes, and he does not want to move by mistake any of the child nodes which are laid out, the "strict laying out" option can be enabled from File-Preferences menu, Editor - 2D section. On-demand laying out is available by pressing CTRL+ L or by calling "Edit" > "Do-Layout" menu option to trigger Candera to layout all objects in the scene

Candera supports four built-in layouts: Stack, Grid, Baseline, Overlay, and DockPanel each layout having some specific configuration parameters. #### **General Layout Properties** The following properties can be set to any node which is arranged by a parent layouter.

A layout can only be set on a group, having some specific properties, while final laying out is determined by the properties set on all the arrangeable items that are contained in any group on which a layout was set. After the creation of a layout, the borders of the grid cells - including bounding boxes - can be visualized simultaneously in the Scene editor. Actually, the border of every cell of the layout will be visible as a yellow line.

This border is visible if the entire group is selected or if just one single cell is selected.

Two different secondary borders - the bounding box of the parent node, and the bounding box of the effective node - will be visible, marked with blue, if some values are set.

The effective bounding box will become visible if layout values - like margin of the element - are added in Properties panel. ##### Row, Column Number If the parent layout is a grid, the elements position in the grid can be changed. This has same effects like arranging a node in the Grid Editor Dialog. ##### Alignment **Vertical Alignment:** Each layout-able element can specify its vertical alignment inside the area which is available by the parent layout.

The sample images below were created using an **OverlayLayout** (sized 200x100px) containing an **image** (sized 151x52px). The image's StretchBehavior property is set to **Uniform** and its HorizontalAlignment remains at the default value. To demonstrate the impact of different **VerticalAlignment** settings, this property has been varied across all options (from VTop to VStretchBottom).

**Horizontal Alignment:** Each layout-able element can specify its horizontal alignment inside the area which is available by the parent layout.

The sample images below were created using an **OverlayLayout** (sized 100x200px) containing an **image** (sized 52x151px). The image's StretchBehavior property is set to **Uniform** and its VerticalAlignment remains at the default value. To demonstrate the impact of different **HorizontalAlignment** settings, this property has been varied across all options (from VLeft to VStretchRight).

##### Size Specify a fixed size for an element by setting the width and height. In case the element won't be asked for its preferred size.

**Note:**: Minimum Size and Maximum Size is taken into account! If the preferred size of the element should be taken set value -1;-1.

**Minimum Size:** An element won't get smaller than its minimum size. **Maximum Size:** An element won't get larger than its maximum size. If more space is available, it will be placed according to its alignment parameter (see above).

A fixed size can be defined by setting the same values for minimum and maximum size. (tbd: default value)

##### Margin The margin for an element defines some extra space around itself. Different values can be set for left, top, right and bottom margin. ##### Stretch Behavior If the items size (size of an image, text, or colored rectangle) is smaller than the available space one of the following stretch behaviors can be set:

- None: The item will not be stretched; it will be rendered in its original size, - Fill: The item will be stretched (or shrunk) to fill the exact available space. - Uniform: The original aspect ratio of the item will not be changed, but all of the item will be shown. Therefore the item might not fill the whole width or height of the available space. - UniformToFill: The original aspect ratio of the item will not be changed, but the whole available space will be filled. The image will be cut off on the right or bottom side, when Candera\_Layout\_Clipping is enabled.

#### **Stack Layout** 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 laid out group.

Configuring the Stack Layout:

1. Select the Group holding the nodes to be laid out in the Scene Tree panel 2. Choose LayoutType "Stack" from the Properties panel 3. Choose "Horizontal" or "Vertical" value for property Arrangement in the Properties panel, depending on the desired laying out 4. Call the Do-Layout command using the shortcut keys "Ctrl+L" or from the Edit - Do-Layout menu

#### **Grid Layout** In a Grid layout, every node part of the laid out 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 Layout:

1. Select the Group holding the nodes to be laid out in the Scene Tree panel 2. Choose LayoutType "Grid" from the Properties panel 3. Optional: Set the number of rows and columns of the grid by editing the properties RowCount and ColumnCount in the Properties panel 4. Use the context menu item "Configure Layout" on the selected Group in the Scene Tree panel to open the "Grid Layout Editor" dialog

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.

**See also:**

- [Candera::GridLayouter](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_grid_layouter.html "GridLayouter arranges its elements in a grid. The amount of rows and columns for the grid must be spe...")

#### **Baseline Layout** The layout type "Baseline" realizes a stacked laying out in the horizontal direction. It behaves similar to the Horizontal Stack Layout. 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 laid out group.

Configure the Baseline Layout by following these steps:

1. Select the Group holding the nodes to be laid out in the Scene Tree panel 2. Choose LayoutType "Baseline" from the Properties panel 3. Set any value for property Base Line Offset in the Properties panel, depending on the desired laying out 4. Call the Do-Layout command using the shortcut keys "Ctrl+L" or from the Edit - Do-Layout menu

**See also:**

- [Candera::BaseLineLayouter](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_base_line_layouter.html "A BaseLineLayouter behaves similar to a Horizontal StackLayouter but instead of aligning the objects ...")

#### **Overlay Layout** 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 laid out group.

Configuring the Overlay Layout:

1. Select the Group holding the nodes to be laid out in the Scene Tree panel 2. Choose LayoutType "Overlay" from the Properties panel 3. Call the Do-Layout command using the shortcut keys "Ctrl+L" or from the Edit - Do-Layout menu

**See also:**

- [Candera::OverlayLayouter](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_overlay_layouter.html "OverlayLayouter sets sizes of all child elements to fulfill the given area.")

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

Configure the DockPanel Layout by following these steps:

1. Select the Group holding the nodes to be laid out in the Scene Tree panel 2. Choose Layout Type "DockPanel" from the Properties panel 3. For any node inside the Group a new property will become available: "Dock Side". Select it and choose any of the fours available laying outs: "DockLeft", "DockTop", DockRight", "DockBottom".

**See also:**

- [Candera::DockPanelLayouter](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_dock_panel_layouter.html "The Dock Panel Layouter provides an easy docking of elements to the left, right, top, bottom or center of the panel. The dock side of an element is defined by the attached dynamic DockSide property. To dock an element to the center of the panel, it must be the last child of the panel.")

# MVG Nodes MVG Nodes can be created in CGI Studio SceneComposer via the Toolbox. Simply drag and drop the desired MVG Node into the Scene Editor or Scene Tree Panel. The following MVG Nodes are available: - MVG Arc Node - MVG Ellipse Node - MVG Path Node - MVG Rect Node

You can see an application of MVG nodes in Scene Composer's **2D Basic sample**.

#### Configure MVG Nodes An MVG node is a RenderNode2D and therefore it has the same properties that can be configured in the properties panel: - General. Name, Full Name, Description... - 2D Render Node: Render Order Rank... - Transformation: Position, Pivot Point, Pivot Offset... - Asset: Id, Symbolic Name... - Item: Scope Mask, Alpha Value... - Layout: Vertical Alignment, Horizontal Alignment, Size... Further details like the visual appearance of MVG nodes can be configured in the node's effect. Each type of MVG node has its appropriate effect:

MVG Node	MVG Brush
MVG Arc Node	MVGArcBrush
MVG Ellipse Node	MVGEllipseBrush
MVG Path Node	MVGPathBrush
MVG Rect Node	MVGRectBrush

Select the MVG Node in the Scene Tree and select the attached MVG effect in the right side of the Scene Tree to view its properties in the properties panel.

#### MVG Arc Node - MVGArcBrush Can be used to render an arc. The properties of the MVG Arc Node are those of a regular RenderNode2D. For the attached effect MVGArcBrush, the following properties can be configured:

Filter	Filter for rendering (choose between BilinearFilter and NearestFilter).
Line Width	Width of the rendered line in pixels.
Stroke Color	Color of the rendered line.
Size	Vertical (X) and horizontal (Y) size of the arc to be rendered.
Angle Start	The angle of the arc's starting point.
Angle End	The angle of the arc's end point.

The arcs starting and end point have to be entered in degrees. Please also see the sketch below.

#### MVG Ellipse Node - MVGEllipseBrush Can be used to render an ellipse. The properties of the MVG Ellipse Node are those of a regular RenderNode2dD. For the attached effect MVGEllipseBrush, the following properties can be configured:

Filter	Filter for rendering (choose between BilinearFilter and NearestFilter).
Line Width	Width of the rendered line in pixels.
Stroke Color	Color of the rendered line.
Size	Vertical (X) and horizontal (Y) size of the arc to be rendered.
Angle Start	The angle of the ellipse's starting point.
Angle End	The angle of the ellipse's end point.
FillColor	Fill color of the ellipse.
PaintMode	Configures if the ellipse will be rendered with outline and filling or with either of those (choose between Both, Fill and Stroke).

#### MVG Path Node - MVGPathBrush Can be used to render paths with a combination of instructions. The properties of the MVG Path Node are those of a regular RenderNode2dD. For the attached effect MVGPathBrush, the following properties can be configured:

Filter

Filter for rendering (choose between BilinearFilter and NearestFilter).

LineWidth

Width of the rendered line in pixels.

Stroke Color

Color of the rendered line.

FillColor

Fill color of the path.

PaintMode

Configures if the path will be rendered with outline *and* filling or with either of those (choose between Both, Fill and Stroke).

Segments

Defines segments.

Input value	VGPathSegment	number of Data	Description
0	ClosePath	0	Closing a path by connecting a final coordinate to a start coordinate. Therefore, the required number of Data is 0.
2	MoveTo	2	Specify coordinates of a path starting point. Therefore, the required number of Data is two (x0, y0).
4	LineTo	2	Draws a straight line. Specify an end point coordinates. Therefore, the required number of Data is two (x0, y0). A straight line is drawn from a coordinates specified in the previous Segment to a coordinates specified in this Segment.
6	HLineTo	1	Draws a horizontal line. The required number of Data is only one (x0).
8	VLineTo	1	Draws a vertical line. The required number of Data is only one (y0).
10	QuadTo	4	Draws a quadratic Bezier curve. Specify a coordinates of a control point and an end point. Therefore, the required number of Data is 4 (x0, y0, x1, y1). Please refer the below image as an example.
12	CubicTo	6	Draws a cubic Bezier curve. Specify coordinates of two control points and an end point. Therefore, the required number of Data is 6 (x0, y0, x1, y1, x2, y2). Please refer the below image as an example.

Data

Defines Data according to the specified Segment.

#### MVG Rect Node - MVGRectBrush Can be used to render a rect. The properties of the MVG Rect Node are those of a regular RenderNode2dD. For the attached MVGRectBrush, the following properties can be configured:

Filter	Filter for rendering (choose between BilinearFilter and NearestFilter).
LineWidth	Width of the rendered line in pixels.
Stroke Color	Color of the rendered line.
Size	Vertical (X) and horizontal (Y) size of the arc to be rendered
TopLeftRadius	Radius of the top left corner.
TopRightRadius	Radius of the top right corner.
BottomLeftRadius	Radius of the bottom left corner.
BottomRightRadius	Radius of the bottom right corner.
FillColor	Fill color of the path.
PaintMode	Configures if the rectangle will be rendered with outline and filling or with either of those (choose between Both, Fill and Stroke).

# Referencing external resource External resources can be referenced and drawn on the scene editor. This feature is only available when launching Scene Composer on the Android platform. #### Resource Reference Menu \[ Set External Resource Path... \] in the menu bar under \[ File \] to browse external resources. This menu is grayed out and not selectable for Scene Composer on non-Android platforms.

Referable external resource file formats are \*.bmp, \*.jpg, \*.jpeg, \*.gif, \*.tga, \*.png, \*.dds, \*.hdr, and \*.exr.

#### Basic Usage 1. Run Scene Composer and open a new or existing solution file. 2. From \[ File \] menu in the menu bar, select \[ Set External Resource Path... \]. 3. The ExternalResourceContainerPlugin dialog will appear.

4. Click the \[ Browse... \] button in the dialog to select the external resource folder to be referenced. - Select the Android Studio project folder.

The behaviors **Set External Bitmap**, **Check External Resource Change**, and **External Bitmap Provider** are used to display external resources. For details on each behavior and their usage, please refer to [this page](https://doc316en.candera.eu/books/controls-and-behaviors/page/external-resource).

# Transitions # Concept and Use Cases #### Transitions Concept Generally speaking, the concept of "transition" indicates the edge between two different states. In our case, the very notion of transition indicates the visual dynamics involved in displaying the content of a scene which is replacing another scene. Using a transition provides continuity so that the scene change is not quite so abrupt. The rules editor panel allows the definition of transitions on a per scene basis and test these transitions directly in SceneComposer's display preview. The designer can use the editor to set the transitions **to** (="Destination") or **from** a scene (="Source") just by selecting effects (="Transition Types") on the scene list.

#### Types of Transitions The rules editor features a toolbox where both "built in" transitions and "custom" transitions are available, a configurable default behavior, two scrollable lists ("Source" and "Destination") of all scenes in the solution, a "Variant" scrollable list, and a properties panel. To create a rule it is mandatory, first, to select the source and the destination, a specific type of that transition and, finally, to set the transition properties. After all these steps are done, the transition can be executed in the "Transition Execution" panel. The available simple transitions are the following:

- Cut - Fade - Slide - Scale

The available combined transitions are the following:

- Fade & Slide - Fade & Scale - Slide & Scale - Fade & Slide & Scale

#### Transition Type Animation The Transitions framework has a special build-in transition type – Animation. By using this transition type, it is possible to trigger animations or group animations within transitions. The Variant holds three Additional optional parameters:

- AnimationId – Candera::Id of the animation that will be executed by the Transitions framework. - AnimationTimeline - specifies the time when the animation will start. The end time of the animation depends on the selected playback mode. - IsAnimationTimeRelative - defines the playback mode for the animation: - TransitionTime - default (false) - The animation speed is adapted such that the end time of the transition, specified by the AnimationTimeline parameter, will match the end time of the animation. - AnimationTime (true) - The animation duration is given by the animation itself.

The animation specific parameters can be specified in the properties panel once the corresponding transition type has been selected:

The animations can be triggered through a Request using the corresponding Variant name.

#### Sequential Execution of Transitions The Transitions framework furthermore allows the sequential execution of transition fragments. One or multiple activation or deactivation fragments can be executed before or after fragments of the respective opposite fragment type. Therefore, the rules editor offers the option to set the "Activation" and "Deactivation" strategy. The strategy types are:

- Normal - Early - Late

The combination of "Early" and "Late" will cause a sequential execution of the involved transition fragments. Any other combination results in a default transition behavior. "Early" fragments are executed before "Late" fragments. For example: Scene\_1 has a rule to perform a transition with a Fade to Scene\_2. Scene\_2 (activation fragment) should fade in completely before Scene\_1 (deactivation fragment) begins to fade out. For this rule, the "Activation" strategy would be "Early" and the "Deactivation" strategy would be "Late". The opposite result can be achieved by swapping the fragments' strategy. However, it is important to note that multiple "Early" or "Late" fragments will be executed in parallel and that "Late" fragments will only be executed once all "Early" fragments have finished first.

#### Early and Late Transition Delays Sequential Transitions furthermore offer the possibility to customize the moment, when "Late" fragments are executed after the "Early" fragments are finished. Next to the strategy type, a delay value (in milliseconds) can be set for "Activation" and "Deactivation" fragments. During a transition, the delay values are applied after the respective fragment. The following shows the resulting sequence: **Early (Source) -> Delay -> Late (Destination) -> Delay** If the transition is bidirectional, the sequence is reversed (more on bidirectional transitions further below): **Delay -> Late (Destination) -> Delay -> Early (Source)** #### Reverse Transitions The Transitions framework offers the possibility of reversing transitions. If a reversible fragment has been identified, the already running TransitionFragment shall go backwards, from its current state to the original one.

: This option shall be used, for example, when a second transition request is posted which contains a fragment that goes from Deactivate(B) - Activate(A), while the previous fragment - from Deactivate(A) to Activate(B) - is still running. In this case the already running transition will be reversed from the current state to the beginning.

This feature is optional and can be specified via an optional flag "Is Reversible" in the Properties associated to the selected rule. Default value is true.

A reversible fragment is identified through a Variant that will match a Rule to its corresponding RequestFragment using the following conditions:

- the Variant of the already running TransitionFragment shall match the Variant of the current Request. - the Source of the already running TransitionFragment shall match the Destination of the matching Rule. - the Destination of the already running TransitionFragment shall match the Source of the matching Rule.

There are special cases: a transition with AllowReverse==true might consist of fragments that are not found in the already running transitions. In this case these fragments shall be executed normally.

#### Bidirectional Transitions The "bidirectional" feature allows to define only one transition rule that matches as well the forward as the backwards direction from two request fragments.

: Bidirectional transitions will not support playing reverse AnimationGroups, only Animations.

The image below shows how two "symmetrical" transition rules can be replaced with only one if the "Is bidirectional" property is enabled:

Bidirectional rules will be applied in the other direction whenever it would be the first match in the ruleset.

: To preserve backwards compatibility, on solution conversion, the *"Is Bidirectional"* property is set to false if it didn't exist in the old Solution.

# Use Transitions #### Use Transitions Every existing scene is automatically added in two scrollable lists, which are available in the rules editor as "Source" and "Destination".

After the selection of the source scene, the destination can be another scene or just "None". If the later option will be chosen, a selected "Transition Type" will be applied to the selected scene.

The left combobox of the "Activation" and "Deactivation" columns respectively sets the transition strategy. In order to enable a sequential transition execution, one strategy has to be set to "Early" and the other one to "Late". See the image below for an example.

Previously to the usage of an existing transition, the camera from every scene which will be used in the transition has to be assigned to a render target. Supposing that the scenes are prepared to be used in a transition, the user has to choose which kind of transition will be assigned to the "Activate" and "Deactivate" state of the scene. The former concept indicates what will happen when the transition will be working from a scene **to** that scene or when will be working on a scene alone, and the latter indicates what will happen when the transition will be working **from** that scene to another one or when will be working on a scene alone. This operation can be done in a secondary panel named "Transition Execution".

This means that when the user will use the button "Execute Transitions" some scene will get "activate" (if that specific option was checked) and other scenes will get "deactivate" (if that option was checked). For instance, if the transition type "Fade" will be executed for a scene which will get deactivate its content will be fading. If desired, it is possible to create custom transitions. This can be done by using the "+" button that is placed in in the upper side of the "Rules Editor" panel. The properties that belong to that transition type can be set and will remain available for later re-use. Furthermore, transition strategies and delays can also be edited in the Properties tab. (see the image below).

# Transition panel This page describes the panels you can use when configuring and executing transitions. #### Transition Rules Editor The Transition Rule Editor panel can be displayed by checking \[ View > Transitions > Transition Rules Editor \] on the menu bar.

(1)	Add new transition rule: Add a new transition rule.
(2)	Delete transition rule: Deletes the selected transition rule.
(3)	Search: If many transition rules are set, you can enter a search term to narrow down the number of results displayed.
(4)	Clear Search: Delete the search term.
(5)	Source: Set the source of the transition.
(6)	Transition Type: Set the transition type.
(7)	Destination: Set the destination of the transition.
(8)	Activation/Deactivation: Set the activation delay/deactivation delay.
(9)	Variant: Sets the transition rule variant.

#### Transition Execution The Transition Execution panel can be displayed by checking \[ View > Transitions > Transition Execution \] on the menu bar.

(1)	Add an example of a new transition execution: Add a new transition execution procedure.
(2)	Delete transition execution example: Delete the selected transition execution procedure.
(3)	Add an example of how to use a scene: Add a scene use case to the transition execution procedure.
(4)	Delete Scene Example: Delete the selected scene use case.
(5)	Execute Transitions: Run transition execution procedure.
(6)	Scene: Set the scene to be transitioned.
(7)	Action: Set the action to be taken by the transition. (Activate: Transition to the set scene, Deactivate: Transition from the set scene to another scene)
(8)	Variant: Sets the transition rule variant.

For more information on how to configure transitions, please refer to [Concepts and Use Cases](https://doc316en.candera.eu/link/153#bkmrk-page-title) and [Using Transitions](https://doc316en.candera.eu/link/154#bkmrk-page-title).

# Scoping # Concept and Use Cases #### Scoping: Concept The scope concept supplies selects only specific parts of the scene graph for rendering, depending on the specific situation.

- Scope forms conceptual groups independent of the scene graph. - Node part of the scene tree can be assigned to several scopes.

Scopes are logical entities defined as bit fields, whereby each scope corresponds to a bit field. The set of scopes associated to a node is called scope mask. By default, the scope mask of all nodes including cameras contains all of the 32 scopes. #### Scoping: Use Cases The scope concept is used for:

- Light culling: Only objects part of the scope of a given light will be illuminated - Visibility culling: Only objects part of the scope of a given camera will be rendered

#### Scope Mask This option "Show scope mask in hexadecimal format" is available in the Preferences dialog opened from "File" > "Preferences" menu, section Editor. It ensures that the values for Scope property will be displayed in hex in the Properties panel. # Manage Scopes in Scopes Panel #### Scopes Panel The Scopes Panel (enable from menu "View" > "Libraries" > "Scopes") displays all 32 scopes with default scope names. #### Rename a Scope Rename a scope by selecting the option Rename of the context menu in Scopes panel:

#### Assign Single Scope to a Node Assign a single scope to the scope mask of a node by dragging the scope from the Scopes panel and dropping it over the desired node. The valid scope is highlighted. # Edit Scope Mask of a Node #### Scope Mask of a Node in the Properties Panel By default, the scope mask of a node contains all 32 scopes available. This can be inspected in:

- Properties Panel, on the item property "Scope Mask" - Scopes Panel, since all scopes valid for the currently selected node are highlighted.

#### Select specific Scopes for a Node Modify the scope mask of a node from the Properties panel by checking or unchecking the desired scopes from the Scope Mask combo box.

#### Select or Deselect all Scopes for a Node Select all/Deselect all scopes from Properties panel.

#### Invert a Scope Mask Invert Scope option will perform a bitwise NOT operation on the bits of the selected scope mask. #### Apply Node Scope on Children Apply a node scope mask on all children of the node by using the "Apply Node Scope on Children" option from the context menu.

# Controls There is a detailed documentation about Controls and Behaviors in the General Concepts. It also includes how to use them in SceneComposer. Please refer to [Controls and Behaviors](https://doc316en.candera.eu/books/controls-and-behaviors "Controls and Behaviors") go to this part of the documentation. # Databinding UI Each bindable property have a button next to the property that allows to define a binding.

: Following items have bindable properties: Behaviors, Widgets, Behavior, Building and BlocksControls

When unbound, clicking the button shows the databinding dialog that allows to link the property to a data source. The binding dialog shows all matching datatypes in the editor:

Data items displayed in the \[ Define Data Binding \] dialog are normally displayed in definition file order. By checking the \[ Sort Alphabetically \] checkbox in the dialog, data items are displayed in alphabetical order.

You can also filter the data binding items displayed in the dialog's \[ Data Items \] by a combination of data type and read-only status. Filter items can be expanded and displayed by clicking on the right triangle icon in the dialog (see the orange frame below).

- Checking \[ Select All \] will check all filtering data types and read-only statuses (if all are checked, uncheck them). - Checking \[ Other \] will check non-primitive data types.

Note that an icon ( [![readonly.PNG](https://doc316en.candera.eu/uploads/images/gallery/2024-08/scaled-1680-/readonly.PNG)](https://doc316en.candera.eu/uploads/images/gallery/2024-08/readonly.PNG) ) indicating read-only status is displayed to the right of the read-only data item.

The order in which the currently used items are displayed can also be changed in the Live Preview panel, which is displayed via \[ View > Live Preview \] in the menu bar, by using the \[ Sort Alphabetically \] checkbox.

Buttons for bound property items are displayed in blue (white for unbound buttons). To remove the bound setting, click on the button to display a dialog box, then click on the \[ Unbind \] button at the bottom of the dialog box.

#### Live Preview panel You can check the behavior of the bound data binding items in the Scene Editor using the Live Preview panel. If the Live Preview panel is not displayed, check "Live Preview" on the menu bar under "View" to display it.

(1)	ON／OFF: Toggles the Live Preview behavior ON/OFF.
(2)	Save: Saves the values currently set in the Live Preview panel.
(3)	Load: Loads values from an existing file.
(4)	Sort Alphabetically: Sorts the data binding items displayed in the Show Data Binding Items field alphabetically.
(5)	Search: Searches the data binding items displayed in the Show Data Binding Items field.
(6)	Data Binding Items Display Field: Displays all bound data binding items. Allows you to set values for each data binding item. When the Live Preview behavior is on, the values you set are reflected in the Scene Editor.

For an example of how to use the Live Preview panel, see also ["Operation confirmation using Live Preview panel"](https://doc316en.candera.eu/link/1178#bkmrk-4.-%E3%83%A9%E3%82%A4%E3%83%96%E3%83%97%E3%83%AC%E3%83%93%E3%83%A5%E3%83%BC%E3%83%91%E3%83%8D%E3%83%AB%E3%81%AB%E3%82%88%E3%82%8B%E5%8B%95%E4%BD%9C%E7%A2%BA)

# Template The following items in a solution can be saved as templates. Using templates can help you streamline work when you need to use similar items repeatedly. - Animation - Node Attachment - Appearance - AppearanceCollection - Material - RenderMode - Texture - UniformSetter - ScriptComponent - Scene Saved templates are displayed in the Templates panel, which can be displayed by checking \[ View > Libraries > Templates \] on the menu bar.

For details on how to save and use templates for each item, please refer to the following pages. - [Template Animations](https://doc316en.candera.eu/books/animation-design/chapter/template-animations#:~:text=Template%20Animations-,Template%20Animations,-Create%20an%20Animation) - [Node Attachment Templates](https://doc316en.candera.eu/link/132#bkmrk-node-attachment-temp) - [Script Component Templates](https://doc316en.candera.eu/link/78#bkmrk-script-component-tem) - [Scene Templates](https://doc316en.candera.eu/link/41#bkmrk-page-title)

You can import and use templates saved in another solution by using \[ Import > Import From Solution... \] on the menu bar.

# SceneComposer Translator Plugin # Globalization License If the Translator Plugin files are present but no translation features are accessible in Scene Composer, please ensure that the *Globalization* license is acquired. Refer to the menu *Help > Licenses*. # Create and Manage Cultures and Translatable Texts This page describes the UI of each menu and feature for multi-languages settings. Please refer to the explanation on [here](https://doc316en.candera.eu/books/getting-started/page/multi-languages-settings) for details on how to configure multi-languages settings using this feature. The translator plugin is fully integrated into SceneComposer. The SceneComposer toolbar provides an icon for opening the \[Culture Solution Options\] dialog as well as a drop-down menu for selecting an already created culture.

In addition, the \[ Language \] menu on the menu bar contains the following five menus.

- [Culture Solution Option](#bkmrk-culture-solution-opt-1) Open the Culture Solution Option Dialog, where the user can add, edit or remove Culture as the multiple languages setting. By selecting a Culture in SceneComposer, you can switch between the displayed language of the solution. The translated texts displayed when selecting a Culture are configured in the Language Table. - [Export Languages](#bkmrk-import-and-export) Opens the *Select Cultures* dialog where you can select the languages you want to export and - after browsing to an export file path - you can export your selected languages in the format you prefer to the location you selected by pressing *Export*. - [Import Languages](#bkmrk-import-and-export)

Opens the **Import Languages** dialog, where you can import a target file into the solution from any of the following sources: “Language Pack Source,” “Excel file,” or “XLIFF file (.xlf).” - [Language Usage](#bkmrk-language-usage) Opens the Language Usage Dialog, where all Text Properties of the solution are listed. For those Text Properties that have a translatable text assigned, the *Text Id* and the *Text* value for the current culture are displayed. It is also possible to assign or unassign a translatable text for a Text Property. - [Language Table](#bkmrk-language-table) Opens the Language Table Dialog, where the user can add, edit or remove translatable texts. The Id of each translatable text is unique. The Text value for a certain culture can be accessed by selecting the respective culture in the Current Culture drop-down. #### Culture Solution Option To create text in different languages, a culture must be created. This is done by clicking on the Culture Solution Options button on the toolbar.

See [Solution Options > Culture](https://doc316en.candera.eu/books/solution-handling/page/cultures) for a detailed description of each item in the dialog that appears. #### Language Table Through the Language Table, you can configure the text that will be displayed when you select a language configured in Culture. Here, you can add, edit, or delete translated texts for each Culture. The translated text is the text that will be displayed according to the selected Culture in Scene Composer. The settings can be accessed from the \[ Languages > Language Table... \] menu bar. The settings are made in the Language Tables dialog, which can be opened from the menu bar \[ Languages>Language Tables... \].

(1)	Search field	You can search for a specific text entry by entering any string into the search field.
(2)	Unused only check box	When this check box is enabled, only text that is not assigned to a text object in the solution will be displayed.
(3)	Culture Solution Option button	Click this icon to display the Cultures dialog box.
(4)	Select Cultures	Select a configured culture from the pull-down menu.
(5)	ID	A unique identifier assigned to each translation text. It is automatically assigned when you add a translation text line by pressing the Add button.
(6)	Text	Sets the text to be displayed when using the culture currently selected in the Culture Selection pull-down menu.
(7)	Translation Hint	Allows you to enter a description for the translated text line.
(8)	Master Text	Displays the text of the master culture. This item is not displayed when a master culture is selected in the culture selection pull-down menu.
(9)	Add/Delete button	This button allows you to add/delete language table setting rows. These buttons are only enabled when the master culture is selected in the \[ Current Culture \] field.
(10)	Selected Text Assignments	Displays the node to which the translated text line has been set.
(11)	Close button	Closes the Localization Table dialog box.

#### Language Usage For editing the texts' properties, Scene Composer provides the Text Properties Dialog, which can be opened via the menu *Language > Language Usage...*. This dialog lists all Text Properties of the solution. For those Text Properties that have a translatable text assigned, the *Text Id* and the *Text* value for the current culture are displayed. The current culture can be changed in the drop-down menu on the right. If necessary, the *Solution Options: Cultures* dialog can be opened with the globe icon on the left of the drop-down menu. When pressing *Save*, the changes made to the Text Properties will be applied to the solution.

- When pressing the Assign button on the bottom of the dialog, the Language Table Selection dialog is opened where a text can be chosen from the list. - Assigning texts to Text Properties can either be done in the Language Usage Dialog or in the Text Properties Panel. The *Language Table Selection* dialog can also be opened when editing a Text property by clicking on the icon *Select template for item*.

#### Switching Cultures If cultures and texts have been created and the texts are assigned to Text properties, the culture can be switched using the drop-down in the toolbar. As soon as another culture is chosen, the solution will be displayed in the other language.

If there is no text configured for a certain language, the *Text Id* will be displayed instead. Using this id, the missing text can easily be identified and found in the Language Table using the search function.

# Import and Export of Language Packs #### Importing Language Data You can import the solution’s cultures and language tables from a Language Pack Source (.lps), an Excel file (.xlsx/.xls), or an XLIFF file (.xlf). Start the import from \[ Language > Import Languages \], choose the source file type, and then select the target file.

If you choose XLIFF (.xlf), select and import the individual .xlf files prepared for each culture (specify the files for each language/culture separately).

The final step of the language import process is to show the differences between the texts in the import file and the texts in solution. There are three possible actions:

- **Add** : Indicates that the language does not already exist in the solution and will be imported from the file. - **Merge**: Means that the language already exists in the solution and only the content differs. New texts will be added and already existing texts will be updated. - **Drop** : When unchecking a language entry in the Translatable Text Differences dialogue, the Action changes automatically from Add/Merge to Drop. If the initial action was *Add*, this means that the language will not be added to the solution. If the initial action was *Merge*, this means its texts will not be updated and new texts from the import files will not be added to this language in the solution.

The *Drop* action does not mean that the language will be removed from the solution. The removal of a language can be done from *File > Solution Options* in the *Cultures* tab.

#### Export of Language Pack Sources The translatable texts of the current solution can be exported by going to *Language > Export Languages...*, which opens the *Select Cultures* dialog.

- The *Select Cultures* dialog allows the choice of which cultures to be exported or not. - Languages can be exported to a Language Pack Source (.lps), an Excel file (.xlsx/.xls), or an XLIFF file (.xlf). - Click the *Browse* button to select the *Export file path*, choose the format in the *Save as type* drop down and click *Save*. - Click the *Export* button to finalize the languages export. Please note that only the texts that have a correspondent in the master language texts, considering their Id, are included in the export, all the others being ignored. In this case warnings will be added to the Output tab in Scene Composer.

- Exporting languages as Language Pack Source file creates a .LPS file that contains the master language and all the other languages available in the solution. The exported .LPS file can be compiled and appended using the CGI Studio Language Appender. - When exporting in XLIFF format, a separate .xlf file is generated for each language (culture). The culture identifier is appended to the file name: the Master language is exported as `Languages_00.xlf`, and each language as `Languages_{culture}.xlf` (e.g., `en`, `ja-JP`). - Exporting languages as Excel document creates an Excel file that contains one sheet for the master language (named Master) and a sheet for each of the other languages in the solution having an identical name with the respective culture (e.g. de-DE, en-US, fr-FR). Each sheet has a header on the first row, with 3 columns: *Id*, *Text*, and *Translation Hint*. The following rows contain the translatable texts.

# Adorners CGI Studio offers the option to use adorners for an easy manipulation of the nodes inside layouters. The adorners gizmos can affect the following properties: Vertical Alignment, Horizontal Alignment, Size and Margin(Left, Top, Right, Bottom) in the Layout category and the Position in the Transformations category. This editing can now be done using the mouse and keyboard without having to manually change the node properties values. #### Enable layout edit mode There are two ways to enter in the layout edit mode. The first one is to click on the dedicated icon from the menu bar:

The second option is to press the 'L' key. In order for the adorners gizmo to be active, it is also required to meet at least one of the following conditions:

- the parent of the node is a Layouter of type BaseLine, Grid, Overlay, Stack or DockPanel - the node is a 2D Bitmap Node with a 9-Patch image on it - the node is a Canvas Sprite and has a Texture with a 9-Patch image set on it - the node is a 2D TextNode or a 3D Canvas Text.

So for 9-Patch images and text nodes, the gizmo works even when the node is outside of a layouter. For other types of nodes, the effect of selecting the adorners gizmo will be the same as selecting clicking on the Select edit mode. When the adorners gizmo is active, the element is surounded by a dashed rectangle with 8 active points on its corners and middle of edges. If node is inside a layouter 4 small *chain* buttons also appear on the edges of the layout area. The orange circle indicates the Pivot Point. The yellow rectangle represents the layout area which is computed based on the layouter type and its properties.

: In 3D the usage of the gizmo does not change the Z axis values on any of the transformable properties.

#### Moving nodes When hovering over the node, the cursor changes.

The adorners gizmo allows to drag the object around, just like in translation mode. If inside a layouter, the Margin property of the node is changed together with its Position. It is also possible to move the object using the keyboard by holding the Shift key and then pressing any of the arrow keys.

: While moving an object using the adorners gizmo, if the object is dragged over another layouter, the user will not have the option to switch the layout parent of the dragged object.

#### Aligning and resizing nodes The active points on the dashed rectangle can be dragged to change the Layout Size and Margin and/or Position of the node. Pressing the Shift key while dragging active points causes the gizmo to function differently. For example if the Shift key is pressed when dragging upward the upper middle active point of a node inside a stack layouter, the effect will be the same as if manually changing the Layout Size property and keeping the same Position. If the Shift key is not pressed and the upper middle active node is dragged upward, then both the Layout Size and Position of the node will be modified.

: The effect of the Shift key and the functioning of the adorners in general depends on whether the size properties of the layouter and its children are auto or not and on the layout type. The current document does not aim to explain all the possible combinations of properties.

The chain buttons allow the user to set the desired Layout Vertical Alignment and/or Horizontal Alignment. By default all chains are enabled (closed). Breaking (opening) one chain (the left for example) will close the one opposite to it (the right one in the example), unless the Shift key is pressed. So in order to be able to open both left and right chains, the Shift key needs to be used.

Left chain	Right chain	Horizontal Alignment
closed	closed	Stretch
closed	open	Left
open	closed	Right
open	open (use Shift key)	Center

The same logic goes for the top and bottom chains.

When the node is inside a layouter, the chains buttons have values next to them. If the chain is open, then no value is shown.

: The values next to the chain nodes indicate the effective distance in pixels between the layouter area edges (arrange area) and the edges of the dashed rectangle of the node.

These values are always positive and are not the same as the values of the Margin properties which can be negative. The chain values stay the same even when the scale of the parent layouter or its ancestors changes.

: If the LayoutDirection of the parent layouter is changed, then the behavior of the gizmo is going to be adapted according to the new direction. For instance, if the LayoutDirection of the parent layouter changes from LeftToRightDirection to RightToLeftDirection, the gizmo functionality will be horizontally reversed. So if a node was previously Left aligned, it will become Righ aligned.

The current culture Text Direction also affects the the LayoutDirection of text nodes. When changing the current culture from a left to right culture to a right to left one, an initially Left aligned node, will become Right aligned.

: While editing the node using the adorners the status bar shows the values of the property being modified (Size when dragging active points, Position when moving the node inside the layout area).

#### Snapping of 2D Nodes A prerequisite for this functionality is to enable the Snap to Objects option in *File -> Preferences -> Editor -> 2D* . When in layout edit mode, the effect will be to align the dragged object to the layout area as well as to other sibbling nodes in the same layout space based on the snapping sensitivity.

In the above image the horizontal blue line represents the snapping of the text node in the right to the lower edge of the layout area. The vertical blue line represents the snapping of the text node in the right relatively to the left text node.

: If the node has rotation, it will snap only relatively to other nodes having the same rotation.

# Embedded Player #### Overview The Embedded Player is a runtime environment for validating solutions created or in progress in Scene Composer. The Embedded Player operates as a panel in Scene Composer, allowing you to view the Scene Editor and Embedded Player side by side, and instantly view updates to your Scene Composer solution in the Embedded Player panel.

The Embedded Player consists of two panels: "Player Panel" and "CGI Panel". The Player Panel is used to display the solution being created in Scene Composer. It allows you to view the nodes created in Scene Composer and their associated actions, such as 2D/3D nodes, animations, behavior effects, and scene transitions using transitions. The CGI Panel is used to control the display of the Player Panel. The Player Panel UI allows you to easily switch displayed scenes, play animations, zoom in/out, and rotate the display. You can also run simulations of node values, transitions, state machines, and more.

--- ##### Embedded Player UI ##### Player panel The Player panel can be displayed by selecting \[ View > Embedded Player > Player \] from the menu bar, or click the \[ Player/EmbeddedPlayer \] icon on the toolbar after selecting "Embedded Player". Scroll bars will appear on the right and bottom of the panel depending on the panel size.

##### CGI panel The CGI panel, similar to the Player panel, can be displayed by selecting \[ View > Embedded Player > CGIPanel \] from the menu bar, or click the \[ Player/EmbeddedPlayer \] icon on the toolbar after selecting "Embedded Player". This panel controls the display of the Player panel.

(1)	Culture	Allows you to switch languages. If used, Globalization must be enabled.
(2)	Animation	All playable animations will be listed in the drop-down menu. Select an animation from the drop-down menu and click the \[ Start \] icon to play the animation.
(3)	Value generation	Starts/Stops the Value Generator simulation.
(4)	Rendering process	Run or Pause the processing of rendering components.
(5)	Zooming	This function is created to assist in the development of high-resolution or low-resolution HMIs. It allows you to zoom in on low-resolution HMIs and zoom out on high-resolution HMIs.
(6)	Rotae	Simulates physical display rotation. The toolbar icon allows you to rotate the Player panel display clockwise.
(7)	Scene view panel	All scenes included in the solution are listed. To enable any scene, select the corresponding checkbox.
(8)	Function tab	[Value Generator](https://doc316en.candera.eu/books/player/page/value-generator)	You can simulate view elements changing their values without implementing any logic.
		[Controls](https://doc316en.candera.eu/books/player/page/controls-view)	Displays all controls for the selected scene. Selecting a control opens a table with all properties and their values. Changing the value will change it in the application.
		[Transitions](https://doc316en.candera.eu/books/player/page/transitions-view)	You can trigger transitions.
		[Data Bindings](https://doc316en.candera.eu/books/player/page/data-bindings)	You can load predefined data binding files to customize the layout and perform simulations with Value Generator.
		[Statistics](https://doc316en.candera.eu/books/player/page/statistics-view)	Memory consumption statistics are displayed.
		[State Machine](https://doc316en.candera.eu/books/player/page/state-machine-view)	The states of all State Machines are displayed.
		[Configration](https://doc316en.candera.eu/books/player/page/configuration-view)	Information about the features enabled in the Embedded Player is displayed.
		[Snapshots](https://doc316en.candera.eu/books/player/page/snapshots-view)	You can create snapshots on the host. The last snapshot created is displayed.
		[Logging](https://doc316en.candera.eu/books/player/page/logging-view)	You can also enable or disable logging and set the log level for the main area.
		[Layout Monitor](https://doc316en.candera.eu/books/player/page/layout-monitor-4Tv)	The relevant areas calculated by the layouter are displayed as an overlay on top of the application rendering.

The Embedded Player has basically the same functions as the Player, so for some explanations in the documentation, please refer to the link to the Player page.

--- #### Basic Operation ##### Embedded Player Playback - First, click the \[ Player/EmbeddedPlayer \] icon on the toolbar after selecting "Embedded Player". - Once the Player Panel and CGI Panel are launched, Embedded Player playback is complete.

If you want the currently edited scene to be displayed when launching the Embedded Player, select \[ Generate and Play Selected Scene \] from the pull-down menu located to the right of the \[ Play selected scenario... \] icon.

##### Stopping Embedded Player - While the Embedded Player is running, click the \[ Close Player \] icon on the toolbar. - The Embedded player will stop and the Player panel and CGI Panel will close.

##### Updating Embedded Player - While the Embedded Player is playing, click the \[ Refresh \] icon on the toolbar. - Updates made to the solution while the Embedded Player is playing will be reflected in the Embedded Player playback.

Using Embedded Player Update allows you to immediately see updates to your solution in the Embedded Player. Also, unlike playback using the Player, there is no need to save your solution before playback.

---

1	Group: Represents a parent container for nodes or other groups. [Candera::Group](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_group.html "The class Group is a scene graph node that stores a set of Nodes as its children. The parent-child re...")
2	Light: Different types of light could be added to illuminate the scene objects. [Read more...](#bkmrk-light) [Candera::Light](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_light.html "A Node that represents different kinds of light sources. Light sources are used to determine the colo...")
3	Camera: To be linked to a render target, where the render result of the camera will be drawn. [Read more...](#bkmrk-camera) [Candera::Camera](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_camera.html "A Camera provides Modelview and Projection matrices. Camera is a Transformable.* The eye point is set...")
4	Reflection Camera: Creates a reflection of a specific camera on a given reflection plane. [Read more...](#bkmrk-reflection-camera) [Candera::ReflectionCamera](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_reflection_camera.html "A ReflectionCamera represents a reflected view of an associated source camera (See function SetSource...")
5	Stereo Camera: Creates the effect of stereo 3D. [Read more...](#bkmrk-stereo-camera) [Candera::StereoCamera](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_stereo_camera.html "A StereoCamera is a controller of two assigned Camera objects, used to realize the effect of stereosc...")
6	Sky Box: A type of mapping that gives the user the feeling of immersion into a large environment. [Read more...](#bkmrk-sky-box) [Candera::SkyBox](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_sky_box.html "A SkyBox is an axis aligned cube in world-space, which is used to display the background environment ...")
7	Billboard: A textured or colored 2D area. [Candera::Billboard](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_billboard.html "The class Billboard represents a Plane that can align towards camera automatically, according to the alignment type set. Thus, Billboards are quite often used as "imposters" pretending to be a 3D geometry by showing a 2D image that is always facing the camera. In order to relief distinction between Billboard and PointSprite see following comparison: + Billboards support rectangular dimension and non-uniform scale, + Billboards support different rotation techniques (see Alignment), whereas PointSprites are aligned according to CenterEyeAlignment, exclusively. + Billboards take local rotation and scale into account (see class Transformable), whereas PointSprites ignore Transformable parameters others than position. + PointSprites have a performance advantage due to less geometry (one instead of 4 vertices). Overall recommendation: Use PointSprites for spherical shapes like particles, lens flares, sparkles, dust which are screen aligned (see Billboard::CameraUpAlignment). Further, use Billboards for world up oriented clouds, text, or yaw axis aligned trees, and signs, etc. Note: The Billboard - because of absent normals - does not support lighting. Belows sketch depicts the layout of a Billboard. W U:0,V:1 +-----+ U:1,V:1 H \| X \| Legend: texture coordinates: U,V; Width: W, Height: H, Local Center: X U:0,V:0 +-----+ U:1,V:0.")
8	Planar Shadow: Provides the possibility to "throw" some shadows on a configurable planar surface. [Read more...](#bkmrk-planar-shadow-0) [Candera::PlanarShadow](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_planar_shadow.html "PlanarShadow implements a simple technique to simulate shadow casting. Basically a PlanarShadow node ...")
9	MorphingMesh: A mesh that stores weight values for morphing. [Read more...](#bkmrk-morphing-mesh) [Candera::MorphingMesh](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_morphing_mesh.html "MorphingMesh is a Mesh that stores weight values for morphing, and activates them as uniforms at rend...")
10	LodNode: A node which accommodates multiple nodes, each of them representing a certain, predefined level of detail. [Read more...](#bkmrk-level-of-detail-%28lod-1) [Candera::LodNode](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_lod_node.html "LodNode represents a Node which accommodates multiple nodes, each of them representing a certain...")
11	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](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_point_sprite.html "PointSprite represents a GL point primitive. The size (glPointSize) of the point is calculated by def...")

12	Canvas: A node which acts as a surface. [Read more...](#bkmrk-canvas-0) [Candera::Canvas](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_canvas.html)
13	CanvasGroup: A node which can contain other canvas nodes. [Read more...](#bkmrk-canvas-0) [Candera::CanvasGroup](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_canvas_group.html)
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...](#bkmrk-canvas-sprite-0) [Candera::CanvasSprite](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_canvas_sprite.html)
15	CanvasText: A node which facilitates displaying text on Canvas. [Candera::CanvasText](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_canvas_text.html "CanvasText represents a text node within a 3D Canvas object.")

1	Appearance: Its attributes define the distinctive visualization of a geometry like Mesh, Billboard, and PointSprite. [Candera::Appearance](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_appearance.html "The class Appearance groups following render attributes: Material, Textures, RenderMode, and Shader. Render attributes define the distinctive visualization of a geometry like Mesh, Billboard, and PointSprite. Further, render attributes can be shared across multiple objects, which conserves memory and enables sharing of appearance characteristics. An Appearance object is mandatory for any object in order to get rendered. Per default all render attributes are initialized to null, which is a valid setting. If the Appearance is activated, all render attributes that are set become activated. If no RenderMode is defined (null), then the default RenderMode is used instead;.")
2	Material: Describes the color attributes of an object's surface. It is primarily used for lighting computations. [Candera::Material](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_material.html "The class Material describes the color attributes of an object's surface and is primarily used for li...")
3	RenderMode: An appearance component that encapsulates polygon-level and per-fragment compositing render attributes. [Read more...](#bkmrk-render-mode) [Candera::RenderMode](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_render_mode.html "The class RenderMode is an Appearance component that encapsulates polygon-level and per-fragment comp...")
4	Uniform Setter: A setter associated to a given node in a 3D scene to generate special effects. [Candera::GenericShaderParamSetter](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_generic_shader_param_setter.html "GenericShaderParamSetter bundles uniform shader parameters that are calculated by Candera...")
5	Texture: A collection of textures. Up to 16 on ES3.0 builds and up to 8 on ES2.0 builds. On ES3.0 builds, additional auto-uniform samplers u\_Texture–u\_Texture15 and u\_CubeMapTexture–u\_CubeMapTexture15 are available for binding the 1th–16th textures. On ES2.0, only u\_Texture–u\_Texture7 and u\_CubeMapTexture–u\_CubeMapTexture7 are available. [Candera::Texture](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_texture.html "Texture encapsulates a TextureImage and a set of attributes specifying how it is applied to a vertex'...")
6	Cube Map Texture: A particular type of environment mapping. [Read more...](#bkmrk-cube-map-texture) [Candera::GenericShaderParamSetter](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_generic_shader_param_setter.html "GenericShaderParamSetter bundles uniform shader parameters that are calculated by Candera...")
7	Render Order Bin: Is used to configure a non-default render order for all the 3D objects in a scene graph. [Read more...](#bkmrk-render-order-bins) Candera::RenderOrderBin

1	2D Camera: To be linked to a render target, where the render result of the camera will be drawn. [Candera::Camera2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_camera2_d.html "A camera defines the view to the scene. At least one Camera2D has to be added to a 2D scene graph and...")
2	2D Group: Parent item for other nodes. Child nodes are located relative to the parent group. [Candera::Group2D](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_group2_d.html "The class Group2D is a scene graph node that stores a set of nodes as its children. The parent-child relationship between groups and nodes is bidirectional. Whereas a group can hold a group of nodes, a node can at most have one parent at a time. Cycles are prohibited. Changing the groups transformation or alpha value affects the children nodes of the group.")
3	Base Line Layout: Provides a stacked layout in the horizontal direction. [Candera::BaseLineLayouter](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_base_line_layouter.html "A BaseLineLayouter behaves similar to a Horizontal StackLayouter but instead of aligning the objects ...")
4	Dock Layout: Provides an area divided into five screens (Top, Bottom, Center, Left, Right). Nodes can be placed in the screens surrounding the Center screen. [Candera::DockPanelLayouter](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_dock_panel_layouter.html "The Dock Panel Layouter provides an easy docking of elements to the left, right, top, bottom or center of the panel. The dock side of an element is defined by the attached dynamic DockSide property. To dock an element to the center of the panel, it must be the last child of the panel.")
5	Grid Layout: Each node within the group will be positioned within a grid. [Candera::DockPanelLayouter](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_dock_panel_layouter.html "The Dock Panel Layouter provides an easy docking of elements to the left, right, top, bottom or center of the panel. The dock side of an element is defined by the attached dynamic DockSide property. To dock an element to the center of the panel, it must be the last child of the panel.")
6	Overlay Layout: Allow you to place nodes on top of each other to create a layered effect. [Candera::OverlayLayouter](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_overlay_layouter.html "OverlayLayouter sets sizes of all child elements to fulfill the given area.")
7	Stack Layout: Stacks nodes in the horizontal or vertical direction. [Candera::StackLayouter](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_stack_layouter.html "A StackLayouter stacks its elements either in horizontal or vertical order.")
8	RenderNode: Can be associated with any type of effect. [Candera::RenderNode](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_render_node.html "RenderNode is a 2D node that links to an effect chain. Therefore this is the only type of 2D node whi...")
9	BitmapNode: By default associated with a BitmapBrushAlphaBlend effect. Candera::BitmapBrushAlphaBlend
10	TextNode: By default associated to a TextBrushAlphaBlend effect. Candera::TextBrushAlphaBlend
11	Solid Color Node: By default associated to a TextBrushAlphaBlend effect. [Candera::SolidColorBrush](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_solid_color_brush.html "Output a rectangle filled with a solid color. The rectangle is transformed to the transformation spac...")
12	MVG Arc Node: can be used to display an arc
13	MVG Ellipse Node: can be used to display ellipse
14	MVG Path Node: can be used to display paths with a combination of instructions
15	MVG Rect Node: can be used to display rect.

Left chain	Right chain	Horizontal Alignment
closed	closed	Stretch
closed	open	Left
open	closed	Right
open	open (use Shift key)	Center