はじめに
諸事情により、アンドロイドでもiPhoneでもARができるようにしたかったため、WebARに目をつけました。
サイトを見て回って情報を集めた感じ、A-Frameというフレームワークを使ったらWebAR簡単にできそうじゃん〜って思っていたらちょっと手こずったので、自分用の備忘録として手順を記録します。
ちなみにWebARとは、ブラウザ上でARを体験できるARのことです（ざっくり）。
アプリをわざわざインストールする必要がないため、とても気軽にARで遊べるようになるのです。
用意するもの・使用したもの
- マーカー
- A-frame
- 表示したい3Dモデル
- OBJ2GLTF（3Dモデルのデータ形式を.glbに変換）
- Netlify
フォルダ構成
最終的な形は以下のようになりました。
これから踏む手順でダウンロードする様々なファイルは全部この中に突っ込んでいきます。
AR_sample
┝ cat.glb
┝ index.html
└ pattern-marker.patt
事前準備
マーカーの準備
決められた条件を満たすARマーカーを用意します。
こちらの記事にも書いてありますが、マーカーの基本的な条件は以下の通りです：
- 形は正方形
- マーカーに白い部分や透過された部分は存在しては行けない（薄い灰色のみOK）
- 色は使用できない
- 内容はシンプルなもの（簡単な記号や文字）
上記を満たしている画像を用意したら、ジェネレーターを使用してプログラム上で指定する.pattファイルを作成します。(こちらの記事に丁寧に作り方が書かれています)
3Dモデル
今回はGoogle Polyから探しました。
OBJファイルをダウンロード。展開すると.objファイルと.mtlファイルが入っています。（どちらも使います）
3Dモデルのファイルを変換
こちらの記事によると.glbファイルに変換することで軽くなるらしいです。
というわけで変換ツールをインストールして、READMEに書いてあるように
obj2gltf -i AR_sample/model.obj -o AR_sample/cat.glb
を実行します。この時、.objファイルと.mtlファイルが同じ階層にあること。
成功すると、.objファイルや.mtlファイルと同じ階層に.glbファイルが生成されます。
最終的にはこの.glbファイルがあればいいです。
以上で準備は終わりです！
コード
最終的なコードは以下のようになりました。
A-FrameをつかうとHTMLのようにARをタグで書いていくことができるのです。お手軽でいいですね。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,intial-scale=1">
<!--ここで最新バージョンのARを読み込む-->
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
<title>WebAR</title>
</head>
<body style="margin:0px; overflow:hidden;">
<a-scene embedded arjs="debugUIEnabled:false; sourceType: webcam;">
<!--ここで表示したい3Dオブジェクトのファイルを指定-->
<a-assets>
<a-asset-item id="model" src="cat.glb"></a-asset-item>
</a-assets>
<!--ここでマーカーのファイルを指定-->
<a-marker preset="custom" type="pattern" url="pattern-marker.patt">
<!--ここで表示したい文字を指定-->
<a-text value="\(^o^)/" position=" -0.3 0 0.5" align="center" rotation="-90 0 0" color="#7993ff">
</a-text>
<!--ここで3Dオブジェクトの位置などを指定-->
<a-entity gltf-model="#model" play-all-model-animations="" position="-0.55 0 -0.5" rotation="0 140 -10" scale="4 4 4" visible="true">
</a-entity>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
一つ注意点としては、a-textタグでは日本語入力ができません。
あまり自分が文字を表示させる想定ではないため、表示させる方法は調べていません。（すみません）
[ 20191223追記 ]
日本語を表示する必要が出たため、調べました。笑
以下のQiita記事でA-Frameで日本語を表示する方法をまとめてあります。必要でしたらぜひ参考にしてみてください！
A-Frameで日本語を表示したい
また、はじめ3Dモデルのscaleをやたら小さく指定しまっていることに気づかず、モデルが表示されない、、、なぜだ、、、という不毛な時間を2時間くらい過ごしてしまいました。（目視できないサイズでずっと表示されてました）
ダウンロードできる3Dモデルは様々なサイズになると思うので、はじめは scaleは指定せずに表示させてもいいかもしれないなと思いました。
デプロイ
Netlifyという無料ホスティングサービスを利用して動作確認をしました。
こんな感じに表示されました。
モデル：Mindshow Grumpy Cat
やったぜ \(^o^)/
最後に
マーカーの準備など、思いがけないところで手間取ってしまいましたが、3Dモデルを表示させるところまでは比較的簡単に進めることができました。
まだまだアニメーションなどは未知数なので、色々と触って遊んでみたいと思います。