Shader render order on mobile

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