この記事は、ラクスパートナーズ AdventCalendar 2024の7日目の記事となります。
自分の趣味全開の記事を書きたかったので、WebXRについて書きます。
この記事のゴールは以下のとおりです。
- XRについてふんわり理解する
- Web分野とどういう接点があるか知る
- A-Frameで遊べるようになる
そもそもXRについて明るくない方も楽しめるような内容にしたいと考えていますので、ぜひお気軽に読み進めていただければと思います。
XRってなに？
みなさんはXR（クロスリアリティ）と聞いて何を思い浮かべるでしょうか。もしかしたらXRという言葉自体を初めて目にする方もいらっしゃるかもしれません。
XRとは、VR（仮想現実）、AR（拡張現実）、MR（複合現実）領域の包括的な総称です。VRやARといった言葉はご存じの方が多いのではないでしょうか。
個人的には、スティーヴン・スピルバーグ氏が手掛けたレディ・プレイヤー１によって、「VR」という技術のイメージが広く浸透したように感じています。
何かゴーグルを身につけて仮想の世界に飛び込んだり、逆に現実を拡張してスマートな日常生活を楽しんだり。
そういった近未来的な技術分野がXRなんだな、とざっくり理解していただいて差し支えないかと思います。
言葉を知っていても実際に体験したことがない、というそこのあなた。ぜひアミューズメント施設などにあるVRアトラクションに手を伸ばしてみてください。（布教）
Web分野とどんな関係？
Web上においては、観光業界や不動産業界などでVRコンテンツを活用する事例が多数あります。
ですが、例示したケースのような、360°動画や360°画像を閲覧する軽量なVR体験がそのほとんどを占めています。
現状では、スマートフォンのジャイロ機能を活用した上記アプリケーションが主流なのです。
それでは近未来的な技術とは言い難いですよね。もっと仮想世界に入り込めるような体験をWeb上で行いたいものです…。
そこで、WebXRという便利なAPIが生まれます。
WebXR Device APIとも呼ばれ、ウェブブラウザからXRデバイスへの入出力を可能にするものです。
これによりWebアプリがXRデバイスとの垣根を超えやすくなり、より本格的なXR体験をWebで提供できるようになりました。
添付したWWDCの動画の後半部分を見ていただければ、体験できる質がスマホVRとは明らかに異なることがわかります。
今からこのWebXRの世界へ、最初の一歩を踏み出していきます。
A-Frameがお手軽すぎる
A-FrameとはMozillaが開発した3Dライブラリで、難しいJavaScriptに触れることなくVRコンテンツを生成できるとんでもないやつです。
なにはともあれハンズオン。HTMLを書いてみます。
<html>
<head>
<script src="https://aframe.io/releases/1.6.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>
以上です。
このちょっとしたHTMLを記述するだけで何ができるようになったのでしょう…。
！？！？
3Dモデルをただ表示するだけではなく、この時点でVRゴーグルに対応しています。驚き。
HTML要素をひとつひとつ説明しなくても雰囲気でわかるくらいに抽象化されており、Three.jsやWebGLなどの知識を必要としていません。
（もちろん、深い部分までカスタムする場合は知識が必要になります。）
せっかくなので、ユーザーから何かしらの操作を受け付けて、このサンプルが動くようにしてみましょう。
VRならではの操作として、視線を合わせる操作があります。
じっと対象を見つめることで、「メニューを表示する」など、インタラクトのきっかけを実現します。
立方体を見つめたときに、その立方体を見えなくするギミックを追加したいので、以下の通りにHTMLを書き換えました。
<html>
<head>
<script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-camera>
<a-cursor cursor="fuse: true; fuseTimeout: 1000"></a-cursor>
</a-camera>
<a-box id="listener" 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>
<script>
var el = document.querySelector("#listener");
el.addEventListener('click', function (evt) {
this.setAttribute("visible", false);
});
el.addEventListener('mouseleave', function (evt) {
this.setAttribute("visible", true);
});
</script>
</body>
</html>
<a-cursor>要素は「視点の先にカーソル代わりのサークルを表示する」という要素で、そのなかのcursor属性は「見つめたとき、対象要素をクリックしたことにする」の設定と「見つめてからどのくらいたてばクリック判定にするか」の設定を行っています。
それ以外の追加部分は一般的なDOM操作と同じで、idを指定してイベントリスナーを定義しています。
書き換えたHTMLをPCで表示してみると、期待通りに動いてくれました。
尚、A-Frameで実装したVRコンテンツを通常のPCで見ようとする場合は、「WASDキーで移動」「マウスで視点操作」となります。
せっかくなので、VRゴーグルで見たときのGIF画像も添付します。
視線を合わせたとき非表示になり、視線を反らすと再表示されることがしっかりと伝わるかと思います。
このように簡単なHTMLとJavaScriptで、インタラクティブなVRコンテンツを作ることができました。
いつかWebXRがもっと一般化して、XRデバイスでネットサーフィンする時代が来るといいなぁ…。