トップ5 WebXRフレームワーク - 比較
WebXR開発を始めたいですか？ここでは、始めるためのトップ5のフレームワークを比較します。
2019年12月13日、Chrome 79はWebXR 1.0がデフォルトで有効になった最初のブラウザとしてリリースされました。これにより、WebXRにおける最大の課題の一つである安定性の問題が解決されました。それまでは、ブラウザAPIが変化していたため、WebXR / WebVR / WebARプロジェクトを維持するのが非常に困難でした。WebVR 1.0は迅速にWebVR 1.1に置き換えられ、この小さなバージョン更新にもかかわらず、WebVR 1.0で構築されたアプリケーションが動作しなくなるほど多くの変更が加えられました。
WebVR 1.1の後には、バージョン化されていないWebXRの中間バージョンが続きました。どのバージョンを扱っているかを特定することは難しく、Google Chrome Origin Trialsのトークンをリクエストして試作品をユーザーに提供し、実験的なフラグを切り替える手間をかけずにアプリを動かす必要がありました。
Chrome 79でWebXR 1.0がリリースされ、この手間がついに解消され、今後のChromeバージョンでもアプリが動作することが保証されるようになりました。これにより、かねてからやりたかったプロジェクトを始めることがついに可能になります！では、どのフレームワークを使用すべきでしょうか？
以下に、私たちが適切と考える選択肢をリストアップしました。
目次
5 - Unity 3D
Unreal Engineと並んで最も人気のある3D開発プラットフォームで、HTML5をターゲットプラットフォームとしてサポートしています。そのため、理論的には WebXR開発に使用できます。ただし、デフォルトでサポートされていないため、De-PantherのWebXR Exporterのようなプラグインが必要です。
これは最適ではありませんが、将来的にUnity 3DにネイティブのWebXRサポートが追加される可能性があるため、その際には恩恵を受けることができます。それまでは、HTML5エクスポートに伴うパフォーマンス、読み込み時間、スマートフォンやOculus QuestのようなスタンドアロンヘッドセットにおけるモバイルGPUのサポートの欠如といった問題に対処する必要があります。しかし、Unityが持つアセットおよびプラグインエコシステムの恩恵を受け、アプリをネイティブアプリとして公開することも可能です！
4 - Babylon.js
“Playground"という機能により、このフレームワークはあらゆる3Dアプリケーションのプロトタイプを迅速に作成できます。すでにWebXRをサポートしており、さまざまなレンダリング例が豊富に揃っています。その柔軟性はJavaScriptライブラリであることに起因しています。低レベルに深く入り込むことが可能である一方で、アプリケーション全体をJavaScriptで作成する必要があります。経験豊富なコーダー向けのため、経験がある方やレンダリングを大幅にカスタマイズが必要な場合におすすめです。
3 - Three.js
おそらく最も人気のあるオープンソースJavaScriptレンダリングライブラリでしょう。再び完全な柔軟性を提供し、レンダリングを自由にカスタマイズできるようにしています。しかし、強力な機能には責任が伴います：あなたのアプリケーションがモバイルVRデバイス上でパフォーマンスを維持し、スムーズに動作する責任はあなただけにあります。
Three.jsはすでにWebXRに対応しています！広範なARサポートがWebXRに普及するまでは、AR.jsやmind-ar-jsをWebARで活用することができ、どちらもThree.jsと統合されています。
Three.jsエディタを使用すると、シーンを簡単に構築し、多くの異なるファイル形式からプロジェクトをすばやく開始できますが、その後のインタラクションコードの作成にはJavaScriptが必要です。エディタにはプロジェクトファイルの概念がないため、本当に初期コード生成のためだけに利用されます。
コーディング経験がない方には、A-Frameを検討することをお勧めします。これはThree.jsの上に構築されており、多くの機能をシンプルに使いこなせます。
2 - PlayCanvas
この開発プラットフォームは、完全なビジュアルエディタを提供し、ARとVRサポートを備えています。3Dグラフィックスレンダリングは正しく設定すると見事な美しさを誇ります。エディタとエクスポートされたゲームの読み込み速度も比較的良好です。
ビジュアルエディタを利用することで、シーンの構築、コンポーネントの追加、プロジェクトのデプロイが容易になります。内蔵されたコードエディタでカスタムスクリプトを書くことも可能ですが、自分の愛用のコードエディタ (Atom、Vim、Visual Studio Codeなど) で作業したい場合はスクリプト編集が多少難しくなるかもしれません。しかし、REST APIを利用することで対応可能です。
1 - A-Frame
WebVRおよびWebAR開発に便利な選択肢として、過去数年間A-Frameが一番の選択肢でした。Three.jsの上に構築され、多様な既存コンポーネントを再利用しながら低レベルのカスタマイズも可能です。
A-FrameはHTMLでシーンを設定し、そこから3Dシーン階層を生成します。また、カスタムJavaScriptコンポーネントを作成して動作やインタラクションを調整することができ、「A-Frame Inspector」を用いてシーンを簡単に編集し、HTMLから生成される内容を視覚化できます。A-Frameを基に開発された大規模なVRブラウザゲームには、Barista ExpressやMoonriderがあります。
Three.jsベースで動作しているため、WebXRもすでにサポートされています。WebARもまたAR.jsを通じてサポートされています。ただし、A-Frameは読み込み時間の最適化はユーザーに委ねています。シンプルなユースケースにはピッタリで、多くのことを実現することができます。
大規模なプロジェクトでは、A-Frameのパフォーマンス限界がスケールの壁となる可能性があります。
まとめ | TL;DR
フレームワークの選定は、用途に依存します。単純なシーンなら、A-Frameがおすすめです。高パフォーマンスが必要なら、Three.jsで直接最適化してください。コードが苦手なら、PlayCanvasを試してみてください。見た目重視のグラフィックスも簡単に実現可能です（ただし、Web上でのVRは見た目よりもパフォーマンスを優先してください）。
Wonderland Engine
まだ最適なツールが見つからないですか？私たちが開発しているものに興味を持つかもしれません。Wonderland Engineはオフラインツールであり、WebAssemblyベースのランタイムでロードされる効率的なバイナリシーンファイルを生成します。
最適化されたレンダリングのパフォーマンスを活用しつつ、JavaScript/TypeScript APIを用いてインタラクションコードを実装できます。VR、AR、オーディオなどを扱うための再利用可能なコンポーネントも多数用意されています。
はい、私たちはWebXRをサポートしており、エンジンは最初からそれを念頭に設計されています。
ダウンロードページからWonderland Engineをダウンロードし、こちらでアカウントを登録してください。