こんにちは、スタッフのないとうと申します！
今回は、Webブラウザ上でAR（拡張現実）を体験できる「WebAR」の開発に初挑戦しました。
ARというと、専用のアプリをインストールして利用するイメージがありましたが、WebARではスマートフォンのブラウザからカメラを起動し、ARコンテンツを表示することができます。
今回は「MindAR」というライブラリを使い、特定の画像をカメラで認識し、その画像に合わせてARコンテンツを表示するところまで試してみました！
この記事では、実際にMindARを使ってみた流れや、開発してみて感じたことを紹介します。
※画像はAIで作成した開発の流れのイメージです。
WebARとは？
WebARとは、Webブラウザ上で利用できるARの仕組みです。
スマートフォンなどのカメラを使い、現実の映像に画像や3Dオブジェクトなどのデジタルコンテンツを重ねて表示できます。
一般的なWebページと同じようにブラウザからアクセスできるため、専用アプリをインストールしなくてもARを体験できるのが特徴です。
MindARとは？
今回使用したMindARは、Webブラウザ上でARを実現するためのライブラリです。
カメラに映った特定の画像を認識する「画像認識」や、顔を認識する機能などがあります。
今回は、その中でも画像認識の機能を使いました。
開発には主に、
- HTML
- CSS
- JavaScript
- MindAR
- A-Frame
を使用しました。
A-Frameを組み合わせることで、ブラウザ上に3Dオブジェクトを表示したり、位置や大きさを調整したりすることができます。
普段のWeb制作でも使うHTMLやJavaScriptの知識を活かしながらAR開発に挑戦できる点が、MindARの面白いところだと感じました！
まずは画像を認識させてみる
最初に、スマートフォンのカメラで特定の画像を認識させるところから試してみました。
MindARでは、認識させたい画像を事前に専用のデータへ変換し、そのデータをWebページ側で読み込んで画像認識を行います。
※画像はAIで作成した開発段階時のイメージです。
今回は、まず画像を正しく認識できているか確認するため、認識した位置にシンプルなオブジェクトを表示させてみました。
実際にスマートフォンでカメラを向けると、対象の画像を認識した場所にオブジェクトが表示されました。
Webブラウザ上でも、カメラを使ってARを動かせることを確認できました。
最初から複雑なものを作るのではなく、まずは「画像を認識できるか」「正しい位置に表示できるか」を一つずつ確認しながら進めました。
3Dオブジェクトを表示してみる
画像認識ができることを確認した後は、表示するオブジェクトも変更してみました。
A-Frameを使うことで、ブラウザ上に3Dオブジェクトを表示できます。
※画像はAIで作成した開発段階時のイメージです。
また、オブジェクトの位置、大きさ、向きなども調整できます。
実際に表示してみると、少し数値を変更するだけでも見え方が大きく変わりました。
PC上で確認したときには問題なく見えていても、実際にスマートフォンで確認すると、
「少し大きすぎる」
「もう少し上に表示したい」
と感じることもありました。
そのため、実際の画面を確認しながら少しずつ調整していきました。
開発していて難しかったところ
今回MindARを使ってみて、通常のWebサイト制作とは少し違った難しさがありました。
Webサイトの場合は主に画面上の文字や画像の配置を考えますが、WebARでは、それに加えてカメラ映像や画像認識、3Dオブジェクトなども考える必要があります。
特に難しかったのが、ARオブジェクトの位置や大きさの調整です。
数値だけを見て調整しても、実際にカメラを通して見ると想像していた見え方と違うことがありました。
そのため、
- 画像認識が動くか確認する
- シンプルなオブジェクトを表示する
- スマートフォンで確認する
- 位置や大きさを調整する
- 少しずつ表示内容を追加する
というように、一つずつ確認しながら進めました。
一度にすべて作ろうとせず、段階的に確認することが大切だと感じました。
MindARを使ってみて感じたこと
今回MindARを使ってみて、一番印象に残ったのは、Web制作の知識を使いながらARを作れることでした。
ARと聞くと少し難しそうなイメージがありますが、HTMLやJavaScriptなど、普段Web制作で使う技術を組み合わせながら開発できます。
実際にカメラで画像を認識し、その位置にオブジェクトが表示されたときは、通常のWebサイト制作とは違う面白さを感じました。
一方で、カメラや3D空間を扱うため、普段のWeb制作ではあまり意識しない位置や奥行きなども考える必要があります。
実際に動かしながら試していくことで、少しずつ仕組みを理解できました。
WebARでできそうなこと
今回は基本的な画像認識とAR表示を試しましたが、WebARにはさまざまな活用方法がありそうです。
例えば、
- 観光地でのAR案内
- イベントでのARコンテンツ
- 商品にカメラを向けて情報を表示
- 展示物の解説
- ARを使ったクイズやゲーム
などが考えられます。
現実にある画像や物とWebコンテンツを組み合わせられるところが、ARならではの面白さだと感じました。
普段のWebサイトとは違った形で、ユーザーに楽しんでもらえるコンテンツを作れる可能性がありそうです。
まとめ
今回は、MindARを使ってWebARの開発に挑戦しました。
実際に開発することで、
- MindARを使った画像認識
- ARオブジェクトの表示
- 3Dオブジェクトの位置や大きさの調整
- スマートフォンでの動作確認
といった基本的な流れを体験することができました。
ARは難しそうなイメージがありましたが、Web技術を使ってブラウザ上でもARコンテンツを作れることを知り、Web開発でできることの幅が広がったように感じました。
※記事内の画像は、説明用としてAIを使用して作成しています。
