Render Order

• 3D Models
• Studio

By default, objects in ZapWorks Studio are rendered in the order they are positioned in the Hierarchy i.e. nodes placed below others in the Hierarchy will have render priority and be displayed in front of nodes with lower priority.

While this default behaviour works well when layering 2D content to set up a user interface, the use of 3D models in a scene requires greater control over render priority.

To this end ZapWorks Studio provides the Layer Mode property, which allows the default behaviour to be changed on a per-object basis. As well as the object's position in the Hierarchy, the additional layer mode options also consider the object's position in 3D space relative to the camera when calculating the render order.

Overlay

The overlay layer mode is the default setting with objects being rendered in hierarchy order, and is ideal for 2D UI elements that are positioned in screen space.

In the first set of images below, the grey plane has render priority as its node is positioned below the white plane's node in the Hierarchy.

Grey_Plane is positioned below White_Plane in the Hierarchy.

The grey plane has render priority.

However, in the second set of images the white plane's node has been moved below the other node in the Hierarchy, and is rendered in front of the grey plane in the 3D view.

Grey_Plane is positioned above White_Plane in the Hierarchy.

The white plane now has render priority.

Full 3D

The full_3d layer mode differs from overlay in that it mimics real-world behaviour i.e. objects positioned closer to the camera (the 'eye') will be displayed over others.

By default, 3D objects imported to ZapWorks Studio will have their layerMode property set to full_3d.

In Studio this means that the render order of objects using the full_3d layer mode is determined by their Z-axis position in camera space. This setting is applied to imported 3D models by default.

Both 3D models shown below are using the full_3d layer mode, with the green car's Z-axis position set to 0.

In the first set of images, the green car has render priority because it's positioned in front of the blue car relative to the camera i.e. 1 in the Z-axis.

Z-axis position of the green car set to 1.

The blue car is obscured by the green car.

However, in the second set of images the green car has lost render priority because it's position has been moved to behind the blue car relative to the camera i.e. -1 in the Z-axis.

Z-axis position of the green car set to -1.

The blue car now obscures the green car.

When the surfaces of two full_3d objects occupy the same space in 3D they will fight for render priority, an issue known as Z-fighting. To avoid this the models should be repositioned.

Test 3D

Objects with the test_3d layer mode use the same render priority calculation as those with a full_3d layer mode i.e. objects positioned closer to the camera will be rendered over others.

However, unlike full_3d, objects with this layer mode do not affect the render priority of objects positioned later in the hierarchy, even if the test_3d object is positioned closer to the camera.

This property makes this layer mode especially useful when working with 2D objects with transparency, that are positioned in 3D space.

The following illustrations contain a 3D model using the full_3d layer mode (green car), and a 2D image with transparency that uses test_3d (blue car). In all cases the 2D object is positioned at 0 in the Z-axis.

The 3D model beside the 2D image.

In the first scenario, the 3D model is positioned at 5 in the Z-axis. As it's positioned nearer to the camera than the 2D object, it is given render priority.

The 3D model has render priority.

In the second scenario, the 3D model has been moved to -5 in the Z-axis and is now positioned further away from the camera than the 2D object which results in the 2D image being given render priority.

The 2D object has render priority.

In the previous examples, the 2D object's position relative to the camera affected the 3D model's render priority, as the 2D object's node was positioned later in the Hierarchy.

However, objects using the test_3d layer mode do not affect the render priority of objects which appear later in the Hierarchy. If the 2D object's node is placed earlier than the 3D model's node in the Hierarchy, it will not affect the 3D model's render priority, regardless of whether it is positioned closer to the camera.

The 3D model has a lower Z-axis value than the test_3d object, but is positioned later in the Hierarchy.

Therefore, its render priority is unaffected by the test_3d object.

Reorder Meshes

Studio provides the Reorder Meshes property, which defines the order that meshes inside of an object should be rendered.

The opacity setting will render meshes positioned behind another object, if the surface nearer to the camera has transparency.

The opacityAndDistance setting works similarly, though the distance of the object is also taken into account when calculating render priority.

These settings are particularly helpful when working with models containing other meshes that should be visible through transparent areas of the object e.g. a car's interior being visible through the car window.

Reorder Meshes set to none.

Reorder Meshes set to opacity.

The opacity of a model's surface can be set through an opacity map, when using lighting materials.

Other objects can also be rendered through these transparent areas. Both objects must have their layer mode set to full_3d.

If an object with transparency is positioned earlier in the Hierarchy, the object positioned behind will not be visible through the transparent areas.

3D_Car_Green is positioned above 3D_Car_Blue in the Hierarchy.

3D_Car_Blue is not visible through the transparent area.

The object with transparency must be positioned later in the Hierarchy for the object positioned behind to be visible through the transparent area.

3D_Car_Green is positioned later in the Hierarchy.

The 3D_Car_Blue is now visible through the transparent area.