HoverFit: WebXRでフィットネスをゲーミフィケーション
- パート1: 技術
The Fitness ResortがいかにしてWonderland Engineを利用し、UnityのWebパフォーマンスの限界を克服しつつHoverFitを作成したかを探ってみましょう。
Unity Webの技術的課題
WebXRアプリケーションは高性能なレンダリング、低レイテンシー、シームレスなインタラクティビティを要求しますが、既存のWebエンジンはこれらの優先順位で構築されていませんでした。
Unity Webのパフォーマンス
The Fitness ResortのチームがUnityのHTML5（Web）エクスポートでVRスキートレーナーの開発を始めた際、すぐに大きなパフォーマンスとワークフローのボトルネックに直面しました：
長いイテレーション時間 – ブラウザでテストするためには15分以上待つ必要があり、開発ワークフローは非常に非効率でした。Unity HTML5プラットフォームではプレビューがJavaScriptコードを実行できないからです。
遅いWebGLのパフォーマンス – 多くの手動による最適化を行ったとしても、Unity WebGLビルドは重要なゲーム機能を達成するのに十分なパフォーマンスを発揮できませんでした。低いパフォーマンスのため、VRでは視覚品質に大きな影響を与えるアンチエイリアシングを有効にすることができず、小さな頭の動きによるジグザグのラインが非常に目立つこととなり、Unityはスキー体験の最小限のプロトタイプを提供するための十分な処理能力を備えていませんでした。
限定されたシェーダーと照明能力 – 高品質なビジュアルにはリアルタイムの照明と複雑なシェーダーが必要でしたが、UnityのWebエクスポートでは効率的に処理できませんでした。
大きなファイルサイズと長いロード時間 – UnityのWebビルドは非常に大きなファイルサイズを生み出し、空のスタータープロジェクトでも25MB以上のダウンロードが必要でした。UnityはSteam、コンソール、またはApp Storeのようなネイティブプラットフォーム用に設計されており、ユーザーはインストール中にアプリを完全にプリロードすることに慣れています。しかしWebでは、ユーザーはアプリがオンデマンドでストリーミングされることを期待しています。
アイデアから現実へ：WebベースのVRフィットネスプラットフォームの構築
Hoverfit創設者Tim Dudgeon。
VRフィットネスは急速に進化していますが、完全にWebで動作するVRフィットネスプラットフォームを構築することは未開の領域でした。
2020年、The Fitness Resortの創設者Yin-Chien “Yinch” Yeapと元オリンピックスキーヤーのTim Dudgeonは、WebXRの可能性を探ることを決意しました。彼らのビジョンは野心的なものでした：Webブラウザで完全に動作するVRスキートレーナーを開発することです - ネイティブXRアプリケーションと同じパフォーマンスとビジュアルの忠実さを提供しながら。
Wonderland Engineを使用してSki Fit 365を成功裏に開発した後、彼らはスキーを超える可能性を見出しました。Timにとってこのビジョンは個人的なものでした - プロのアスリートとして、彼は従来のジムのワークアウトがどれほど退屈なものになるかを知っていました。彼らは次のレベルに進むことを決意し、次世代のWebXRフィットネスプラットフォームであるHoverFitを開発することにしました。マルチプレイヤーサポート、多様な仮想世界、統合された健康トラッキング機能を備えたHoverFitは、フィットネスをゲーム化し、人々が本当に楽しむ体験にワークアウトを変えます。
なぜWebなのか？自由、柔軟性、将来性。
Hoverfit創設者Yin-Chien “Yinch” Yeap。
私自身、大きなビジョンで開発をする開発者と考えています。この視点からすると、オープンスタンダードやオープンプラットフォームを持つWebが、XRという新しいエコシステムの真の成長を促すと強く信じています。
— Yin-Chien Yeap
最善のプラクティスがまだ形作られているようなXRの領域では、開発者は迅速にイテレーションを行い、制約なしに試行錯誤する自由が必要です。クローズドプラットフォームは高いコストと人工的な障壁を導入し、イノベーションを困難にします。WebはYinchと彼のチームがすぐにデプロイし、自由にアップデートし、クリエイティブな制御を完全に保つことを可能にしました - 大企業の承認プロセスに縛られることなく。
将来性も重要な要因でした。新しいVRハードウェアは絶えずリリースされます。ネイティブアプリケーションでは、新しいヘッドセットがリリースされるたびに、新しいSDKを統合し、互換性を維持する必要があります。それに対し、WebXRアプリケーションは、ブラウザをサポートする限り新しいデバイス上で利用可能です。
Android XRの例が良い例です。MetaとGoogleがAndroid XRのサポートを発表したとき、多くのネイティブ開発者は直ちに次の疑問に直面しました：
私たちのアプリをこの新しいエコシステムにどう移植するのか？
WebXR開発者にとって、その答えはより簡単でした：
ブラウザさえあればよい、準備完了です！
このような自由、柔軟性、将来性が、YinchとTimがネイティブなアプローチよりもWebXRを選んだ理由です。
パフォーマンスボトルネックの克服：UnityからWonderland Engineへの切り替え
Unityの開発者として、Yinchは自然とSki Fit 365にUnityを選びました。しかし、すぐに重大なパフォーマンスボトルネックに直面しました。UnityのWebエクスポートパイプラインは彼らのパフォーマンス要件を満たすのに苦労しました。徹底的な最適化を試みましたが、設計目標に到達する前に限界に達し、彼らは代替ソリューションを探す以外に選択肢がありませんでした。
ソリューションを探し、WebXRのDiscordサーバーで課題について話し合っている中で、Wonderland EngineのJonathan Haleが、まさにこれらの問題を解決するように設計されたWonderland Engineを試してみるよう提案しました。
当初、Yinchは二の足を踏みました - Unityは慣れ親しんでおり、エンジンを切り替えるということはゼロからやり直すことを意味しました。しかし、パフォーマンス問題が続く中で、Unityが彼らのニーズを満たすことができないことが明確になりました。
彼らは切り替えを決断しました。Wonderland EngineでSkiFit 365を再構築することで劇的なパフォーマンス向上が得られ、以前の技術的ボトルネックを克服する高品質なWebXR体験を提供することができました。
Web用に最適化された唯一の3Dエンジン。
Unityの他に、YinchはA-FrameとPlayCanvasも試してみました。PlayCanvasは特定のユースケースを考慮した堅実なWebGLフレームワークだと考えていますが、基本的にはWebGLエディターであり、WebXRファーストエンジンではないと見ています。この区別は、プロジェクトの要件を洗練していく中でますます重要になりました：
WebXRフレームワークはWebGLの上に構築されており、多くの場合、WebXRの機能はエンジンの優先事項ではなく後から追加されるものです。WebGLの最適化というよりも制約と見られがちです。Wonderland Engineは違います - ブラウザベースの3Dレンダリングのために一から構築されています。このアプローチにより、Wonderland Engineは高レンダリング需要の大規模3D WebおよびWebXRプロジェクトに真に最適化された唯一のゲームエンジンです。
迅速なイテレーション時間 – エンジンがブラウザに直接1秒以内にパッケージングされると、パッケージ化されたアプリケーションがプレビューになり、すべてのコードがブラウザ上で直接実行されます。これにより、パフォーマンス、ビジュアル、およびJavaScriptのランタイム差異が排除されます。
最適化されたWebGLパフォーマンス – Wonderland EngineのWebGLレンダラーは、Webのパフォーマンス特性に合わせて調整されています。数千の動的オブジェクトをシェーダータイプごとに1つのドローコールにまとめ、シーンごとにいくつかのドローコールで結果を生み出します。
動的ライティング – ラディカルなドローコール最適化により、Wonderland Engineはリアルタイムシャドウ付きの多くの動的ライトをWebXRでレンダリングすることができます。
高速な読み込み時間 – カスタム設計のバイナリファイル形式を使用しており、Web上でストリーム可能です。動画配信サービスでお気に入りの動画を視聴するために動画ライブラリ全体をプリロードしないのと似ています。 Wonderland Engineは、複雑なシーンでも数秒で読み込みます。JSONやXMLのようなテキスト形式を解析するのではなく、ファイルをWebAssemblyメモリに直接マッピングします。アニメーション、テクスチャ、メッシュなどのリソースは標準でWeb伝送のために圧縮されています。
Wonderland Engineは、HoverFitのすべての要件を満たすことができた唯一の開発ツールでした：
- Meta Questでのリアルタイムで100万以上のトライアングルをレンダリング
- 動的リアルタイムライティング
- Quest 2で少なくとも60 fps、Quest 3/Quest 3sで72 fps
- 高品質なシェーダー
- フルスキンおよびカスタマイズ可能なアバター
- マルチプレイヤーサポート
- ボイスチャット統合