AR.jsの表示時のちらつきを抑える方法 - 切り絵Blog 影織文庫

AR.jsの表示時のちらつきを抑える方法

AR.jsの動画再生時の画面ちらつき問題

マーカーに合わせて動画を再生するようにAR.jsで実装していたのですが、見ているうちに見ているだけで酔いそうなレベルで動画がちらついていました。
※酔いやすい方は閲覧注意です


こりゃあかんということで調査。

改善策

表示位置設定と回転の呼び出し順番を確認する

meshの回転前にmesh表示位置を設定するようにしましょう。具体例としては下記のようになります。

これだけで大幅に改善されました。
参考になったのはこちらのStack Overflowのページです。
回転によって各フレームごとにマーカーがちょっとずつずれて、そのたびに毎度新しいx軸が生成されて、それを基準に表示位置を動かすので、動画ががくがく揺れていたようです。


修正結果

かなり落ち着きました。
とはいえ、手ブレでどうしても多少のちらつきが出てしまうのですが…だいぶ見やすくなったかと思います。



まとめ

AR.jsでモデルのちらつきが気になる場合には、回転の呼び出し順を確かめてみてください。

AR.jsの表示時のちらつきを抑える方法 AR.jsの表示時のちらつきを抑える方法 Reviewed by 影織 on 6月 10, 2019 Rating: 5