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

enchangummy

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

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

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

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


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

たっぷ

自分も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との違いに戸惑いましたが (^^;;

enchangummy

ありがとうございます！