WebXR Development
空間ウェブアプリの構成要素
XR/空間アプリケーションは通常、ウェブサーバーを通じて提供されるファイルの集合です。ウェブブラウザはこれらのファイルを解釈し、ウェブアプリを実行します。
一般的なファイル
知っておくべき最も重要なファイルとその拡張子は以下の通りです:
拡張子 | 説明 |
---|---|
index.html | 空間ウェブアプリのメインHTMLページです。 |
.js | JavaScriptのコードを含みます。 |
.ts | TypeScriptのコードを含み、公開前に.jsに変換されます。 |
.wasm | WebAssembly(C++やRustのような言語からコンパイルされます)。 |
.glb | テクスチャを埋め込むこともできる3Dモデルのファイル形式です。 |
.gltf | テキストベースの3Dモデルファイル形式です。 |
.bin | 通常、.gltfで参照されるバイナリの3Dモデルデータを含みます。 |
.obj | シンプルなテキストベースのモデルファイル形式です。 |
.mtl | 通常.objファイルによって参照されるマテリアルファイルです。 |
.json | アプリケーションで使用される任意のデータです。 |
.css | HTML要素の外観を調整するために使用される「カスケーディングスタイルシート」です。 |
さらに、空間ウェブアプリはオーディオファイル (.mp3, .wav, .ogg, …)、画像ファイル (.webp, .png, .jpg) 時にはビデオファイル (.webm, .mp4, .mov) も使用します。
3Dモデル
VRとARアプリは、完全に没入できる環境からシンプルな浮遊UIパネルまで、何でも可能です。多くの場合、少なくともいくつかの3Dモデル(アプリで使用する際に「アセット」とも呼ばれます)が必要になります。
プラットフォーム
多くの無料および有料のアセットは、Sketchfab、TurboSquid 、itch.io といったプラットフォームで見つけることができます。
無料で利用できる3Dモデルのソースには、Quaternius、Kenney.nl 、Poly Haven があります。
UnityやUnreal Engineのアセットパックを使用することもできます。
3Dスキャン
実際の物体の写真を3Dモデルに変換するプロセスを「フォトグラメトリー」または3Dスキャンと呼びます。
スマートフォン用のRealityScanなどのアプリやReality Captureのようなソフトウェアを使用して、現実のモデルを空間ウェブアプリに取り込むことができます。
作成
3Dモデルを手動で作成することは時間のかかる作業です。3DモデラーはBlenderやMayaのようなソフトウェアを使って、必要に応じたカスタム3Dモデルを制作します。
3Dモデリングが自分に向いていない場合は、ArtStationで3Dアーティストを雇うこともできます。
最適化
空間ウェブアプリのすべてのアセットはインターネットを介して送信されます。これにより読み込み時間に影響を与える可能性があるため、アセットを圧縮および最適化することが重要です。
コード
空間ウェブアプリのコードはTypeScript、JavaScript、C++、Rust、およびその他多くの言語で記述できます。JavaScriptは直接実行され、C++などの言語はWebAssemblyにコンパイルされます。
空間ウェブアプリのコードには多くの責任があります:
- レンダリング: スマートフォンやVRデバイスに映し出される画像の生成です。コンピュータグラフィックスはコンピュータサイエンスの複雑な分野です。これを管理するために、WebXR開発者はレンダリングフレームワークを使用し、一般的なタスクを管理します。
- アセットの読み込み: 必要に応じて3Dモデル、テクスチャ、オーディオ、ビデオ、およびその他のデータを読み込みます。フレームワークは異なる3Dファイル形式からデータを読み取る機能を提供し、ウェブではブラウザが画像およびオーディオファイル形式の読み込みを担当します。
- ユーザーインタラクション: ユーザー入力に対応し、フィードバックを提供し、ユーザーのアクションへの応答としてアクションを適用します。
- アプリロジック: アプリが実行する計算、処理、およびデータのやり取り、データベースのクエリからデータ生成まで。
Wonderland Engine のようなライブラリ、フレームワーク、および3Dエンジンは、 これらのタスクを支援し、空間ウェブ開発者がより効率的にアプリを構築できるように一般的に使用される機能を提供します。
ウェブサービス
アプリは、アカウント、個別情報の保存、大規模なデータベースのクエリ、メディアのストリーミングなどのために、オンラインサービスと連携することがあります。