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

はじめに

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

やりたかったこと

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

ひとまず結果

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

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

使った技術

vuforia

言わずと知れた、ARのライブラリ。よくUnityと一緒に使われているのを見ますね。
簡単にマーカーが登録できて、すぐに使えるようになるのがメリットだと感じます。

また上の画像の通り、立体物をマーカーにすることもできるので、なんならフィギュアをマーカーにして「！？フィギュアがうごいた！」っていう遊びもできるかもしれません（やってないので確証はないです）。

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

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

ちなみにマーカー登録すると、マーカーの識別しやすさを判定してくれます（Ratingのところ）。

argon.js

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

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

アプリをDLするとこんな画面が出てくるので、Argon Samplesを押してみましょう。

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

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

あと先ほどvuforiaからもらったライセンスキーは暗号化する必要があるのですが、ここのページから暗号化できるのでしておきましょう。
これが上のコードの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を扱う準備です。

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モデルをマーカー上に表示できているはずです！

おわりに

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