A-Frame は、 VR 体験を構築するための Web フレームワークです。
<html>
<head>
<script src="https://aframe.io/releases/1.0.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
</body>
</html>
このような DOM ベースの記述で簡単に 3D シーンを構築することが出来ます。
WebGL レンダリングのベースは three.js が使われています。
待望のメジャーリリースということで、どのような変更が加わっているのか見てみましょう。
WebXR スペックサポート
以前 WebVR という API を利用してブラウザ上で VR 体験が出来ていましたが、現在は AR/MR などにも対応した WebXR Device API が策定中です(ドラフト段階)。
しかし、つい先日公開された最新の Chrome 79 では WebXR Device API のサポートが公言されました。
この API はまだ AR/MR に関する部分が不足・未実装ですが、 VR に関しては十分な定義と実装があるということで、それに基づいて A-Frame もサポートされています。
WebXR Gamepads Module
WebXR の付属 API として WebXR Gamepads Module という仕様も提案されています。
これは HMD に付属しているコントローラをブラウザから操作するための規格になっています。
現在 A-Frame では、下記のコントローラをサポートしているようです。
- HTC Vive
- Daydream
- Oculus Rift
- Oculus Rift S
- Oculus Go
- Oculus Quest
- Microsoft Mixed Reality
- Vive Focus
実験的な WebXR AR モードのサポート
Android 8+ の一部の端末は chrome://flags から WebXR AR Module を有効にすることで、 immersive-ar 仕様の AR モードが実験的に利用出来るようになります。
現在は試験的なサポートのみですが、今後ブラウザの開発が進むなどして AR 実装も行えるようになるでしょう。
最新の安定板ということで、今後は WebXR Device API やブラウザの更新に寄り添いつつ、いつでも手軽に VR シーンを作れるようアップデートが続けられると思います。
ちなみに、 A-Frame を使って作られた作品は A-Frame Blog などですぐに確認することが出来ますよ。