メインコンテンツへスキップ

ローディング画面がずっと表示される

問題点

WebARにアクセスすると、スピナーが回ったままでローディング画面がずっと表示される。

loading-infinite-spinner

なぜこの問題が発生するのでしょうか?

XRExtras Loading モジュール (すべての 8th Wall プロジェクトと サンプルにデフォルトで含まれています) を使用している場合、シーンとアセットのロード中にローディング画面が表示され、ブラウザのパーミッションが受け入れられるのを待っている間に を表示します。 シーンのロードに長い時間がかかったり、何かの原因でシーンの初期化が完全にできなかったりすると、この画面が永遠に表示されているように見えることがあります。

想定される原因

  1. 大容量のアセットと遅いインターネット回線

無線LANや携帯電話の通信速度が遅い場所で、大容量のアセットを含むWeb AR ページを読み込もうとすると、シーンが「動かない」のではなく、 のロードに時間がかかるだけかもしれません。 ブラウザのネットワークインスペクタを使って、ページが単に アセットのダウンロード処理中であるかどうかを確認してください。

さらに、シーンアセットの最適化をお試しください。 これには、テクスチャの圧縮、テクスチャ やビデオ解像度の削減、3Dモデルのポリゴン数の削減などの方法が含まれます。

  1. カメラがバックグラウンドタブにロックされている

端末やブラウザによっては、すでに他のタブでカメラが使用されている場合、カメラを開くことができない場合があります。 カメラを使用している可能性のある他のタブを閉じてから、ページを再読み込みしてみてください。

  1. iOS Safariのみ発生: CSS要素がvideo要素を "画面の外 "に押し出してしまう。

Web ARにカスタムHTMLやCSS要素を追加した場合、それらがシーンの上を正しく覆っていることを確認してください。 ページ上のビデオ要素が画面外に押し出された場合、iOS Safariはビデオをレンダリングしません。 その結果、一連のイベントが引き起こされ、8th Wallが「動かない」ように見えるのです。 実際にはこのようになっています。

ビデオがレンダリングされない -> A-Frameシーンが完全に初期化されない -> A-Frameシーンが 「loaded」イベントを発行しない -> XRExtras Loadingモジュールが消えない (シーンの「loading」イベントを待機しているが発行しない)

これを解決するには、Safariインスペクタの「レイアウト」ビューを使用して、DOMコンテンツの 位置を視覚化することをお勧めします。 多くの場合、下の画像のように動画要素が「画面の外」または「折り目の下」に押しやられていることがあります。

video-element-offscreen

解決するには、CSSで要素の位置を調整し、ビデオを画面から押し出さないようにします。 CSSのabsoluteプロパティを使用するのも1つの方法です。