WebXRで開発してみる　その１（サンプルの実行、Meta Quest 3S）

2025年6月23日 2025年6月23日

管理人

目次

はじめに

　今回はWebXRのサンプルを実行してみました。

　以前の記事でブラウザからVRコンテンツを起動できることを知り、どのように開発しているのかを調べているとWebXRを見つけました。

▼こちらの記事で、Meta Quest 3Sのブラウザから起動できるアプリを試していました。

　Meta Horizonの対応プラットフォームの中で紹介されていました。

▼UnityやUnreal Engineだけでなく、Webなどがあります。

https://developers.meta.com/horizon/develop

▼MetaのWeb関連のページはこちら

https://developers.meta.com/horizon/develop/web

　そもそもWebXRで何ができるのかを知るために、今回はまずサンプルを実行してみました。

▼以前の記事はこちら

開発者ツールをインストールする

Meta Quest Developer Hub

　開発者用のソフトウェアであるMeta Quest Developer Hubをインストールしておきました。

▼ダウンロードページはこちら

https://developers.meta.com/horizon/downloads/package/oculus-developer-hub-win

▼起動するとこんな感じ。Device Managerの画面です。

▼Performance Analyzerもあります。

　Code Samplesにはサンプルのリンクがありました。

▼Unityが圧倒的に多いという印象です。

　今回はMeta Quest Developer Hub自体は利用していません。この中にあるWeb関連のサンプルを後で実行します。

Immersive Web Emulator

　VRゴーグルが無くても、どのように動作するのかをブラウザで確認できるImmersive Web Emulatorがありました。

　Googleブラウザの拡張機能として追加できます。

▼こちらから追加できます。

https://chromewebstore.google.com/detail/immersive-web-emulator/cgffilbpcibhmcfbgggfhfolhkfbhmik

▼拡張機能として追加されました。

　サンプルを実行するときにこのツールを試してみました。

サンプルを実行してみる

WebXR First Steps

　Meta Quest Developer Hubで紹介されていた、WebXR First Stepsを試してみました。

▼GitHubのリポジトリはこちら

meta-quest/webxr-first-steps: Your first steps into immersive web development with WebXR.

　Node.jsで起動するようになっています。

▼Node.jsとNPMはインストール済みです。

　ダウンロードしたリポジトリのディレクトリで、以下のコマンドを実行しました。

npm install
npm run dev

　パッケージのインストールが行われ、サーバーが起動します。

▼8081ポートで問題なく起動しました。

　PC側のIPアドレスはipconfigで確認したところ、10.240.124.34でした。このIPアドレスに対して接続します。

▼以下のようなURLにVRゴーグルのブラウザからアクセスすると、画面が表示されます。IPアドレスは変更してください。

https://<IPアドレス>:8081

▼最初に接続するときは、セキュリティ保護の画面が表示されます。詳細を表示し、アクセスするという選択肢を選ぶと、アクセスできます。

▼ブラウザに画面が表示されました。

▼「VRをスタート」を選択すると、VR画面が起動しました。

▼周りを見渡したり、球を発射することができます。

▼ブラウザ上ではエラーが表示されていることがありました。buttons関連です。

　最近Unreal Engineのサンプルでビルドできなくて諦めていたので、ここまですんなり起動できたのに驚きました。

　PCのブラウザからアクセスし、Immersive Web Emulatorについて試してみました。

　F12キーで開発者モードを起動し、WebXRのタブに移動すると操作画面が表示されました。

▼VRゴーグルやコントローラが表示されています。

　ENTER VRをクリックしてVRモードを開始すると、コントローラを移動させたり、発射することができました。

▼これでPCでも簡易的な動作確認ができます。

▼Hands Modeもあるようです。

　手元にVRゴーグルがあるので、Immersive Web Emulatorを使う機会は少ないかなとは思います。

WebXR Showcases

Chars Etc

　WebXR Showcasesのリポジトリに4つのサンプルがありました。

▼GitHubのリポジトリはこちら

meta-quest/webxr-showcases: Collection of WebXR showcase experiences

　READMEのShowcaseのリンク先からも実行できるようでした。今回は先程と同様に、ローカルPCでサーバーを立てます。

　まずはchairs-etcを試してみます。現実空間にイスを配置できるサンプルです。

　GitHubのリポジトリをダウンロードして、そのディレクトリで以下のコマンドを実行しました。

npm install
cd chairs-etc
npm install
npm run serve

▼先程と同じく、8081ポートで起動していました。

　VRゴーグルでアクセスしてみました。

▼現実空間にイスを配置することができます。

　最初に空間のスキャンが行われて、どこに障害物があるのかをマップのように表示していました。LiDARのマップ生成のようなことができるのは面白いですね。

Real Measure

　距離を計測できるサンプルを試してみました。以下のコマンドでサーバーを起動しました。

cd ..
cd realmeasure
npm install
npm run serve

　VRゴーグルでアクセスしてみました。

▼コントローラの説明画面は変な感じでした。何枚か重ねられています。

▼空間上の2点の距離を測定できます。

▼30cmの定規と比較したのですが、ちゃんと測定できています。

　iPhonの計測アプリと似ていますね。

Sneaker Builder

　スニーカーの色を変更できるサンプルを試してみました。以下のコマンドを実行して、サーバーを起動しました。

cd ..
cd sneaker-builder
npm install
npm run serve

　VRゴーグルでアクセスしてみました。

▼スニーカーが現実空間に表示されています。

▼コントローラで選択し、色を変更することができます。

▼コントローラの先端はとがった形状で、選択するときは閉じます。

　コントローラのどこが操作の起点になるのかを分かりやすくすることは重要になりそうです。先程の定規のサンプルはなぜかコントローラの持ち手部分辺りで、若干操作しにくかったです。

　床付近に持って行くと、自動的に床に吸い付くように動きました。

▼自分の足の位置に合わせることもできます。時計とかのアクセサリーもこんな風に表示できそうですね。

　服の着せ替えとかになってくると、VRゴーグルには自分の姿が映っていないので鏡が必要になりそうです。

Flap Frenzy

　最後に、こちらはMRではなくVRのサンプルを試しました。羽ばたいて操作するゲームになっています。

　以下のコマンドを実行して、サーバーを起動しました。

cd ..
cd flap-frenzy
npm install
npm run serve

　VRゴーグルでアクセスしてみました。

▼コントローラが羽になっています。

▼3回はばたくとゲームが始まります。

　結構大きく腕を動かさないと、羽ばたいているという判定にならないです。傍から見たら腕をぶんぶん動かしている状態になります。

▼プレイ中の動画はこちら

▼途中でエラーが起きていることがありました。またbutton関連ですね。

最後に

　Unreal Engine用に用意されたMetaのサンプルに比べると、驚くほど簡単に環境構築ができて、サーバーとして起動することができました。実行環境がNode.jsですし、私にとってはWebXRで開発した方が楽なのかもしれません。

▼Node.jsはNode-REDのノードを開発するときなどに頻繁に使っています。

　MRもサンプルとしてちゃんと動作するコードがあるのは非常にありがたいです。コードをじっくり読みたいなと思っています。

カテゴリー: VR

タグ: Meta Quest 3S Node.js WebXR

コメントを残すコメントをキャンセル

VRゴーグルで遊んでみる　その2（Meta Quest 3S）New!!

2025年6月22日

PAGE TOP