★お知らせ(2023/12/27)
いつもLive2D公式コミュニティをご利用いただき誠にありがとうございます。
本コミュニティは2023年12月27日 11:00をもって閉鎖いたしました。
今後の運営はすべて新Live2D公式クリエイターズフォーラムに移行します。
閉鎖に伴い、以下機能は利用不可となります。
・アカウントの新規作成
・トピック投稿、返信
たくさんのご利用誠にありがとうございました。

新Live2D公式クリエイターズフォーラムは以下バナーよりご利用いただけます。
Live2D公式クリエイターズフォーラム

なお、本コミュニティに投稿されたトピックはすべて残りますが、今後削除する可能性がございますので予めご了承ください。
閉鎖に関するお問い合わせにつきましてはLive2D公式クリエイターズフォーラムへご連絡ください。

【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との違いに戸惑いましたが (^^;;
  • ありがとうございます!
コメントするにはサインインまたは登録して下さい。