高坂さんが開発したLive2DモデルをARで表示させるサンプルを利用して、ARポストカードなるものを作ってみました。

基本的な使い方はこちらのREADMEを読めば大体分かるかと思いますが、僕のようにプログラムやコードの知識がほとんどない人間には多少の手助けが必要かなと思ったので、今回作ったARポストカードの具体的な制作手順をなるべく詳しく解説してみます。

1.  Live2Dモデル・モーションを用意する

Live2Dのモデル・モーションの作り方は公式のチュートリアル等を参考にしてください。（今回使うのはCubism3ですので、お間違え無いよう）

モーションは通常の待機モーションと、画面をタップ（クリック）した時に反応するモーションをそれぞれ1つずつ作ってみます。
（※実際にARポストカードで使っているモーションとは少し異なります）

モデルとモーション、物理演算の設定が出来たら、組み込み用ファイルを書き出します。

テクスチャアトラスの作成・編集も忘れないように。
ARで表示した際の重さに影響するようなので、テクスチャサイズは小さめにしておきます。今回は512×512で作成。

・テクスチャ
・motion3.jsonファイル（待機モーション）
・motion3.jsonファイル（クリックモーション）
・moc3ファイル
・model3.jsonファイル
・physics3.jsonファイル（物理演算）

上記6つのファイルが作成できたら準備完了。同じフォルダにまとめておきます。

2. Live2D Cubism SDK AR.js Samplesをダウンロード

こちらからサンプルのデータを一式ダウンロードします。
以下ダウンロード方法の引用です↓

1. トップページ の右上にある "Clone or download" ボタンを押します
2. ポップアップが表示されるので、"Download ZIP" ボタンを押します
3. ダウンロードした zip ファイルを解凍します

デフォルト状態では公式サンプルモデルの「こはる」と「はると」が表示されるようになっています（上記ページ内にあるQRコードとARマーカーで試すことができます）

このサンプルを書き換えて、自作のモデルを表示するようにしていきます。

3. 自作のモデル・モーションを表示させる

CubismARjsSample-masterフォルダ内のassetsフォルダを開きます。
ARで表示するモデル・モーション、ARマーカーなどのファイルがここに入っています。

ここに自作のモデル・モーションの組み込み用ファイルをまとめたものを入れておきましょう。
（デフォルトで入っている「Haruto」「Hiyori」「Koharu」の組み込み用ファイルは、今後使わないのであれば削除してOK）

次に、jsフォルダ内の「pixiAframeAR.js」ファイルをテキストエディタで開きます。

※テキストエディタは何でもいいですが、今回はTeraPadを使っています。

参考：
プログラミングに使える！フリーのテキストエディタ15選
【Windows編】フリーテキストエディタ13選！初心者にもおすすめ

22行目以降に基本モーションについての記述があり、
基本の待機モーションとして'motion2'～'motion9'を再生するよ、という感じのことが書いてあります。
40行目以降にクリックモーションについての記述があり、
画面タップした時に'motion1'を再生するよ、という感じのことが書いてあります。
motion1～9が具体的にどのモーションに当たるのかは後程記述します。

今回待機モーションは1つ（'motion2'）だけなので、motion3～9は無効にしておきます。

行頭に「//」をつけると、その行はコメントアウトされて無効になります。
※TeraPadではコメントアウトされた部分は緑色になっています。

具体的にどのモデル・モーションを使うのかについての記述は、80行目の「//アセットの読み込み」以降にあります。

82行目「var p1 =」以降で1体目のモデル（こはる）についての設定、
100行目「var p2 =」以降で2体目のモデル（はると）についての設定がされています。
'model3'にどのモデルを使うのか、
'motion1'～'motion9'にどのモーションを登録するのか、
というのをここで指定しています。

1体目のモデル（こはる）についての記述を、自作のモデルに書き換えていきます。

84行目
'model3', "assets/Koharu/Koharu.model3.json"
の部分を、自作モデルのmodel3.jsonファイルの場所に書き換えます。
85、86行目
'motion1', "assets/Koharu/Koharu_01.motion3.json"
'motion2', "assets/Koharu/Koharu_02.motion3.json"
の部分を、自作のmotion3.jsonファイルの場所に書き換えます。
motion1がクリックモーション、motion2が待機モーションになるので間違えないように。
motion3～9は今回使わないのでコメントアウトしておきます。

今回表示するモデルは1体のみなので、2体目のモデルについての記述（100～117行目）は全て無効にします。
118行目も、,p2を無効にして[p1]だけになるようにコメントアウトしておきます。
「/* */」で囲むことで「//」と同様にコメントアウトできます。

これで自作のモデルとモーションがARで表示されるようになったはずです！

4. 実際に表示させてみる

CubismARjsSample-masterフォルダを丸ごとサーバーにアップし、スマホでアップロード先のURLにアクセスすればARモデルが表示されるはずです。
アップするサーバーやホスティングサービスも色々あるようですが（サンプルではGithub Pagesを使っているみたいです）、今回はNetlifyを使ってみます。

参考：
静的サイト（ファイル）のホスティングサービス、3つの目的別に7つ紹介

「Get started for free」をクリックし、メールアドレスとパスワードを登録・認証してサインアップ完了。

