I am currently working on an image tracking application using A-Frame and AR.js in a browser environment. However, I am facing stability issues in the scene, and it does not match the level of stability provided by other chargeable engines like 8th Wall. I would like to improve the stability without relying on external engines.
Is there a way to enhance the stability of the AR scene without resorting to other paid solutions? Should I manually make changes in AR.js or explore alternative approaches within A-Frame? I would greatly appreciate any guidance or suggestions to overcome this challenge and achieve a more stable AR experience.
Thank you in advance for your help!
This is code I tried:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>
<title>Vite App</title>
</head>
<body>
<a-scene
vr-mode-ui="enabled: false;"
renderer="logarithmicDepthBuffer: true;"
embedded
arjs="trackingMethod: best; sourceType: webcam; debugUIEnabled: true; minConfidence: 0.5;"
>
<a-nft
type="nft"
url="trex/trex-image/atlas"
smooth="1"
smoothCount="10"
smoothTolerance="0.01"
smoothThreshold="5"
>
<a-entity
id="model-id"
gltf-model="/trex/pixel-cut3.glb"
scale="100 100 100"
rotation="0 90 0"
position="170 100 -240"
smooth-position
>
</a-entity>
</a-nft>
<a-entity camera></a-entity>
</a-scene>
<script type="module" src="/main.js"></script>
</body>
</html>
I hope you are doing fine. I searched a lot but nothing was found except using a marker instead of an image. It is all about the quality of the tracking image. If there is a way, it must be relevant to the image tracker system.