【各最新OSの対応状況について】
現在、Cubism Editor及びCubism SDKはWindows 11 及び macOS Monterey には対応しておりません。
今後のアップデートにて順次対応予定ですので対応までお待ち下さい。

【Mac各機種への対応状況について】
現在、Cubism EditorはApple M1チップ搭載機種には対応しておりません。
詳細は 動作環境 をご参照ください。
関連するお問い合わせへの対応はこの文章をもって代えさせていただきます。
Cubism 製品のマニュアル・チュートリアルはこちら
 
Cubism Editorマニュアル    Cubism Editorチュートリアル    Cubism SDKマニュアル    Cubism SDKチュートリアル

【JavaScript】リップシンク、もしくはもどきを動作させたい

WEB上でSDK3を活用しております。

リアルタイムに取得する音源を素に
リップシンク(もどきでも可)を実現したく、以下2つどちらでもかまいませんので方法を探しております。

1.動的に”口の開閉”パラメータだけを操作する
2.リップシンク機能を使う

1に関しては、SDK v2のときに「live2DModel#setParamFloat() メソッド」を活用して実現しておりました。
2はよくわかりません。。。


初歩的な質問で申し訳ないですが、ご教授頂けると幸いです。
もしくはサンプルやドキュメントの場所を教えていただけるだけでも嬉しいです。

コメント

  • 自分もSDK3を触り始めたばかりで、あまりよく解っていないのですが、
    リップシンク用のAnimatorLayerを追加すると良いようです。

    サンプルの"Basic Model"を改造すると下記のような感じになります。
    [js/pixiKoharu.js]
    PIXI.loader
        .add('moc', "../assets/Koharu/Koharu.moc3", { xhrType: PIXI.loaders.Resource.XHR_RESPONSE_TYPE.BUFFER })
        .add('texture', "../assets/Koharu/Koharu.png")
        .add('motion', "../assets/Koharu/Koharu.motion3.json", { xhrType: PIXI.loaders.Resource.XHR_RESPONSE_TYPE.JSON })
        .add('empty', "../assets/Koharu/empty.motion3.json", { xhrType: PIXI.loaders.Resource.XHR_RESPONSE_TYPE.JSON })  ★ 空のmotion3.jsonを追加 ★
        
                             <略>
        
        var model = new LIVE2DCUBISMPIXI.ModelBuilder()
            .setMoc(moc)
            .setTimeScale(1)
            .addTexture(0, resources['texture'].texture)
            .addAnimatorLayer("base", LIVE2DCUBISMFRAMEWORK.BuiltinAnimationBlenders.OVERRIDE, 1)
            .addAnimatorLayer("lipsync", LIVE2DCUBISMFRAMEWORK.BuiltinAnimationBlenders.OVERRIDE, 1)  ★ lipsync用のAnimatorLayerを追加 ★
            .build();
        
                             <略>
        
        ★ lipsyncのAnimationを追加 ★
        var lipsync = LIVE2DCUBISMFRAMEWORK.Animation.fromMotion3Json(resources['empty'].data);
        lipsync.evaluate = function(time, weight, blend, target) {
            var p = target.parameters.ids.indexOf("PARAM_MOUTH_OPEN_Y");
            if (p >= 0) {
                var sample = (Math.sin(time*9.543)+1 + Math.sin(time*13.831))/2;  ★ lipsync処理(ダミー) ★
                target.parameters.values[p] = blend(target.parameters.values[p], sample, weight);
            }
        }
        model.animator.getLayer("lipsync").play(lipsync);
        
                             <略>
    
    [assets/Koharu/empty.motion3.json]    ★ 新規追加 ★
    {
    	"Version": 3,
    	"Meta": {
    		"Duration": 1.000,
    		"Fps": 30.0,
    		"Loop": false,
    		"CurveCount": 0,
    		"TotalSegmentCount": 0,
    		"TotalPointCount": 0
    	},
    	"Curves": [
    	]
    }
    
    参考にファイルを添付します。

    SDK2より抽象度が増したと言うか、洗練された感じですね~。最初はSDK2との違いに戸惑いましたが (^^;;
  • ありがとうございます!
コメントするにはサインインまたは登録して下さい。