サービス

技能：エンジニア

技能：デザイナー

技能：ビジネス職

技能：バックオフィス

ジャンル

<h2>はじめに</h2>

<p>DMMグループAdvent Calendar 2023 の12日目を担当する井内 (<a data-sk="tooltip_parent" data-stringify-link="http://twitter.com/pengin_engineer" delay="150" href="http://twitter.com/pengin_engineer" rel="noopener noreferrer" target="_blank">@pengin_engineer</a>) です。<br />
私は今年の4月に23新卒としてDMMグループへ入社し、現在はライブコミュニケーション開発部で Webフロントエンド開発をしています。<br />
本記事では業務で携わっているライブコミュニケーションサービスの、Live2D制御にまつわる話をしようと思います。</p>

<h2>Live2D制御とフロントエンド</h2>

<p>多くの人が「Live2Dの制御」と聞くと、Unityを思い浮かべるかもしれません。しかし、「Live2D&reg;」ではWebGLを用いた「<a data-sk="tooltip_parent" data-stringify-link="https://www.live2d.com/sdk/download/web/" delay="150" href="https://www.live2d.com/sdk/download/web/" rel="noopener noreferrer" target="_blank">Live2D Cubism SDK for Web</a>」も提供しています。このSDKはTypeScriptで書かれており、フロントエンドエンジニアにとって学習しやすく、制御も効率的です。開発中のバーチャル配信サービスはブラウザベースで動作することを想定しており、Web環境に特化したこのSDKを使用することで、開発が効率的に進められます。<br />
Live2Dの公式YouTubeチャンネルでは、<a href="http://youtu.be/tQdkFvw7X-E?si=b4rqrpmdm8SFbqsN" target="_blank">Web SDKの導入方法を解説したワークショップ動画</a>が公開されており、簡単にWeb上でLive2Dを操作ができるようになります。</p>

<h2>キャラクターを制御する３つの概念</h2>

<p>我々が開発するライブコミュニケーションサービスでは、以下の画像のようなキャラクターをLive2D技術を用いて配信者がコントロールし、視聴者に映像を届けます。</p>

<p style="text-align:center"><img alt="Live2Dキャラクターの全身イラスト" height="600" src="https://image.dmm-corp.com/582hcnmyp7922fr8estfow139jur" width="337" /></p>

<p>その際、Live2Dキャラクターは</p>

<ul>
	<li>FaceTracking</li>
	<li>Expression制御</li>
	<li>Motion制御</li>
</ul>

<p>の3つの手法を用いて制御され、これらを組み合わせて使うことによって豊かな表現を実現しています。</p>

<h3>FaceTracking</h3>

<p>FaceTrackingでは、トラッキングシステムにより取得した配信者の顔パーツの座標を元に、Live2Dを制御するパラメータ値を計算します。<br />
例えば、顔の角度を制御する場合、</p>

<ul>
	<li>ロール（Roll）</li>
	<li>ピッチ（Pitch）</li>
	<li>ヨー（Yaw）</li>
</ul>

<p>という3つの回転軸の角度をそれぞれ計算し、Live2Dパラメータ値とします。</p>

<h4>ロール制御</h4>

<p>ロール制御を行う際には、頭の頂点と顎の点を結ぶベクトルを作成します。このベクトルと垂直方向のベクトルとの間で形成される角度を計測し、キャラクターの頭部の左右の傾き、すなわちロール角を推定します。</p>

<div style="text-align:center">
<figure class="image" style="display:inline-block"><img alt="" height="450" src="https://image.dmm-corp.com/y577npebtbua25h4qpgzvmyhh87o" width="800" />
<figcaption>ロール制御の概要図</figcaption>
</figure>
</div>

<h4>ピッチ制御</h4>

<p>ピッチ制御を行うには、まず頭の頂点から鼻の先端、そして鼻の先端から顎までの2点間の距離を測定します。これらの2つの距離の比から、キャラクターの頭部の前後の傾き、つまりピッチ角を推定します。</p>

<div style="text-align:center">
<figure class="image" style="display:inline-block"><img alt="" height="450" src="https://image.dmm-corp.com/afbe0oxeilz34aefbxa8fn381y1s" width="800" />
<figcaption>ピッチ制御の概要図</figcaption>
</figure>
</div>

<h4>ヨー制御</h4>

<p>最後にヨー制御を行う際には、まず顔の左端から顔の中心、そして顔の中心から右端までの距離を計測します。これら2つの距離の比率から、キャラクターの顔の左右への回転、すなわちヨー角を推定します。</p>

<div style="text-align:center">
<figure class="image" style="display:inline-block"><img alt="" height="450" src="https://image.dmm-corp.com/e65790gzdxfzxgxacozypylwhzjs" width="800" />
<figcaption>ヨー制御の概要図</figcaption>
</figure>
</div>

