WebXRのデモ・サンプルで試すブラウザXR入門｜対応ブラウザ・使い方【2026年最新】

WebXRは、専用アプリを入れずにWebブラウザだけでVR・ARを動かすためのW3C標準APIです。「まず動くデモを見たい」「自分の端末で試せるのか知りたい」という要望が多いため、本記事はすぐ試せる公式サンプルと人気デモの紹介から始め、Chrome・Meta Quest・Apple Vision Pro・Safari・Firefoxの2026年時点の対応状況、navigator.xrやThree.jsでの最小実装、そして採用を避けるべき場面までを実装者向けにまとめます。

まとめ：WebXRのデモと対応状況の要点

• WebXRはブラウザでVR/ARを動かすW3C標準API。仕様は勧告候補（Candidate Recommendation）まで成熟している。
• すぐ試すなら公式サンプル集（immersive-web.github.io/webxr-samples）、音ゲーの「Moon Rider」、Mozillaの「Hello WebXR!」が定番。
• 2026年の対応：Chrome/Edge・Meta Quest Browser・Samsung Internetがフル対応、Apple Vision Pro（visionOS 2のSafari）はVRのみ既定有効、iOS/macOS SafariとFirefoxは非対応。
• 実装はnavigator.xrでセッションを開始し描画ループを回すのが基本。Three.jsのVRButton／ARButtonを使えば数行で入れる。

以降で、デモの入手先→対応環境→実装コード→採用判断の順に、判断に必要な事実を具体的に見ていきます。

WebXRとは？VR・AR・MRの違いとWebVRからの発展

WebXRは、ヘッドマウントディスプレイ（HMD）やAR対応スマートフォンを使った没入体験を、URLを開くだけでブラウザ上に表示する仕組みです。かつての「WebVR」を置き換える後継仕様で、VRだけでなくARやその中間の複合現実（MR）も同じAPIで扱えるように統合された点が最大の変化です。旧WebVRは廃止済みで、現在の実装はすべてWebXR Device APIに移行しています。標準化はW3CのImmersive Web Working Groupが担い、仕様は勧告候補まで到達しています。

WebXRが対象とするXR（クロスリアリティ）は、次の3つを包含する総称です。

• VR（仮想現実）：現実を遮断し、完全な仮想空間に没入する。immersive-vrモードが対応する。
• AR（拡張現実）：カメラ映像の上に3Dオブジェクトを重ねる。immersive-arモードが対応する。
• MR（複合現実）：現実と仮想を空間的に連携させる。Meta Questのパススルー表示などが該当する。

「vrとは」「webxrとは」といった定義の理解から入る読者が多い一方、検索の実需は「実際に動くものを触りたい」に寄っています。次章のデモから試すと、上記の違いが体感で掴めます。

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

WebXRのデモは、対応ブラウザ（後述）でURLを開くだけで動きます。学習目的なら、まず仕様策定チームが公開する公式サンプルで基本機能を確認し、次に完成度の高い体験デモとフレームワークの雛形へ進むのが最短です。

公式サンプルによる基本機能の確認

Immersive Web Working Groupの公式サンプル集（immersive-web.github.io/webxr-samples）は、immersive-vrセッション、AR、ハンドトラッキング、空間アンカーなど、APIの各機能を1つずつ切り出した最小デモが並びます。レンダリングの詳細より「WebXR APIをどう呼ぶか」に焦点を当てているため、自分の実装の参照実装として使えます。入口となるハブサイトはimmersiveweb.devで、デモへのリンクや学習リソースがまとまっています。実装リンク集としてはGitHubの「awesome-webxr」も網羅的です。

完成度の高い体験デモでの没入感チェック

APIの機能確認ではなく「WebXRの体験そのもの」を味わうなら、次の2本が定番です。Moon Rider（moonrider.xyz）は、A-Frameで作られたBeat Saber風の音楽ゲームで、Meta Questでもデスクトップブラウザでも起動でき、コードもオープンソースで公開されています。Hello WebXR!（Mozilla Mixed Realityチーム制作、mixedreality.mozilla.org/hello-webxr）は、WebXR正式仕様のリリースを記念して作られた複合体験デモで、絵画・音・パノラマなど複数のシーンを1つのページで巡れます。いずれもインストール不要で、HMDがなくてもブラウザで雰囲気を確認できます。

