こんにちは！NTTコノキューのかじぐちです。
皆さんは Web AR を使ったことがありますか？ Web AR とは、ブラウザ上で AR (Augmented Reality / 拡張現実）を体験できる技術です。 アプリ不要で気軽に体験することができる点から、最近では広告やイベント、教育など、様々な分野で注目を集めています。
この記事では、そんな Web AR の、特に画像認識 AR の精度に注目し、いくつかのライブラリを比較してみました。動画もありますので、ぜひ Web AR を活用する際の参考にしてみてください！（2024年12月18日時点の情報です）
1. 画像認識 Web AR ライブラリ比較まとめ
今回は、8th Wall、Camera Kit Web、MindAR、AR.jsの4つのライブラリについて比較しました。
この比較表は横にスクロールできます→
| 比較項目 | 8th Wall | Lens & Camera Kit Web | MindAR | AR.js |
|---|---|---|---|---|
| 対応認識手法 | ・画像認識 ・平面認識 ・空間認識(VPS) ・顔認識 ・手の認識 ・空の認識 |
・画像認識 ・顔認識 ・手の認識 ・体の認識 ・動物の認識 |
・画像認識 ・顔認識 |
・画像認識 ・黒枠マーカー認識 ・位置認識(GPS) |
| 表示の安定性 | ◎ とても安定している |
〇 比較的安定している |
△ カメラを動かすと揺れる |
✕ かなり揺れる |
| マーカー外表示 | 〇 | ✕ | ✕ | ✕ |
| 開発環境 | ◎ サンプル・ドキュメント充実 ブラウザ完結 |
✕ 作成はGUIで簡単だが Web接続にハードルあり |
〇 基礎をカバー シンプルに開発可能 |
〇 基礎をカバー シンプルに開発可能 |
| 費用 | ✕ 有料 (個人非商用は無料) |
〇 無料 | 〇 無料(OSS) | 〇 無料(OSS) |
以下で検証結果を詳しく記載しています。
2. ライブラリの概要と検証結果
2.1 8th Wall
概要
8th Wall は、Web AR の開発を簡単に行える Niantic 社提供のプラットフォームで、A-Frame や Three.js を使用して開発できます。また、ブラウザ上でコーディング・テスト・デプロイまで可能で、効率的に開発を行うことができます。 画像認識だけでなく、平面認識、空間認識(VPS)、顔認識、手の認識、空の認識に対応しており、幅広い AR 表現が可能です。特に空の認識については、他の Web AR ライブラリにはない面白い機能となっています。
8th Wall では、画像認識と平面認識(World Tracking)の機能を連携することができます。World Tracking をオンにすると、SLAM を使って自己位置推定を行うことで、ターゲット画像が画面外となってもオブジェクトを表示し続けることができるようになります。
公式サイト：8th Wall - Open Source AR & 3D
開発の難易度
コーディング～デプロイまでブラウザ上で実施可能で、効率的な開発を行えます。サーバーの用意も不要なため、まず作ってみるという段階のハードルは非常に低く、容易に始められます。 また、8th Wall が対応している認識手法それぞれに複数のサンプルが用意されており、それをクローンして素材を差し替えるだけで基本的な AR を作ることができます。 ドキュメントも充実しており、複数機能の組み合わせなど手の込んだ AR を作る際も困りにくいと思います。
ただ、MindAR や AR.js に比べると、より高機能で自由度が高い分、サンプルより複雑な開発をする場合は一定の習熟が必要になります。
検証結果
8th Wall の検証動画↓
画像認識ARデモ（8th Wall） pic.twitter.com/rwxH5tnIVX
— かじぐち (@YKajiguchi) December 16, 2024
（動画内ではマーカーを見失った際にオブジェクトが消えることでちらつきが発生しています。今回は A-frame を用いていますが、Three.js で開発しオブジェクトが消えないようなコードを書けば改善されます）
8th Wall は有料のライブラリであることもあり、Web AR のなかではオブジェクト表示が最も安定しています。特に、ターゲット画像から遠い場所にオブジェクトを表示したい場合（例：箱の側面にある画像を認識して、箱の上部に浮いたオブジェクトを表示するなど）は、この中では 8th Wall 一択となります。体験の質や認識手法のバリエーションを重視するなら8th Wall がおすすめです。商用でない個人開発は無料なので、ぜひ試してみてください。
2.2 Lens & Camera Kit Web
概要
Camera Kit Web は Snapchatの AR 技術をウェブに組み込める、Snap 社提供の SDK です。 AR 体験部分については Lens Studio というソフトで Lens を作成し、Web アプリやそのサーバーは開発者自身で用意して、それらを紐づけることで Web AR を実現できます。
もともと Snapchat が SNS であることもあり、顔や体に対してエフェクトをつけることに秀でています。また、体の認識や犬・猫の認識は、他の Web AR ライブラリにはないユニークな機能となっています。
公式サイト：Camera Kit | Snap for Developers
開発の難易度
Snapchat の Camera Kit Web は、AR 体験の中心となる部分を Lens Studio を使って（Unity のように GUI で）作成するため、AR コンテンツ自体の制作は直感的かつ効率的に行えます。 ただし、Lens Studio で編集し Publish するたびに1時間程度かかるレビューを通さなくてはならないため、その点がネックになっています。
また、Lens Studio で作成した AR コンテンツ（Lens）を Web アプリケーションとして動作させるには、開発者自身でサーバーや Web アプリを構築する必要があります。そのため、ARエフェクトを活用した Web アプリ全体を構築する場合は、8th Wall よりも準備や開発の手間が増えるため、中～上級者向けと言えるでしょう。
検証結果
Lens & Camera Kit Web の検証動画↓
画像認識ARデモ（Snap） pic.twitter.com/ru7r10DDTY
— かじぐち (@YKajiguchi) December 16, 2024
ターゲット画像を認識するまでは、フレームレートが下がり、かなり重たい印象です。ただし、画像認識後はスムーズに動作するため、用途によっては問題なく使用可能だと思います（例：AR カメラ起動時から常にターゲット画像にカメラを向けているケースなど）。無料の範囲でなるべく質の良い AR 体験を作りたい場合におすすめです。
2.3 MindAR
概要
MindAR は、Web AR 開発のための軽量でオープンソースなライブラリです。A-Frame や Three.js を使用して開発でき、画像認識と顔認識に特化しています。また、比較的シンプルなアーキテクチャを持っているため、初心者でも導入しやすくなっています。
開発の難易度
MindAR は、画像認識に特化したシンプルな機能であるため、初心者でも比較的扱いやすいです。ドキュメントを見ながら進めるだけで基本的な画像認識 AR を作成できます。
ただし、A-Frame や Three.js を利用する関係で、3Dシーンの構築やカスタマイズには一定の WebGL や JavaScript の知識が必要になります。
検証結果
MindAR の検証動画↓
画像認識ARデモ（MindAR） pic.twitter.com/QLhLpyquL3
— かじぐち (@YKajiguchi) December 16, 2024
ターゲット画像認識前アニメーションがデフォルトでついているのでわかりやすいです。端末を動かすとオブジェクトが揺れてしまうので、カメラをあまり動かさない体験ケースにおすすめです。
2.4 AR.js
概要
AR.js は、Web AR の中でも特に軽量で高速なオープンソースライブラリとして知られています。JavaScript や A-Frame、Three.js を使用して開発できます。MindAR とほぼ同じコードで動かせます。
通常の画像認識以外に、黒枠がついた画像マーカーを認識する機能もあります。ただ、黒枠がかなり特徴的になってしまうので、活用ケースは限られそうです。
ほかにも、GPS トラッキングに対応しており、その場所に行くことで AR を表示するという体験を作成できます。
公式サイト: AR.js Documentation
開発の難易度
MindAR とほぼ同等の難易度です。シンプルな作りであるため、サンプルを動かしたり、少しカスタマイズする程度であれば、初心者でも開発は容易です。
ただし、A-Frame や Three.js を利用する関係で、3Dシーンの構築やカスタマイズには一定の WebGL や JavaScript の知識が必要になります。サンプルをそのまま活用する場合は敷居が低いものの、独自の AR 表現を作成するにはこれらのスキルが求められるため、初心者にはやや難しく感じられることもあります。
検証結果
AR.js の検証動画↓
画像認識ARデモ（AR.js） pic.twitter.com/gAkDHmSWoR
— かじぐち (@YKajiguchi) December 16, 2024
表示オブジェクトの揺れが激しく、画像認識 AR として比較すると MindAR に軍配が上がります。正方形画像に黒枠をつけてもいい場合や、画像ではなくロケーションベースの AR を作成したい場合に試してみるのがおすすめです。
3. おわりに
今回は代表的な4つの Web AR を、画像認識 AR という観点で比較してみました！ 有料でも質が高い体験を提供したい場合は 8th Wall が適しており、無料の範囲でなるべく高品質にしたい場合は Camera Kit Web、そして無料でシンプルに作成したい場合は MindAR や AR.js が良いでしょう。
今回は画像認識 AR について比較しましたが、AR は画像認識だけでなく、平面認識や顔認識など、様々な認識手法と組み合わせて作成することができます。各ライブラリが対応している認識手法や得意分野を把握し、作成したい Web AR に合わせて選択していただけたらと思います。ぜひ Web AR で皆さんもお手軽AR体験を作ってみてください！
（2024年12月18日時点の情報です）
