専用アプリのダウンロード不要！AR.jsで独自のARカメラを作ろう
AR（Augmented Reality; 拡張現実）は、現実世界にコンテンツを重ねるテクノロジーで、ポケモンGOなどで話題になりました。
今回紹介する技術はWeb ARと呼ばれ、ウェブサイトにアクセスするだけでAR体験が可能になるというものです。
AR.jsとは？
Web ARのために必要なのは、軽量なオープンソースライブラリの「AR.js」です。
これを使用することで、アプリのダウンロードや専用デバイスが不要な簡単なAR体験を提供できます。AR.jsは、特にマーカーベースのARに適しており、QRコードや特定の画像をマーカーとして使用します。
ユーザーがWebにアクセスすると、自動でARカメラが起動し、ARマーカーを検出すると、対応するコンテンツが表示される仕組みです。
実装手順
以下の手順でAR.jsを使って、あなたのWebサイトにARカメラを実装できます。
1.マーカーの作成
まず、以下のツールを使用してマーカーを作成します。
2.マーカーをプロジェクトに追加
作成したマーカーをassetsフォルダに保存します。このフォルダには、ARコンテンツに必要なすべてのアセットが含まれます。
3.index.htmlの作成
assetsフォルダと同じ階層にindex.htmlを作成し、以下のような内容を記述します。
<!DOCTYPE html>
<html>
<head>
<title>AR.js Demo</title>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.7.2/aframe/build/aframe-ar.js"></script>
</head>
<body style="margin: 0; overflow: hidden;">
<a-scene embedded arjs>
<a-marker preset="hiro">
<a-box position="0 0.5 0" material="color: yellow;"></a-box>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>上記のコードは、ベースとなるコードで、
<a-marker>に、url属性として先ほどダウンロードしたpattファイルのパスを記載し、
マーカーを読み込んだ際に表示するオブジェクトは<a-marker>の子要素として入れます。
今回の場合は<a-box>（図形）を表示させています。
4.サーバーにアップロード
最後に、作成したプロジェクトをWebサーバーにアップロードします。
これで、WebブラウザからアクセスするだけでAR体験が可能になります。
所感
以上が、AR.jsを使って独自のARカメラを作る手順ですが、画像や動画を追加するには、少しコードを加える必要があります。
また、iPhoneの仕様上、ミュートになっていない動画は自動再生されないため、ARで動画を流したい場合は音声をミュートにする必要があります。
AR.jsを使うことで、手軽にWeb ARを実現でき、多くの店舗やサービスにARを組み込むことができますね！
ぜひ一緒にAR体験を広げられたら嬉しいです。
いいなと思ったら応援しよう！