<p>このように、FaceTrackingよって取得した顔パーツの座標を用いてLive2Dパラメータを計算し、リアルタイムにLive2Dキャラクターを動かすことがきます。</p>

<h3>Expression制御</h3>

<p>Expressionとは、現在のLive2Dパラメータ値に対して表情用のパラメータ値を設定する制御です。Expressionを用いることで、以下のようにキャラクターの表情を簡単に変更できます。</p>

<div style="text-align:center">
<figure class="image" style="display:inline-block"><img alt="" height="300" src="https://image.dmm-corp.com/htcobil7nwgfetir3ra7ebinz9pg" width="533" />
<figcaption>笑顔の表情・困った表情</figcaption>
</figure>
</div>

<p>このExpressionは<strong>.exp3.json</strong>というファイルによって定義されます。.exp3.jsonファイルは、Live2Dモデルの表情（エクスプレッション）を制御するための設定ファイルであり、どのパラメーターへ、どんな値を、どのように設定するのかを定義します。<br />
以下は.exp3.jsonのサンプルデータです。このサンプルでは、EyeROpen、EyeLOpen、MouthOpenという3つのパラメーターに対し、0という値を、Overwrite(上書き)しています。</p>

<pre>
<code class="language-json">{
    "Type": "Live2D Expression",
    "Parameters": [
        {
            "Id": "EyeROpen",
            "Value": 0,
            "Blend": "Overwrite"
        },
        {
            "Id": "EyeLOpen",
            "Value": 0,
            "Blend": "Overwrite"
        },
        {
            "Id": "MouthOpen",
            "Value": 0,
            "Blend": "Overwrite"
        }
    ]
}
</code></pre>

<p>このサンプルファイルをLive2Dモデルへ適応した場合、左右の目と口の値が0になる、つまり閉じるように上書きされることが予想されます。BlendにはOverwriteの他にも</p>

<ul>
	<li>Add（現在のパラメータ値へ値を加算する）</li>
	<li>Multiply（現在のパラメータ値へ値を乗算する）</li>
</ul>

<p>という設定があります。詳しくは<a href="https://docs.live2d.com/cubism-sdk-manual/expression/" target="_blank">Live2D SDK マニュアル 表情モーションについて</a>を読んでみてください。<br />
このように.exp3.jsonファイルはとてもシンプルな構成となっており、Live2Dに明るくないエンジニアでも、簡単に編集・修正することが可能となっています。</p>

<h3>Motion制御</h3>

<p>Motionは言葉の通りキャラクターの動き（モーション）を制御します。以下の画像のように、キャラクターが手を振ったり、手を叩いたりするモーションを、<strong>.motion3.json</strong>というファイルで設定します。</p>

<div style="text-align:center">
<figure class="image" style="display:inline-block"><img alt="" height="450" src="https://image.dmm-corp.com/yll347rnuk71hhf2rsm0npckptwf" width="800" />
<figcaption>MotionによるLive2Dの動き</figcaption>
</figure>
</div>

<p>MotionはExpressionの親のような概念であり、.motion3.jsonファイルを元に.exp3.jsonが作成されます。つまり、.exp3.jsonを利用せず、表情も.motion3.jsonによって動かすことが可能です。motion3.jsonは以下のような形式で書かれています(いくつかの要素は省略しています)。</p>

<pre>
<code class="language-json">{
    "Version": 3,
    "Meta": {
        "Duration": 3.5,
        "Fps": 30.0,
        "Loop": true,
        "CurveCount": 2,
        "etc.":
    },
    "Curves": [
        {
            "Target": "Parameter",
            "Id": "HandType",
            "Segments": [0, 0, 0, 5, 1]
        },
        {
            "Target": "Parameter",
            "Id": "ArmType",
            "Segments": [
                0,
                0,
                1,
                0.166,
                0,
                0.333,
                1,
                0.5,
                1,
                1,
                0.833,
                1,
                1.166,
                1,
                1.5,
                1,
                1,
                1.756,
                1,
                2.000,
                0,
                2.266,
                0,
            ]
        }
    ]
}
</code></pre>

<p>.exp3.jsonよりも複雑な構成となっており、パッと見ただけでは以下の3点ほどしか分かりません。</p>

<ul>
	<li>Metaで初期設定をしている</li>
	<li>idによってパーツ指定をしてる(サンプルの場合HandType、ArmType)</li>
	<li>Segmentsで値を更新をしている</li>
</ul>

<p>ただ、肝心のSegmentsの中身も、どれが時間でどれが値なのかを読み取ることができず、このJSONファイルを見ただけでは意図した通りにモーションを修正することは困難です。何故ここまで読み取りづらいかというと、MotionはExpressionに無い「時間」「モーション方法」という概念がある為です。</p>

