AR.jsの動画再生時の画面ちらつき問題
マーカーに合わせて動画を再生するようにAR.jsで実装していたのですが、見ているうちに見ているだけで酔いそうなレベルで動画がちらついていました。※酔いやすい方は閲覧注意です
こりゃあかんということで調査。
改善策
表示位置設定と回転の呼び出し順番を確認する
meshの回転前にmesh表示位置を設定するようにしましょう。具体例としては下記のようになります。これだけで大幅に改善されました。
参考になったのはこちらのStack Overflowのページです。
回転によって各フレームごとにマーカーがちょっとずつずれて、そのたびに毎度新しいx軸が生成されて、それを基準に表示位置を動かすので、動画ががくがく揺れていたようです。
修正結果
かなり落ち着きました。とはいえ、手ブレでどうしても多少のちらつきが出てしまうのですが…だいぶ見やすくなったかと思います。
