Hi!
We are experiencing some issues with a custom hologram shader we made. When we test the shader on pc everything is ok and the other 3D elements in the scene render in front of the mesh of the shader. Since it is a mobile AR experience we tested it out on mobile and there the 3D object is rendered behind the hologram shader. Are there any fixes for this? (f.e. depth testing in shaders?)
Thanks!
Odd that it renders different on mobile. Is there a public project/reproducible that can be looked at?
Is this on Android or iOS?
Which AR library are you using? WebXR, 8th Wall etc?
We are currently using ZapWorks to create our AR experience.
Sadly we can’t share the official project since it’s confidential, but we can share the shader project itself: PlayCanvas 3D HTML5 Game Engine
If you test this project on mobile there seems to be no problem (non AR environment), I think the AR environment does something with the shader render order and messes it up.
Thanks, how do you launch the AR on device? (Very cool shader btw!)
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?
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.
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. 
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
I can’t reproduce it without Zappar here: https://playcanvas.com/editor/scene/1219846
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 (https://launch.playcanvas.com/1210598?webgl1=true&debug=true&ministats=true) and it still looks correct
Hi @DampedFred ,
Could you make a thread over on PlayCanvas - ZapWorks Forum ? We’ll be happy to help!
I’ve have reached out to zappar support and they will look into the issue 
also made a thread on the forum now, needs to be approved by a mod
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:
https://playcanvas.com/editor/scene/1221911
Looks like @DampedFred’s AR camera has bloom toggled off - which results in the render order issue.
Any thoughts?
When the bloom is disabled? So if it’s enabled, it renders normally?
That’s odd @mvaligursky , any ideas here?
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.
