トップ5 WebXRフレームワーク - 比較
WebXR開発を始めたいですか？ここでは、始めるためのトップ5のフレームワークを比較します。
APIの概要
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のバージョンでもアプリが問題なく動作することが期待できるようになりました。これによって、常にやりたかったプロジェクトをついに始めることができるでしょう！今日では、Apple Vision PROでもWebXRがサポートされており、クロスプラットフォームのXRアプリケーションを構築するための素晴らしい方法です。
しかし、どのフレームワークを使用すべきでしょうか？
以下は、私たちが適切と考える選択肢です:
目次
5 - Unity 3D
Unreal Engineと並び、おそらく最も人気のある3D開発プラットフォームで、HTML5をターゲットプラットフォームとしてサポートしているため、理論的にはWebXR開発に使用できます。しかし、WebXRはデフォルトでサポートされておらず、De-PantherのWebXR Exporterのようなプラグインが必要です。
これは最適ではありませんが、将来的にUnity 3DにWebXRサポートが追加される可能性があります。それまでは、HTML5エクスポートに関連する低性能、長いロード時間、スマートフォンやMeta 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をゼロから構築して他のフレームワークで見られる落とし穴を回避しつつ、WebXR向けに最高の3Dウェブフレームワークとゲームエンジンを目指しました。今日、最大のWebXRアプリケーション（The Escape Artist、Archery Evolutionなど）はすべてWonderland Engineを使用して構築されています。
Wonderland Engineはオフラインツールであり、WebAssemblyベースのランタイムで読み込まれる効率的なバイナリシーンファイルを生成します。
最適化されたレンダリング性能を活用しながら、JavaScript/TypeScript APIを使用してインタラクションコードを実装できます。VR、AR、オーディオなどを扱うための多くの再利用可能なコンポーネントも用意されています。
はい、私たちはWebXRをサポートしており、エンジンは最初からそれを念頭に設計されています。
ダウンロードページからWonderland Engineをダウンロードし、こちらで無料アカウントを登録してください。