Shader render order on mobile

The fork I linked above does not have the SDK added :slight_smile:

I’ve had a look at the fork and it doesn’t seem to match the OP’s original issue.

In the fork, the text element is behind the body in world space so the expected result is for the text to render behind the body.

The way to get around this (I’m still unclear on why this is only happening on iOS), is to either:

A)

Put the text labels (Body, Muscle, etc) onto a new layer (World UI) and have it last in the layer order:

And set the clearDepthBuffer to true on the layer via this code in a code file somewhere:

(function() {
    var worldUiLayer = pc.Application.getApplication().scene.layers.getLayerByName('World UI');
    worldUiLayer.clearDepthBuffer = true;
})();

This will make anything on and after this layer render on top of the layers prior to World UI.

B)

Have a second camera that is a child of the main camera and only renders the UI and clears the depth buffer.

Set that camera’s priority to be 1.

Remove the UI layer from the main camera.

2 Likes