WEBXRとは?現在最も人気のある WEBXR フレームワーク

現在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とは?
WEBXRとは?現在最も人気のある WEBXR フレームワーク

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フレームワーク

A-Frame - Web プラットフォームで XR をサポートするWebXR フレームワークである
A-Frame – Web プラットフォームで XR をサポートする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 Creation Tools (Frameworks) – Source

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アプリはユーザーに届けやすいです。

株式会社one technology japan
株式会社One Technology Japan | ベトナムオフショア開発 | 信頼第一のONETECH

業界内の一般的なコンセンサスは、XR の未来は Web 経由になるというものです。 これにはさまざまな理由があります。たとえば、5G の形でのより高速なインターネットの出現です。 より優れた携帯電話と AR 分野の発展により、XR の未来は確実に Web 経由になるでしょう。

上記の記事が、Web プラットフォームで XR アプリケーションを開発するためのメインの WebXR フレームワークを選択するのに役立つことを願っています。提案や関連する質問がある場合は、下のコメント セクションで遠慮なく送信してください。

無料相談・お問い合わせ
ご相談やお見積もりは全て 無料 で対応いたします。

    「個人情報保護方針」をお読みいただき同意いただける場合は「送信」ボタンを押して下さい。
    入力していただいたメールアドレス宛に自動返信メールを送信していますので、お手数ですがそちらをご確認ください。
    無料相談・お問い合わせ
    ご相談やお見積もりは全て 無料 で対応いたします。

      「個人情報保護方針」をお読みいただき同意いただける場合は「送信」ボタンを押して下さい。
      入力していただいたメールアドレス宛に自動返信メールを送信していますので、お手数ですがそちらをご確認ください。
      無料相談
      お問い合わせ