トップ5のWebXRフレームワーク - 比較
WebXR開発を始めたいですか？ここでは、開発を始めるためのトップ5フレームワークを比較しています。
APIの概要
2019年12月13日に、Chrome 79がWebXR 1.0をデフォルトで有効にした初のブラウザとしてリリースされました。これにより、WebXRの最大の障害の1つである安定性の問題がついに解決されました。以前は、ブラウザ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開発プラットフォームの1つで、HTML5をターゲットプラットフォームとしてサポートしており、理論的にはWebXR開発に使用することができます。
しかし、WebXRはそのままではサポートされていません。プラグインとしてDe-PantherのWebXR Exporterが必要です。
これは最善策ではありませんが、Unity 3DがWebXRをサポートする場合には切り替えることができます。
それまでは、HTML5エクスポートにおける他の問題に対処する必要があります：低性能、長い読み込み時間、携帯用GPU（スマートフォンやMeta Questなどのスタンドアロンヘッドセットに搭載されているもの）への悪いサポート。
しかし、Unityのアセットやプラグインエコシステムの恩恵を受け、アプリをネイティブアプリとしても公開できます。（今日では、アプリストアでの可視性は、トップのゲームの短いリストに入っていない限り、ほとんどないため、この利点はかなり限定的なものとなります。）
4 - Babylon.js
このフレームワークは「Playground」を使用して、3Dアプリケーションを迅速にプロトタイプ化する方法を提供しています。既にWebXRをサポートしており、何でもレンダリングするための多くの例を持っています。これはJavaScriptライブラリであるため、柔軟性があり、非常に低レベルにまで踏み込むことができますが、アプリケーション全体をJavaScriptで書く必要があります。
経験豊富なコーダーをターゲットにしているため、経験がある場合、またはレンダリングを多くカスタマイズする必要がある場合にこのフレームワークを選ぶことをお勧めします。
3 - Three.js
おそらく最も人気のあるオープンソースのJavaScriptレンダリングライブラリです。再び、非常に低レベルでフルに柔軟性を持ち、レンダリングをカスタマイズして何でもできるようになっています。大きな責任も伴いますが：アプリケーションがパフォーマントでスムーズに動作するようにするのはあなたの責任です。特にモバイルVRデバイスでの動作に気を配る必要があります。
Three.jsは既にWebXRをサポートしています！WebXRでの広範なARサポートが得られるまでは、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から生成されるものを見ることができます。大規模なVRブラウザゲームには、Barista ExpressやMoonriderの開発がA-Frameを利用して行われています。
Three.jsの上で動作するため、既にWebXRをサポートしています。WebARは引き続きAR.jsを通じてサポートされます。A-Frameは読み込み時間のためのアセット最適化をあなたに任せています。ただし、簡単なユースケースにはA-Frameが最適で非常に遠くまで行けるでしょう。
しかし、より大きなプロジェクトでは、A-Frameの性能の限界に達する可能性があります。
まとめ | TL;DR
フレームワークの選択は使用目的に依存します。簡単なシーンの場合、A-Frameをお勧めします。性能を重視したくなった場合、フードを開けてThree.jsで直接最適化してください。コーディングが好きでない場合、PlayCanvasを試してみてください。非常に美しいグラフィックスを実現する最も簡単な方法であるように感じます。（しかし、Web上でのVRの場合、見た目よりも性能を優先してください。）
Wonderland Engine
まだ良い選択肢が見つかりませんか？私たちが開発しているものに興味を持つかもしれません。
私たちは、存在するすべてのフレームワークを見て、他のフレームワークに見られる問題点を避けるために、Wonderland Engineをゼロから構築しました。今日では、最大のWebXRアプリケーション（The Escape Artist、Archery Evolutionなど）すべてがWonderland Engineを使用して構築されています。
Wonderland Engineは、WebAssemblyベースのランタイムで読み込まれる効率的なバイナリシーンファイルを生成するオフラインツールです。
最適化されたレンダリングの性能を享受しながら、JavaScript/TypeScript APIでインタラクションコードを実装できます。VR、AR、オーディオなどを扱うために、多くの再利用可能なコンポーネントが用意されています。
そして、はい、私たちはWebXRをサポートしています。エンジンはそれのためにゼロから設計されました。
ダウンロードページからWonderland Engineをダウンロードし、ここで無料アカウントを登録してください。