Fullstack London 2019カンファレンスで、フリーランスのソフトウェアエンジニアであるDoug Sillars氏が、JavaScriptの仮想現実と拡張現実の現状について、仮想アートギャラリーを構築する方法のデモを通じて論じた。
3D生成された世界にユーザを完全に没入させる仮想現実(Virtual Reality)と、現実世界とデジタルオブジェクトを緊密に統合する拡張現実(Augmented Reality)は、いずれもWebXR APIを通じてWebへの統合が進められている、比較的新しいテクノロジである。WebXRのXは、将来的に登場する可能性のある、さまざまなタイプの没入型テクノロジのためのプレースホルダになっている。
WebXR APIは現在まだ開発途上であるため、ブラウザのサポートやドキュメントは限定的だ。WebXRのGitHubリポジトリには、WebXRをこれから始める人のために、そのコアコンセプトが分かりやすく紹介されている。
WebXR APIがなくても、AR/VRデバイスとインタラクトすることで、シンプルでクロスプラットフォームなアプリケーションを開発することは可能だ。A-Frameなどのライブラリが、アプリケーション開発用のシンプルなインターフェースを提供しており、多くの興味深い例がある。オンラインでの実装もすでに可能だ。
A-Frameライブラリは、JavaScript用の一般的な3Dレンダリングライブラリであるthree.jsをベースとしている。HTMLのようなシンプルな構文で容易にマスタできるため、JavaScriptに関する最小限の知識があれば、VRアプリケーションとARアプリケーションのいずれも開発することができる。
A-Frameを使用するには、HTMLに似たタグを使用してシーンを記述すればよい。A-FrameがそれをWebGLビューに変換してくれる。ただし3Dオブジェクトを実空間(AR)に配置するためには、現状ではA-Frame Webサイトで生成可能な、特別な物理タグを使用する必要がある。これらのタグを配置することにより、A-Frameは、(どの)3Dオブジェクトをどこに配置する必要があるのかを知ることができるのだ。
単純なVRシーンであれば、わずかなタグで作成できる。
<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"></a-sphere>
</a-scene>
取り上げる価値のあるもうひとつのライブラリは、React-360だ。このライブラリでは、Reactに類似した構文を使用して、AR/VRユーザインターフェイスを作成することができる。
初期のAR/VRアプリケーションは高価な専用機器を必要としたため、消費者への適応は制限されたものだったが、現在はスマートフォンを使用して、同様のエクスペリエンスを実現することができる。スマートフォンでAR/VRアプリケーションを使用することは可能だが、より没入感のあるエクスペリエンスを楽しむために、スマートフォンを包み込むような特別なグラスの使用が推奨されている。このタイプのグラスの最初のものはGoogle Cardboardだが、その後、多くの代替ソリューションが提供されるようになった。
Doug Sillars氏の講演"Building an Art Gallery in the Browser"のすべては、FullStackのWebサイト(無償の登録が必要)で見ることができる。
A-FrameはMITライセンス下でリリースされている。ソースコードはA-Frame Githubリポジトリから入手可能だ。