スマホのブラウザだけでARを体験できる「WebAR」。その中でも完全無料でWebARを実装できるJavaScriptライブラリが「AR.js」です。2024年時点でGitHubスター数2万以上を誇るオープンソースプロジェクトで、マーカーARから位置情報ARまで幅広い表現が可能です。本記事では、AR.jsの概要から実際のコード実装まで、初心者にもわかりやすく解説します。

AR.jsとは？概要と特徴

AR.jsは、Jerome Etienne氏が開発したWebAR向けのオープンソースJavaScriptライブラリです。WebGL・WebRTCを活用し、プラグインなしでブラウザ上でARを実現します。主な特徴は以下のとおりです。

  • 完全無料・オープンソース（MITライセンス）
  • スマホ・PCブラウザに対応（iOS Safari / Android Chrome）
  • A-Frame / Three.js / Babylon.jsと連携可能
  • マーカーAR・NFT（自然特徴点）AR・位置情報ARの3種類に対応
  • 軽量で高速動作（60fpsを目標設計）

AR.jsが対応する3つのARタイプ

AR.jsは用途に応じて3種類のARを実装できます。

タイプ仕組み代表的な用途
マーカーAR特定のマーカー画像を認識してARを表示名刺AR、パッケージAR
NFT（画像認識）AR自然な写真・ロゴ画像を認識ポスターAR、雑誌AR
位置情報ARGPS座標をベースにARを配置観光スポットAR、地図AR

A-Frameと組み合わせたマーカーAR実装

AR.jsで最も手軽に始められるのが、A-Frameと組み合わせたマーカーARです。HTMLファイル1つで完結するため、サーバーにアップロードするだけで動作します。

基本的なマーカーARのコード

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>AR.js マーカーAR サンプル</title>
    <!-- A-Frame読み込み -->
    <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
    <!-- AR.js読み込み -->
    <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
  </head>
  <body style="margin: 0; overflow: hidden;">
    <a-scene embedded arjs>
      <!-- Hiroマーカーを認識したらボックスを表示 -->
      <a-marker preset="hiro">
        <a-box position="0 0.5 0" material="color: red;"></a-box>
      </a-marker>
      <!-- ARカメラ -->
      <a-entity camera></a-entity>
    </a-scene>
  </body>
</html>

上記コードでは、Hiroマーカー（AR.jsのデフォルトマーカー）を認識すると赤いボックスが表示されます。HiroマーカーはAR.js公式サイトからPDFをダウンロードして印刷するだけで使えます。

カスタムマーカーの作成方法

自社ロゴやオリジナル画像をARマーカーとして使いたい場合は、カスタムマーカーを作成します。AR.js公式のマーカートレーニングツール「AR.js Marker Training」を使えば、画像をアップロードするだけで`.patt`ファイルが生成されます。

カスタムマーカー作成のコツ

  • 高コントラストの画像を使う（白黒が最適）
  • 画像サイズは 512×512px以上推奨
  • 複雑すぎる画像より、シンプルなロゴが認識精度が高い
  • 白い余白（ボーダー）を必ず設ける
  • 光沢のある素材への印刷は認識率が下がるため注意
<!-- カスタムマーカーを使う場合 -->
<a-marker type="pattern" url="./custom-marker.patt">
  <a-gltf-model src="./model.glb" position="0 0 0" scale="0.1 0.1 0.1"></a-gltf-model>
</a-marker>

位置情報ARの実装方法

AR.jsのLocation-Based ARを使うと、GPS座標に紐づいたARコンテンツを表示できます。観光地のスポット案内や、屋外イベントのAR演出に活用されています。

<a-scene
  vr-mode-ui="enabled: false"
  arjs="sourceType: webcam; videoTexture: true; debugUIEnabled: false"
  renderer="antialias: true; alpha: true">
  
  <!-- 東京タワー座標にARエンティティを配置 -->
  <a-entity
    gps-entity-place="latitude: 35.6586; longitude: 139.7454"
    gltf-model="./tokyo-tower-badge.glb"
    scale="20 20 20">
  </a-entity>
  
  <a-camera gps-camera rotation-reader></a-camera>
</a-scene>

AR.jsとThree.jsの違い

AR.jsはThree.jsと直接組み合わせることも可能ですが、A-Frame経由の方がコード量が少なく初心者向けです。Three.jsを直接使う場合は、より高度な3D表現や既存のThree.jsプロジェクトへの組み込みが容易になります。

比較項目AR.js + A-FrameAR.js + Three.js
学習コスト低い（HTML記述）高い（JS記述）
カスタマイズ性中高
コード量少ない多い
向いている人初心者・デザイナーJS開発経験者

AR.jsの制限事項と注意点

AR.jsを実装する際には、以下の制限事項を事前に把握しておくことが重要です。

  • HTTPS必須：WebRTC（カメラアクセス）はHTTPS環境でのみ動作。localhostは例外的にHTTPでも動作可能
  • カメラ権限：初回アクセス時にユーザーのカメラ許可が必要
  • 照明条件：暗い環境や強い逆光ではマーカー認識率が低下
  • 複数マーカー同時認識：同時に認識できるマーカー数には上限あり
  • iOSの制限：iOS 11以降のSafariが対象。一部の古い端末では動作不安定

WebARの制作をご検討中ですか？

AR活用ラボでは、AR.jsを使ったWebAR制作から、より高精度な8th WallによるWebAR開発まで幅広く対応しています。まずはお気軽にご相談ください。

無料で相談する →