解決策

filterMinCFとfilterBetaをセットする。


A-frameなら

<a-scene mindar-image="filterMinCF:0.0001; filterBeta: 0.001"/>


three.jsなら

const mindarThree = new MindARThree({
 container: containerRef.current,
 imageTargetSrc: `/target.mind`,
 filterMinCF: 0.0001,
 filterBeta: 0.001
});


を追加する。


どれくらい変わるか

設定前




設定後


特に、モデルをZ軸方向に移動させている場合、ぐらつきが大きくなりやすいので、filterMinCFとfilterBetaをセットしておくのがおすすめ。

（逆に、Z軸のposが0だと、そこまで大きなぐらつきは起こらないので、つけなくても大丈夫そう）


それぞれの値について

filterMinCFはカットオフ周波数というもので、この値を小さくすることで、フィルタがより多くのフレームを平均化して、ノイズ（カメラ入力や計算誤差による微小な変動）を減らせます。

その結果、モデルの位置がより安定し、揺れが少なく見えるようになるようです。


filterBetaはスピード係数というもので、この値を大きくすることで、フィルタがカメラの動きにより迅速に反応するようになります。

その結果、カメラを素早く動かした際にもコンテンツが遅れることなく動くようになるようです。


カメラの揺れと応答速度のバランスを見て、都度調整するのが良いようです。

詳細は公式ドキュメント参照。




参考

help needed / feature request: smoothing off the target position and rotation to fight off jittering