「WebARってどうやって動いているの？」「なぜアプリをインストールしないのにARが使えるの？」そんな疑問を持つ方は多いでしょう。WebARはスマートフォンのブラウザだけでAR体験を実現する技術ですが、その裏では複数の最新技術が連携して動いています。本記事では、WebARを支える技術スタックをカメラAPIから3Dレンダリングまで、わかりやすく解説します。

WebARの技術スタック全体像

WebARは単一の技術ではなく、複数のWeb標準技術が組み合わさって動作します。大きく分けると「カメラ映像の取得」「画像処理・認識」「3Dレンダリング」という3つの層で構成されています。

層役割主な技術
カメラ入力層スマホカメラの映像をリアルタイム取得WebRTC / MediaDevices API
画像処理・認識層マーカー検出・平面検出・顔認識WebAssembly / TensorFlow.js / OpenCV.js
3Dレンダリング層仮想オブジェクトを現実映像に重畳WebGL / WebXR Device API / Three.js
デバイス連携層センサーデータ取得・位置合わせDeviceOrientation API / WebXR

WebARを支える主要なAPI

WebXR Device API

WebXR Device APIはW3Cが標準化を進めるAPIで、ブラウザからARやVRデバイスにアクセスするための共通インターフェースです。2023年以降、ChromeとEdgeでの対応が進み、セッション管理・姿勢追跡・ヒットテスト（平面検出）などの機能を提供します。Safariは2024年時点でフルサポートには至っていませんが、iOS 17以降で制限付きのWebXR対応が始まっています。

WebGL：3Dグラフィックスの基盤

WebGLはブラウザ上でGPUを活用した3Dレンダリングを可能にするAPIです。OpenGL ES 2.0をベースにしており、Three.jsやBabylon.jsなどの3Dライブラリはすべてこの上に構築されています。WebGL 2.0では体積レンダリングや高度なシェーダーが利用可能になり、より高品質なAR表現が実現できます。

WebRTC / MediaDevices API

カメラ映像をリアルタイムでブラウザに取り込むのがMediaDevices APIです。navigator.mediaDevices.getUserMedia()を呼び出すことでカメラストリームにアクセスできます。これがWebARの出発点であり、ユーザーがカメラ使用許可を求めるダイアログが表示される理由はここにあります。

マーカー検出の仕組み

特徴点抽出とマッチング

マーカーARでは、カメラ映像からエッジや角のような「特徴点」を抽出し、登録済みのマーカー画像と照合します。この処理にはORB（Oriented FAST and Rotated BRIEF）やBRISK（Binary Robust Invariant Scalable Keypoints）といったアルゴリズムが使われており、WebAssemblyにコンパイルされたOpenCVがブラウザ上で高速実行されます。

AR.jsではARToolKit（マーカーARのオープンソースライブラリ）をWebAssemblyに移植しており、毎フレーム（30〜60fps）でマーカー検出を行います。処理速度はスマートフォンの性能に依存しますが、2024年以降のミドルレンジ端末では十分な実用性があります。

平面検出の仕組み

マーカーなしのARで床・テーブル・壁を認識するのが平面検出です。WebXR Device APIのHitTest機能では、端末のカメラ映像と深度センサー（LiDAR搭載機種）、IMUセンサーを組み合わせて平面を推定します。

  • SLAM（Simultaneous Localization and Mapping）：カメラ映像から環境の3Dマップを逐次生成し、端末の位置を追跡
  • 特徴点追跡：映像の特徴点の動きからカメラの移動量を計算
  • 深度推定：LiDARやステレオカメラで直接距離を測定（LiDAR搭載機種のみ）

iOSとAndroidで動作が異なる理由

WebARを開発・利用するうえで必ず直面するのがiOSとAndroidの差異です。この違いは主にブラウザエンジンとネイティブARフレームワークへのアクセス方法から生じています。

項目iOS（Safari）Android（Chrome）
ブラウザエンジンWebKit（Safariのみ）Blink（Chrome/Edge等）
ネイティブARフレームワークARKit（Apple）ARCore（Google）
WebXR対応状況制限付き（iOS 17〜）フルサポート
平面検出精度ARKit依存で高精度ARCore依存で高精度
QuickLook ARUSDZファイルに対応非対応
8th Wall等のサードパーティ動作可能動作可能

iOSではAppleがWebKit以外のブラウザエンジンを禁止しているため、ChromeやFirefoxもiOS上ではWebKitで動作します。そのためWebXRのChrome実装をiOSで使うことはできず、8th WallやZapparのようなサードパーティSDKが独自の画像処理でこのギャップを埋めています。

HTTPSが必須な理由

WebARはHTTPS（SSL/TLS）環境でのみ動作します。理由は明確で、getUserMedia()などのセンシティブなAPIはセキュアコンテキスト（HTTPS）でしか呼び出せないとブラウザ仕様で定められているからです。

  • カメラアクセス（MediaDevices API）→ HTTPSが必須
  • ジャイロ・加速度センサー（DeviceOrientation API）→ iOS 13以降はHTTPSが必須
  • WebXR Device API → セキュアコンテキストのみ

開発環境ではlocalhostがセキュアコンテキストとして扱われるため、ローカル開発は可能です。本番環境では必ず有効なSSL証明書を設定してください。Let’s Encryptを使えば無料でSSL対応できます。

WebAR導入をご検討の方へ

技術的な仕組みを理解したうえで、実際にWebARを導入したい方はお気軽にご相談ください。

無料相談はこちら →

よくある質問