Away3D includes a number of methods that can be employed to adjust the order in which the drawing primitives are rendered. In the example provided, the rendering order can be fixed by either bringing Triangle A to the front of the scene, or by forcing Triangle B to the back.
The
pushfront
property forces a drawing primitive to be sorted based on the point that is closest to the camera. For Triangle A, the closest point to the camera is Point 1. Because Point 1 is closer to the camera than the z depth of Triangle B, setting pushfront
to true
for Triangle A will bring it to the front of the scene, meaning it will be rendered last.
var triangleA:Object3D = new Triangle( { x: -30, y: 0, z: 500, rotationY: -5, yUp: false, bothsides: true, pushfront: true } );
The
pushback
property does the opposite of pushfront
, and forces a drawing primitive to be sorted based on the point that is furthest away from the camera. For Triangle B, the furthest point from the camera is Point 2. Because Point 2 is further away than the z depth of Triangle A, setting pushback
to true
for Triangle B will push it to the back of the scene, meaning it will be rendered first.
var triangleB:Object3D = new Triangle( { x: 30, y: 0, z: 499, rotationY: 60, yUp: false, bothsides: true, pushback: true } );
The
screenZOffset
property can also be used to force one triangle to be considered further away from the camera than the other. Away3D will add the screenZOffset
value to the z depth, which allows you to adjust the relative depth of a 3D object within the scene.
A positive screenZOffset
increases the z depth, forcing a 3D object to be considered to be more towards the back of the scene. A negative value will decrease the z depth, forcing a 3D object to be considered to be closer to the front of the scene. Note that setting the screenZOffset
value will not change the position of the 3D object within the scene, only the order in which it is drawn.
To force Triangle A to be drawn on top of Triangle B we can specify a negative value for the screenZOffset
parameter. In the following example, Triangle A will have a z depth of 490, placing it in front of Triangle B, which has a z depth of 499.
var triangleA:Object3D = new Triangle( { x: -30, y: 0, z: 500, rotationY: -5, yUp: false, bothsides: true, screenZOffset: -10 } );
To force Triangle B to be drawn on top of Triangle A, we can specify a positive value for the screenZOffset
parameter. In the following example, Triangle B will have a z depth of 509, placing it behind Triangle A, which has a z depth of 500.
The final way to force the sorting of 3D objects is to render them in their own canvas, which is done by setting the ownCanvas
property to true
, and then forcing the depth of that canvas.
A canvas is a layer into which 3D objects are drawn. They work in much the same way as layers in image-editing software packages like Photoshop. 3D objects can be rendered into a canvas, and the canvas is then drawn alongside any other 3D objects that are in the scene.
First, we set the ownCanvas
property to true
.
var triangleB:Object3D = new Triangle( { x: 30, y: 0, z: 499, rotationY: 60, yUp: false, bothsides: true, ownCanvas: true } );
Then, we set the screen depth of the canvas through the ownSession
screenZ
property. Because Triangle A is 500 units away from the camera, we can specify the z depth of the canvas that will display Triangle B to be slightly more at 510. This will mean that Triangle A is considered to be closer to the camera.
triangleB.ownSession.screenZ = 510;
The following image shows how the canvas is positioned. By giving the canvas onto which Triangle B is drawn a larger screenZ
value that the z depth of Triangle A, we have forced it to be drawn in the background.
Be careful when setting the depth of a canvas via the screenZ
property, because unlike the other methods of correcting the depth of a 3D object, the screenZ
property is an absolute value and does not take into account the relative position of the camera. If the camera were at a position of (0, 0, -1000), as it is by default, the preceding code would draw the canvas that holds Triangle B in front of Triangle A, because the z depth of Triangle A would be 1500, and the z depth of the canvas would be set to the absolute value of 510.
If no screenZ
value is specified, a canvas is ordered in the scene based on the z depths of the 3D objects that will be drawn into it. This means that the order of a canvas in the scene can be modified by using the pushfront
, pushback
, and screenZOffset
properties on the 3D objects that will be drawn into it.