SVG+CSS AnimationでLive2Dを動かす - はるさめスープ

年末年始の自由研究として、CSSだけでLive2Dを動かすことができないかを試していました。紆余曲折あったものの、なんとか動きそうということが分かったのでひとまず情報共有。 Live2Dとは Live2Dは、2Dのイラストをモーフィング技術を使ってアニメーションさせるソフトウェアです。あのアプリゲームのキャラクターや、あのVTuberを動かすために使われています。 かわいい！！！ モデルデータを表示させる Source: CSSLive2D/src/01_parse at master · spring-raining/CSSLive2D · GitHub まず、Live2D公式サイトにあるサンプルデータのキャラクターを画面に表示させることを目標としてみます。各キャラクターはそれぞれモデルデータ (Haru.moc3)、テクスチャ画像 (*.png)、表情データ (*.exp3.json)

[yarumato]

“Live2Dではパーツ変形を制御するデフォーマを提供。親子関係を作ることで複雑なアニメ表現。Live2DのSDKではJSから見られず意図的に秘匿している感じ。自分でデフォーマの情報を書く。CSSのmatrix関数は2次元変換行列”

[mr_ozin]

めちゃすごいリバース・エンジニアリングだ

[hhungry]

似たようなアプローチでアメーバピグがFlash2HTML5に挫折してサービスが終了してますね。https://ameblo.jp/ca-1pixel/entry-11009598050.html

[hidecharo]

That's so cute.😊 "Rendering Live2D with HTML/CSS!"🤔 https://github.com/spring-raining/CSSLive2D

[akabekobeko]

やったことだけでなく技術解説としても素晴らしい。個々の要素技術をきちんと裏とりしながら考察してゆくので、前提知識が乏しくても入門の足がかりになる。良記事。

[side_tana]

すごい

[potato4d]

うおおお、ついに公開されとる

[deokisikun]

そういえば、Live2Dの中の人とtwitterで繋がってたのだけれど1年以上みかけてないな…

[mikuti2]

きちんと実装して、記事として解説を出して頂けるのがすごい。リバースエンジニア+追加開発がここまでできるのかとの驚き。WebGLでなく、CSSだけでアニメーション。

[kazoo_oo]

これはすごい。。

[aTn]

この御方は次元が違う。

[abababababababa]

すごいw(まとめ…技術力とリバースエンジニアリングパワーこんなないから普通はやれないw)

[takehanogi11]

すごい

[mizdra]

すごすぎる