aframe-particle-system-component
aframe-particle-system-component copied to clipboard
<a-marker cursor="rayOrigin: mouse"> dramatically decrease fps (makes everything slow)
I'm using ar js (https://github.com/jeromeetienne/AR.js) and find out that combination of
- aframe-particle-system-component
<a-marker cursor="rayOrigin: mouse">
dramatically decrease fps. You can check it by yourself here: https://ar.rownarts.com/test/issue_slow.html https://ar.rownarts.com/test/issue_fast.html
Here is full example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name='viewport' content='width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0'>
<script src='https://aframe.io/releases/0.9.2/aframe.min.js'></script>
<script src="https://unpkg.com/[email protected]/dist/aframe-particle-system-component.min.js">
</script>
<script src="https://raw.githack.com/jeromeetienne/AR.js/2.0.8/aframe/build/aframe-ar.js"></script>
</head>
<body style='margin : 0px; overflow: hidden;'>
<a-scene stats vr-mode-ui='enabled: false' embedded
arjs='sourceType: webcam; sourceWidth:1280; sourceHeight:960; displayWidth: 1280; displayHeight: 960; debugUIEnabled: true;'>
<!-- SNOW -->
<a-entity position="0 2.25 -15" particle-system="preset: snow; particleCount: 10000"></a-entity>
<!-- MARKER -->
<a-marker id="animated-marker" emitevents="true" cursor="fuse: false; rayOrigin: mouse" type='barcode'
value='6'>
<a-cone color="tomato" radius-bottom="1" radius-top="0.5"></a-cone>
</a-marker>
<a-camera>
</a-camera>
</a-scene>
</body>
</html>
FYI, I noticed performance issues with nfc markers as well, here's what I used to fix them: arjs="sourceType: webcam; maxDetectionRate: 20; canvasWidth: 320; canvasHeight: 240;"
EDIT: What's a bit puzzling to me is that particles seem to be way slower than, say, the background camera, so I'm not quite sure why? From reading AR.js code there seems to be a "worker" for detection, so AIUI that's supposed to run detection in another thread or something? Not sure it's working properly...