<p>Expressionは単に現在の値を別の値に変える機能です。一方で、Motionは現在の値を特定の<strong>時間</strong>と<strong>方法</strong>で変更し、このプロセスを<strong>繰り返し</strong>ます。「モーション方法」には、直線的な遷移をする「リニア」や滑らかな曲線的な遷移をする「ベジェ曲線」が含まれます。リニアでは次の値を1つ設定するだけですが、ベジェ曲線では、その性質上、右ハンドルや左ハンドルのような追加の値が必要です。そのため.motion3.jsonのSegmentsでは、モーションの種類によって必要なパラメータの数が異なります。このように.motion3.jsonは値の意味が分かりにくく複雑であるため、直接編集するのでは無く、<a href="https://www.live2d.com/cubism/download/editor/" target="_blank">Live2D&nbsp;Cubism Editor</a>というLive2Dの専用ソフトを使用することが一般的です。<br />
先ほど「.exp3.jsonを利用せず、表情も.motion3.jsonによって動かすことが可能」と書きましたが、.motion3.jsonの修正はこのように手間がかかります。簡単な表情の変更であれば、シンプルな構成である.exp3.jsonを用いることで、エンジニアでも簡単に編集でき、効率よく開発できます。</p>

<h2>3種の制御の組み合わせ・優先順位</h2>

<p>このように、Live2Dキャラクターの操作にはFaceTracking、Expression制御、Motion制御の3つの手法が用いられます。これらは同時に実行され得るため、優先順位の設定が重要です。私たちのサービスでは、優先順位をFaceTracking &lt; Expression &lt; Motionの順に設定しています。これは、ExpressionやMotionによる設定がFaceTrackingの設定を上書きすることを意味します。</p>

<p>私たちのサービスでは、個性豊かな複数のLive2Dキャラクターを提供しており、全キャラクターでFaceTracking、Expression、Motionといった制御の仕組みを共通化しています。</p>

<div style="text-align:center">
<figure class="image" style="display:inline-block"><img alt="" height="450" src="https://image.dmm-corp.com/0u0apoqeyrroi9up9jcj1s4vh4b9" width="800" />
<figcaption>個性のある複数のキャラクター</figcaption>
</figure>
</div>

<p>ただし、Motionを個性的にすると、特定のキャラクターには合っても他のキャラクターのイメージにそぐわないことがあります。そのため、笑いながら手を振る、怒りながら手を振る、FaceTrackingをしながら手を振るといった表現が可能になるよう、Expression、Motionによって上書きするパラメータは最小限に留めています。</p>

<div style="text-align:center">
<figure class="image" style="display:inline-block"><img alt="" height="497" src="https://image.dmm-corp.com/u4pi55u7reguthwavi0nbbqiagai" width="800" />
<figcaption>3種の制御を組み合わせた動き</figcaption>
</figure>
</div>

<h2>終わりに</h2>

<p>本記事ではリアルタイム配信を想定したLive2D制御の手法を紹介しました。<a href="https://docs.live2d.com/?_gl=1%2A4hdaw9%2A_ga%2AOTA3OTU5ODcuMTY5MjA4NDM1OQ..%2A_ga_VH6T56L1P1%2AMTcwMDgwMDI3MS40OC4wLjE3MDA4MDAyNzEuNjAuMC4w" target="_blank">Live2Dの公式マニュアル</a>にも多くの情報が記載されていますが、.exp3.jsonや.motion3.jsonの構成等は載っていない為、実際にSDKのコードを読み解き理解する必要があります。</p>

<p>実装の理解やパフォーマンス改善の為にも、SDKの理解をより深め、ユーザーへ快適なサービスを提供できるよう努めたいと思います。本記事で紹介したExpression制御、Motion制御は、<a data-sk="tooltip_parent" data-stringify-link="https://www.live2d.com/sdk/download/web/" delay="150" href="https://www.live2d.com/sdk/download/web/" rel="noopener noreferrer" target="_blank">Live2D Cubism SDK for Web</a>&nbsp;を用いれば比較的簡単にWeb上で再現できるので、興味を持たれた方はぜひ触ってみて下さい。</p>

<div style="text-align:center">
<figure class="image" style="display:inline-block"><img alt="" height="300" src="https://image.dmm-corp.com/fxntya4wphlqqbc3g6tl7zlcd72c" width="292" />
<figcaption>またね！</figcaption>
</figure>
</div>

<p>&nbsp;</p>


DMMグループAdvent Calendar 2023 の12日目。
ライブコミュニケーション​​​​​​​サービスの、Live2D制御にまつわる記事です。

エンターテインメント

フロントエンド

モーショングラフィック

アドベントカレンダー2023

フロントエンドで制御するLive2Dキャラクター~個性的にキャラクターを動かす工夫~

フロントエンドで制御するLive2Dキャラクター~個性的にキャラクターを動かす工夫~

シェア

一緒に働く仲間を募集しています！

関連する求人

関連する記事