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

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

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

• 最初に開くのは公式の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日版）で、Immersive Web Working Groupが策定しています。ハンド入力・ヒットテスト・アンカー・深度は本体とは別の「モジュール」として仕様化されており、ブラウザごとの差はこの単位で生じます。ブラウザ間の互換性を揃えるInterop 2026の20の重点分野にもWebXRは入っていないため、差は当面、開発者側で吸収する前提です。

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

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

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

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

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

Moon RiderとHello WebXR!の現状

体験デモの定番は、A-Frame製の音楽ゲームMoon Riderです。2026年10月時点でも公開されており、ソースコードもGitHubで読めます。Apple Vision Proで試すなら、WebKitが公開しているChess Gardenが、visionOSのSafariで遊ぶことを想定したチェスのデモとして公開されています。

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

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

自分で作る段階では、フレームワークの公式例をコピー元にするのが早道です。Three.jsの公式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表示・バンドルサイズ実測まで解説で扱っています。

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

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

HMDが手元に無いときは、MetaのImmersive Web Emulator（Chrome ウェブストアで2.0.0、2026年7月10日更新）をChromeかEdgeに入れると、デスクトップ上で仮想のQuestとしてデモを動かせます。拡張機能のGitHubリポジトリはアーカイブ（読み取り専用）されていますが、中身のエミュレーター本体はIWER（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概要ページも「ユーザーエージェント文字列からWebXR対応を推測しない」よう求めています。対応の判定はisSessionSupported()で行い、入場ボタンの挙動は最後に実機で確かめるのが確実です。

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

2026年10月時点の対応を、MDNの互換性データ（browser-compat-data）と各ベンダーの公式ドキュメントで整理すると次のとおりです。

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

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

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

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

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

Vision ProのSafariは、Safari 18.0（visionOS 2）でimmersive-vrセッションに対応し、視線とピンチで操作するtransient-pointer入力とハンドトラッキングも使えるようになりました。Safari 27.0ではWebXR Layersのテクスチャ配列プロジェクションレイヤーが加わっています。

ARは提供されていません。WebKitのソース（UnifiedWebPreferences.yaml）では、WebXR本体の設定がstatus: stable・既定で有効なのに対し、「WebXR Augmented Reality Module」はstatus: testable・既定値false、ヒットテストも同じく既定で無効です。ここで実装上の落とし穴が1つあります。visionOS 26ではisSessionSupported('immersive-ar')がARに対応していないのにtrueを返す不具合がWebKit Bug 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）で、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年】で解説しています。

Firefoxは、ソースコードにabout:configのdom.vr.webxr.enabledが既定値falseのまま残っていますが、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（ヘッドレス）で、上と同じ判定処理を条件を変えて走らせた結果です。

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アプリ開発の支援も用意しています。実機の選定にはMeta Quest 3とは？何ができるか・スペック・価格と3Sとの違い【2026年9月時点】を参照してください。

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表示・バンドルサイズ実測まで解説
• A-Frameとは？HTMLでWebVR/ARを作る使い方入門【v1.8・2026年】
• WebGLとは？仕組み・対応ブラウザの確認・三角形を描くコードとUnityビルドまで解説
• Meta Quest 3とは？何ができるか・スペック・価格と3Sとの違い【2026年9月時点】
• ARコンテンツとは？業界別の事例と作り方｜Web-AR・マーカー・3Dスキャンの要件【2026年】