The White Mesh bellow Clips through the roof and the further you move the object, the worse it gets.
Piotr Adam Milewski answered this question, from another person and gave this solution: https://stackoverflow.com/a/63143382/18310645 But i don't understand a thing about coding so i don't know how to implement it in my code, can someone help me?
Here is my code:
<!DOCTYPE html>
<html>
<script src="https://aframe.io/releases/1.0.0/aframe.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
<body style="margin: 0px; overflow: hidden">
<a-scene embedded arjs>
<a-marker preset="hiro">
<a-entity
position="0 0 0"
scale="0.2 0.2 0.2"
gltf-model="https://cdn.glitch.global/0653babd-a1b3-490a-9927-4d95dd7c9ffa/Capela%20das%20Penhas.glb?v=1645748288220"
></a-entity>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
If Your model looks properly in the gltf-viewer, but with ar.js You're experiencing clipping like this:
it is very likely, that you need to use a
logarithmicDepthBufferin your renderer.Luckily, it's very easy - just add the
renderercomponent to the<a-scene>element with the desired property:Which should result in a more desired image:
Check out both proper and clipping models here
Why is it happening? The model looks small, but actually it's huge just rescaled (100times, from what sketchfab exporter gave me). Also the marker makes it even more rescaled (marker determines the unit size. The
<marker>content is rescaled from 1m to whatever the print size).If we'd lose the scaling, the model would be so huge, the clipping parts would be so far away, that determining their precise distance from the camera would be wasteful. So you need to switch to a logarithmic depth buffer, which is designed to have better precision for greater distances.
Model by Boooooop