While developing our Immersive Amazing Machines Augmented Reality Wall Art (Check them out HERE) we ran into an issue with pinch scaling. When the models where small ontop of the ar-marker, the polygons / triangles would flicker. This is a common issue with z-fighting (Check out the great Wiki page on this very issue HERE).

Z-fighting is when 2 polygons (or triangles) are in the same location and the renderer, or virtual camera does not know which one to choose so it flickers between each one on different frames.

It’s alot more complicated than what we are explaining but this aint a post explaining how graphics and the 3D mathematics work in rendering.

 

The reason for this is the renderer can not detect the depth of triangles by default and need the following settings to be applied.

Inside your Three.JS you should have a renderer, but the default values do not help in the matter when combining with AR.JS. You need to add the logarithmicDepthBuffer, colorManagement, and sortObjects and set these to true.

renderer = new THREE.WebGLRenderer({

antialias: true,

alpha: true,

logarithmicDepthBuffer: true,

colorManagement: true,

sortObjects: true

});

The original forum post is here.

https://github.com/jeromeetienne/AR.js/issues/410