AR年賀状を作ってみた (MMDモデル表示編)

こんにちは。
AR年賀状を作りたかったので、色々やって見ました。
今回は、MMDモデルを表示させたいと思います。

A-frame を用いたAR
準備
index.html を書く
サーバーにアップロードする
できたもの
困ったこと
まとめ
参考記事

A-frame を用いたAR

まず、今回利用するA-frame について説明します。そもそも、A-frame とはweb上で簡単にVR を体験(?)できるように作られたものです。
これを利用して、背景に現実世界の(カメラで撮影している)映像を合成したらARになる、というのが今回行うことです。
どちらかというとMRに近いのかもしれません・・・。

公式ホームページにもチュートリアルがあります。
aframe.io

準備

index.html を準備する

今回はサーバーにアップロードする時にindex.html である必要があるので、index.html とそれを入れるフォルダを用意します。

MMDモデルをダウンロードする

今回は、ニコニ立体ちゃんをお借りしました。
ニコニ立体ちゃんは、著作表示不要・商用利用可能・改変可能・再配布可能というすごい人(?)です。さすがドワンゴさんです。
こちらからダウンロードできます。

そして、ダウンロードしたフォルダを、先ほど用意したフォルダに入れます。

マーカーをダウンロードする

ARに利用するマーカーをダウンロードします。
今回は、用意されているプリセットを使います。
こちらです。

index.html を書く

まず、いくつかライブラリを読み込む必要があるのですが、これは公式に載っていたサンプルをコピペしました。
もしかすると適宜更新されていくのかもしれないので、ここに載せたコードで動かなかったら公式のGitHubを覗いてみて下さい。
また、最初にやって見た時にモデルが白く光っていたので暗めの光を当てています。
それから、今回はpcにマーカーを表示してちょうど良い位置になるように回転させているので、適宜調整して下さい。
おそらくですが、スクリーンに対して右方向がx軸正方向、下方向がz軸正方向です。
あ、あとはフォルダ名に空白が入っていたりモーション名に日本語が入っていたりしたのでそこも直しています。
(「MMD Motion」→「MMDMotion」、「2分ループステップ31.vmd」→「31.vmd」)

下記のようになりました。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>MMD</title>
  </head>
  <body style="margin:0px; overflow:hidden;">
    <!-- A-Frame ライブラリの読み込み -->
    <script src="https://aframe.io/releases/0.7.1/aframe.min.js"></script>
    <!-- AR.js ライブラリの読み込み -->
    <script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>

    <script src="https://cdn.rawgit.com/kripken/ammo.js/dcab07bf0e7f2b4b64c01dc45da846344c8f50be/builds/ammo.js"></script>
    <script src="https://cdn.rawgit.com/takahirox/aframe-outline/v1.1.1/build/aframe-outline.min.js"></script>
    <script src="https://cdn.rawgit.com/takahirox/a-mmd/v1.0.3/build/a-mmd.min.js"></script>

    <!-- A-Frame の VR空間に AR.js を紐づける（デバッグUIを非表示） -->
    <a-scene embedded arjs="debugUIEnabled:false;">
        <!-- 光を当てる -->
	<a-light type="directional" color="#B7B7B7"　intensity="0.5" position="0 40 0"></a-light>

      <!-- マーカーを登録（プリセットされている「hiro」マーカー） -->
      <a-marker preset="hiro">
        <a-entity mmd="">
            <a-entity rotation="-90 0 0" position="0 0.5 0.5" scale="0.1 0.1 0.1"
				mmd-model="model:./Alicia/MMD/Alicia_solid.pmx; vmd:./Alicia/MMDMotion/31.vmd; physics:false; blink:true;"></a-entity> <!-- vmd:./MMDMotion/31.vmd; -->
		</a-entity>
      </a-marker>
      <a-entity camera></a-entity>
    </a-scene>
  </body>
</html>