トップ5 WebXRフレームワーク - 比較
WebXR開発を始めたいですか？ここでは、始めるためのトップ5のフレームワークを比較します。
2019年12月13日、Chrome 79はWebXR 1.0がデフォルトで有効になった最初のブラウザとしてリリースされました。これにより、WebXRにおける最大の障害の一つである安定性の問題が解決されました。それ以前は、WebXR / WebVR / WebARプロジェクトを維持するのが非常に難しく、それに基づいたブラウザAPIがまだ変動していたためです。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エクスポートに関するその他の問題、つまりパフォーマンス、読み込み時間、およびスマートフォンやオキュラスクエストなどのスタンドアロンヘッドセットのようなモバイルGPUのサポートがないことを処理する必要があります。ただし、Unityのアセットとプラグインエコシステムからの恩恵を受けることができ、アプリをネイティブアプリとして公開することも可能です！
4 - Babylon.js
“Playground"を使用すると、このフレームワークはあらゆる3Dアプリケーションのプロトタイプを迅速に作成できます。すでにWebXRをサポートしており、ほぼすべてをレンダリングするための膨大な例があります。その柔軟性はJavaScriptライブラリであることに起因しています。非常に低レベルに掘り下げることを許可しますが、アプリケーション全体をJavaScriptで書く必要があります。より経験豊富なコーダー向けにターゲットされているので、写真経験がある場合、またはレンダリングを大幅にカスタマイズする必要がある場合は、このフレームワークを選択することをお勧めします。
3 - Three.js
おそらく最も人気のあるオープンソースのJavaScriptレンダリングライブラリです。低レベルでのコンプリートな柔軟性が再び利用でき、レンダリングを自由にカスタマイズして何でも実行できるようになっています。しかし「大きな力を持つことには大きな責任が伴う」とはいえ、そのアプリケーションがパフォーマンス志向に保たれ、モバイルVRデバイス上でもスムーズに動作するよう維持する責任はあなただけです。
Three.jsはすでにWebXRをサポートしています！広範なARサポートがWebXRに搭載されるまで、WebARサポートとしてAR.jsまたはmind-ar-jsを検討する必要があるでしょう。どちらも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は理想的でかなりの距離まで達成可能です。
ただし、大規模なプロジェクトの場合、A-Frameのパフォーマンス限界によって制限される可能性がある範囲の限界に達するかもしれません。
まとめ | TL;DR
フレームワークの選択はユースケースによって異なります。単純なシーンの場合、A-Frameをお勧めします。より高いパフォーマンスが必要な場合、フードを開けてThree.js上で直接最適化してください。コーディングが苦手な場合は、PlayCanvasを試してみてください。それは非常に良いグラフィックスを得るための最も簡単な方法のようにも見えます（しかし、ウェブ上のVRでは性能をルックスに優先させてください）。
Wonderland Engine
まだ適切なツールが見つからないですか？私たちが開発しているものに興味があるかもしれません。Wonderland Engineは、WebAssemblyベースのランタイムとともにロードされる効率的なバイナリーシーンファイルを生成するオフラインツールです。
私たちの最適化されたレンダリングのパフォーマンスの恩恵を受けながら、JavaScript/TypeScript APIを使用してインタラクションコードを実装できます。VR、AR、オーディオなどを処理するために、再利用可能なコンポーネントが多数用意されています。
そうです、私たちはWebXRをサポートしており、エンジンは最初からそれを念頭に設計されました。
ダウンロードページからWonderland Engineをダウンロードし、アカウントを登録してください。