ブラウザでARができるというのでやってみた

# はじめに
ARに対して、環境構築＆おまじない要素みたいなコード地獄というイメージを持っていたら、ブラウザでARできるとの記事を見つけたので、これはと思いやってみました。
ブラウザでできるって聞くと、環境構築もないしjsで書けるみたいですし、なんだかお手軽な感じがしますよね？

# やりたかったこと
想像してみてください。お仕事疲れたときに、デスクのマーカーにスマホを向けると、好きなキャラが応援してくれたら、業務効率はちゃめちゃ上がるんじゃないですかね。
フィギュアとか置くと、周りの人にドン引きされるリスクがありますが、マーカーだったら特に気づかれないですし良いですよね。頑張れば動きますし。

# ひとまず結果
3DモデルをARで表示するところまではできました！ただ、モーション周りがうまくいかず。。
その後、昨日まで動いていたコードが急にだめになって、vuforiaがinvalid input dataしか言ってくれなくなりました（きっとライセンスキー周辺がだめなんだろうなぁ…なんでかなぁ）

とりあえずやったことを書いていこうとおもいます！

# 使った技術
## vuforia
言わずと知れた、ARのライブラリ。よくUnityと一緒に使われているのを見ますね。
簡単にマーカーが登録できて、すぐに使えるようになるのがメリットだと感じます。
![markers.JPG](https://qiita-image-store.s3.amazonaws.com/0/153290/89fcdca9-c440-dd67-412e-792203e7ae75.jpeg)
また上の画像の通り、立体物をマーカーにすることもできるので、なんならフィギュアをマーカーにして「！？フィギュアがうごいた！」っていう遊びもできるかもしれません（やってないので確証はないです）。

vuforiaでライセンスキーをゲットして、マーカーを登録して、「Download Database」したら準備OKです！

app.jsの**api.objectTracker.createDataSet**ら辺で、マーカーの設定をしているので、そこに上で作ったマーカーの情報を記述しておきましょう。

ちなみにマーカー登録すると、マーカーの識別しやすさを判定してくれます（Ratingのところ）。
![Marker_regist.JPG](https://qiita-image-store.s3.amazonaws.com/0/153290/ef5809fc-ae7b-3fe0-148a-d0f46861bd00.jpeg)



## argon.js
これがARを実現するためのjavascriptのフレームワークです。これがブラウザでARするための色々をしてくれてます。
argon.jsを動かすためのブラウザをダウンロードする必要があるので、アプリをDLしましょう。（Android / iOS）

■公式サイト
https://www.argonjs.io/

アプリをDLするとこんな画面が出てくるので、Argon Samplesを押してみましょう。
![argon_start.jpg](https://qiita-image-store.s3.amazonaws.com/0/153290/2c5b77ff-6b7f-4587-0030-794c8002ea8e.jpeg)

新しいページが出てくるので、その中の「Vuforia」を押してみて下さい。
そのまま物理的に自分がぐるぐるしていると、北を向いた時に何かが表示されるはずです。

このソースコードはgitにあるので、これを参考に作っていきましょう！
https://github.com/argonjs/docs/tree/gh-pages/code/4-vuforia

あと先ほどvuforiaからもらったライセンスキーは暗号化する必要があるのですが、[ここ](https://docs.argonjs.io/start/vuforia-pgp-encryptor/)のページから暗号化できるのでしておきましょう。
これが上のコードの**app.vuforia.init**の中に入ります。

実際にARの表示する・しないは以下の箇所に記述されています。
>**Argon.PoseStatus.FOUND**：マーカーが画面に映った瞬間の挙動
>**Argon.PoseStatus.KNOWN**：マーカーを追従している時の挙動
>**Argon.PoseStatus.LOST**：見失った時の挙動

## three.js

3Dのデータを扱うには大量のコードを書いたり、色んな知識が必要だから・・・という面倒なことを一気に請け負ってくれるjsのライブラリ。基本的にjsの知識がちょっとあればきっと書けます。

余談ですが、こちらのページにthree.jsを使っているサイトなどが紹介されています。かっこいい。
https://3d-modely.com/blog/2017/06/27/post-754/

今回はこれを使ってMMDのモデルを動かしてみました。MMDを動かす場合は、これらに加えていくつかライブラリが必要になります。

自分の場合、以下が必要でした。
>・ammo.js
・TGALoader.js
・MMDLoader.js
・CCDIKSolver.js
・MDPhysics.js
・MMDParser.js

※もしかしたらいらないのもあるかもしれないです
これらをindex.htmlのヘッダで読み込んでます。

app.jsの方は、vuforiaを初期化する前あたりに以下を書いてみましょう。3Dを扱う準備です。

```javascript:app.js
// モデル（とモーション）の読み込み準備
var helper = new THREE.MMDHelper(renderer);
var onProgress = function (xhr) {
};
var onError = function (xhr) {
    alert('読み込みに失敗しました。');
};
var modelFile = 'モデルファイルの場所';
var vmdFiles = 'モーションファイルの場所';

// モデル（とモーション）の読み込み
var modelReady = false;
var loader = new THREE.MMDLoader();
loader.load(modelFile, vmdFiles, function(object) {
    modelReady = true;
    mesh = object;
    mesh.castShadow = true;
    mesh.receiveShadow = true;
    mesh.position.set(5, -20, 0);
    helper.add(mesh);
    helper.setAnimation(mesh);

    helper.setPhysics(mesh);
    helper.unifyAnimationDuration({
        afterglow: 2.0
    });
    argonTextObject.add(mesh);
    argonTextObject.scale.set(0.01, 0.01, 0.01);
    console.log("loaded");
}, onProgress, onError);
```

scaleとかpositionの値は適宜変えてください。
3Dモデルがないという方は、Unityちゃんとか可愛くてフリーで使えるものもたくさんあるので探してみて下さい（モーションも然り）。

ここまで順調に設定できれば、とりあえずお好きな3Dモデルをマーカー上に表示できているはずです！

# おわりに
今回は残念ながら、モーションをつけるとこまでいかず、またエラーに阻まれてしまいましたが、もう少し頑張ればできそうな気配がありますね！
やっぱり重いツールとか辛い環境構築とかをほぼやらなくて済むのは、かなり心の余裕が違う気がしました。