Limited support 注意が必要。一部のブラウザのみ対応。プロダクション利用は慎重に判断すること。
その他 Limited support

DOM overlays for WebXR

WebXR DOM オーバーレイは拡張現実（AR）体験の上にHTML/CSSベースのUIを重ねて表示する機能です。従来WebGLで実装する必要があったUIを、通常のDOMとCSSで構築できます。ARアプリケーションでのボタン、メニュー、情報パネルなどの表示に使用されます。

WebXR拡張現実

概要

WebXR DOM オーバーレイは拡張現実（AR）体験の上にHTML/CSSベースのUIを重ねて表示する機能です。従来WebGLで実装する必要があったUIを、通常のDOMとCSSで構築できます。ARアプリケーションでのボタン、メニュー、情報パネルなどの表示に使用されます。

対応ブラウザ

デスクトップ

Chrome 83+
Edge 83+
Safari 未対応
Firefox 未対応

モバイル

Chrome Android 83+
Safari iOS 未対応
Firefox Android 未対応

基本構文

CSS 
/* XR DOM overlay スタイル */
.xr-overlay {
  position: fixed;
  top: 0; left: 0;
  pointer-events: auto;
}

実務での使いどころ

  • AR体験のUI

    WebXR拡張現実アプリケーションの上にHTMLベースの操作パネルや情報表示を重ねます。

注意点

  • Safari と Firefox ではサポートされていません。Chrome/Edge でのみ利用可能です。

アクセシビリティ

  • DOM オーバーレイのUI要素は通常のアクセシビリティ要件を満たすべきです。ARモードでもキーボードナビゲーションが機能することを確認してください。

参考リンク