A-Frame v1.1.0 から Hit-test と Dom-overlay の実装が入りました

A-Frame v1.1.0

去年12月になりますが、A-Frameがv1.1.0をリリースしました。
A-Frameも初回リリースから5年が経ち、様々な機能が追加されています。

https://aframe.io/blog/aframe-v1.1.0/

今回v1.1.0では、WebXR関係の機能追加が多く入っています。

A-Frame 1.1.0 is out! Core functionality is more polished and robust than ever. Full support for WebXR AR module and initial and experimental integration for upcoming and exciting WebXR APIs like immersive navigation, hand tracking, compositor layers or hit tests

その中でも気になる機能として、hit-test と dom-overlay に注目しています。

WebXR

そもそもWebXRとはという話から。

WebXRはブラウザでAR/VRどちらも利用するための新しいWeb APIです。
あれ？今までできていたのは？と思いますが、今まではWebVR APIという、VRに特化した別のAPIを利用していました。
現在では、WebVR APIはほとんどのブラウザで、サポートから外れています。

https://caniuse.com/?search=WebVR

WebXR Device APIについては以下のサイトがまとまっています。

https://developer.mozilla.org/ja/docs/Web/API/WebXR_Device_API

A-Frameでの具体的な実装方法は、ドキュメントを参照しましょう。

https://aframe.io/docs/1.1.0/components/webxr.html

WebXR Device API自体がまだDraftなのでAndroid Chromeブラウザでしか動作しません。

Hit-test

現実空間の平面などを認識することができ、その位置に3Dモデルを配置するなど、現実とリンクしたXR体験を行うことができます。
VR空間におけるRaycasterと同様に現実のものとRayがぶつかった箇所を認識できます。

https://immersive-web.github.io/hit-test/

Dom-overlay

A-Frame v1.0.0でもWebXRに対応していましたが、ARモードの場合はDOM表示できませんでした。
それが、v1.1.0でDom-overlayが導入されたことにより、ARモードにもDOM表記できるようになります。

これで、ボタンやSelectorなど、一般的な2D部品を表示して操作することができます。

https://immersive-web.github.io/dom-overlays/

それぞれのA-Frameにおける実装方法はまた別の記事で。