Cubism WebAR お試しガイド
こんにちは。Live2D公式のデザイナーチーム、Live2D Creative Studioです。
折角作ったLive2Dモデル。色んな人に見てもらいたいですよね。
そのきっかけの一つに、ARマーカーを使った名刺やポストカードはいかがですか？
Live2D公式からリリースされている「Cubism WebAR Sample」を使って、スタジオでも実際にモデルを組み込んでみました。
Cubism SDKのサンプルとしてリリースされた「Cubism WebAR Sample」を使って、早速遊んでみました！
— Live2D Creative Studio (@live2dcs) December 18, 2019
スタジオで解説記事を書いてみたので、是非ご覧下さい💡https://t.co/i1wh8A4SZX#Live2D pic.twitter.com/NMnqNuarVm
組み込みデータの知識が無いと、初めはちょっとだけ戸惑いますが……
簡単な手順をまとめてみましたので、是非皆さんトライしてみてくださいね！
動作環境は「Cubism WebAR Sample」のREAD MEで確認できます。
その1 モデルとモーションの準備をしよう！
Live2D Cubism Editorを使ってモデルとモーションを作成します。
モデルやモーションの作り方は、公式サイトのチュートリアルが分かりやすいので、見てみてください！
SDKのバージョンは4.0に設定しておきましょう。
元々SDK3.0～3.3で作成されていた場合は、そのままでも大丈夫です。
タップしたときにモーションが再生されて欲しいので、当たり判定を設定しておきます。
公式マニュアルの当たり判定の項目を見ながら、当たり判定用アートメッシュを作ります……
今回はキャラクター全体を覆うような感じで、簡単な一つの当たり判定を用意しました。
IDを「HitArea〇〇〇」としておくと、自動的に当たり判定として認識してくれます。
テクスチャアトラスの作成もしておきましょう。
テクスチャアトラスの作成マニュアルを見ながら作ります。
テクスチャサイズは大きすぎるとデータの読み込みが遅くなってしまうので、ARマーカーで使う場合は大きくても1024×1024の1枚までに収めるのがオススメ。
髪や衣装など、揺れのパラメータが設定されているモデルなら、
物理演算の設定もおこなっておきましょう！
設定されていなくても問題はないですが、揺れものがあると華やかに見えますよね。
物理演算の設定マニュアルをみながら、テンプレートも使ってささっと設定します。
モデルが準備できたので、次にモーションを準備しましょう。
モーションを作成するとき、ターゲットバージョンはSDK（その他）に設定しておきます。
シーンのインスペクタパレットからでも設定できます。
今回はモーション二つを用意してみました。
ずっと再生され続けるアイドリングモーション「Idle」と、
当たり判定をタップしたときに再生される「Action」です。
名前は自由に付けてOKなので、わかりやすい名前にしちゃいましょう。
但し、日本語や記号等は組み込めなくなってしまうので、使わないように注意です。
ARだと、モーションの切り替わりはちょっと素早いくらいが気持ちいいので、シーンのフェード値は0.5ぐらいにしておくのがオススメ。
フェード値の設定マニュアルを見ながら設定します。
モデルとモーションが準備できたので、組み込みデータを書き出しします！
その２ 組み込みデータの作成をしよう！
デスクトップ等の適当な場所に、キャラクター名のフォルダを作成しておきます。
今回作るキャラクターは「saki」ちゃんです。
この時付ける名前も日本語や記号はNG。半角英数字を使いましょう。
このフォルダに、モデルとモーションの組み込みデータを書き出していきます。
まずはモデルを開いて、[ファイル]メニュー → [組込み用ファイル書き出し] → [moc3ファイル書き出し]から、moc3を書き出しましょう。
「ユーザーデータファイル」や「表示補助ファイル」は、今回のARでは必要ないので、チェックを外しておきます。
書き出しバージョンや書き出しターゲット（テクスチャアトラスのサイズ）がモデルと同じになっているかを確認して、問題なければOK！
キャラクター名（先に作ったフォルダと同じ名前）をつけて保存しましょう。
フォルダの中身は以下のようになりました。
次に、モーションを書き出しましょう。
アニメーションを開いた状態で、[ファイル]メニュー → [組込み用ファイル書き出し] → [モーションファイル書き出し]を行うと、モーションの書き出しができます。
モーションは同じフォルダの中に書き出すか、さらにフォルダを作成してその中に入れておきましょう。
書き出したデータをCubism Viewer（for OW）で開いて、モーションの設定をします。
Cubism Viewer（for OW）はCubism Editorと同梱されています。
Cubism Viewer（for OW）を起動して、モデル名.model3.jsonをドラッグアンドドロップして開きます。
モデルが開いたら、モーションデータもドラッグアンドドロップしましょう。
モーションにそれぞれグループ名を指定します。
Viewerのメニューで「motions」フォルダを開いて、まずはずっと再生され続けて欲しいアイドリングモーションをクリック、グループ名の欄に「Idle」と入力。
アイドリングモーション以外のグループ名は自由なので、分かりやすいグループ名を付けちゃいましょう。
全てのモーションにグループ名を付けたら、「Ctrl+S」で保存！（Macでは「Command+S」）
「モデル名.model3.json」に上書きしてしまいましょう。別の名前を付けないようにしてくださいね。
これでモデルとモーションの下準備は完了です！
その３ 自作のマーカーを用意しよう！
先に、自作のマーカーも用意しておきましょう。
サイズは適当で大丈夫ですが、小さすぎない500×500くらいにしておきましょう。
マーカーは、複雑すぎない、形状がはっきりと見やすいものがオススメです。画像が何もない1色の塗りつぶしや、向きが分からない画像（〇や正方形など）は、正しく認識されにくいので避けましょう。
今回はこんなマーカーを用意しました。
これを「AR.js Marker Training 」でマーカーに加工します。
AR.js Marker Training にアクセスして、「UPLOAD」ボタンから画像をアップ。「Pattern Ratio」の値は0.9に設定します。
「DOWNLOAD MARKER」と「DOWNLOAD IMAGE」ボタンをそれぞれクリックして、パターンファイル (.patt)とPNG画像をダウンロードします。
.pattデータをモデルの入っているフォルダに入れて、モデル名と同じ名前に変更しておきます。
.pngデータも同じところに入れておくとわかりやすいです。
これでマーカーの準備ができました！
初めに用意した、黒い縁取りの無いマーカー画像は削除してしまっても大丈夫です。
その４ ARを動かすためのサーバを準備しよう！
では、サーバの用意をしましょう。
「Cubism WebAR Sample」のクイックスタートによると……
本アプリケーションを公開する際は https 接続でアクセスできる必要があります。GitHub Pages や Netlify といった静的サイトのホスティングサービスを利用すると簡単に https 接続で公開ができます。
とのことなので、今回は「Netlify」を利用してみましょう。
「Netlify」にアクセスして、「Get started for free」から、Emailなどを登録してサインアップしておきます。
パスワードはシンプルだとはじかれてしまうので注意。
こんな感じの画面が開いたら準備完了です。
慣れないと疲れてきますが……いよいよARを表示していきます！
その５ ARの設定をするためのプロジェクト「CubismWebARSample-〇〇〇.zip」をDLしよう！
ARのプログラム等が入ったプロジェクトをDLしましょう！
「CubismWebARSample-〇〇〇.zip」の〇〇〇のところはバージョン等によって変わるようです。
「CubismWebARSample」のDLページにアクセスして、最新バージョンの「Source code (zip)」をクリックすると、ダウンロードが始まります。
zipファイルがダウンロードされるので、デスクトップ等に解凍しましょう。
色々データが入っていますね。
後ほどこの中身を差し替えたり、編集して行きます。
その６ ARプロジェクトの準備をしよう！
では！プロジェクトの下準備をしていきましょう！
まずは、「scripts」フォルダに入り、「windows」フォルダ内の「install.dat」をダブルクリックして実行します。
（Macの場合はターミナルを開いて、「macos」フォルダ内の「install.sh」をドラッグアンドドロップして `chmod 755` と入力してエンターキーを押し、再度ドラッグアンドドロップしてエンターキーを押して実行します。詳細はクイックスタートの「macOS でスクリプトを実行する手順」をご覧ください。）
Windowsでは以下のような警告が出ることがありますので、その場合は「詳細情報」をクリックしてから「実行」を行います。
警告の見た目や文面は環境によって変わるので、表示内容が画像と違う場合もあります。その場合も手順は同じです。
実行すると、コマンドプロンプトが開くので、しばらく待ちます……
必要なファイルのダウンロードが行われます。
「# Script completes successfully」と表示されたら、適当なキーを押しましょう。
コマンドプロンプトが閉じたら完了です。
まずはきちんとARが動くか、サンプルで試してみたいと思います。
サーバにアップするために、データのビルドを行っていきます。
同じフォルダ内にある「build.bat」（Mac の場合は「build.sh」）を実行します。
コマンドプロンプトが開くので、しばらく待ちます。
先ほどと同じくwindowsの警告が表示されたときは、「詳細」から「実行」を行ってください。
↑画像のような状態で動きが止まったら、適当なキーを押すか、×ボタンを押して、コマンドプロンプトが閉じたら完了です。
フォルダの一番上に戻ってみると、いくつかのデータが増えていますね。
「dist」というフォルダが増えていれば、うまくビルドができた証拠です。
必要なデータをサーバにアップロードしましょう。
用意しておいたNetlifyにドラッグアンドドロップします。
以下の4つのデータを別のフォルダにまとめてアップすればOKです。
・「assets」フォルダ
・「dist」フォルダ
・「lib」フォルダ
・「index.html」
よくわからなければ「CubismWebARSample-〇〇〇」フォルダを丸ごとアップロードしてしまいましょう！
点線枠の中に「Uploading...」と表示されれば、アップロード中なので、しばらく待ちましょう。
きちんとデータがアップされると、URLが作成されます。
このアドレスに、スマートフォン等の端末からアクセスしてみましょう。
ちなみに、このアドレスは「Settings」メニューの「Change Site name」から変更できるようです。
カメラへのアクセスを求められるので「許可」をします。
カメラが起動するので、↓のLive2Dロゴマーカーの全体が見えるように映してみましょう。
光の反射や、マーカーを映す角度にも気をつけます。うまく行かないときは紙に印刷すると認識されやすいです。
回線が重い場合もなかなか表示されないので、その時はしばらく待ちます……
サンプルのモデルが表示されました！
タップすると魔法を放ちます。バッチリですね。
モデルがきちんと表示されないときは、ページの更新をしてみてください。
これを自作のモデルに差し替えて行きましょう！
その７ 自作のモデルを入れてみよう！
では早速、自作のモデルのデータを入れてみましょう。
「assets」フォルダ内の「models」フォルダを開きます。
すると、サンプルモデルの「Rice」が入っているのが確認できますね。
ここに、初めに用意したモデルのフォルダを丸ごと入れます。
サンプルの「Rice」は消しても残しても大丈夫です。
次に、モデル設定ファイルの編集をします。
「models」フォルダ内の「models.toml」ファイルを、メモ帳などのソフトで開きます。
[[models]]
name = "Rice"
scale = 4
[models.canvasOffset]
x = -0.23
[models.position]
y = -0.35
[models.hitInfo]
Body = "TapBody"
という内容が書かれているので、一旦全て消してしまいましょう。
「Cubism WebAR Sample」のクイックスタートに「モデル設定記述テンプレート」が用意されているので、まずはこれを丸ごとコピペします。
[[models]]
# モデル名
name = "モデル名"
# ビルボーディング表示設定
billboarding = false
# 非モーション再生時の呼吸動作設定
enablebreathing = true
# AR 空間上のモデルの拡大率
scale = 1
# AR 空間上のモデルの表示位置
[models.position]
x = 0 # 左右位置
y = 0 # 上下位置
z = 0 # 前後位置
# AR 空間上のモデルの表示角度調整
[models.rotation]
x = 0 # X軸回転
y = 0 # Y軸回転
z = 0 # Z軸回転
# AR 空間上のモデルのオフセット
[models.canvasOffset]
x = 0
y = 0
# モデルの当たり判定とモーショングループの紐付け
[models.hitInfo]
# 当たり判定ID = "モーショングループ名"
# 全体の設定
[global]
# マーカーARモードとツーショットARモードの切替の許可設定
allowModeSwitch = true
# 起動時のモード設定
startupMode = 0
「name = "モデル名"」のところを、アップしたモデル名に書き換えましょう。今回は「name = “saki”」に書き換えます。
書き換えたら「models.toml」を上書き保存してしまいましょう。
ここで一旦、きちんと自作のマーカーでモデルが表示出来るかを確認したいと思います！
「ウェブカメラを持っている」か、「作業するPCと、スマートフォン等の端末が同じネットワークに接続できる」場合、簡易サーバを使ってブラウザ上で表示の確認ができます。
簡易サーバを使えば、ネットのサーバにデータをアップすること無く、モデルの表示のされ方を確認できて便利です！
簡易サーバの使い方はページの最後に記載してありますので、一旦スキップして確認してみてください。
ウェブカメラが無かったり、PCとスマートフォンが同じネットワークに接続できない環境の場合、サーバー（今回はNetlify）に更新したデータをアップして確認していきましょう。
Netfilyの「Deploys」メニューで、更新したデータを再度ドラッグアンドドロップします。
Uploading...と表示されるので、しばらく待って……
この画面が表示されて、画面少し下の「Production deploys」の一番上のProductionに青く「Published」と表示されれば更新完了です！
アドレスは最初と同じなので、もう一度スマートフォンでアクセスして、確認してみましょう。
最初に作った自作のマーカーを映すと…
モデルが表示されました！
ちゃんと設定したアイドリングモーションも再生されています。
このとき、最初にアクセスしたカメラの画面を表示したままにしていた場合は、必ずページの更新を行ってください。
それでもモデルが映らない時は、ブラウザのキャッシュが残っている可能性もあります。キャッシュの削除も試してみてください！
モデルは映りましたが、まだタップしても何の反応もありません…
マーカーに対して、キャラクターのサイズも随分小さいですね。
では、表示サイズやモーションの設定をしていきましょう。
その８ モデルの表示位置やモーション再生の設定をしよう！
再度「model.toml」を編集します。
先ほどモデル名だけを変更した「モデル設定記述テンプレート」が入力されているので、項目ごとに編集していきましょう。
まず、「ビルボーディング表示設定」を確認します。
「false」を「true」に書き換えると、モデルが常にカメラに対して正面に表示されるようになります。
今回はキャラクターがマーカーの上に立っている感じにしたいので、「false」のままにしておきました。
true …… 常にカメラに対して正面に表示される
false …… キャラクターがマーカーの上に立っている感じ
次に、モーションを再生していないときに呼吸用のパラメータを動かすかどうかは、「非モーション再生時の呼吸動作設定」を変更します。「true」は呼吸をするようになり、「false」で呼吸の動きをしなくなります。
呼吸はさせてあげたいので、「true」のままにします。
モデルのサイズを大きくしたいので、「AR空間上のモデルの拡大率」を変更します。デフォルトは「scale = 1」となっていますね。
大きく表示したいので、「scale = 3」くらいにしてみます。
モデルの表示される位置や角度を変更したい時は、「AR空間上のモデルの表示位置」や「AR空間上のモデルの表示角度調整」を編集します。
表示位置については、同じ数値でも、モデルの表示サイズ（scale）の値が大きいほど移動量が大きくなるので、まずはモデルの表示サイズを決めてから位置を調整するようにしましょう！
これは実際の見た目を細かく確認しながら調整したいところなので、一旦このままにしておきましょう。
そうしたら、タップしたときにモーションが再生されるようにしましょう。
モデルで設定した「当たり判定のID」と、
Cubism Viewer（for OW）で設定した「モーションのグループ名」
をそれぞれ「当たり判定ID = "モーショングループ名"」にあてはめて記入します。
今回のモデルで用意している当たり判定のIDとグループ名をあてはめると
「HitAreaBody = "Tap"」
となるので、これを項目の一番下に追加します。
追加する行には、先頭の「#」は付けないようにしましょう！
記入ができたら、しっかり上書き保存をします。
念のため、書き方に間違いが無いかをチェックしましょう。
「TOML-lint」を使うと、タグに入力の間違いが無いかを確認できるので便利です。
メモ帳の中身をコピペして「Validate」をクリックすると、タグの文法に間違いが無いかをチェックしてくれます。
画像の例では「""」のつけ忘れがありますね……
もし間違いがあれば修正して、もう一度メモ帳にコピペしなおして上書き保存しておきましょう！
「models.toml」を上書き保存したら、「その７ 自作のモデルを入れてみよう！」の後半と同じ手順で、Netfilyの「Deploys」メニューから、更新したデータをアップロードします。
更新が完了したら、早速アクセスしてカメラにマーカーを映してみます！
どきどき………
できました！
タップするとActionモーションが再生されます。やったね！
あとは、このカメラのアドレスとマーカーを色んな人に教えて、どんどん見てもらいましょう。URLをQRコードにすれば、マーカーと一緒に名刺やポストカードに印刷できますね！マーカー自体をQRコードにしちゃうのも大丈夫なので、いろいろな見せ方ができそうです。
他にも、複数のモデルやマーカーを用意して同じ画面に表示したり、当たり判定を複数箇所に設定したり、複数のモーションをランダム再生させたりすることもできます。
方法は「Cubism WebAR Sample」のクイックスタートに記載がありますので、慣れてきたら色々チャレンジしてみてください！
ex チェック用の簡易サーバを用意してみよう！
「ウェブカメラを持っている」か、「作業するPCと、スマートフォン等の端末が同じネットワークに接続できる」場合、サーバへのアップをしなくても手軽に確認が出来る簡易サーバのブラウザを活用できます。
微調整の度にサーバにデータをアップするのは大変なので……使える環境の方は、是非使ってみてください！
「scripts」フォルダ内の「windows」→「start.dat」をダブルクリックして実行します。
（Macの場合はターミナルを開いて、「macos」→「start.sh」をドラッグアンドドロップ、エンターキーを押して実行します）
windowsの場合は警告が表示されることがあるので、「詳細」から「実行」しましょう。
すると、コマンドプロンプトが展開します。
このコマンドプロンプトは簡易サーバを立ち上げている間は開いたままにしておきましょう。
しばらく待つと、ブラウザに新規タブが展開されます。
この時、ブラウザに警告画面が表示される場合がありますので、「詳細設定」からアクセスをしましょう。
ブラウザによって、警告画面の見た目や文面は違う可能性がありますが、手順は大体同じです。（画像はGoogle Chromeのものです）
アクセスすると、ウェブカメラが繋がっている場合はウェブカメラの使用を確認され、許可するとカメラの画面が表示されます。
ウェブカメラが無い場合は、スマートフォン等の端末から簡易サーバのブラウザのアドレスへアクセスすることで、端末のカメラを使って確認することができます。
この時、作業しているPCと端末が同じネットワークに繋がっているかを確認してくださいね。
また、セキュリティソフトのファイアーウォールが動いている場合は一時的に無効にする必要があるので、合わせてチェックしておきましょう。
うまく動かない時は、簡易サーバの立ち上げからやり直してみてください。
ブラウザに起動しているカメラにマーカーを映せば、ネットのサーバーにアクセスして確認したときと同じ見え方で確認することができます。
フォルダの中身を書き換えると、勝手にブラウザが更新されてくれます。
いちいちデータをサーバにアップしなくてもよいので、便利ですね！
Live2D Creative StudioのTwitterでは、Cubism WebARの他にも、Live2Dを使った作品の投稿を行っています。
YouTubeチャンネルでも、Live2Dで作成した映像作品を投稿していますので、こちらもよかったらチャンネル登録してくださいね！