Live2DモデルをWebで動かしたいが、モデルが動かない

Cubism SDK トラブル報告
1

【Cubism Editorのバージョン】Cubism Editor 5.0
【OS名・バージョン】Windows10
【機種名】 GALLERIA XA7C-R36T 第12世代Core搭載
【CPU】Core i7-12700
【グラフィックボード】GeForce RTX 3060 Ti
【メモリ】16GB
【ご利用中のモニターの台数】モニター2台
【不具合の状況】
こちらの記事(https://www.wantedly.com/companies/www-vivion-co/post_articles/394534)を参考に自前のLive2DモデルをWebで実装しましたが、モデルは表示されたものの、モデル自体は動きませんでした。

自前のLive2Dモデルは、FaceRigやCubism Viewerでは問題なく動作してるので、おそらくファイル自体には問題がないと思われます。

開発者の方、または同様の問題が発生したが解決できた方、対処方法を教えていただきたいです。

「いいね！」 1
2

こんにちは。
私も記事の通りに実装してみました。（スクロールへの対処や歯車を消したりする作業はしていません）
特に問題なくモデルは動きますね。
コーディングミスがあるような気がします。

上記記事ではコードを若干改造していますが、改造していない素のSDK for Webではモデルは動きますか？

ググってみたらLive2Dが初心者向けに出している記事があったので、こちらも参考にしてみてはどうでしょうか？

「いいね！」 1
3

obsさん、返信ありがとうございます！

コーディングの書き換えについて、変更点を以下だけにして実験してみました。
・設定ファイル"lappdefine.ts"
→ export const ModelDir: string = [‘test(自前のLive2Dデータフォルダ)’, ‘Mao(付属のサンプルフォルダ)’];

実行結果としては、Maoの方ではすべて正常に動作しているのですが、testに切り替えると立ち絵が表示されてるのみでした。ターミナルの方でも、Live2Dモデルのフォルダに含まれるmodel3/json, moc3, physics3のGETリクエストが全て正常にReturnされていました。

ご提示していただいた記事を参考に再度挑戦してみます！
引き続き同様の事例について詳しい方いればアドバイス宜しくお願いします。

「いいね！」 1
4

実験ありがとうございます！ なるほど、サンプルモデルでは問題なく自作されたモデルでは問題が発生するのですね。うーん、なんでしょう…。

自作されたモデルにはアイドルモーションは設定されていますでしょうか？
Live2Dのサンプルはタッチされない限りはずっとアイドルモーション（待機モーション）を再生し続けるという機能だったと思います。
アイドルモーションが存在しない場合、動かないかもしれません。

5

obsさん、返信ありがとうございます！

2年ほど前に外注で作ったモデルなので、アイドルモーションの有無は分かりませんが、Live2D Cubism Viewerで動作させたときに特にアイドルモーションは無いので恐らく設定されていません。

ただ、タッチするとViewer上ではちゃんと反応するので、Web上で表示した場合も、正常ならタッチしたら動くと予測できます（実際にMaoモデルの方ではタッチも反応する）。

6

Viewerではタッチでモーションが再生されるが、for Webではタッチしても再生されないんですね。アイドルモーションは関係なさそうです。。

なにかモデルのjsonとかに問題があるかもしれませんが、ここにそれを載せるのは難しそうですね。
公式の対応を待つ必要があるかもしれません…
お役に立てずすみません！

「いいね！」 1
7

参考になりそうな記事を頂いただけでかなりありがたいです！
また何か見当がつきましたら教えてください！

「いいね！」 1
8

追記：カテゴリを間違えていたので、Cubism SDKカテゴリでも同様のトピックを立てました。

「いいね！」 1
9

@氷蓮はくろう 様

いつも弊社製品をご愛顧のほど誠にありがとうございます。
Live2D スタッフのTakと申します。

製品のご利用にご不便をおかけし誠に申し訳ございません。
本件につきまして詳細な状況をお伺いさせてください。

  1. エラーログはなにか出力されていますでしょうか？

  2. model3.jsonやmoc3はフォルダ名と一致していますでしょうか？
    例：フォルダ名がabc、ファイル名はabc.model3.json,abc.moc3
    CubismWebSamplesの仕様として、Resourcesフォルダ内にある組み込み用Live2Dモデルはフォルダ名とその中のmodel3.jsonやmoc3のファイル名を合わせる仕様となります。

  1. model3.json をテキストとして開き、中に記載されているそれぞれのファイルパスにファイルはございますか？
    このパスが合っていないと、モデルが読み込まれてもモーションが再生されない等が発生する場合が多いです。
    その場合、Cubism Viewerでモデルを読み込み、model3.jsonを保存し直してください。

以上ご確認ください。
これらの項目を確認して修正してもなお動作しないようでしたらモデルを調査いたしますので、ご連絡いただけると幸いでございます。

どうぞよろしくお願いたします。

「いいね！」 1
10

Takさん、ご返信ありがとうございます。

以下が状況の報告です

  1. エラーログは出力されていません
    → むしろ物理演算ファイルも含めてGETリクエストが成功している

  2. フォルダ・ファイル含めて全て同じ名前に設定しています
    → Live2D ViewerやFaceRigでは正常に動作しているので恐らく間違いありません

  3. model3.jsonの中身です

{
“Version”: 3,
“FileReferences”: {
“Moc”: “test.moc3”,
“Textures”: [
“test.4096/texture_00.png”
],
“Physics”: “test.physics3.json”,
“DisplayInfo”: “test.cdi3.json”
},
“Groups”: [
{
“Target”: “Parameter”,
“Name”: “LipSync”,
“Ids”:
},
{
“Target”: “Parameter”,
“Name”: “EyeBlink”,
“Ids”:
}
]
}

モデルを作成したのが2年前ですので、互換性も含めてモデル自体の調査をしていただけると幸いです。
恐れ入りますが宜しくお願い致します。

11

@氷蓮はくろう 様

お世話になっております。
ご連絡ありがとうございます。

1, 2について承知いたしました。
内容についても問題はないように思います。

3.につきまして内容を確認したところ、model3.jsonにアイドリングモーションやタッチの設定がないように見受けられます。
以下はSDK for Webに付属しておりますMaoのmodel3.jsonの内容となります。

このように、アイドリングモーションなどの設定はCubism EditorまたはViewer上でおこない、mode3.jsonで紐付ける仕様となっております。

つきましては、これらの設定をおこなうことによってアイドリングモーションが正しく動作すると考えられますので、今一度cmo3モデルの設定を確認し、再度書き出した上でViewer上で確認、設定をお願いいたします。

以上、ご確認何卒よろしくお願いいたします。

12

ご回答ありがとうございます。

アイドルモーションやタッチが設定されていない場合でも、クリックドラッグ操作で動いたりはしないのでしょうか？

13

@氷蓮はくろう 様

ドラッグ操作で動く(視線追従のことかと存じます)機能については、Cubism EditorやViewerで設定することはなく、SDKサンプルの仕様としてイベントに登録された関数からドラッグされた位置を取得し、モデルの動き更新時に直接対応したパラメータIDの値を動かすという仕様となっております。

視線追従が動かないということでしたら、以下の2点が考えられます。

  1. this._idParamAngleX など、視線追従に対応するパラメータIDがデフォルトで指定されているものと違う
    例として、Cubism Editorでの顔の向きXのパラメータIDのデフォルトは ParamAngleX としていますが、@氷蓮はくろう 様が利用されているモデルの顔の向きXのパラメータIDがParamAngleXではない 等
  2. デバイスからタッチ座標が取得できていない

モデル起因の問題と考えられるのであれば詳しくお調べいたしますので、以下URLから現象が発生するモデルをお送りいただけますと幸いでございます。

お手数をおかけいたしますが、上記ご確認ください。

「いいね！」 1
14

@Tak 様、お世話になっております。

添付していただいたURLにLive2Dモデルデータとpsdファイルを送付いたしました。恐れ入りますが調査の程、宜しくお願い致します。

15

@氷蓮はくろう 様

お世話になっております。
モデルのアップロードありがとうございます。
内容を確認したところ、パラメータの各IDがPARAM_ANGLE_X等現在のCubism SDKでは使用されていないIDが設定されていることを確認しました。

よって、以下の問題点が当てはまります。

こちらの回避策ですが、2通りございます。

  1. Cubism Editorにてお手持ちのcmo3を読み込み、IDの一括変換をおこなった後moc3を出力してCubism SDK上で利用する
  1. Cubism SDK for Webの以下デフォルトのパラメータIDを定義している部分をお使いののモデルのパラメータIDにあわせて書き換える

お使いのモデルのパラメータIDを確認するにはCubism Editorでcmo3ファイルを開くか、Cubism Viewerでmoc3ファイルを開き、表示されたモデルのパラメータ名をマウスオーバーすることで確認でいますのでぜひご利用ください。

以上、ご確認のほど何卒よろしくお願いいたします。

「いいね！」 1
16

@Tak 様

お世話になっております。バグなどではなく互換性の問題であったので一安心しました。調査していただきありがとうございます。

追加で質問したいのですが、1の方法にある"cmo3"拡張子のファイルを持っていないのですが、これについてはモデルを作成していただいた方に問い合わせなければならないのでしょうか？

度々の質問で恐れ入りますが宜しくお願い致します。

追記：2の方法でパラメータを変更すると修正できました！ただ、オリジナルのパラメータ(デフォルトに存在しないもの)はどう変換すればよいか分かりませんでした。

17

@氷蓮はくろう 様

お世話になっております。

申し訳ございません、moc3ファイル上ではパラメータIDの書き換えはできませんので、大変お手数ではございますがcmo3ファイルを所有している製作者様にお問い合わせください。

オリジナルのパラメータの変換につきましてはどのような扱いかこちらでも分かりかねますため回答が難しいと考えております。こちらもどのような扱いか製作者様にお問い合わせください。
cubismdefaultparameterid では視線追従に使用するデフォルトのパラメータIDのみならず、瞬きや呼吸等で扱うのパラメータIDの定義も含まれていることにご注意いただければと思います。

18

@Tak 様

当初の相談内容については解決したので、以上で切り上げます。
改めて問題解決に尽力して頂き、ありがとうございました！

「いいね！」 1