さて今回の記事、何を書こうか迷いに迷い、久々に絵を描いてLive2Dモデル化するとか、ホワイトボードの究極のイレーサーの開発日記とか、誰も私に期待していないネタにしようかと思ったのですが、どちらも攻めきれず、真面目に技術的な内容にすることに致しました。
Cubismで普通に髪揺れを作ると、特定の動きをループする形になりがちでした。もっと自由に動かしたいというつい最近の会議の最中に思いついた方法を紹介します。
本記事のテーマはざっくり以下のとおりです
・Cubismで多関節風の表現
～3Dのボーンのように（楽に、滑らかに）変形させる方法～
・曲面デフォーマの分割数の上限緩和！
・多関節の物理演算を 既存の Live2D Viewer / Cubism SDK で実現するには？
・お得なキャンペーンの予告
結果はこんな感じになります。
では、さっそく
３つ以上のパラメータによって、１つの描画オブジェクトを3Dのボーンのように（もしくは楽に、滑らかに）変形させる方法です。
以下、３つのパラメータで動かす場合を説明します。
それぞれ、別の部分を曲げるようにします。ざっくりと解説の動画は以下の通り
3つのパラメータで、3つの関節が曲がるような構造になりました。パラメータ４つ以上の場合も、親デフォーマを増やせば実現できます。
親子のデフォーマを同じサイズでも問題無いのですが、子要素は、親デフォーマからはみ出さない方がキレイに変形されるので、親デフォーマが大きめ、子デフォーマが小さめとなっています。
～・～・～
上記の動画は、デフォーマの分割数が 9x9で表現していますが、部分的に少しカクカクした曲がり方になっています。これは勿体無いということで、突然ですが、
（う、PRO版高いなぁ・・・、という皆様にも後ほど朗報があります。）
ただ、分割数は、ゲームなどリアルタイム表現の場合は計算負荷に直結するので注意が必要です。計算負荷は分割数の縦ｘ横に比例します。
アニメーション制作の場合
アニメーション制作の場合は、編集時に重く感じない程度であれば幾ら増やしても問題ありません。
とても 30 x 30 ぐらいまで使えばとてもなめらかに曲げることができます。
ざっくりと作り方は
※Viewer上で順番は physics0 , physics1 , physics2 の順番になっている必要があります。（間違って途中を消すと大変です。そんな場合は保存した physics.json を直接テキストエディタで編集した方が早いです。）
なぜ、振り子の揺れに突然、角速度が現れるのか？
物理的には辻褄が合わない設定なのですが、実用上は角速度で上手くいってしまいます。
説明が難しいのですが、振り子の角度はSin関数的な動きをするとき、角速度（微分）はCos関数的な動きになります。SinとCosは位相（スタート地点）をズラしただけの同じ動きをするカーブなので、同じ動きではなく、1/4周期ズラした動きを生み出すことができるのです。
結果として、角速度を上手く使うことで、1/4周期ズレて揺れがついてくるような表現が実現できます。
（うまく、角度と角速度をブレンドすれば異なるズレを表現することができますが・・それは又の機会に）
あくまで擬似的な髪揺れですが、結構本格的になります。
朗報といいつつ詳細は近日公開（年内）ですが、結構安くなります！ご期待下さい。
（すみません、アドベントカレンダーの締め切りに合わせるため、少々突貫工事になりました。髪揺れについては後日もっと詳しい解説を公式に用意すると思いますのでしばしお待ち下さい）
Cubismで多関節風の表現
～3Dのボーンのように（楽に、滑らかに）変形させる方法～
～3Dのボーンのように（楽に、滑らかに）変形させる方法～
３つ以上のパラメータによって、１つの描画オブジェクトを3Dのボーンのように（もしくは楽に、滑らかに）変形させる方法です。
以下、３つのパラメータで動かす場合を説明します。
普通に描画オブジェクトに３つのパラメータを割り当てると、3*3*3=27通り生み出すのに、27パターンの形状を編集する必要があります。とてもやってられませんね。
～・～・～そこで、3+3+3= 9 通りの編集で27通りの表現を生み出す方法です。
- 描画オブジェクト a2
- a2 の親の曲面デフォーマを d1
- d1 の親の曲面デフォーマを d0
とします。a2, d1 , d0 にパラメータ３つを１つずつ割り当てます。
- パラメータ param0で、d0 が髪の付け根側を変形
- パラメータ param1で、d1 が中間部分を変形
- パラメータ param2で、a2 に髪の先端部分を変形
それぞれ、別の部分を曲げるようにします。ざっくりと解説の動画は以下の通り
3つのパラメータで、3つの関節が曲がるような構造になりました。パラメータ４つ以上の場合も、親デフォーマを増やせば実現できます。
親子のデフォーマを同じサイズでも問題無いのですが、子要素は、親デフォーマからはみ出さない方がキレイに変形されるので、親デフォーマが大きめ、子デフォーマが小さめとなっています。
～・～・～
上記の動画は、デフォーマの分割数が 9x9で表現していますが、部分的に少しカクカクした曲がり方になっています。これは勿体無いということで、突然ですが、
PRO版の「曲面デフォーマの分割数」の制限を緩和することになりました。
（う、PRO版高いなぁ・・・、という皆様にも後ほど朗報があります。）
9x9ではとても滑らかには曲げられないので、PRO版に限定して最大 100x100まで緩和することになりました。
年内にアップデートするCubism 2.1.03から対応する予定です！
（追記： 左が9x9 , 右が拡張後 50x50程度のサンプル）
リアルタイム表現の場合の注意
年内にアップデートするCubism 2.1.03から対応する予定です！
（追記： 左が9x9 , 右が拡張後 50x50程度のサンプル）
リアルタイム表現の場合の注意
ただ、分割数は、ゲームなどリアルタイム表現の場合は計算負荷に直結するので注意が必要です。計算負荷は分割数の縦ｘ横に比例します。
10x10 = 100
20x20 = 400 (10x10の約4倍!!)
5x20 = 100 (10x10と同等なので使い易い）
髪揺れのような場合は、横を小さな値にして、縦を大きな値にすると効果的に活用できます。
アニメーション制作の場合
アニメーション制作の場合は、編集時に重く感じない程度であれば幾ら増やしても問題ありません。
とても 30 x 30 ぐらいまで使えばとてもなめらかに曲げることができます。
物理演算をどうするか？
多関節風の髪揺れと、それをキレイに表現する仕組みは出来ました。
Animatorで動画を作る場合はパラメータを調整してコツコツ揺らしていけば良いのですが、リアルタイム表現には、プログラムが必要になります。
本格的にやるには、プログラムの拡張が必要そうですが、それっぽくやるには現状の Live2D Viewer / Cubism SDK に組み込まれている物理演算だけで出来てしまいます。
Live2D Viewerの設定
元々CubismSDKに入っている物理演算は１つの振り子をシミュレートしているので、多関節の揺れを直接表現は出来ませんが、振り子の結果を、別の振り子の入力にすることでそれっぽく表現できます。
ざっくりと作り方は
・物理演算 physics0 （振り子0）を用意する。
入力は、顔の動き、体の動きなどのパラメータ。振り子0に与える力に相当。
出力は、angle（振り子の揺れた角度）を、param0 に反映
(d0 が動くので髪の付け根側が変形する）
・物理演算 physics1 （振り子1）を用意する。
入力は、param0 。振り子1に与える力に相当。
出力は、angular velocity（角速度！）を、param1 に反映
(param1を変えると、d1 が動くので髪の中間が変形する）
・物理演算 physics2 （振り子2）を用意する。
入力は、param1 。振り子2に与える力に相当。
出力は、angular velocity（角速度！）を、param2 に反映
(param2を変えると、a1 が動くので髪の先端が変形する）
※Viewer上で順番は physics0 , physics1 , physics2 の順番になっている必要があります。（間違って途中を消すと大変です。そんな場合は保存した physics.json を直接テキストエディタで編集した方が早いです。）
これで、髪の毛が上から揺れ始めて、先の方が遅れてついてきます。角速度（angular velocity） を使わないと、皆同時に同じ向きに動いてしまいます。
なぜ、振り子の揺れに突然、角速度が現れるのか？
物理的には辻褄が合わない設定なのですが、実用上は角速度で上手くいってしまいます。
説明が難しいのですが、振り子の角度はSin関数的な動きをするとき、角速度（微分）はCos関数的な動きになります。SinとCosは位相（スタート地点）をズラしただけの同じ動きをするカーブなので、同じ動きではなく、1/4周期ズラした動きを生み出すことができるのです。
結果として、角速度を上手く使うことで、1/4周期ズレて揺れがついてくるような表現が実現できます。
（うまく、角度と角速度をブレンドすれば異なるズレを表現することができますが・・それは又の機会に）
あくまで擬似的な髪揺れですが、結構本格的になります。
魅力的に揺らすためのポイント
・両側にフワッという表現ができるように
左右の髪を分けてパラメータ付けし、物理演算も分けておく。
フワっとさせるためには、前後の動きのパラメータや、上下の動きのパラメータを、振り子０へ入力とする時に
左右別方向の力になるようにする
・フワッと動かすために、専用のパラメータを用意しても良い。
何も起きていなくても髪がフワッとさせたい場合は、そのためのパラメータを用意して、振り子の入力としてもよい。
・親子の曲面デフォーマがあるとき、
親の曲面デフォーマの分割数 ＜＝ 子の曲面デフォーマの分割数
（子の方が分割数が多いか、親と同じが良い。親の方が多くても効果は出にくい）
・曲面デフォーマの範囲から、なるべくはみ出さない
はみ出した部分の形は崩れやすい。
はみ出した場合は計算量が増える（これは一般的に言える）
・Viewerの物理演算の設定は、一応現実を意識して考える？
長さはメートル、重さは kg
個人・インディーユーザ向けにPRO版が安く手に入るキャンペーンを実施します。
朗報といいつつ詳細は近日公開（年内）ですが、結構安くなります！ご期待下さい。
本当は Cubism3.0の新機能で実現しようと思っていた滑らかな髪揺れが、2.1でだいぶ出来てしまいましたが、体の動き、編集効率（楽しさ）、SDK的な軽さ、滑らかさなど大幅に改善していきたいと思います。
Cubism3.0にご期待ください。もちろん Euclidにも！
Cubism3.0にご期待ください。もちろん Euclidにも！
（すみません、アドベントカレンダーの締め切りに合わせるため、少々突貫工事になりました。髪揺れについては後日もっと詳しい解説を公式に用意すると思いますのでしばしお待ち下さい）
