Quest / PICO First

WebXRデモ一覧

VR/AR/MRをブラウザで試せるWebXRデモをまとめています。すべてのデモに「対応端末かどうかをImmersiveセッションに入る前に判定するパネル」があり、非対応の環境では理由が表示されて停止します。サイレントに失敗するデモはありません。

バッジの見方

動作確認済実機で動作確認済みLab実機検証用のLab(結果の記録が目的)プレビュー可非XR環境でもプレビュー可条件付き対応端末・条件が限定される要実機確認実機での確認待ち非対応その端末では非対応

Track 1

VR動作チェック

新しいMeta QuestやPICOで最初に回す基本チェック。VR入室 → 音・入力 → 描画fallback → 境界の順で、端末の素性を切り分けます。

🧪要実機確認
VR上級5

Body Tracking — WebXR proposal で全身スケルトンを扱う検証

起動可否・入力・終了導線をまず確認する

WebXR Body Tracking proposal の body-tracking feature descriptor と XRFrame.body / XRBody を前提に、全身スケルトン取得とアバター駆動の入口を確認する実験デモ。

端末別の対応

Meta Quest要実機確認PICO要実機確認Desktopプレビュー可
体験ガイドを見るデモを直接開く ↗
WebXR Body Tracking — 全身トラッキング関節を点と線で可視化Lab
WebXR Lab上級5

WebXR Body Tracking — 全身トラッキング関節を点と線で可視化

XRFrame.bodyの全身関節が取得できるかを見る

WebXR Body Tracking proposal の body-tracking feature を使い、XRFrame.body の関節姿勢を確認する実験。PICOなど対応ブラウザでの実機検証に使います。

端末別の対応

PICOLabその他XR要実機確認Desktopプレビュー可
体験ガイドを見るデモを直接開く ↗
WebXR Audio Space - 空間音響をブラウザで試す動作確認済
AUDIO中級5

WebXR Audio Space - 空間音響をブラウザで試す

VRに入って、頭を動かすと音の定位が変わるかを確かめる

WebXR と Web Audio API を組み合わせ、ヘッドセットやブラウザ上で音の位置・距離・向きによる聞こえ方を確認する空間音響デモ。

端末別の対応

Meta Quest動作確認済PICO要実機確認PCプレビュー可
体験ガイドを見るデモを直接開く ↗
WebXR Bounded Floor ビューア — プレイエリア境界(boundsGeometry)の可視化Lab
Quest MR中級4

WebXR Bounded Floor ビューア — プレイエリア境界(boundsGeometry)の可視化

プレイエリア境界(boundsGeometry)を床に描画して確認する

WebXR の bounded-floor / local-floor ReferenceSpaceType と boundsGeometry でプレイエリア境界を可視化し、Quest Browser 146 修正後の床基準とのずれを確認する実験。

端末別の対応

Meta QuestLabPICO要実機確認Desktopプレビュー可
体験ガイドを見るデモを直接開く ↗
WebGPU / WebGL fallback — 描画経路の切り替えを可視化する実験Lab
描画性能中級5

WebGPU / WebGL fallback — 描画経路の切り替えを可視化する実験

WebGPUが使えるか、WebGLに落ちるかを画面上で診断する

WebGPU が使えない端末やブラウザで、WebGL の描画経路へ fallback する判断を可視化するデモ。navigator.gpu と requestAdapter() で GPU adapter を取得し、feature detection で経路を選ぶ設計を確認できる。

端末別の対応

Meta QuestLabPICO要実機確認Desktop動作確認済
体験ガイドを見るデモを直接開く ↗
IWSDK VR Gallery — VR空間で記事カードを閲覧するデモ動作確認済
VR中級

IWSDK VR Gallery — VR空間で記事カードを閲覧するデモ

VR空間内で記事カードを選び、遷移なしで本文まで読む

Meta Immersive Web SDK(IWSDK)で構築したVR gallery。VR headset(Meta Quest / PC VR)のimmersive-vrセッション内で記事カードを選び、ブラウザ遷移なしで本文まで読めるサンプル。

端末別の対応

Meta Quest動作確認済PICO要実機確認デスクトッププレビュー可
体験ガイドを見るデモを直接開く ↗

Track 2

MR / AR Lab

パススルーAR、hit-test、depth、room meshなど端末依存が強い機能のLab。事前判定パネルで対応可否を確認してから入ります。

WebXR Hit Test Advanced - 現実空間への配置をブラウザで試す条件付き
AR中級5

WebXR Hit Test Advanced - 現実空間への配置をブラウザで試す

現実の床や机にreticleを吸着させ、オブジェクトを置く

WebXR Hit Test Module を使い、スマートフォンARやMeta Questのパススルー環境で、現実空間の床や面に3Dオブジェクトを配置する挙動を確認できるデモ。

端末別の対応

Meta Quest条件付きPICO要実機確認Android条件付き
体験ガイドを見るデモを直接開く ↗
WebXR Depth Occlusion デモ — Quest depth projection でMR合成を検証Lab
Quest MR中級4

WebXR Depth Occlusion デモ — Quest depth projection でMR合成を検証

現実物体と仮想物体の前後関係(depth)の差を見る

WebXR Depth Sensing Module と Quest Browser 146 の depth projection 実装で、仮想オブジェクトが現実の机や壁に隠れる MRオクルージョンを検証する実験。

端末別の対応

Meta QuestLabPICO非対応Desktopプレビュー可
体験ガイドを見るデモを直接開く ↗
HTML model 要素のプレビューと fallback — 空間表示へつなぐ実験プレビュー可
空間Web初級4

HTML model 要素のプレビューと fallback — 空間表示へつなぐ実験

3Dモデルのfallback(native / polyfill / 画像)を切り替えて見る

HTML の model 要素、fallback ライブラリ(polyfill)、image fallback を切り替えながら、Webページ内の3Dモデル表示を確認するデモ。Safari 27 beta の model 要素と Spatial Web を想定。

端末別の対応

Desktop動作確認済Meta Quest / PICOプレビュー可iOS / visionOSプレビュー可
体験ガイドを見るデモを直接開く ↗
WebXR Mesh Detection & GLB Export — Quest scene capture で部屋形状を書き出しLab
AR上級

WebXR Mesh Detection & GLB Export — Quest scene capture で部屋形状を書き出し

部屋のroom meshを取得してGLBに書き出す

Meta Quest 3 / 3S / Pro の room mesh を WebXR Mesh Detection(XRMeshDetection)で取得し、部屋の形状を GLB ファイルとしてその場でダウンロードできるデモ。IWSDK と Three.js GLTFExporter で実装。

端末別の対応

Meta Quest 3系LabPICO非対応Desktop非対応
体験ガイドを見るデモを直接開く ↗

Track 3

スマホWebAR

WebXRではなくカメラベースWebARの枠。iPhone / Androidのブラウザで動かします。

8th Wall Face Effects — face attachment でサングラスを重ねるAR動作確認済
AR初級

8th Wall Face Effects — face attachment でサングラスを重ねるAR

スマホのカメラで顔にサングラスを重ねる

8th Wall の Face Effects と face attachment で、カメラに映った顔の face mesh に3Dサングラスを追従させる WebAR デモ。8th Wall OSS とローカル版 xrextras で構成し、iPhone Safari や Android Chrome、PCでも動作します。

端末別の対応

iPhone動作確認済Android動作確認済Meta Quest / PICO非対応
体験ガイドを見るデモを直接開く ↗