概要
- AR.js を使ってブラウザからカメラで AR のコンテンツを表示します
- 公式の Hello World から始まりカスタムのマーカーを使用するなど段階的につくっていきます
- このサイトでは段階的に学んだことを１つずつサイトとして作って記録しました
- 実際に作ったモノはスマホで AR を楽しむことができます
構成
- 静的なサイトで構成されています
- コンテンツの内容はマークダウンのテキストから読み込むようにしています
- それ以外は AR.js のコンテンツごとにページを作っています
- Vue.jsなどのフレームワークを使用するとAR.jsの読み取れないときの原因特定が難しいためシンプルに作っています
ソースコード
- glitch にて公開しています
- https://glitch.com/edit/#!/lesson-ar-js
スマホで AR.js の AR を楽しむために・・・
準備
- まずはパソコンで開きながらスマホでもこのサイトを開いて準備します
- トップページはほぼこのQiitaの記事の内容とほぼ同じモノになります
- すでにこの記事をパソコンで開いている場合はスマホでQRCodeのサイトを開いてください
- スマホで開く場合は以下の QRCode をご利用ください
AR のサイトを開いたときの注意
- このサイトの AR のサイトを開く場合は Chrome の利用を推奨します
- カメラの許可を求められますので必ず許可してください
AR.js Lesson Start
01: Hello World
- スマホで特定のマーカーを写すと AR のコンテンツを表示するモノをつくります
- 公式の Marker Based Example を使ってみます
- https://ar-js-org.github.io/AR.js-Docs/
- Marker Based Example のソースコードを利用します
- パソコンで移した画像で AR を楽しむために
positionとrotationを以下のように設定します- position="0 0 1"
- rotation="-90 0 0"
ソースコード
Glitch を開いてコードを確認できます (01-ar-hello-world.html)
スマホでの動作
- スマホでリンクを開いて AR の動作を確認できます (01-ar-hello-world.html)
- 以下の QRCode をスマホのカメラで写すと AR のオブジェクト（恐竜）が表示されます
- 3D モデルの読み込みが上手くいかない場合があるので表示されない場合は Lesson2 で確認してください
02: 任意の 3D モデルファイルを読み込む
- Hello World では公式の恐竜の 3D モデルを表示していました
- 3D のモデルファイルを任意のモノを読み込ませ表示させてみます
- 使用する 3D モデルは以下を利用させていただきました
- 注意点としては 3D モデルが読み込めず表示できないことがあります
- 最初はモデルの問題かソース側の問題か切り分けが難しいので慣れてから 3D モデルにチャレンジするのがオススメです
ソースコード
スマホでの動作
- スマホでリンクを開いて AR の動作を確認できます
- 以下の QRCode をスマホのカメラで写すと AR のオブジェクト（キューブ）が表示されます
03: 自分で作成したマーカーを認識させる
- Hello World ではプリセットのマーカーで AR コンテンツを表示していました
- 今回は自分で用意した画像をマーカーにします
- 以下のサイトでマーカーの設定ファイル(.patt)とマーカーの画像ファイルを生成します
- マーカーを作るポイントとしては背景は少し灰色にしてシンプルな模様にすると読み取りやすいです
- 色も多くなると読み取りづらいので灰色背景に黒い簡単な図形を描くことをオススメします
ソースコード
スマホでの動作
- スマホでリンクを開いて AR の動作を確認できます
- 今回は自作したマーカーを読み取ります
- 以下の QRCode をスマホのカメラで写すと AR のオブジェクト（キューブ）が表示されます
04: AR で任意の画像を表示する
- 3D モデルだと自作しづらいので AR で画像を表示させてみます
- カワイイ女の子の画像を AR で飛び出させてみます
- カワイイ女の子の画像の素材は以下のサイトから利用させていただきました
ソースコード
スマホでの動作
- スマホでリンクを開いて AR の動作を確認できます
- 今回は自作したマーカーを読み取ります
- 以下の QRCode をスマホのカメラで写すと AR のオブジェクト（かわいいメイドさん）が表示されます
05: AR で任意の Gif 画像を表示する
- AR.js は aframe を使用しています
- aframe の拡張ライブラリも使用できます
- 今回は Gif 画像を使用するために aframe-gif-shader を使用します
- Gif 画像は以下のサイトから利用させていただきました
ソースコード
スマホでの動作
- スマホでリンクを開いて AR の動作を確認できます
- 今回は自作したマーカーを読み取ります
- 以下の QRCode をスマホのカメラで写すと AR のオブジェクト（動いてキラキラする何か）が表示されます
06: ARで複数のマーカーを設定する
- これまでの応用として複数の任意のマーカーを設定します
- それぞれのマーカーから異なるカワイイ女の子の画像を表示します
- マーカーさえ準備できればハーレムにできます
ソースコード
スマホでの動作
- スマホでリンクを開いて AR の動作を確認できます
- 今回は自作したマーカーを読み取ります
- 以下の QRCode をスマホのカメラで写すと AR のオブジェクト（かわいいメイドさん２人）が表示されます
ふりかえり
初心者にもチャレンジしやすいかもしれない
- 段階的に学ぶように作ったため初心者にも学習しやすいと思います
- ARという実際にスマホで確認しながら楽しめるので取っつきやすいかもしれません
ハマったときがキツイかも
- AR.jsでキツイのはモデルやパターンの読み込みがされないときで原因の特定がしづらいです
- デバッグモードもありますがそれでも特定するのに工夫が必要そうです
- 今回はできるだけ切り分けしやすいように静的なサイトで構築しました
次やりたいこと
- AR.jsでマーカーの記述のみ違うので変更箇所だけHTMLレンダリングで変えるようできればよさそうです
- ExpressやReactなどを採用してマーカーの記述部分のみ返すようにしてあげればイイかと