---
title: "WebXRのデモ・サンプル集と対応ブラウザ一覧【2026年10月】｜試し方と使い方を実測で解説"
url: "https://www.issoh.co.jp/tech/details/7076/"
published: 2025-06-03
updated: 2026-10-18
categories: ["ブラウザ"]
publisher: "株式会社一創"
---

# WebXRのデモ・サンプル集と対応ブラウザ一覧【2026年10月】｜試し方と使い方を実測で解説

WebXRのデモは、対応するブラウザでURLを開くだけで動きます。ただし、VRに入れるのか、ARまで使えるのか、そもそもAPIが存在しないのかは端末次第です。本記事では、すぐ開ける公式サンプルと体験デモの現状、2026年10月時点のブラウザ・端末ごとの対応、HTTPSやユーザー操作といったセッション開始の条件をChrome 155で確かめた結果、最小コードとThree.jsでの書き方までを順に見ていきます。

## まとめ：WebXRのデモと対応ブラウザの要点

- 最初に開くのは公式の[WebXR Samples](https://immersive-web.github.io/webxr-samples/)です。23本の基本サンプルに加え、Layers・WebGPU・提案中機能のページがあります。
- VRとARの両方を試せるのはMeta Quest BrowserとAndroid XRのChromeです。Android版ChromeはARCore対応端末でAR、Apple Vision ProのSafariはVRだけで、ARは提供されていません。
- iPhone・iPad・MacのSafariとFirefoxには`navigator.xr`自体がありません。iPhoneでWeb上のARを見せたいなら`<model-viewer>`やAR Quick Lookを使います。
- セッションは「HTTPSまたはlocalhost」「クリックなどのユーザー操作の中」でしか始まりません。HMDが無ければImmersive Web Emulatorで試せますが、エミュレーターはこの条件を見逃すので、最後は実機で確認します。

## WebXRとは？VR・AR・MRの違いと仕様の現状

VR（仮想現実）はHMDで視界を仮想空間に置き換える体験、AR（拡張現実）は現実の映像に3Dを重ねる体験です。WebXR Device APIは、ヘッドマウントディスプレイ（HMD）やAR対応スマートフォンのセンサーと表示に、ブラウザのJavaScriptからアクセスするためのW3C仕様です。VR専用だった旧WebVRの後継で、VR（`immersive-vr`）とAR（`immersive-ar`）を同じAPIで扱います。パススルー映像の上に仮想物を置くMR（複合現実）も、API上は`immersive-ar`セッションとして実装されます。

仕様は[W3CのCandidate Recommendation Draft（2026年6月9日版）](https://www.w3.org/TR/webxr/)で、Immersive Web Working Groupが策定しています。ハンド入力・ヒットテスト・アンカー・深度は本体とは別の「モジュール」として仕様化されており、ブラウザごとの差はこの単位で生じます。ブラウザ間の互換性を揃える[Interop 2026の20の重点分野](https://webkit.org/blog/17818/announcing-interop-2026/)にもWebXRは入っていないため、差は当面、開発者側で吸収する前提です。

## すぐ試せるWebXRのデモ・サンプル集

APIの呼び方を確かめるなら公式サンプル、没入感を味わうなら体験デモ、自分で作るならフレームワークの例、HMDが無いならエミュレーターから入ります。

### 公式WebXR Samplesの23本と追加ページ

Immersive Web Working Groupの[webxr-samples](https://github.com/immersive-web/webxr-samples)は、APIの機能を1つずつ切り出した最小構成のサンプル集で、2026年9月にもWebGPU描画の修正が入るなど更新が続いています。トップページに並ぶ23本は次のカテゴリに分かれます。

| カテゴリ                | 主なサンプル                                                      | 試せる環境の目安                        |
| ------------------- | ----------------------------------------------------------- | ------------------------------- |
| Basics              | Immersive VR Session、Inline Session、Room Scale              | VRはHMD、ARはQuestかAndroid         |
| Input               | Input Tracking、Controller State、Hand Tracking               | コントローラーかハンド入力の端末                |
| Content             | 360 Stereo Photos、Stereo Video、Positional Audio             | VR対応の端末                         |
| Advanced Techniques | Spectator Mode、Teleportation                                | PC接続HMD、Quest                   |
| AR Basics           | Anchors、Hit Test、Hit Test with Anchors                      | Android版Chrome、Quest、Android XR |
| No Dependencies     | Barebones VR、Barebones AR                                   | ライブラリ無しの最小コードを読みたいとき            |
| Performance         | Framebuffer Scaling、Viewport Scaling、Reduced-Bind Rendering | 描画負荷の調整を見たいとき                   |

トップの23本とは別に、合成レイヤーを扱う「Layers Samples」、WebGLの代わりにWebGPUで描く「WebGPU Samples」、平面検出・メッシュ検出・スマホARの深度といった提案段階の機能を並べた「Proposals」があります。Meta Quest Browser 152.1（2026年10月2日更新）の[リリースノート](https://developers.meta.com/vr/downloads/package/browser/152.1/?view=full%5Fwidth)では、WebGPUの合成レイヤー対応はまだ実験機能で、`chrome://flags`の「webxr experiments」を有効にしないと動きません。

### Moon RiderとHello WebXR!の現状

体験デモの定番は、A-Frame製の音楽ゲーム[Moon Rider](https://moonrider.xyz/)です。2026年10月時点でも公開されており、[ソースコード](https://github.com/supermedium/moonrider)もGitHubで読めます。Apple Vision Proで試すなら、WebKitが公開している[Chess Garden](https://webkit.org/demos/webxr-chess/)が、visionOSのSafariで遊ぶことを想定したチェスのデモとして公開されています。

一方、Mozillaの「Hello WebXR!」は、以前の公式URL（mixedreality.mozilla.org/hello-webxr）を開くとMozilla Hubsのサポート終了ページへ転送されるようになっており、[GitHubのリポジトリ](https://github.com/MozillaReality/hello-webxr)もアーカイブ（読み取り専用）になっています。古い紹介記事のリンクからは体験できません。

### Three.js・A-Frame・Babylon.jsのWebXRサンプル

自分で作る段階では、フレームワークの公式例をコピー元にするのが早道です。[Three.jsの公式examples](https://threejs.org/examples/)には、2026年10月時点で`webxr_`で始まる例が27本あります（npmの最新は2026年9月24日公開の0.186.1）。内訳はARが5本（`webxr_ar_hittest`、`webxr_ar_plane_detection`など）、VRが13本（`webxr_vr_handinput`、`webxr_vr_teleport`など）、VRとARの両対応が9本（`webxr_xr_paint`など）です。Three.js本体の導入手順は[Three.jsとは？r185の導入手順とglTF表示・バンドルサイズ実測まで解説](/tech/details/3051/)で扱っています。

HTMLのタグだけでシーンを組みたいなら[A-Frame](https://aframe.io/)（1.8.0、2026年6月24日公開）が近道です。使い方の詳細は[A-Frameとは？HTMLでWebVR/ARを作る使い方入門【v1.8・2026年】](/tech/details/3636/)で解説しました。TypeScriptで物理演算やGUIまで揃えたいならBabylon.js（9.31.0）の[Playground](https://playground.babylonjs.com/)がブラウザ上でそのまま動きます。Quest向けに作るなら、Metaの[Immersive Web SDK](https://developers.meta.com/vr/documentation/web/webxr-overview/)（npmの`@iwsdk/core`は2026年10月2日公開の1.0.1）も候補に入ります。描画の土台であるWebGLの仕組みは[WebGLとは？仕組み・対応ブラウザの確認・三角形を描くコードとUnityビルドまで解説](/tech/details/4884/)で扱っています。

### HMDなしで試すImmersive Web Emulatorと落とし穴

HMDが手元に無いときは、Metaの[Immersive Web Emulator](https://chromewebstore.google.com/detail/immersive-web-emulator/cgffilbpcibhmcfbgggfhfolhkfbhmik)（Chrome ウェブストアで2.0.0、2026年7月10日更新）をChromeかEdgeに入れると、デスクトップ上で仮想のQuestとしてデモを動かせます。拡張機能のGitHubリポジトリはアーカイブ（読み取り専用）されていますが、中身のエミュレーター本体は[IWER](https://github.com/meta-quest/immersive-web-emulation-runtime)（npmの`iwer` 2.6.0、2026年10月13日公開）として開発が続いています。

注意したいのは、エミュレーターで動くことが実機で動くことの保証にならない点です。IWER 2.6.0をMeta Quest 3の設定でページに組み込み、Chrome 155で確かめたところ、クリックを経ずに呼んだ`requestSession('immersive-vr')`もセッションとして通りました。IWERを入れていないChrome 155では後述のとおり`SecurityError`で拒否される呼び方で、仕様もユーザー操作の中での呼び出しを求めています。IWERを入れたままLAN内のIPアドレスをhttpで開いても、安全なコンテキストでないのにセッションが始まりました。ユーザーエージェントも「Quest 3」「OculusBrowser/33」を名乗る文字列に変わります。Metaの[WebXR概要ページ](https://developers.meta.com/vr/documentation/web/webxr-overview/)も「ユーザーエージェント文字列からWebXR対応を推測しない」よう求めています。対応の判定は`isSessionSupported()`で行い、入場ボタンの挙動は最後に実機で確かめるのが確実です。

## WebXRの対応ブラウザ・デバイス一覧【2026年10月】

2026年10月時点の対応を、MDNの互換性データ（[browser-compat-data](https://github.com/mdn/browser-compat-data/blob/main/api/XRSystem.json)）と各ベンダーの公式ドキュメントで整理すると次のとおりです。

| 環境                       | VR                 | AR  | 備考                          |
| ------------------------ | ------------------ | --- | --------------------------- |
| Meta Quest Browser       | 対応                 | 対応  | 最新は152.1（2026年10月2日）        |
| Android XR のChrome       | 対応                 | 対応  | Galaxy XRなど。ハンド入力が既定        |
| Android版Chrome           | –                  | 対応  | ARCore対応端末でAR               |
| Chrome・Edge（デスクトップ）      | WindowsのPC接続HMDで対応 | –   | Chrome 79から。macOS・Linuxは未対応 |
| Samsung Internet         | –                  | 対応  | ARCore対応端末でAR               |
| Apple Vision Pro のSafari | 対応                 | 未提供 | visionOS 2から。視線とピンチで操作      |
| iPhone・iPad・MacのSafari   | 非対応                | 非対応 | APIが存在しない                   |
| Firefox（全OS）             | 非対応                | 非対応 | 設定は残るが既定で無効                 |
| Android WebView          | 非対応                | 非対応 | アプリ内ブラウザは要注意                |
| Snap Spectacles          | –                  | 対応  | Browser Lens経由              |

表の「-」は、公式の対応表やドキュメントに記載が無いという意味です。開発と検証の基準機にはMeta Questを勧めます。AR・平面検出・アンカー・Layersまで公式ガイドがそろい、HMDが無くてもIWERでQuest 3を模して確かめられるからです。業務で配布するときに見落としやすいのはAndroid WebViewの行で、LINEなどのアプリ内ブラウザがAndroid WebViewで動いている場合、Android端末でもWebXRは使えません。共有リンクにはChromeで開くよう案内を添えます。デスクトップのChromeでVRが既定で有効なのはWindowsだけで、macOSとLinuxは安定版では対象外です。Valveの担当者は[Steam Frameのコミュニティ](https://steamcommunity.com/app/4165890/discussions/1/590690402783379841/)で2026年9月下旬に「WebXRは現時点でLinuxでは使えず、Steam Frameに限った話ではない」と回答しています。

### モジュール別の対応（ハンド・ヒットテスト・アンカー・深度）

「対応」の中身は端末で違います。各社が公式に対応を掲げているモジュールは次のとおりです。

| モジュール     | Quest Browser | Android XR Chrome | Vision Pro Safari | Spectacles |
| --------- | ------------- | ----------------- | ----------------- | ---------- |
| AR（パススルー） | 対応            | 対応                | 未提供               | 対応         |
| ハンド入力     | 対応            | 対応（既定の入力）         | 対応                | 対応         |
| ヒットテスト    | 対応            | 対応                | 既定で無効             | エミュレーション   |
| アンカー      | 対応            | 対応                | –                 | –          |
| 平面検出      | 対応            | –                 | –                 | –          |
| 深度センシング   | –             | 対応（ステレオ深度）        | –                 | –          |
| Layers    | 対応            | –                 | Safari 27で拡張      | –          |

「-」は公式ページに記載が無いもので、非対応と断定するものではありません。Questの欄は[Metaの複合現実ガイド](https://developers.meta.com/vr/documentation/web/webxr-mixed-reality/)とハンド・Layersの各ガイド（ヒットテストはMDNの互換性データ）、Android XRの欄は[Android Developersの対応一覧](https://developer.android.com/develop/xr/web)、Spectaclesの欄は[Snapの開発者ドキュメント](https://developers.snap.com/spectacles/about-spectacles-features/webxr)によります。Android XRの深度は左右2枚の深度マップを流すステレオ方式で、スマホ向けに書いた深度処理はそのままでは合わない、とGoogle自身が注意書きしています。

### Apple Vision ProはVRのみ・ARは未提供

Vision ProのSafariは、[Safari 18.0（visionOS 2）](https://webkit.org/blog/15865/webkit-features-in-safari-18-0/)で`immersive-vr`セッションに対応し、視線とピンチで操作する`transient-pointer`入力とハンドトラッキングも使えるようになりました。[Safari 27.0](https://webkit.org/blog/18325/webkit-features-for-safari-27-0/)ではWebXR Layersのテクスチャ配列プロジェクションレイヤーが加わっています。

ARは提供されていません。WebKitのソース（[UnifiedWebPreferences.yaml](https://github.com/WebKit/WebKit/blob/main/Source/WTF/Scripts/Preferences/UnifiedWebPreferences.yaml)）では、WebXR本体の設定が`status: stable`・既定で有効なのに対し、「WebXR Augmented Reality Module」は`status: testable`・既定値`false`、ヒットテストも同じく既定で無効です。ここで実装上の落とし穴が1つあります。visionOS 26では`isSessionSupported('immersive-ar')`がARに対応していないのに`true`を返す不具合が[WebKit Bug 305459](https://bugs.webkit.org/show%5Fbug.cgi?id=305459)として2026年1月14日に報告されました（修正済み）。Three.jsの`XRButton`はARを先に判定してからVRに落ちる作りなので、この不具合が残る端末ではARを選んでしまい、入場に失敗します。Vision Pro向けのページは`VRButton`でVRに固定するのが安全です。

### iPhone・Mac Safari・Firefoxが非対応な理由と代替

iPhone・iPad・MacのSafariは、設定で有効にできる隠し機能としてもWebXRを持っていません。WebKitのビルド設定（[PlatformEnableCocoa.h](https://github.com/WebKit/WebKit/blob/main/Source/WTF/wtf/PlatformEnableCocoa.h)）で、WebXRを組み込むフラグ`ENABLE_WEBXR`が立つのは`PLATFORM(VISION)`、つまりvisionOSのときだけです。実際、Playwright同梱のmacOS版WebKit 27.2で`'xr' in navigator`を調べると`false`でした。iPhoneでWeb上のARを見せたいときは、USDZを使うAR Quick Lookか、`<model-viewer>`のARモードに切り替えます。この方式の作り方は[ARコンテンツとは？業界別の事例と作り方｜Web-AR・マーカー・3Dスキャンの要件【2026年】](/column/details/2231/)で解説しています。

Firefoxは、ソースコードに`about:config`の`dom.vr.webxr.enabled`が[既定値falseのまま残っています](https://github.com/mozilla-firefox/firefox/blob/main/modules/libpref/init/StaticPrefList.yaml)が、MDNの互換性データでは非対応扱いで、Firefox 157でも`navigator.xr`は存在しませんでした。設定を書き換えて動かすのは公式サポートの外なので、Firefoxの利用者には「Chromeで開いてください」と案内します。

## WebXRの使い方｜最小コードによるセッション開始

### 対応確認からVRセッション開始までのコード

次のコードは`<script type="module">`で読み込む前提です。`local-floor`や`hand-tracking`のような追加機能は、セッションを作るときに要求しておかないと後から使えません。

```
const button = document.querySelector('#enter-vr');
const gl = document.querySelector('canvas').getContext('webgl2', { xrCompatible: true });

if (navigator.xr && await navigator.xr.isSessionSupported('immersive-vr')) {
  button.hidden = false;
}

button.addEventListener('click', async () => {
  // クリックの処理の中で呼ぶ。外で呼ぶと SecurityError になる
  const session = await navigator.xr.requestSession('immersive-vr', {
    optionalFeatures: ['local-floor', 'hand-tracking'],
  });
  session.updateRenderState({ baseLayer: new XRWebGLLayer(session, gl) });
  const refSpace = await session.requestReferenceSpace('local-floor')
    .catch(() => session.requestReferenceSpace('local'));

  const onFrame = (time, frame) => {
    const layer = session.renderState.baseLayer;
    const pose = frame.getViewerPose(refSpace);
    if (pose) {
      gl.bindFramebuffer(gl.FRAMEBUFFER, layer.framebuffer);
      for (const view of pose.views) {
        // view.eye は 'left' と 'right'。目ごとの領域に描く
        const vp = layer.getViewport(view);
        gl.viewport(vp.x, vp.y, vp.width, vp.height);
      }
    }
    session.requestAnimationFrame(onFrame);
  };
  session.requestAnimationFrame(onFrame);
});
```

IWERのQuest 3設定でこの流れを動かすと、`pose.views`には`left`と`right`の2つのビューが入り、`session.enabledFeatures`は`hand-tracking`・`local-floor`・`viewer`・`local`になりました。終えるときは`session.end()`を呼びます。

### セッションが始まらない条件をChrome 155で確かめた結果

HMDを接続していないmacOS上のGoogle Chrome 155.0.8059.82（ヘッドレス）で、上と同じ判定処理を条件を変えて走らせた結果です。

| 条件                      | 結果                                       |
| ----------------------- | ---------------------------------------- |
| http://localhost で開く    | `navigator.xr`あり。inlineはtrue、VR・ARはfalse |
| LAN内のIPアドレスをhttpで開く     | `navigator.xr`が存在しない                     |
| クリックの外でrequestSession   | SecurityError（user activationが必要）        |
| HMD未接続でVRを要求            | NotSupportedError（No XR hardware found）  |
| IWERを組み込んだ状態            | VR・ARともtrue。クリック外でも開始できた                 |
| IWERを組み込みLANのIPをhttpで開く | 安全なコンテキスト外でもVR・ARともtrue                  |

2行目が見落としやすい点です。`navigator.xr`はHTTPSかlocalhostの「安全なコンテキスト」でしか定義されないため、同じLANのQuestから`http://192.168.x.x`で開発サーバーを開くと、エラーではなく「WebXRが無い」状態になります。Three.jsの`VRButton`はこの状況を見分けて「WEBXR NEEDS HTTPS」と表示する作りです。実機で確かめるときは、開発サーバーをHTTPSで立てるか、QuestをUSBでつないでポートを転送しlocalhostとして開きます。

### ARモードとヒットテストによる現実空間への配置

ARは`requestSession('immersive-ar')`で始め、背景を透明のまま描画するとカメラ映像やパススルーの上に3Dが重なります。床や机に物を置くにはヒットテストモジュールを使い、`requiredFeatures: ['hit-test']`を付けてセッションを作り、`session.requestHitTestSource()`で得た交点に配置します。MDNの互換性データでは、ヒットテスト（`requestHitTestSource()`）はChrome 81以降と、それを引き継ぐAndroid版Chrome・Edge・Opera・Meta Quest Browser、Samsung Internet 12.1以降が対応です。ARとして実際に使えるのは、ARCore対応のAndroid端末とQuestです。Questでは、平面検出（`plane-detection`）で得た面を当たり判定に使う方法もMetaのガイドで案内されています。

### Three.jsのVRButton・ARButton・XRButton

入場ボタンとセッション管理を自前で書かずに済ませるなら、Three.jsのヘルパーを使います。r186でのimport先は`three/addons/webxr/VRButton.js`です。

```
import * as THREE from 'three';
import { VRButton } from 'three/addons/webxr/VRButton.js';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(70, innerWidth / innerHeight, 0.01, 50);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(innerWidth, innerHeight);
renderer.xr.enabled = true;
document.body.appendChild(renderer.domElement);

// 既定で要求するのは local-floor・bounded-floor・layers。手の追跡は追加で指定する
document.body.appendChild(VRButton.createButton(renderer, { optionalFeatures: ['hand-tracking'] }));

renderer.setAnimationLoop(() => renderer.render(scene, camera));
```

ARには`ARButton`を使い、終了ボタン用の`dom-overlay`は既定で要求されます（自前のHTMLを重ねるときは`domOverlay: { root }`と`optionalFeatures: ['dom-overlay']`を自分で渡す）。VRとARの両対応なら`XRButton`です。`XRButton`は`immersive-ar`を先に判定し、使えなければ`immersive-vr`に切り替える作りです。前述のVision Proの不具合があるので、対象にVision Proが含まれるなら`VRButton`を選びます。

## WebXRを採用すべき場面・避けるべき場面

WebXRの強みは、URLを送るだけで体験に入れることです。展示会の案内、EC商品の実寸プレビュー、研修教材のように、インストールを挟むと離脱が増える短い体験なら採用する価値があります。

採用すべきでないのは次の条件が1つでもある案件です。iPhoneのSafari利用者が主な対象である（APIが無い）、Vision ProでARが必須である（未提供）、LINEなどのアプリ内ブラウザから開かせる導線しか無い（Android WebViewは非対応）、MacやLinux機、Steam Frameでの動作が前提である（デスクトップChromeのVRはWindowsのみ）、ネイティブアプリ並みの描画負荷や端末制御が要る。これらに当たる場合の選択肢は、`<model-viewer>`によるAR表示かネイティブアプリです。WebXRと既存Webシステムの組み合わせを含めて開発を外部に頼むなら、[業務用・Webアプリ開発](/service/apps/business/)の支援も用意しています。実機の選定には[Meta Quest 3とは？何ができるか・スペック・価格と3Sとの違い【2026年9月時点】](/tech/details/10023/)を参照してください。

## WebXRのデモ・対応ブラウザに関するよくある質問

### WebXRのデモはどの端末で試せますか？

VRとARの両方を試せるのはMeta QuestとAndroid XR端末（Galaxy XRなど）で、Android版ChromeはAR、Apple Vision ProのSafariはVRだけです。HMDが無ければ、ChromeかEdgeにImmersive Web Emulatorを入れて確認できます。

### iPhoneのSafariでWebXRは使えますか？

使えません。iPhone・iPad・MacのSafariにはWebXRのAPIが組み込まれていません。iPhoneでWeb上のARを見せたい場合は、USDZファイルを使うAR Quick Lookか、`<model-viewer>`のARモードを使います。

### FirefoxでWebXRは使えますか？

使えません。`about:config`に`dom.vr.webxr.enabled`という設定は残っていますが既定で無効で、MDNの互換性データでも非対応です。WebXRのデモはChrome、Edge、Meta Quest Browserで開きます。

### デモが「セッションを開始できない」ときは何を確認すべきですか？

まずURLがHTTPSかlocalhostかを確かめます。LAN内のIPアドレスにhttpでアクセスすると`navigator.xr`自体が無くなります。次に、`requestSession()`がボタンのクリックの中で呼ばれているかの確認です。最後に`isSessionSupported()`で、要求したモード（VRかARか）にその端末が対応しているかを調べます。

### WebXRの学習に最短のフレームワークはどれですか？

書く量が最も少なく済むのは、HTMLのタグだけでシーンを書けるA-Frameです。JavaScriptで細かく制御したいならThree.jsの`VRButton`から始めます。

## 関連記事

- [Three.jsとは？r185の導入手順とglTF表示・バンドルサイズ実測まで解説](/tech/details/3051/)
- [A-Frameとは？HTMLでWebVR/ARを作る使い方入門【v1.8・2026年】](/tech/details/3636/)
- [WebGLとは？仕組み・対応ブラウザの確認・三角形を描くコードとUnityビルドまで解説](/tech/details/4884/)
- [Meta Quest 3とは？何ができるか・スペック・価格と3Sとの違い【2026年9月時点】](/tech/details/10023/)
- [ARコンテンツとは？業界別の事例と作り方｜Web-AR・マーカー・3Dスキャンの要件【2026年】](/column/details/2231/)

---

出典: [WebXRのデモ・サンプル集と対応ブラウザ一覧【2026年10月】｜試し方と使い方を実測で解説](<https://www.issoh.co.jp/tech/details/7076/>)（株式会社一創）