ar.js - Flickering with loaded GLTF model

0
votes

I am using currently ar.js 3.1.0. I am loading a GLTF model and I am using multi markers but I have a huge problem with "flickering" of the model. It almost looks like as if the depth check is not working properly and constantly jumping between polygons that are close to each other, esp. on edges. If I replace the included version of three.js with an older one (r92) that problem is gone and the model looks clean. Also if I load here (https://gltf-viewer.donmccurdy.com/) everything looks fine. Could anybody give me a hint what I am doing wrong?

1
three.jsar.js
Any chance you could show us a demo of the problem? stackoverflow.com/help/minimal-reproducible-example - Marquizzo
It is a bit difficult with the markers, but here are two videos showing the problem: billmaker.de/ar/included_threejs.mov and billmaker.de/ar/r92_threejs.mov - Andreas S
It looks like the car body is z-fighting with elements behind it. What are your camera's .near and .far attributes? When using values that are very far apart, you could lose precision in the depth-map and faces that are near each other will z-fight. For example, instead of using 0.00001 - 100000 use a smaller range, like 0.1 - 100. - Marquizzo
The camera ist set up by the ar.js framework as far as I understand it. What I don't understand is why it is working with an old version of three.js? I am not changing the ar.js framework, just switching the three.js version inside the framework. - Andreas S

1 Answers

0
votes

Turning on the logarithmic depth buffer in the renderer solved the problem.

var renderer = new THREE.WebGLRenderer({
  logarithmicDepthBuffer: true
});