UnityでWebXRコンテンツをビルドする

はじめに

UnityでWebXRコンテンツを作成し、ブラウザから直接VR/AR体験を提供する方法を解説します。

デモURL：https://yushimatenjin.github.io/unity-webxr-sample/

作成環境

セットアップ手順

Step 1: プロジェクト作成

Unity Hubを起動し、新規プロジェクトを作成します。テンプレートは 3D (URP) を選択してください。

Step 2: WebXR Exportパッケージの導入

WebXR Exportパッケージのインストールには2つの方法があります。

方法A: OpenUPM経由（推奨）

1. Edit > Project Settings > Package Manager を開く
2. Scoped Registries に以下を追加：
   • Name: OpenUPM
   • URL: https://package.openupm.com
   • Scope: com.de-panther
3. Window > Package Manager を開く
4. My Registries から「WebXR Export」と「WebXR Interactions」をインストール

方法B: Git URL経由

Window > Package Manager > Add package from git URL で以下を順番にインストール：

https://github.com/nicovr/unity-webxr-export.git?path=/Packages/webxr
https://github.com/nicovr/unity-webxr-export.git?path=/Packages/webxr-interactions

Step 3: WebGLテンプレートのコピー

1. Window > WebXR > Copy WebGLTemplates を実行
2. Unityを再起動

WebGLテンプレートのコピーを忘れると、ビルド時にWebXR用のHTMLテンプレートが見つからずエラーになります。

Step 4: XR Plug-in Managementの設定

1. Edit > Project Settings > XR Plug-in Management を開く
2. WebGL タブを選択
3. WebXR Export にチェックを入れる

Step 5: シーンの設定

1. デフォルトの Main Camera を削除（または無効化）
2. Packages/WebXR Interactions から WebXRCameraSet.prefab をシーンにドラッグ
3. 必要なオブジェクト（Plane、Cubeなど）を追加

Step 6: ビルドと実行

1. File > Build Settings を開く
2. WebGL プラットフォームを選択し、Switch Platform
3. Player Settings > Resolution and Presentation で WebGL Template を WebXR2020 に設定
4. Build And Run を実行

テスト方法

PCでのテスト

1. Chrome または Edge をインストール
2. WebXR API Emulator 拡張機能をインストール
3. ビルドしたHTMLをローカルサーバーで開く
4. F12でDevToolsを開き、WebXR Emulatorタブで仮想デバイスを操作

スマートフォンARでのテスト

1. Android端末でChromeを開く
2. HTTPS経由でビルドURLにアクセス
3. 「START AR」ボタンをタップ

iOSのSafariはWebXRをサポートしていません。iOSでのテストにはApp Clipソリューション（EyeJackなど）が必要です。

VRヘッドセットでのテスト

1. Meta Quest Browserを開く
2. ビルドURLにアクセス
3. 「ENTER VR」ボタンをタップ

トラブルシューティング

関連リンク

• unity-webxr-export（GitHub）
• de-panther デモページ
• W3C WebXR Device API 仕様