[Babylon.js #04] HTTPS設定からQuest2でのWebXR没入体験まで

はじめに

Three.jsでも実装した WebXR(VR)の実装をBabylon.js でもやってみたので、備忘録メモです。

残念ながらWebGPUにMetaQuest2は対応してないようです。

ただ、Qiitaをみると実装してる人もいる？

Babylon.js で VR 体験を開発する際、Quest2 や他デバイスからアクセスするためには HTTPS (セキュアコンテキスト) の設定が必須です。

この記事では：

  1. Vite + mkcert による開発環境での HTTPS
  2. Babylon.js での WebXR 初期化（VR）
  3. Quest2 ブラウザからの実行と動作確認

までのステップをまとめて解説。

前回の記事：

動画（VR）：

なぜ HTTPS が必須なのか?

WebXR API（VR/AR をブラウザで扱う API）は セキュリティ制約がある機能 です。

そのため：

✔ HTTPS (Secure Context) ✔ WebXR 対応ブラウザ ✔ 証明書の信頼

を満たさないと VR モードに入れません。

1. Vite で HTTPS を有効化

まず Vite の開発サーバーを HTTPS にします。

import { defineConfig } from "vite";
import mkcert from "vite-plugin-mkcert";

export default defineConfig({
  server: {
    https: true,
    host: true,
  },
  plugins: [
    mkcert(),
  ],
});

この設定だけで？

はい。 vite-plugin-mkcert がローカル証明書を自動生成し、OS の信頼ストアに登録します。

その結果：

🔒 ブラウザで警告なしの HTTPS ➡ location.protocol === 'https:' ➡ Quest2 ブラウザでも Secure Context

が得られます。

確認ポイント

ブラウザでアクセスしたとき：

✔ 鍵アイコンが表示される ✔ 「接続は保護されています」 ✔ 証明書は有効

となっていれば HTTPS が正しく機能しています。

2. Babylon.js で最低限の VR シーン

次に最小限の VR 対応コードを記述します。

async function createMinimalVR() {
  const canvas = document.getElementById("renderCanvas") as HTMLCanvasElement;
  if (!canvas) return;

  const engine = new Engine(canvas, true);
  const scene = new Scene(engine);

  new HemisphericLight("light", new Vector3(0, 1, 0), scene);

  const ground = MeshBuilder.CreateGround("ground", { width: 10, height: 10 }, scene);
  const box = MeshBuilder.CreateBox("box", { size: 1 }, scene);
  box.position.y = 0.5;

  await scene.createDefaultXRExperienceAsync({
    floorMeshes: [ground],
  });

  engine.runRenderLoop(() => scene.render());
}

createMinimalVR();

✔ 座標・ライト・メッシュ ✔ WebXR 初期化 ✔ レンダリングループ

と最小構成で VR 表示できます。

3. Quest2 で VR 表示

HTTPS 環境下で次の URL にアクセス：

https://<PC の LAN IP>:5173/

Quest2 の標準ブラウザ（Oculus Browser）は WebXR 対応のため、VR アイコンが表示されます。

✔ VR アイコンが表示 ✔ VR モードに入れる ✔ コントローラー操作も可能

注意点

Quest2 のみ動く理由

Quest2 の標準ブラウザでは WebXR API が正式対応しています。 PC 側のブラウザ（例: Chrome + Link）は WebXR の immersive-vr を返さないため、

➡ VR アイコンすら表示されない

ということがあります。 これは仕様です。

よくあるトラブル

WebGPU 固有 API を使っている

WebGPU （WebGPUEngine）は Quest2 では未対応です。

そのため VR では WebGL（Engine） を使う必要があります。

Ground の順番

WebXR の floorMeshes には 必ずメッシュ作成後のオブジェクトを渡すこと 例）ground を先に作成 → その後 XR 初期化

まとめ

ステップ 必須条件
HTTPS yes
証明書信頼 yes
WebXR 対応ブラウザ yes
Babylon WebXR 初期化 yes

これらを満たせば Babylon.js で簡単 VR 体験構築 が可能です。

更に実装するなら…

  • XR コントローラーの導入
  • Teleportation 実装
  • モデルのインポート（glTF / glb）