AR.jsを段階的に学習できるサイトを作成【ソースコードも公開】

# 概要

- AR.js を使ってブラウザからカメラで AR のコンテンツを表示します
- 公式の Hello World から始まりカスタムのマーカーを使用するなど段階的につくっていきます
- このサイトでは段階的に学んだことを１つずつサイトとして作って記録しました
- 実際に作ったモノはスマホで AR を楽しむことができます


## 構成

- 静的なサイトで構成されています
- コンテンツの内容はマークダウンのテキストから読み込むようにしています
- それ以外は AR.js のコンテンツごとにページを作っています
- Vue.jsなどのフレームワークを使用するとAR.jsの読み取れないときの原因特定が難しいためシンプルに作っています

![diagram.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412322/a7fd7fea-9595-4678-b643-734e4a1bbf44.jpeg)


## ソースコード

- glitch にて公開しています
- https://glitch.com/edit/#!/lesson-ar-js

## スマホで AR.js の AR を楽しむために・・・

### 準備

- まずはパソコンで開きながらスマホでもこのサイトを開いて準備します
- トップページはほぼこのQiitaの記事の内容とほぼ同じモノになります
  - すでにこの記事をパソコンで開いている場合はスマホでQRCodeのサイトを開いてください
- スマホで開く場合は以下の QRCode をご利用ください
  - https://lesson-ar-js.glitch.me/ 

<img width="35%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412322/af4ae5f8-f664-d5d4-080e-f47882423907.png">


### AR のサイトを開いたときの注意

- このサイトの AR のサイトを開く場合は Chrome の利用を推奨します
- カメラの許可を求められますので必ず許可してください

<div style="padding:2rem"></div>

# 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)](https://glitch.com/edit/#!/lesson-ar-js?path=01-ar-hello-world.html)

### スマホでの動作