トップページの点線枠部分にCubismARjsSample-masterフォルダを丸ごとドラッグ＆ドロップすればアップロード完了です。あっという間！

URLは自動で生成されますが、Site settings > Change site name からURLやサイト名は好きなように変更できます。
更新する場合は、上部メニューの Deploys から、先程と同様に点線枠部分にドラッグ＆ドロップでアップロードし直すことができます。

ARマーカーは、assetsフォルダ内のlogo_marker.pngがそれにあたるので、印刷するか何かで表示します。

アップロード先URLにアクセスし、ARマーカーを読み取ると、無事に表示させることができました！

……が、今回はマーカーに対してモデルを立たせる形で表示したい。
それにマーカーに対してモデルの位置がずれているし、大きさも調整する必要がありそうです。

位置や大きさなど微調整を繰り返しながら確認する場合、その都度いちいちサーバーにアップし直してスマホでアクセスするのは結構面倒です。
サーバーを介さずにPCだけで確認できると便利なので「Web Server for Chrome」を導入してみます。
※ウェブカメラが必要なので、安いのでいいから買っときましょう。

1. Google Chrome に Web Server for Chrome アドオンを追加します
2. Web Server for Chrome を実行し、CHOOSE FOLDER ボタンでCubismARjsSample のあるフォルダを選択します
3. ブラウザから http://127.0.0.1:8887/CubismARjsSample/ にアクセスします
4. カメラでマーカーを映すとモデルが表示されます

ファイルを書き換えて保存→ページを更新という簡単な手順で、PC上だけで即座にARを確認することができます。

5. 表示するモデルの位置や大きさなどを変更する

再び、jsフォルダ内の「pixiAframeAR.js」ファイルをテキストエディタで開きます。

10行目に「//マーカーに対しての直立フラグ」とあります。
この直下の11行目にある
「var stand_mode = false;」を「var stand_mode = true;」
に書き換えると、モデルがマーカーに対して垂直に表示されます。

次に、138行目あたりから、モデルを張り付けている平面（a-plane）についての記述があります。

142、143行目がサイズについての指定なので、
('height', '5')　→　('height', '7')
('width', '5')　→　('width', '7')
という感じに書き換え、サイズを大きくしてみます。
145行目がマーカーに対するモデルの位置についての記述なので、
('position', '0 0 0')　→　('position', '1.4 2.5 0')
と書き換えます。
（実際に表示させて確認しながら調整しましょう）

いい感じに調整できました。

6. 自作のマーカーを使う

Live2Dのロゴをそのまま使うのもアレだし、せっかくだからARマーカーも自作しようと思います。

1. AR.js Marker Training を開きます
2. UPLOAD ボタンを押し、マーカーにしたい画像を選択します
3. DOWNLOAD ボタンを押し、patt ファイルを assets フォルダに保存します
4. html ファイルの a-marker タグにある url を patt ファイルのパスに変更します
5. 画面中央に表示されている黒枠に囲まれた画像がマーカーとして使えるようになります

今回はウサギさんのマークを作ってみました。
（実際のARポストカードではモノクロでしたが、カラー画像でも大丈夫みたいです）

AR.js Marker Training を開き、左上の「UPLOAD」からpng画像をアップロード。
自作画像を使ったマーカーが表示されます。

「DOWNLOAD MARKER」を押し、pattファイルをassetsフォルダ内に保存します。
（assetsフォルダに元々入ってるpattファイルと区別するため、適当に名前を変えておきます）

「DOWNLOAD IMAGE」を押し、マーカーの画像ファイルもダウンロードしておきます。（これがARマーカーになります）

次に、CubismARjsSample-masterフォルダ内のindex.htmlをテキストエディタで開きます。

16行目の 'assets/logo_marker.patt' を先ほどダウンロードしたpattファイルに書き換えます。

保存して再度サーバーにアップロードし直せば、自作のマーカーでARを表示させることができます。

7. QRコードを作成する

サイトにアクセスするためにURLを打ち込むのは面倒なので、QRコードを作成します。

「QRコード　作成」なんかでググれば、無料でQRコードが作れるサイトがいろいろ出てきますが、今回はこちらを使ってみます。

URLを入力するだけで簡単にQRコードが作成できました。

8. 印刷する

あとは作成したARマーカーとQRコードを印刷すれば、ARポストカードの完成です！

※印刷所に入稿する前に、必ず自宅のプリンターやコンビニプリントで印刷し、正しく動くか確認しておきましょう。

おわりに

なるべく詳しくわかりやすく解説しようと努めましたが、その分長くなってしまいすみません……。
プログラムやコードの知識がないと意味不明な文字の羅列に心が折れてしまいそうですが、元々かなりわかりやすく作られているので、書き換える部分だけ把握すれば案外すんなり自作モデルでARがつくれる気がします。
是非チャレンジして、同人活動などに役立てていただければと思います。

ちなみに僕の作ったARポストカードはこちらで販売中です。
ウサミンARポストカード
ウサミンARポストカード　印刷用データ
この記事が少しでも役に立った！と思ったら、投げ銭代わりにポチっと購入していただくと、とっても喜びますので……。
何卒よろしくお願いいたします……！