現在XR (VR/AR/MR) テクノロジは非常に発達しており、人気があり、特に追加のハードウェアやアプリインストールを必要としません。Web 開発者は 一般的な Web ブラウザーを介してWebXR のアイデアを簡単に構築して公開し、Web サイトのように共有できます。
2016年にChromeとFirefoxでWeb VRがサポートされ（WebVR 1.0）、2020年11にChrome for AndroidでAR（仮想現実）が利用可能になって以来、多くのWebXRフレームワーク、API、ライブラリなどが世界中に登場していました。こ
WebXR とは？
WebXR または WebXR Device API は、HTC Vive、Oculus Rift、Oculus Quest、Google Cardboard、HoloLens、Magic Leap などのバーチャル・リアリティおよび拡張現実デバイスからのアクセスを可能にする Web アプリケーションプログラミングインターフェイス (API)またはWeb ブラウザーでのオープン ソース仮想現実 (OSVR)の事です。
WebXRの歴史
WebVR API は、2014 年初頭に Mozilla の Vladimir Vukićevićs氏によって最初に考案されました。 API への貢献者には、Brandon Jones 氏(Google)、Boris Smus氏、および Mozilla チームの他のメンバーが含まれます。 2016 年3月1日、Mozilla VR チームと Google Chrome チームは、WebVR API 提案のバージョン 1.0 のリリースを発表しました。その後のAPI再構築により、WebVR はさらに改善されました。
Chrome 79 (2019 年12月13日にリリース) は、WebVR 1.0 API がデフォルトで有効になっている最初のブラウザーです。これは、WebXR が直面している最初のステップである安定性が最終的に解決されたことを意味します。以前は、WebXR/WebVR/WebAR プロジェクトを維持するのは非常に困難でした。これは、そのベースとなったブラウザー API がまだ実験的なものだったためです。
WebVR 1.0 はすぐに WebVR 1.1 に置き換えられました。これはバージョン的はちょっとの変化にすぎませんが、実際はWebVR 1.0 で書かれているプリケーションを壊すほどの変更が加えられました。
Chrome 81 (2020 年 11 月)は正式に拡張現実 (AR) のサポートが追加され、WebVR は WebXR に変更されました。その後コントローラーの強化された使用法をVRに拡張する GamePad API の更新が追加されました。
Firefox Reality、Oculus Browser、Edge、Magic Leap の Helio ブラウザなど、他のブラウザもこWebVRにサポートしました。
そのため、WebXR は次のブラウザー リリースでサポートされるようになりました。
- Microsoft Edge のバージョン
- クローム 79+
- Android 98 以降の Chrome
- オペラ 66+
- Opera モバイル 64+
- Samsung Internet 12+ Oculus.
いくつか人気あるWebXRフレームワーク
フレームワークのリストと、WebXR コンテンツを作成するために必要なすべてのものを次に示します。これらのフレームワークに関する詳細情報を継続的に更新したいとおもいます。
| Name | Type | Built On | Notes |
|---|---|---|---|
| 8th Wall | Cloud Platform | WebGL | AR-focused |
| A-Frame | Framework | three.js | -- |
| AR.js | Library | WebGL | AR-focused |
| ATON | Framework | three.js | -- |
| babylon.js | Engine | WebGL | -- |
| echo3D | Cloud Platform | model-viewer/A-Frame/ar.js | model-viewer used for "See on floor", A-Frame+AR.js used in marker tracking, A-Frame+jeelizFaceFilter used in face tracking |
| Ethereal Engine | Engine | three.js | -- |
| FRAME | Cloud Platform | babylon.js | Geared towards conferencing and galleries |
| Godot | Engine | WebGL | Requires additional setup to export |
| Hubs | Cloud Platform | A-Frame | Geared towards conferencing and galleries |
| JanusWeb | Framework | Elation Engine | -- |
| Immersions | Library | babylon.js | -- |
| LÖVR | Framework | WebGL | Requires additional compilation step (see WebXR section) |
| model-viewer | Library | WebGL | Limited interactivity |
| nunuStudio | Engine | three.js | Both web and native engine versions available |
| p5.xr | Library | p5.js | -- |
| Playcanvas | Engine | WebGL | Web-only editor |
| React XR | Library | three.js | -- |
| Rhodonite | Library | WebGL | -- |
| Rogue Engine | Engine | three.js | -- |
| spacesvr | Framework | three.js/React XR | -- |
| Spoke | Scene Editor | three.js | Used to author Hubs scenes |
| three.js | Library | WebGL | -- |
| threlte | Library | three.js | Renderer for Svelte |
| Unity | Engine | WebGL | Requires external exporter |
| Verge3D | Toolkit | three.js | Includes visual programming interface |
| Virtual Maker | Cloud Platform | babylon.js | Web-only editor |
| VRIA | Framework | A-Frame | Focused on data visualization |
| VrLand | Cloud Platform | A-Frame | Geared towards conferencing, galleries, and web3 |
| vtk.js | Library | WebGL | Focused on data visualization |
| Wonderland Engine | Engine | WebGL | -- |
| WorldCore | Engine | three.js | -- |
| Zea | Engine | WebGL | CAD-focused |
WebXR の課題と制限
Web プラットフォームでの XR アプリケーションの開発に、Windows またはモバイル (Native) アプリケーションと比較して多くの大きな違いがあります。
Load Time（ロードタイム）
通常、XR アプリケーションには、インストールにパッケージ化されたほとんどのリソースが含まれています。ユーザーは、アプリ立ち上がり後にダウンロードがロードされるのを待つ必要はほとんどありません。ウェブサイトの読み込みに長時間待たなければならない場合、ユーザーはイライラします。これは、焦りのために顧客を離れたくない場合に考慮しなければならない大きな課題です。
解決：
WebXR サイトのゲーム コンテンツを可能な限り小さく最適化すること、圧縮を使用すること、および一般的に高速な読み込み時間を確保することが、ユーザーを満足させるための鍵となります。実行中に最初は必要としない他のコンテンツに遅延読み込みを適用します。
多くの場合、テキストベースの形式では解析時間が長くなるため、代わりにバイナリコンテンツ形式の使用を検討してください。画像の場合、WebP や Basis Universal などの形式は、従来の PNG や JPEG 画像と比較して、CPU と GPU のファイルのサイズを改善できます。
パフォーマンス
Web サイトは、デバイスの安全性を確保するためにブラウザー サンドボックスで実行されます。これは、メモリ、CPU、GPU、およびブラウザーからの API サポートが制限されるため、パフォーマンス上の大きな課題でもあります。これがネイティブアプリとの大きな違いです。
解決：
範囲内でパフォーマンスと最適化を確認してください。コンテンツをコンパクトに保ち、ユーザーからの距離に基づいて重要なコンテンツへの「支出」に対処します。
OCULUS_multiview2 などの特別なブラウザー拡張機能を使用すると、GPU レンダリングのパフォーマンスを向上させることができます。その他、今後の WEBGL_multi_draw などは、CPU パフォーマンスの向上に役立ちます。
ほとんどのフレームワークには、パフォーマンス改善に関するドキュメントや最適化のヒントが関連付けられています。何かできることがないか、調べてみてください。
スケーラビリティ
VT アプリケーション (ネイティブ アプリケーション) では、通常、いくつかのデバイスのターゲットに非常に最適化されています。プラットフォーム (Android、iOS、Windows など) ごとに各ビルドを個別に調整することもできます。
ただし、WebXR アプリケーションをビルドすると、そのようにはいきません。ブラウザ自体にサービスを提供しているので、ブラウザを実行しているすべてのデバイスで WebXR アプリケーションを実行できます。つまり、すべてのスケーラビリティ、ユーザーがすべてのデバイスで抱える問題を考慮する必要があります。
VR デバイスをサポートしている場合は、単純な視線制御から、3-dof、6-dof、ハンド トラッキング、アイ トラッキングまで、さまざまな入力方法が付属していることを意味します。アプリケーションを実行できる最小公約数を決定する必要があります。
解決：
スケーラビリティを向上させるために、VR デバイスの種類に応じてコンテンツの読み込みを分割するか、ユーザーの操作に応じて徐々に読み込むことができます。
終わりに
ユーザーが Web プラットフォーム上で XR アプリケーションを作成できるようにするために作成された WebXR フレームワークまたはライブラリはたくさんあります。ただし、それらにはすべて長所と短所があり、使用する前に学習して検討する必要があります。 WebAR のみに焦点を当てているものもあれば、3D ディスプレイ (WebGL) 機能に焦点を当てているものもあれば、VR デバイス用に最適化されているものもあります。
VR/ARアプリの将来は全部Webになると思います。Webアプリには色々なメリットがあります。例えば申請などの時間やAppleのポリシー変更の心配もありません。不具合修正の反映は早い、開発工数も少ないなどがあげられます。したがってWebアプリはユーザーに届けやすいです。
業界内の一般的なコンセンサスは、XR の未来は Web 経由になるというものです。 これにはさまざまな理由があります。たとえば、5G の形でのより高速なインターネットの出現です。 より優れた携帯電話と AR 分野の発展により、XR の未来は確実に Web 経由になるでしょう。
上記の記事が、Web プラットフォームで XR アプリケーションを開発するためのメインの WebXR フレームワークを選択するのに役立つことを願っています。提案や関連する質問がある場合は、下のコメント セクションで遠慮なく送信してください。
■XR開発に特化したベトナムオフショア開発企業 ONETECH
ONETECHは、XRに特化した開発会社です。
VR/ARコンテンツ開発を始めさまざまなシステム開発、アプリ開発、ソフトウェア開発をベトナム オフショアで開発しています。ベトナムのXRトップ企業として紹介されています。
2015年の創業から上場企業からスタートアップ企業までお客様100社以上の300以上のプロジェクトに関わってきた豊富な開発実績があります。
ONETECHはUNITYでAR/VRアプリの開発
AR/VR/MR開発は２０１５年より取り組んでおります。UNITYの技術者育成に力を入れて取り組んでいます。
VR開発：ベトナムでのVR開発分野において最も開発実績のある企業の一つとなっています。
AR開発：ARkit、ARcoreなどを利用して多数のアプリ開発、Babylon.js、8thWallなどでのWebAR開発実績がございます。
UNITY開発：ONETECHはUNITYを利用し様々なVR開発、AR開発、アプリ開発をしています。HoloLens/Oculus/HTC VIVE/Pico/Nreal Lightなど最新のデバイスも取り揃えています。
ホロレンズ開発：ベトナムで最も多くのHoloLens開発実績のある企業の一社です。
WEBXR開発：WEBXRは、仮想現実（VR）、拡張現実（AR）および混合現実（MR）をWebブラウザで利用するための技術スタンダードです。ユーザーは、特別なアプリをダウンロードすることなく、多様なデバイスで豊かな3Dコンテンツを体験できます。
CG制作:製品やゲームのアセット、業務用の映像などの3DCGコンテンツの３DCG制作（モデリング・アニメーション・レンダリング）をエンジニアと連携しながらワンストップで受けることが可能です。
