Very low performance on my xiaomi 14.
I made a simple application to detect markers,
everything is fine when I start it, but once I find one or two markers, the fps starts to drop sharply, I think to 5 or even 1.
I also tried to do it from the example, there is not even a script, only one marker and image output, the result is the same (
I can’t find a detailed description of this solution, maybe someone can suggest an alternative?
I need to develop a web AR application with the ability to determine markers and maybe in the future also GPS functionality.
Please help.
<!doctype html>
<html>
<head>
<link rel="icon" href="/resources/favicon.ico" type="image/x-icon">
<!-- A-Frame 1.6.0 ar-3d -->
<script src="/script/aframe.min.js"></script>
<!-- AR.js Marker based and Location based AR -->
<script src="/script/aframe-ar.js"></script>
<script src="/script/gesture-detector.js"></script>
<script src="/script/gesture-handler.js"></script>
<script>
AFRAME.registerComponent('videohandler', {
init: function () {
var marker = this.el;
this.vid = document.querySelector("#vid-" + marker.id);
marker.addEventListener('markerFound', function () {
console.log(marker.id + " found!");
this.toggle = true;
if (this.vid) {
this.vid.play();
this.vid.muted = false;
}
}.bind(this));
marker.addEventListener('markerLost', function () {
console.log(marker.id + " lost!");
this.toggle = false;
if (this.vid) {
this.vid.pause();
}
}.bind(this));
},
});
function openLink() {
window.open('https://yandex.ru/maps/-/CHUKY-2N', '_blank');
}
</script>
</head>
<body style="margin: 0; overflow: hidden;">
<a-scene
vr-mode-ui="enabled: false"
loading-screen="enabled: true;"
arjs='sourceType: webcam; debugUIEnabled: false;'
id="scene"
embedded
gesture-detector
>
<a-assets>
<video
id="vid-marker1"
src="/resources/pattern-0001.mp4"
preload="none"
loop
crossorigin
webkit-playsinline
muted
></video>
<video
id="vid-marker2"
src="/resources/pattern-0002.mp4"
preload="none"
loop
crossorigin
webkit-playsinline
muted
></video>
</a-assets>
<a-marker
type="pattern"
preset="custom"
url="/resources/marker/pattern-0001.patt"
videohandler
id="marker1"
cursor="fuse: false; rayOrigin: mouse;"
>
<a-video
src="#vid-marker1"
scale="1 1.5 1"
position="0 0.1 0"
rotation="-90 0 0"
gesture-handler
></a-video>
</a-marker>
<a-marker
type="pattern"
preset="custom"
url="/resources/marker/pattern-0002.patt"
videohandler
id="marker2"
cursor="fuse: false; rayOrigin: mouse;"
>
<a-video
src="#vid-marker2"
scale="1 1.5 1"
position="0 0.1 0"
rotation="-90 0 0"
gesture-handler
></a-video>
</a-marker>
<a-marker
type="pattern"
preset="custom"
url="/resources/marker/pattern-0003.patt"
id="marker3"
>
<a-entity
geometry="primitive: plane; width: 1.5; height: 1;"
material="color: gray; opacity: 0.8;"
position="0 0.1 0"
rotation="-90 0 0"
text="value: Open MAPS!; color: black; align: center; width: 4; size: 72;"
event-set__enter="_event: mouseenter; color: #0056b3"
event-set__leave="_event: mouseleave; color: gray"
onclick="openLink()"
></a-entity>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>