フレームワークのデモ・雛形を使ったコード学習

自分で作る段階に入ったら、フレームワークの公式デモをコピー元にするのが実務的です。Three.jsの公式サンプル（threejs.org/examples）にはwebxr_vr_sandboxやwebxr_ar_hittestなどのWebXR例があり、VRButton／ARButtonを使った入場ボタンの実装をそのまま流用できます。HTMLタグだけでVRシーンを組みたいならA-Frame（aframe.io）、TypeScriptで本格的な3Dを扱うならBabylon.jsのPlaygroundが向きます。描画の土台であるWebGLを直接触るより、これらの高レベルライブラリから入るほうが挫折しにくいです。

デモを開く前に必要な準備

デモが動かない原因の多くは環境側にあります。WebXRのセッション開始には、(1)WebXR対応ブラウザと端末、(2)HTTPS接続（localhostのみ例外）、(3)ボタンクリックなどのユーザー操作を起点にすること、の3点が必須です。これはセンサーやカメラへの不正アクセスを防ぐためのセキュリティ要件で、条件を満たさないとブラウザがセッション要求を拒否します。HMDを持っていない場合は、Chromeの拡張機能「WebXR API Emulator」でデスクトップ上に仮想デバイスを再現してデモを確認できます。

WebXRの対応ブラウザ・デバイス【2026年最新】

WebXRは標準化が進んだ一方で、対応状況はブラウザとデバイスで大きく分かれます。特にAR機能とApple製品の対応は誤解が多いため、2026年時点の実態を整理します。

結論として、開発・検証の第一候補はChrome系ブラウザとMeta Questです。最新機能を最も早く取り込むのはMeta Quest BrowserとChromeで、仕様策定から数か月で新モジュールが実装される傾向があります。

Meta QuestとApple Vision Proの対応差

Meta Questシリーズは、標準搭載のMeta BrowserがWebXRをフルにサポートし、6DoF（6自由度）のトラッキング、ハンドトラッキング、パススルーによるMR表示まで扱えます。実機検証の基準機として最適です。一方Apple Vision Proは、visionOS 2でSafariがimmersive-vrを既定で有効化し、視線とピンチによる入力に対応しましたが、WebXRのAR（拡張現実）モジュールはまだ提供されていません。「Vision ProはWebXR非対応」という古い情報は2026年時点では不正確で、正しくは「VRは動くがARは未提供」です。

iPhone・FirefoxでWebXRが使えないときの代替

iPhoneやiPadのSafari（iOS/iPadOS）はWebXRを実装していないため、ブラウザ単体でのVR/AR体験はできません。iOSで「Web上のAR」を実現したい場合は、USDZファイルを使うAR Quick Lookや<model-viewer>のARモードが現実的な代替です。Firefoxも、Firefox Realityブラウザの終了以降WebXRの実装を停止しており、デスクトップ・Androidとも非対応です。クロスブラウザ対応を掲げる場合でも、これら2環境ではWebXR前提の機能をフォールバックさせる設計が必要になります。

WebXRの使い方｜最小構成のコードで動かす

WebXRの実装は、navigator.xrで対応可否を確認し、ユーザー操作を起点にセッションを開始して描画ループを回す、という流れが基本です。ここでは素のAPIとThree.jsの両方で最短の入り方を示します。

対応確認とVRセッションの開始

まずisSessionSupported()で環境を確認し、対応していれば入場ボタンからセッションを起動します。セッション取得後は基準座標系を確保し、session.requestAnimationFrame()のループ内で毎フレームの視点（ポーズ）を取得して描画します。

if (navigator.xr) {
  navigator.xr.isSessionSupported('immersive-vr').then((supported) => {
    if (!supported) return;
    const button = document.createElement('button');
    button.textContent = 'Enter VR';
    button.onclick = async () => {
      const session = await navigator.xr.requestSession('immersive-vr');
      const refSpace = await session.requestReferenceSpace('local');
      const onFrame = (time, frame) => {
        const pose = frame.getViewerPose(refSpace);
        if (pose) {
          // pose.views ごとに左右の目を描画する
        }
        session.requestAnimationFrame(onFrame);
      };
      session.requestAnimationFrame(onFrame);
    };
    document.body.appendChild(button);
  });
}