- [スマホでリンクを開いて AR の動作を確認できます (01-ar-hello-world.html)](https://lesson-ar-js.glitch.me/01-ar-hello-world.html)
- 以下の QRCode をスマホのカメラで写すと AR のオブジェクト（恐竜）が表示されます
- 3D モデルの読み込みが上手くいかない場合があるので表示されない場合は Lesson2 で確認してください

<img width="35%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412322/28e387e7-910e-0432-6999-ab4be4633a22.png">

![01-screen_shot.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412322/bd70f876-8b6a-06bc-19d3-399ae9fbf3ba.jpeg)

## 02: 任意の 3D モデルファイルを読み込む

- Hello World では公式の恐竜の 3D モデルを表示していました
- 3D のモデルファイルを任意のモノを読み込ませ表示させてみます
- 使用する 3D モデルは以下を利用させていただきました
  - https://sketchfab.com/3d-models/flash-cube-5b5ffe7d529e43ebaa8980c0f36eca87
- 注意点としては 3D モデルが読み込めず表示できないことがあります
- 最初はモデルの問題かソース側の問題か切り分けが難しいので慣れてから 3D モデルにチャレンジするのがオススメです

### ソースコード

- [Glitch を開いてコードを確認できます (02-ar-custom-model.html)](https://glitch.com/edit/#!/lesson-ar-js?path=02-ar-custom-model.html)

### スマホでの動作

- [スマホでリンクを開いて AR の動作を確認できます](https://lesson-ar-js.glitch.me/02-ar-custom-model.html)
- 以下の QRCode をスマホのカメラで写すと AR のオブジェクト（キューブ）が表示されます

<img width="35%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412322/28e387e7-910e-0432-6999-ab4be4633a22.png">

<div>
  <img width="50%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412322/1a368c71-016a-0757-c2a5-787f240fdd39.jpeg">
</div>


## 03: 自分で作成したマーカーを認識させる

- Hello World ではプリセットのマーカーで AR コンテンツを表示していました
- 今回は自分で用意した画像をマーカーにします
- 以下のサイトでマーカーの設定ファイル(.patt)とマーカーの画像ファイルを生成します
  - [AR.js Marker Training](https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html)
- マーカーを作るポイントとしては背景は少し灰色にしてシンプルな模様にすると読み取りやすいです
- 色も多くなると読み取りづらいので灰色背景に黒い簡単な図形を描くことをオススメします

### ソースコード

- [Glitch を開いてコードを確認できます (03-ar-custom-marker.html)](https://glitch.com/edit/#!/lesson-ar-js?path=03-ar-custom-marker.html)

### スマホでの動作

- [スマホでリンクを開いて AR の動作を確認できます](https://lesson-ar-js.glitch.me/03-ar-custom-marker.html)
- 今回は自作したマーカーを読み取ります
- 以下の QRCode をスマホのカメラで写すと AR のオブジェクト（キューブ）が表示されます

<img width="35%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412322/ac576b15-52e7-f79a-701b-73962bc0a5f1.png">


<div>
  <img width="50%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412322/55206e04-0719-7405-d15c-65cbb6c0fc52.jpeg">
</div>

## 04: AR で任意の画像を表示する

- 3D モデルだと自作しづらいので AR で画像を表示させてみます
- カワイイ女の子の画像を AR で飛び出させてみます
- カワイイ女の子の画像の素材は以下のサイトから利用させていただきました
  - http://iwayu2.blog.fc2.com/blog-entry-9.html

### ソースコード

- [Glitch を開いてコードを確認できます (04-ar-display-image.html)](https://glitch.com/edit/#!/lesson-ar-js?path=04-ar-display-image.html)

### スマホでの動作

- [スマホでリンクを開いて AR の動作を確認できます](https://lesson-ar-js.glitch.me/04-ar-display-image.html)
- 今回は自作したマーカーを読み取ります
- 以下の QRCode をスマホのカメラで写すと AR のオブジェクト（かわいいメイドさん）が表示されます

<img width="35%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412322/ac576b15-52e7-f79a-701b-73962bc0a5f1.png">

<div>
  <img width="50%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412322/62958c3f-e2ed-d3c7-4309-1c2ad52d15db.jpeg">
</div>


## 05: AR で任意の Gif 画像を表示する

- AR.js は aframe を使用しています
- aframe の拡張ライブラリも使用できます
- 今回は Gif 画像を使用するために aframe-gif-shader を使用します
- Gif 画像は以下のサイトから利用させていただきました
  - [Cliply.co](https://cliply.co/clip/animated-sparkles/)

### ソースコード

- [Glitch を開いてコードを確認できます (05-ar-display-gif.html)](https://glitch.com/edit/#!/lesson-ar-js?path=05-ar-display-gif.html)

### スマホでの動作

- [スマホでリンクを開いて AR の動作を確認できます](https://lesson-ar-js.glitch.me/05-ar-display-gif.html)
- 今回は自作したマーカーを読み取ります
- 以下の QRCode をスマホのカメラで写すと AR のオブジェクト（動いてキラキラする何か）が表示されます

<img width="35%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412322/ac576b15-52e7-f79a-701b-73962bc0a5f1.png">

<div>
  <img width="50%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412322/39c055cc-05de-fcd2-ed43-a30c62912049.jpeg">
</div>



## 06: ARで複数のマーカーを設定する

- これまでの応用として複数の任意のマーカーを設定します
- それぞれのマーカーから異なるカワイイ女の子の画像を表示します
- マーカーさえ準備できればハーレムにできます

### ソースコード

- [Glitch を開いてコードを確認できます (06-ar-multi-marker.html)](https://glitch.com/edit/#!/lesson-ar-js?path=06-ar-multi-marker.html)

### スマホでの動作

- [スマホでリンクを開いて AR の動作を確認できます](https://lesson-ar-js.glitch.me/06-ar-multi-marker.html)
- 今回は自作したマーカーを読み取ります
- 以下の QRCode をスマホのカメラで写すと AR のオブジェクト（かわいいメイドさん２人）が表示されます

<div>
  <img width="35%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412322/ac576b15-52e7-f79a-701b-73962bc0a5f1.png">
  <img width="35%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412322/21e72990-ed8f-4f89-e658-dfbb093e40fa.png">
</div>

<div>
  <img width="50%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412322/0c5622db-5913-0317-228f-88304d90a594.jpeg">
</div>

# ふりかえり

## 初心者にもチャレンジしやすいかもしれない

- 段階的に学ぶように作ったため初心者にも学習しやすいと思います
- ARという実際にスマホで確認しながら楽しめるので取っつきやすいかもしれません

## ハマったときがキツイかも

- AR.jsでキツイのはモデルやパターンの読み込みがされないときで原因の特定がしづらいです
- デバッグモードもありますがそれでも特定するのに工夫が必要そうです
- 今回はできるだけ切り分けしやすいように静的なサイトで構築しました

## 次やりたいこと
- AR.jsでマーカーの記述のみ違うので変更箇所だけHTMLレンダリングで変えるようできればよさそうです
  - ExpressやReactなどを採用してマーカーの記述部分のみ返すようにしてあげればイイかと