ようこそ!

初めてですか? 参加するには、どちらかのボタンをクリックしてください!

【Live2D Creators Circleのご案内】
Live2Dでは現在、業務をお手伝いしていただけるユーザーの方々を募集しています。
もし、ご興味がありましたら下記URLより詳細をご確認ください。
https://goo.gl/0oBmkq

【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との違いに戸惑いましたが (^^;;
Sign In or Register to comment.