誕生日の人をちょっとだけ幸せにできるかもしれないARバースデーカードを作ってみた


## 完成物: 立体的なバースデーカード

[![Image from Gyazo](https://i.gyazo.com/a0dc74be2b70084553ffbb60cc6b69b7.gif)](https://gyazo.com/a0dc74be2b70084553ffbb60cc6b69b7)

<blockquote class="twitter-tweet" data-lang="en"><p lang="ja" dir="ltr">👇こちらからAR バースデーカード試せます(iOS ならsafariで開くとできます)<br>    <a href="https://t.co/9I30r4o25M">https://t.co/9I30r4o25M</a></p>&mdash; Kosuke Yoshimura (@YoshimuraKosuke) <a href="https://twitter.com/YoshimuraKosuke/status/1048931225283379200?ref_src=twsrc%5Etfw">October 7, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


safariでリンクを開いて以下の画像にカメラを当てるとARが出るはずです。
<img width="523" alt="Screen Shot 2018-10-03 at 9.26.12.png" src="https://qiita-image-store.s3.amazonaws.com/0/236412/cdbd99c7-5087-9bc1-c655-631d8ab2f7f4.png">








## AR.jsを触って見る
友達の誕生日にちょっとびっくりさせたいなと思ってたのと今までiosかAndroidでしかARさわれないと思ってたけど最近AR.jsの存在を知り、ARで何か作ってみたいと思ったのがこれを作ったきっかけです。iosのsafariがver11(2017年9月)からwebRTCに対応したことでiosでもAR.jsを動かせることができるようになりました。


## 使ったライブラリ

- [AR.js](https://github.com/jeromeetienne/AR.js/blob/master/README.md)
- [A-Frame](https://aframe.io/)


## まずはHTMLファイルの作成


index.htmlを作成します。

AR.jsの作成者が書いた[tutorial](https://medium.com/arjs/augmented-reality-in-10-lines-of-html-4e193ea9fdbf)を参考にして、以下を記述します。

```index.html

<!doctype HTML>
<html>
<script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.0/aframe/build/aframe-ar.js"> </script>
  <body style='margin : 0px; overflow: hidden;'>
    <a-scene embedded arjs>
  	<a-marker preset="hiro">
            <a-box position='0 0.5 0' material='color: black;'></a-box>
  	</a-marker>
  	<a-entity camera></a-entity>
    </a-scene>
  </body>
</html>

```

## 3Dモデルの取得

![Screen Shot 2018-10-03 at 22.37.19.png](https://qiita-image-store.s3.amazonaws.com/0/236412/ff0983d0-c23a-00c3-e285-032b4d93b9ef.png)

[Google Poly](https://poly.google.com/)からケーキのオブジェクトをダウンロードさせてもらいました。Google Polyには様々な3Dモデルが転がっているので便利です。

## 3Dモデルの配置
Google Polyからダウンロードしたzipフォルダを開くとCake.objとCake.mtlというファイルが入っております。その２つをindex.htmlと同じ階層に追加し、[obj2gltf](https://github.com/AnalyticalGraphicsInc/obj2gltf)というライブラリを使ってOBJ形式からglb形式に変換して軽量化させます。obj2gltfをインストールして以下のコマンドを実行すると変換できます。

```
obj2gltf -i Cake.obj -o Cake.glb
```
変換に成功すると以下のようにCake.glbというファイルができているはずです。

![Screen Shot 2018-10-03 at 22.56.33.png](https://qiita-image-store.s3.amazonaws.com/0/236412/b534ee13-eb1d-a021-17c6-ebd057ebac2a.png)

できたCake.glbを```<a-asset-item>```で呼び出します。

```index.html
 <a-assets>
      <a-asset-item id="cake" src="Cake.glb"></a-asset-item>
 </a-assets>
```
次に```<a-entity>``` でオブジェクトの位置などを指定します。

```index.html
<a-entity gltf-model="#cake" play-all-model-animations="" position="0 0 1" rotation="0 0 0" scale="0.05 0.05 0.05" visible="true">
</a-entity>
```

以上でケーキを出現できるようになります。


## オリジナルマーカーを作成

ARを表示させるために認識させる画像（マーカー）はデフォルトだとつまらないのでオリジナルのマーカーを作成することにしました。

[marker-training](https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html)
こちらで画像をアップロードするだけでオリジナルなマーカーを作成できます。

自分はこんな感じのを作成しました。

<img width="523" alt="Screen Shot 2018-10-03 at 9.26.12.png" src="https://qiita-image-store.s3.amazonaws.com/0/236412/834cae1d-c6ac-4eb3-f192-af72e33b910e.png">

## オリジナルマーカーの組み込み

最後に```<a-marker>```で作成したオリジナルマーカー(pattern-marker.patt)を読み込みます。

```index.html
<a-marker preset='custom' type='pattern' url="pattern-marker.patt">

...

</a-marker>
```
[こちら](https://github.com/Koshukey/happybirthday)に全コードを置いておきます。

## 完成版ソースコード

```index.html
<!DOCTYPE html>
<html>
<head>
  <title></title>

<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.0/aframe/build/aframe-ar.js"></script>
</head>

<body style='margin : 0px; overflow: hidden;'>


  <a-scene embedded arjs="debugUIEnabled:false; sourceType: webcam;" vr-mode-ui="enabled: false">
    <a-assets>
      <a-asset-item id="cake" src="Cake.glb"></a-asset-item>
    </a-assets>

    <a-marker preset='custom' type='pattern' url="pattern-marker.patt">
      <a-text value="Happy Birthday!!!" position=" 0 0 -0.1" align="center" rotation="-90 0 0" color="#f442eb" >
      </a-text>

      <a-entity gltf-model="#cake" play-all-model-animations="" position="0 0 1" rotation="0 0 0" scale="0.05 0.05 0.05" visible="true">
      </a-entity>
    </a-marker>

    <a-entity camera></a-entity>

  </a-scene>

</body>

</html>


```


## 動くか確認
webRTCの一部であるブラウザからカメラを使用できる技術を使うためにはhttps通信である必要があります。githubにpushするだけでhttps通信を実現できるgithub pagesが一番簡単だと思ったので今回はgithub pagesを使用しました。github pagesの使い方は[こちら](https://www.tam-tam.co.jp/tipsnote/html_css/post11245.html)を参考にさせていただきました。

https://koshukey.github.io/happybirthday/

このようにgithub pagesで公開できたらiosのsafariで開いてみてください。以下のように"Happy birthday"とケーキがでるはずです。



## まとめ
AR.jsを使用すればたった３０行のHTMLでARの開発できます。今回は誕生日のためにバースデーカードにしましたが、父の日や母の日にも使えそうです！　名刺に使うのもありかもですね！！！








## 参考文献

- [🐶AR.jsを使ってWebAR年賀状を作る🐶](http://iti.hatenablog.jp/entry/2017/12/04/090023)
- [A-FRAMEを使ってみた（2）タグ編](http://c-geru.com/as_blind_side/category/vr)
- [新しいWebVRフレームワークA-Frame入門](https://qiita.com/rootx/items/cba61f1f725bd0090307)