Open4ヶ月前にコメント追加9

AR/VRとWebブラウザの調べ

WebGL

Vision Pro

kmd

Vision Proを体験してきたので、ブラウザのXR対応について調査

kmd

実機がなくてもXCodeのシミュレーターである程度の挙動の確認が可能。

kmd

WebXR

Webブラウザでは、2019年からVR、ARデバイスと連携するためのWebXR APIが提供されている。
元々はWebVR APIとして開発されていたが、VRのみならずARにも対応するAPIとして置き換えられ始めた。

https://ja.wikipedia.org/wiki/WebXR

WebXRにおけるセッション

WebXRは、同じAPIを使用してAR（拡張現実）セッションとVR（仮想現実）セッションの両方に対応しています。セッションの種類は、セッションを作成するときにセッションモード文字列で指定します。

navigator.xr.requestSession にてセッションを種類を指定した上でセッションを発行できる。
指定できる種類としては、inline, immersive-vr, immersive-ar の三種類。
Vision Pro（というかsafari？）では、 immersive-arには現状対応していないという情報がある。（VRと同じように扱われる？）

仮想現実 (VR)
インライン (inline) :ウェブブラウザの文書コンテキスト内でシーンを表示し、特別なXRハードウェアは不要。
没入型 (immersive-vr): ヘッドセットなどのXR機器を使用し、ユーザーの視界全体をレンダリングシーンで置き換える。

レンダリング時はフレームごとに全てのピクセルを再描画。

拡張現実 (AR)
没入型 (immersive-ar) : 自分の周りの物理的な現実環境の上にコンテンツをレンダリングする
レンダリング処理は、各フレームをレンダリングする前に背景やスカイボックスを消去しないことを除いて、VRの場合とほとんど同じ。

kmd

immersive-webが公開しているwebXRのサンプル集

関連
https://www.w3.org/immersive-web/

kmd

WebXRアプリのライフサイクル

ユーザーのデバイスとブラウザが、提供したいXRエクスペリエンスを表示できるか確認する。
navigator.xr.isSessionSupported()を呼び出し、提供したいWebXRエクスペリエンスモード（インライン、イマーシブVR、イマーシブAR）がサポートされているか確認する。
ユーザーが上記のインターフェースを介してWebXR機能を有効にすることを要求したら、希望す1. るモードを指定してnavigator.xr.requestSession()を呼び出し、XRセッションをリクエストする。
XRSessionメソッドrequestAnimationFrame()を呼び出して、XRデバイスの最初のフレームのレンダリングをスケジュールする。
各requestAnimationFrame()コールバックでは、3D世界に配置されたオブジェクトに関する情報を使用して、WebGLを使用してフレームをレンダリングする。
（ユーザーがアプリを終了するか、サイトから離れるなどして）終了する時が来たら、XRセッションを終了する。

セッションの発行のサンプルコード

const xrButton = new WebXRButton({
    onRequestSession: onRequestSession,
    onEndSession: onEndSession,
});
document.querySelector("header").appendChild(xrButton.domElement);

if (navigator.xr) {
    navigator.xr.isSessionSupported("immersive-vr").then((supported) => {
      xrButton.enabled = supported;
    });
    
    navigator.xr.requestSession("immersive-vr").then((session) => {
      xrButton.setSession(session);
      // Set a flag on the session so we can differentiate it from the
      // inline session.
      session.isImmersive = true;
      onSessionStarted(session);
    });
}

WebXRはあくまでデバイスとの連携を担う部分であり、実際にコンテンツのレンダリングメソッドを提供するAPIではない。よってWebXRのフレームコールバックでアプリケーションの中で利用したいレンダリングメソッドを明示的に呼び出してあげる必要がある。
サンプルコードなどでは、よくWebGLが利用されている。

kmd

modelタグ

HTMLにおいて3Dモデルの表示を行うための新規タグとして提案された。

3Dモデルリソースをimgタグやvideoタグのように一級市民として扱うようにすることを目的とし、モデルの表示には対応していない場合は画像や動画にフォールバックさせるといった仕様が提案されている。

modelタグ自体は実際に3Dモデルのレンダリングロジックについて規定している物ではなく、実際のレンダリングロジックは各ブラウザに委ねることが想定されている。
そのため、異なるブラウザ間でピクセル単位で同じ表示になる保証はない。

kmd

様々なファイルフォーマットが存在する（OBJ, FBX, gITF, USD/USDZ/reality; はAppleとPixarが開発, etc...)

model タグのサンプル

<model interactive="" width="670" height="1191">
      <source src="assets/FlightHelmet.usdz" type="model/vnd.usdz+zip">
      <source src="assets/FlightHelmet.glb" type="model/gltf-binary">
      <picture>
        <img src="assets/FlightHelmet.png" width="670" height="1191">
      </picture>
</model>

フォールバック用のリソースが確認できる。

kmd

AR Quick Look
現状safariのみ対応しているwebページからARモデルを開くための機能。
rel属性に arを指定することで、safari系のブラウザでiphoneやiPad、Vison ProではARオブジェクトを表示することができる。

<a rel="ar" href="model.usdz">
   <img src="model.jpg">
</a>

kmd

model-viewer

https://modelviewer.dev/