Shader render order on mobile

Thanks, how do you launch the AR on device? (Very cool shader btw!)

1 Like

Hey @yaustar

I’ve checked with my boss and since the devices have already been revealed I can put the project online for some time (later I willl put it on private again). If you test this on mobile and choose the menu option “Body Composition” you will see the shader here, but the text and watch are actually in front of the shader but show behind.

If you test in on pc (mobile preview for example) the depth is ok and as it should be.

Just to ensure that we are looking at the right thing, can you provide a screenshot or video of the issue?

This is what I get on device (Android):

Sure, it’s a complicated project to just dive in to haha.
This is a video from my phone where you can see the watch and text disappearing.

Error shown on iOS from the video:

1 Like

wow ok, that’s what it’s supposed to do haha. But my iphone shows something different (see video wetransfer in previous comment)

Confirmed it’s an iOS specific issue. :thinking:

Maybe @mvaligursky or @Leonidas have some initial ideas. It could be related to layers or it looks like the depth buffer isn’t cleared for the UI layer

1 Like

I can’t reproduce it without Zappar here:

Might be worth asking the Zappar team to see if they can help too from their end


Tried it with forced WebGL 1 on Android ( and it still looks correct :thinking:

Hi @DampedFred ,

Could you make a thread over on PlayCanvas - ZapWorks Forum ? We’ll be happy to help!

1 Like

I’ve have reached out to zappar support and they will look into the issue :slight_smile:

1 Like

also made a thread on the forum now, needs to be approved by a mod :slight_smile:

A bit of a delayed response, apologies (Monday was a public holiday here) :

@yaustar The UI text element seems to get rendered behind the model if you disable bloom pass on the minimal example you’ve shared. Here’s a fork showing that:

Looks like @DampedFred’s AR camera has bloom toggled off - which results in the render order issue.

Any thoughts?

1 Like

When the bloom is disabled? So if it’s enabled, it renders normally?

That’s odd :thinking: @mvaligursky , any ideas here?

1 Like

Not sure. When we render without bloom or any other post-effects, we would likely render to backbuffer directly, which would have a depth buffer which gets rendered to as well.
When bloom is enabled, the scene would be rendered to texture with a depth buffer … and then the texture would get post-processed and copied into framebuffer. Which means at the end the depth framebuffer when bloom is enabled would not be filled in.

So maybe that SDK somehow does not use correct depth buffer or something.

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:


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.


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.