WebXRとは？WebARとの違い・対応ブラウザ・実装方法を解説

「WebXR」「WebAR」という言葉を見かけることが増えてきましたが、両者の違いを正確に説明できますか？WebXRはW3C標準のAPIであり、WebARはその応用のひとつです。本記事ではWebXR Device APIの仕組みからブラウザ対応状況、Three.jsでの実装方法まで、エンジニアが実務で必要な情報を網羅して解説します。

WebXRとWebARの違い・関係性

WebXRとWebARは「上位概念・下位概念」の関係にあります。

• WebXR（Web Extended Reality）: W3CのWebXR Device APIを指す。AR（拡張現実）とVR（仮想現実）の両方をブラウザから制御するためのAPI仕様。
• WebAR: WebXR Device APIのARモード（immersive-arセッション）を使ったブラウザベースのAR体験。広義には8th WallのようなWebカメラベースのARも含む。

つまりWebARはWebXRの一部ですが、WebARと呼ぶ場合はカメラ映像に3DオブジェクトをAR重畳する体験全般を指すことが多く、ネイティブARKit/ARCore不要のWebカメラ処理ライブラリ（8th Wall、MindAR等）を使う場合もWebARと呼びます。

WebXR Device APIの仕組み

WebXR Device APIはブラウザからXRデバイス（ARスマートフォン、VRヘッドセット等）を制御するためのJavaScript APIです。主要なコンセプトは以下の通りです。

• XRSession: XR体験のセッション管理。immersive-ar（AR没入モード）、immersive-vr（VR没入モード）、inline（ページ内埋め込みプレビュー）の3種類がある。
• XRReferenceSpace: 空間座標系の定義。local（ユーザー周辺）、local-floor（床面基準）、bounded-floor（制限空間）などがある。
• XRFrame: 毎フレームのレンダリングループ。デバイスの姿勢（pose）情報を取得してシーンを描画する。
• Hit Testing: カメラ映像から平面を検出し、3Dオブジェクトを現実空間に配置するためのAPI。

ブラウザ対応状況比較（2026年3月時点）

ブラウザ	immersive-ar（WebAR）	immersive-vr（WebVR）	Hit Testing	DOM Overlay
Chrome（Android）	✅ 対応	✅ 対応	✅ 対応	✅ 対応
Chrome（iOS）	❌ 非対応	❌ 非対応	❌ 非対応	❌ 非対応
Safari（iOS）	⚠️ 部分対応（Quick Look経由）	❌ 非対応	❌ 非対応	❌ 非対応
Firefox（Android）	⚠️ 実験的対応	⚠️ 実験的対応	⚠️ 部分対応	❌ 非対応
Meta Quest Browser	✅ 対応	✅ 対応	✅ 対応	✅ 対応

重要なポイント: iOSのSafariはWebXR Device API（immersive-ar）を本格サポートしていません。iOSでWebARを実現するには、①8th WallなどのWebカメラ処理ライブラリ、②USDZ+Quick Lookリンク、③Model Viewerのどれかを使う必要があります。

Three.jsでのWebXR実装コード例

Three.jsはWebXRのネイティブサポートが充実しており、数十行のコードでWebARが実装できます。以下はHit Testingで平面を検出して3Dオブジェクトを配置する基本コードです。

// Three.js WebXR + Hit Testing 基本実装
import * as THREE from 'three';
import { ARButton } from 'three/examples/jsm/webxr/ARButton.js';

const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.xr.enabled = true;
document.body.appendChild(renderer.domElement);

// ARボタンをDOMに追加（Hit Testing機能を要求）
document.body.appendChild(
  ARButton.createButton(renderer, { requiredFeatures: ['hit-test'] })
);

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera();

// 配置するオブジェクト
const geometry = new THREE.BoxGeometry(0.1, 0.1, 0.1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
cube.visible = false;
scene.add(cube);

let hitTestSource = null;

renderer.xr.addEventListener('sessionstart', async () => {
  const session = renderer.xr.getSession();
  const viewerSpace = await session.requestReferenceSpace('viewer');
  hitTestSource = await session.requestHitTestSource({ space: viewerSpace });
});

renderer.setAnimationLoop((timestamp, frame) => {
  if (frame && hitTestSource) {
    const hitTestResults = frame.getHitTestResults(hitTestSource);
    if (hitTestResults.length > 0) {
      const pose = hitTestResults[0].getPose(renderer.xr.getReferenceSpace());
      cube.visible = true;
      cube.position.setFromMatrixPosition(new THREE.Matrix4().fromArray(pose.transform.matrix));
    }
  }
  renderer.render(scene, camera);
});

immersive-arとimmersive-vrの使い分け

セッションタイプ	カメラ映像	主な用途	対応デバイス
immersive-ar	使用（背景に現実世界）	商品配置・空間AR・ナビ	ARスマートフォン、HoloLens
immersive-vr	不使用（完全仮想空間）	3Dビューア・VRゲーム	Meta Quest、PCVRヘッドセット
inline	不使用	ページ内3Dプレビュー	すべてのブラウザ

現状の制限と将来性

最大の課題はiOSのWebXR非対応です。Appleは独自のAR Quick LookやRealityKitを推進しており、2026年時点でもSafariのWebXR完全対応は実現していません。しかしApple Vision Proの普及に伴い、将来的なWebXR対応への圧力は高まっています。

将来的には、WebXR Layers API（高品質テキストレンダリング）、WebXR Depth Sensing（奥行き検出でオクルージョン実現）、WebXR Plane Detection（平面認識の標準化）などの拡張APIが普及し、ネイティブアプリに匹敵するWebXR体験が実現する見込みです。

よくある質問