Clipping plane / Z Fighting issue with AR.js using AFrame

[sriyan983]

Do you want to request a feature or report a bug? AR.js with AFrame has a z-fighting problem which is not getting fixed even if the camera's clipping plane (near and far) are set. Have searched throughout the GitHub / StackOverflow questions and hard to find an answer.

What is the current behavior? Whats so ever content is rendered in AR as the camera is taken away from the target the Z-Fighting issue gets terrible. Few models are relatively having interactions which can only be triggered when the whole model is seen. In such cases even if the mobile is moved at a fair distance away from the target the problem appears. If the current behavior is a bug, please provide the steps to reproduce. Place one plane over the other with a z difference and add it to amarker then the issue appears.

What is the expected behavior? There should not be a z-fighting problem at a fair distance away from the target

If this is a feature request, what is motivation or use case for changing the behavior?

Please mention other relevant information such as the browser version, Operating System and Device Name Android OS : 7.1.2 Chrome Browser version: 68.0.3440.91

[sriyan983]

https://www.dropbox.com/s/kj25f9dlhcqxw3r/z-fighting-arjs.png?dl=0

[poshaughnessy]

I'm seeing a similar issue with our code lab too.

The model should appear solid, like this:

But as I move the camera around - and especially when I move the camera further away - it gets quite glitchy, with white patches appearing and disappearing:

I tried moving the entity further away from the surface with a position attribute, but it hasn't helped. Also I haven't been able to replicate it in a regular A-Frame (not AR.js) scene.

[daylanKifky]

I have a similar problem, here's a screenshot:

I tried changing the clipping planes of the camera with:

document.querySelector('a-scene').sceneEl.camera.near = 1;
document.querySelector('a-scene').sceneEl.camera.far = 100;

but it doen't seem to have any effect. Instead If I instance a new camera then the z-fighting disappears:

//This should be done after the scene has finished loading..
document.querySelector('a-scene').sceneEl.camera = new THREE.PerspectiveCamera();

of course it can't be taken as a definitive solution..

[poshaughnessy]

Ooh, thanks @daylanKifky, that workaround solves the issue for our demo too - and might just do the trick for now...

[edsilv]

Hi,

I'm having the same issue, but when creating a new camera it no longer tracks the AR marker. I also tried cloning the existing camera, and changing its near and far clipping planes, but getting the same issue.

document.addEventListener('DOMContentLoaded', function(evt) {

    var sceneEl = document.querySelector('a-scene');

    sceneEl.addEventListener('loaded', function(evt) {
        var newCamera = new THREE.PerspectiveCamera();
        newCamera.near = 1;
        newCamera.far = 100;
        sceneEl.camera = newCamera;
    });
});

How are you making it track the AR marker?

[edsilv]

Aha, I was using ar-marker-camera. I switched to your method in complete.html here and it worked: https://glitch.com/~sdc-ar

[wkl-coder]

chrome for android frist okay ,then also happend eye flashing for z-figthing

[wkl-coder]

@edsilv for ios is okay ,android first okay ,if I clear history and cache ,it work first

[janpio]

I used the code from @edsilv 's glitch and it worked perfectly to fix all those small clipping errors I was having:

    <script>
      // Workaround for an AR.js bug (https://github.com/jeromeetienne/AR.js/issues/410)
      const sceneEl = document.querySelector('a-scene');
      sceneEl.addEventListener('loaded', () => {
        sceneEl.camera = new THREE.PerspectiveCamera();
      });
    </script>

Thanks!

PS: Beware that it breaks Ctrl + Alt + I to open the Aframe Inspector though :(

[edsilv]

Unfortunately this fix doesn't seem to work in aframe 0.9.0 - the z-fighting is back.

[TimKraemer]

I had this issue in the beginning, I think I fixed it by adding logarithmicDepthBuffer: true; and/or sortObjects: true;. forgot which one did the trick.

here's how my <a-scene> looks like:

<a-scene
        renderer="antialias: true; logarithmicDepthBuffer: true; colorManagement: true; sortObjects: true;"
>

[fcor]

I was having this issue on url AR.js version.

Solved adding: renderer="logarithmicDepthBuffer: true;" on the a-scene.

https://github.com/AR-js-org/AR.js/issues/52