getViewerPose()が返すviewsにはHMDの左目・右目に対応する2つのビューが入り、それぞれの位置・向きに合わせてWebGLで描画することで立体視が成立します。セッションを終える際はsession.end()でリソースを解放します。

ARモードとHit Testによる現実空間への3D配置

AR体験はrequestSession('immersive-ar')で開始し、カメラ映像の上に仮想オブジェクトを重ねます。床や机など現実の面を検出して配置したいときは、WebXR Hit Test Moduleを使い、session.requestHitTestSource()で得たヒット結果の座標にオブジェクトを置きます。これにより、実空間に3Dモデルを自然に着地させるARが実装できます。Hit TestはChrome（Android）やMeta Quest Browserで利用できます。

Three.jsのVRButton／ARButtonによる最短実装

入場ボタンやレンダラー設定を自前で書くのは煩雑なため、実務ではThree.jsのヘルパーを使うのが早いです。VRButton.createButton(renderer)やARButton.createButton(renderer)をDOMに追加し、renderer.xr.enabled = trueを設定すれば、セッション管理は自動化されます。VRとARのどちらでも入れるようにしたい場合は、ARセッションを優先して試みるXRButtonを使います。まずはこの構成でデモを1つ完成させ、そこから機能を足すのが習得の近道です。

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

WebXRは万能ではありません。強みは「インストール障壁の低さ」に集約されるため、その価値が効く場面かどうかで採否を判断すべきです。

採用が向くのは、URL共有だけで体験を届けたい展示会・EC商品プレビュー・教育教材のような、単発かつ配布性が重要なケースです。アプリストアの審査やインストールを挟まずに没入体験へ誘導でき、離脱を抑えられます。逆に避けるべきなのは、次のような条件が絡む場合です。ネイティブアプリ級の重い描画やデバイス制御が必須の要件、iPhoneのSafari利用者が主要ターゲットの案件（前述のとおり非対応）、Apple Vision ProでAR表示が必須の要件（ARモジュール未提供）、そしてFirefox前提の環境です。これらではWebXRは要件を満たせないため、ネイティブ実装やmodel-viewer等の別手段に切り替える判断が正解になります。「Webで動くから」という理由だけで全案件に適用すると、対応端末の穴で体験が破綻します。

WebXRのデモ・実装に関するよくある質問

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

Meta Questシリーズ、Android版Chrome、Apple Vision Pro（VRのみ）、そして対応HMDをつないだPCのChrome/Edgeで試せます。HMDがなくても、Chrome拡張の「WebXR API Emulator」を使えばデスクトップ上で仮想デバイスとしてデモを確認できます。iPhoneのSafariはWebXR非対応のため試せません。

iPhoneのSafariでWebXRは使えますか

使えません。iOS/iPadOSのSafariはWebXRを実装していません。iOSでWeb上のAR表示を行いたい場合は、USDZを使うAR Quick Lookや<model-viewer>のARモードが代替になります。VRを含む本格的なWebXR体験はAndroidかHMDが必要です。

WebXRとWebVRの違いは何ですか

WebVRはVR専用の旧仕様で、すでに廃止されています。WebXRはその後継として、VRに加えてAR・MRを同じAPIで扱えるよう統合された現行標準です。新規開発でWebVRを使う理由はなく、WebXR Device APIを使います。

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

まずページがHTTPS（またはlocalhost）で配信されているか、セッション開始がボタンクリックなどのユーザー操作を起点にしているかを確認します。次にnavigator.xr.isSessionSupported()で対象モードの対応可否を調べ、非対応ならブラウザ・端末を対応環境へ変更します。多くの失敗はこの3条件のいずれかが欠けていることが原因です。

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

HTMLタグだけでVRシーンを組めるA-Frameが最短です。JavaScriptで3Dを本格的に扱うならThree.jsで、VRButton／ARButtonを使えば入場処理を書かずに済みます。まずどちらか1つで公式サンプルを動かし、そこから改造して覚えるのが効率的です。関連する内容として、Resoniteもご覧ください。

関連記事

• Three.jsとは？ – Three.jsの概要とその魅力について徹底解説
• WebGLとは？仕組み・できること・対応ブラウザとUnityビルドまで解説
• 他のメタバースサービスと比較したVRChatの独自の魅力と特徴