AnimationでLive2Dを動かす年末年始の自由研究として、CSSだけでLive2Dを動かすことができないかを試していました。紆余曲折あったものの、なんとか動きそうということが分かったのでひとまず情報共有。Live2DとはLive2Dは、2Dのイラストをモーフィング技術を使ってアニメーションさせるソフトウェアです。あのアプリゲームのキャラクターや、あのVTuberを動かすために使われています。GitHubまず、Live2D公式サイトにあるサンプルデータのキャラクターを画面に表示させることを目標としてみます。用意されているようです。SDKを使うとある程度の情報を得ることができます。含まれていることが分かってきます。Live2Dのモデルはパーツの集合で出来ていて、1つのパーツにはメッシュと呼ばれる三角形の集合体が割り当てられています。メッシュの頂点はその位置のテクスチャと紐付いており、頂点を動かすことでキャラクターをアニメーションさせているようです。(このモデルの場合2048x2048が2枚)。いうわけで、この情報通りにテクスチャからパーツを取り出してcanvasに貼り付けてみます。URLか何かで書き出してやればJavaScript無しで表示させることも出来るでしょう。これだけではまだキャラクターは動かせません。GitHub次にモデルのアニメーションに挑戦します。これまでは各パーツを画像として切り出したので、次はメッシュの三角形単位で画像化して...といきたいところだったのですが、ポリゴン(メッシュ中の三角形)の数が14088もあるモデルをすべて変換すると、重すぎて使い物にならないことが発覚します。使ってレンダリングを試みます。SVG内でテクスチャをSymbolとして定義します。これをSVG内の各ポリゴンで参照することで、ポリゴン毎にテクスチャを持つことによるコストを削減します。各ポリゴン用に用意します。idを適当に割り振っておき、後で参照できるようにします。切り抜きたい形を指定することで、ポリゴン1つを表現できます。変換すると、ちゃんと各パーツのテクスチャが表示されました。デフォーマは制御点を使ってパーツや他のデフォーマの変形を定義し、デフォーマ同士に親子関係を作ることで親デフォーマの変形が小デフォーマに影響する複雑なアニメーションを表現しています。意図的に秘匿しているっぽい感じもあるので、諦めて自分でデフォーマの情報を書くことにします。2種類があり、それぞれ実現可能な変形が異なります。回転デフォーマはその名の通りパーツを回転させるもので、中心点と変形可能な角度の範囲を指定します。ワープデフォーマは、ある四角形の領域を縦と横方向に一定数分割し、田の字になったデフォーマの各頂点を動かすことで、その領域にあるポリゴン頂点の移動を補完するものです。今回用意したデフォーマの定義は、このあたりからなんとなく読み取れると思います。ところで、SVGで用意した各ポリゴンはまだ本来の位置に配置できていません。CSSのmatrix関数は6つのパラメータを使って2次元変換行列を指定し、その値に従って要素を変形させます。ポリゴン3点のそれぞれの移動元と移動先座標が分かればこのパラメータが決定するので、下記の式に従って全てのポリゴンのmatrix変形をCSSに追加します。$$さらに、ここから先程用意したデフォーマ情報をもとに変形させる処理を加えます。タグ全体に対し変形させるようにします。都合の良いことに、SVGは複数のtransformを子の定義から順に適用してくれるため、これで上手くいきます。内でCSSを書き換える処理を書きます。window.requestAnimationFrame(cb);};window.requestAnimationFrame(cb);数多のバグを乗り越え、実装が完成するとこのように動かすことができます。右のもみあげがバグで千切れてるしすごいカクカクしてますが見なかったことにします。Animationで表現するように修正します。いっても、アニメーションのキーフレームとなる変形は全て判明しているので、あとは各ポリゴンに以下のような@keyframesを用意して置き換えるだけです。正弦波を再現したものです。anim_poly_a13b3d4032780bcccd23a9bd5d4a4b;}ついに完成です。最後にアニメーション結果を表示させてみましょう...!...え!?!?!?なんで............?...どうやら、ブラウザは一定数のDOMの読み込みを終えてしまうと、その時点で画面へ表示されアニメーションが開始してしまうようです。これでは、全てのポリゴンを同時にアニメーションさせることが出来ません。不本意ですが、以下のスニペットで解決させます。onload="this.document.body.classList.remove('loading')">...というわけで、こちらが最終成果です。JSでアニメーションさせるという野望は叶いませんでした。まとめ色々厳しすぎるので、大人しくWebGLで動く公式のSDKを使ったほうが良いと思います。月別アーカイブはてなブログをはじめよう!spring_rainingさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。