【ハンズオン】Ar.jsでWebARを無料で作ってみよう！
今回のできあがりイメージ
こんな感じのものが出来上がります！
パソコンに慣れている人、慣れてない人によって完成の時間は異なりますが1時間もあれば完成できると思います。
無料で使えるAR.jsってなに？！
AR.jsってなんなの？
って思った方、安心してください。
エンジニア界隈の方なら、勘付くと思いますが
AR.jsとは『WebARを作るためのJavascriptライブラリ』です。
もっと簡単にいうと、
Javascriptというプログラミング言語を使ったWebARを作るための開発ツールだと思ってください。
なんで無料なの？
簡単にいうと、何人かの有志のエンジニアによって、『無料のARライブラリを作る』という志のもと開発されているからです。
めちゃくちゃかっこいいです。
私も社会に貢献できるようなエンジニアに将来はなりたいと思っています！日々勉強に励みます！
実際に誰がサポートしているのかは以下のページから確認できます！
https://ar-js-org.github.io/AR.js-Docs/about/
AR.jsでできること3つ
AR.jsでは3つのことができます。
その3つを紹介します。
・Image Tracking（画像認識）
画像を認識して、その画像の周りに3Dオブジェクトを出現させます。
画像は特徴点が多ければ多いほど、認識の精度は高まります。
・Location Based（位置情報）
あらかじめ、緯度と経度を設定してその場所に3Dオブジェクトを出現させます。デバイスの位置情報の精度に依存します。
・Marker Based（特定のマーカー認識）
特定のマーカーを認識する方法です。画像認識と手法は変わりませんが、画像よりも特徴点が多いため、認識の精度が高まります。
さっそく作ってみましょう！
作るにあたって以下のことに気をつけてください。
・作成日：2022年2月22日
・実行環境：M1 MacBookAir2020
※windowsでもさほど変わらないと思いますが。
・参考資料：
https://github.com/AR-js-org/AR.js
公式のgithubを参照して作っていきます。
プロジェクトファイルを作成する
普段エンジニアをされている方なら、簡単だと思います。
私の場合はデスクトップに"ar-js"という名前のフォルダを新規作成しました。
ar.jsファイルをvscodeで開く
なんのテキストエディタでもOKです。
私はvscodeというマイクロソフト監修の無料のテキストエディタを使っています。
テキストエディタのインストールはこちらから可能です。
https://azure.microsoft.com/ja-jp/products/visual-studio-code/
ダウンロードが完了したら、デスクトップにあるファイルをドラッグアンドドロップするとファイルを開くことが可能です。
index.htmlに以下のコードをコピペする
下のコードをコピーしてindex.htmlに貼り付けてください。
<!DOCTYPE html>
<html>
<script src="https://aframe.io/releases/1.0.0/aframe.min.js"></script>
<!-- we import arjs version without NFT but with marker + location based support -->
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
<body style="margin : 0px; overflow: hidden;">
<a-scene embedded arjs>
<a-marker preset="hiro">
<!-- we use cors proxy to avoid cross-origin problems ATTENTION! you need to set up your server -->
<a-entity
position="0 -1 0"
scale="0.05 0.05 0.05"
gltf-model="your-server/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/scene.gltf"
></a-entity>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>貼り付けた後のイメージは下の画像の通りです。
↓こんな感じになると思います。
（注意）このままだと、3Dモデルは表示できません。
上の画像の13行目にあるgltf-modelという行をご覧ください。
よーく見ると、URLがおかしなURLになっていますので、先頭のyour-server/
という部分を消してあげます。
すると上の画像のようになります。
このURLの意味は、AR.jsのライブラリの中に既に用意されている3Dオブジェクトを読み込む。という意味です。
なので、自分で3Dモデルを用意したいときは、このファイルのパスを変更してあげればいいのです。
ローカルサーバーのプラグインをインストールする
普段、エンジニアをされてない人からすると、ローカルサーバーは聞き慣れない言葉かもしれません。
エンジニアをしている人は、例のアレです。
Open Live Serverです。
vscodeのプラグインです。
Live serverのインストール手順はこの通りです。
（※私は既にインストールしているのでインストールボタンがありません）
ローカルサーバーを実行する
左側のタブにあるindex.htmlを右クリックすると下のgifのように
Open with Live Serverが出てくるので、クリックしてください。
すると、サーバーが立ち上がって、webarのウィンドウが立ち上がります。
カメラに画像をかざす
WebARのアプリが立ち上がったらHiroというマーカーを画面に映り込ませてください。下の画像を携帯電話で保存して読み込むといいと思います。
完成しました！
こんな感じで恐竜が出てきたかと思います！
このままだと、スマホでできないやんけ！
そうなんです。
スマホでやるためにはローカルサーバーではなく他でサーバーを立てる必要があります。
試しにレンタルサーバーにアップしてみました。
下の画像は、PCにHiroマーカーを表示させてスマホでスキャンしています。
スクリーンに光が反射すると視認性が下がってしまうので印刷する方が精度が高くなります！
まとめ
こんな感じで、なんとなくWebARというものを体感していただけたでしょうか？
恐竜以外にも3Dオブジェクトを出せたり、工夫次第によっては無限に可能性が広がります。
質問や興味がある方はコメントやTwitterなどでメッセージをお待ちしております！
Ar.js以外にもWebARのことを発信していきますので、ぜひフォローをお願いします！
