@spring_raining が Live2D をモデルを CSS で再現してみた実験結果について、 @potato4d が色々と聞いてみました。
こんにちはえ、今週もアテンサイドやっていければと思います。え、まず、初めにこのポンテキャストについてご紹介いたします。
このポッドキャストは、ユーザーインターフェースとテクノロジーを愛する開発者たちがえ、毎週、最新のフロントのインドの動向について語るためのポッドキャストです。
最新のフロントエンドの動向や開発フレームワークの変遷はたまたゆいやゆxに関することまで
最新の情報をえ、話していく。えーものとなっております。え、今回はですねえ
ライブ2dのモデルをですね。cssだけで動かすっていうものについてえ、話していければと思います。よろしくお願いします
よろしくお願いします。
さて、今回ですけれども、ライブ2、dicssの続きっていうところでございます。けれども、あの、まず初めに
前回作っていたものと、今回作ったものっていうのを簡単に紹介してもらってもいいですかね。
あ、はい、ですね、その正月の時に1度そのライブ2dを
jsを使わず、cssだけで動かすっていうことを挑戦しています。っていうことを話したと思うんですけれども、
そのあ、1月のまあ中頃までかけて、cssアニメーションとsvg
をの機能を使って、ライブ2dのキャラクターを動かすっていうと、えことについて挑戦していました。
で、ま、それについては、私のブログにもまとめているんですけれども、
まえ、最終的にjsをほぼ使わずに、キャラクターを動かすっていうことができるようになりました。
で、多分小ノートに貼ってあるかな、ショートに貼ってありそう。あれですよね、確かこれブログ記事も書かれてましたよね。
あ、そうですはい、それを
ちょっと小のにはい、そうですね、詳しく聞いていければと思います。私も一旦はい、これ読んで読んできたんで、話聞ければと思います。で、え、
じゃあ、ちょっと詳しく聞いていきたいんですけど、ちょっとまずそもそもですね。ライブ2dっていうのがま、どういった感じのものかみたいなところも聞いていきたいよなと思ってて、なんか私、結構
元々あのソシャゲのキャラクター動かすようなツールみたいなイメージが結構強かったんで、なんかどういったとこで使われて、
どういう風なメリットがあるよみたいなの聞いていければなと思います。ちょっと教えても、
はいはい、
そうですね、ライブ2dについて、まあ、はい、説明すると、そのキャラクターの
アニメーションをモーフィングの技術を使って、実現するというソフトウェアです。で、まあ、モーフィングっていうのはどういうものかと言いますと
ま、3dのようになんて言うんですかね。そのモデルみたいなのは、用意せずに、2dの画像を
まパーツごとにこう組み合わせて、キャラクターを動かすっていうものですね。でまどんそ、
ツリーのキャラクターのモーフィングっていうのは、ま、簡単に言うと、
なんすかね。服洗いみたいな感じになっていて、ちょっと目と目のパーツであったりとか、口のパーツであったりっていうのを、それぞれレイヤーを分けて、
保存しておいて、それをライブ2dでうまい具合に偏見させることによって、まるでキャラクターが動いてるよう
なえ、表現をさせるっていう。
なんか、あのパーツをいっぱいバラバラにばらして動かしたら、そのツリーだけど、3ギっぽくっていうか、アニメーションしてるように見えるみたいな。
1枚の絵かなって感じですね。なるほど、なるほど、なほど、これってなんか例えば最近有名なやつだったらこういうので使われてるみたいなのってあったりします。
そうですね、ま、結構もうあの、スマホのゲームとかもほぼほぼほぼではないですけど、そういうラブ3dを
使って、キャラクターを動かすっていうのは、もうかなり定番になりつつありますし、最近だとなんですかね。ま、vtuber
で、元々3dモデルをま用意するっていうのがま、最初の1歩みたいな感じだったんですけれどもま、最近だと、
そのライブteのキャラクターを。その現実のまあ、vtuberのか、顔のま
顔にま進させるみたいなことをやることによって、まあ、そのvtuberのキャラクター
をライブツリーで動かすみたいなことも、最近はよくえー行われています。
ま、こういうのがあることによってあれっすよね、ま、結構今までモデル用意しないととか、モデル作れる人も限られてたし、コストも高かったってのが結構
そのあれですかね。民主化したきっかけというか、感もあるツールって感じですよね。
そうですね、そのライブツリは、あの、その読み込み元として、そのpsd。フォトショップの
ファイルとかも読み込めたりするので、ま、例えば、そのフォトショップでこうレイヤーを分けてま。前髪を書いて、あと身を書いて、
輪郭改訂っていうことをやって、そのままライブ3dのソフトウェアに読み込ませるっていうこともできるので、はい、
結構式としてはだいぶ低くなったと思います。はい、
まあ、ほんとに1枚用意するだけで、今までだったら、結構立ち絵だけ納品してたようなところが、そのままそれをレイヤ分割したら
そうですね。そうです、
ライブツイートして、使ってもらえるって感じですね。なるほど、なるほど、面白いですね、あ、ありがとうございます
じゃあですね、ちょっと次ライブ2d。そのcssで動かしたってやつについて、詳しく聞いていきたいんですけど、はい、
そうっすね。まず、そもそもライブ2dのファイルみたいなんで。あの、なんか専用ファイルで動かすっぽかったんですけど、これってなんかどういう構造してた感じなんですかね。
なんか、そもそもオープンな。なんかま、例えば、
クリサだとえsqライトだったり、まあ、なんかオフィス製品だとzipだったりしようかなと思うんですけど、なんか、ライブ2dのファイルって、どんな感じなものなんですか。
そうですね、とま、ブロッグキリ
ま書いてあるんですけども、あのモデルデータいくつかありまして、そのまェソンのファイルでま
え保存されているっていうデータもあれば、あと、キャラクターのモデル自体
のデータは全部あのバイナリ形式で保存されてます。で、あの、モックスっていう拡張子で保存されてるんですけど、も
ま、これはその使用は特にあの明らかにはなってなくて、まあ、直接は見ることができない状態
ですね。で、ま、ただそのライブ2dのコアcdkが提供されていまして、
これを返して、このモックスモでえ。データを読み込むことで、その中の情報をま大体見ることができるっていう
感じになってますね。
じゃあまあ非公開、基本的な非公開であるものは、実際のまあ、その専用のsdkみたいなところから
見ていくと、まあ、そのライブ2dファイルってのを。じゃあ、例えばcssでかで、あとから実現するにはこういう構造になってるんだみたいなのは見ていけるって感じですかね。
はい、そうですね、で、その内容をま見ていきますとま、具体的にどういう情報が入ってるかって言うと、その
なんですか。オブジェクトで、まあ、そのsdkから撮ることができるんですけど、もま、その中のドロワーブルズっていうデータ
にま、大体、そのそのキャラクターの位置情報とか、パーツ情報自体はま、そこに大体入っ
はいはいはいはいはいですね。
でま、そのドアブルズはいをまさに見ていくと、ライブ2dはパーツがまいくつか用意されていて、ま、そのパーツ
の中になんて言うんですかねえ、ポリゴンというか、ま、その三角形みたいなのが、またさえ集合したものがま
1つのパーズになってるんですけど、もまそこで。例えば、
バーテックスポジションズっていうのがあるんですけど、もま、その中にその1つのパーツのま
ああ、はいはい、ポリゴンの頂点の集合が入って、情報が入ってたりっていう感じになってます。
これ見ていくことによって、最終的にえ作られ、そのドアブルというか、良化するためのポリゴン情報みたいなのが洗い出せるって感じですね。
なんか、結構パッと見た感じなんか、データ量結構えぐそうですけど、これじゃ実際こういうの見て、
そのなんかcssで動かそうとしとしたみたいなところで、結構ブログ記事とかもざっと見てたら、結構重かったみたいな話があったと思うんですけど、
なんか、その辺、この実際、どれぐらいのデータをどういう形で動かそうと思って重かったかみたいなのと、そこをどうやって解消したかみたいな、ちょっと
説明してもらってもいいですかね。
そのまあそのポリゴンのま頂点情報からまあ、そのなんていうんですか。パーツごとにこう
1つ1つ分けるっていうことが、まあできるようになったんですけれどもで、最初はあれですね。その1つのパーツを
1つのドム要素として、まず取り出してで、それを正しい位置に配置するっていうのを試したのですね。
で、ま、そこはうまくいったんですけども、その後、1つのパーツごとではなくて、1つのポリゴンごとに。
今度は分けていって、そのポリゴンをそれぞれ正しい位置に動かすことで、モデルを動かすっていうことをはいはい、最初はやろうとしたんですね。
で、ただそれをやった時に、ポリゴンの数が大体1万
4000あったんですけども、それを全部ドム。そのポリゴンの画像を書き出して、
で、それぞれのドムに貼り付けるっていうことをやるとすごい
たんですね。で、まあ、さすがにそれをやるのはブラウザでは無理だったので、
でま、そこで解決策として、今回はsbg
の。クリップパスっていう機能とゆずっていう機能があるので、ま、それを今回使ったっていうものですね。で
ま、これがどういったものかっていうと、クリップパスっていうのは
あれですね。cssのクリップパスとま同じような感じで、ある要素から、まあ、1部分だけ消え出すっていう機能ですね。で、
ま、そこでクリップパスで切り出す対象を。それぞれのポリゴンの画像ではなくて、その
元々のテクスチャーデータがあるんですけども、そこから、融通関数、え関数ではないですね融通
要素からを使って取るっていうことをしました。でま、もう少しわかりやすく言うと、ま
そのポリゴンごとにと画像を作るっていうのではなくて、テクスチャーはテクスチャで持たせておいてます。その中から、
クリップパスで必要なところだけ切り出すっていう感じの、まあ、構成になってます
なんかあれですかね、そのcssプライトみたいな感じですかね、イメージとしては、あ、
そうですそうです、cssスプライトみたいな感じで、そのテクスチャっていうのは、まあ
今回2枚だけなんですよね。その1つのキャラクターをはいはいはい作るのにうんうん。そこが2枚のテクスチャーから必要な箇所だけき出すっていう
まさにcssスプライト的な感じで、今回作った
ま。これによって、実際画像を貸したやつを出していたら、毎回
その画像へのヒットが発生して、重かったみたいなやつがま、そこを採用できるようになったみたい。
なるほど、なるほど、ありがとうございます。
ちなみに、このクリップバスってほって、なんかどういったとこで、なんか他の技術でなんか使われてるのってありましたっけ。なんか、あの、私のイメージだったら、あの
リアクトコンテントローダーみたいな、ああいう、コンテントローダー使う時に、あのフェードの形を作るために
使う技術って感じが強いんですけど、クリップパスって普段結構使うこととかありますかね。
そうですね、クリップパスは結構それこそ、あのcssプライト
的な形であったり。はいはい、あとはそうですね
まあ、そのクリップパス自体はすごい複雑な複雑な形とかもま自由に切り出せるので、はいはいはい、
結構凝った装飾を実現するために、そのクリップパスを活用したりとか。あと、cassアニメーション
で、なんかすごい複雑なことをするっていう時に、フリップパスを使ったりっていうのがあったりしますよね。うんうん
で、今回はまあ、そのクリパスを画像を切り出すために使ったっていう感じですね。はい、
うん、うんうん、
いや、結構面白いアプローチですよね。まあ、実際ぎ着に使うよりは、あのオリジンというか、画像の元みたいなのを
別用意しとくことによって、
重さを軽減するみたいなのは結構なんかよくありそうだけど、あんまりcssでやることがないとか。まsvg今回svgですけど、あんまり普段触ることが多くはない気がするんで、結構
こ、こういう挑戦ならではだなと思って結構面白いなと
そうですよね、今回割とそこもまあ1つ試したかったなっていうのはありますね。その
ドム、1万4000個も通過することって、普通ないじゃないですか、ないないっすね
ま、大体どれぐらいの数がその
あの画像もたてばモテるかっていうとこところとか。もま、今回見たかったので、まあ、そのパーツ
数10個のパーツであったら、まあ余裕だけど。ま、1万4000個のポリオンをそれぞれ画像を持たせるっていうのは、今回のま
用途では難しかったっていうのが分かりました。うん、
なるほど、なるほど、いや、面白いですね普通だったらあれですもんね、ドム要素がすごい増えるのって、
あの無限スクロール実装しろやみたいな話とか。そのはいはいはい、実装面でドム要素を減らす側になりがちですけど、まあ、こういったそもそもが多かったら
工夫するしかないですもんね。
そうですよ、パスをこういう感じで使うってのはなんかあれですね、他のところでも、実は使えるかもしれないですね。
そうっすね、ちょっと次はその描画したさらに、後の話をちょっと聞いていきたいかなと思う。はいすけど、
ちょっとブロックキッシュ見てると、この
なんでしょう。顔があって、目があってみたいな形で、親の要素みたいな概念があって、それに依存するような
アニメーションみたいなのが、ライブにあるんだなっていうのをはいえ、それをディフォーマって書いてありますけど、はい、そうですか。なっていうのをちょっと見てたんですけど、この辺で。なんかその
ライブツはライブツ側で、あの、多分自分たちでレイヤー構造みたいなのを持って動かしてるんだと思うんですけど、今回の
cssを再現するにあたって、その親子関係みたいなのとか、まあ、どうやってこういった挙動を実現したか、みたいなところも
聞いていっていいですかね。
はい、じゃあそうですまず、デフォーマーの説明を
した方が良さそうですね。はいでフォーマそうですね、というのはですね、まあ、そのライブ2dでそのパーツを変形させる
なんて言うんすか。グループみたいなものでして、
で、そのライブ2dはデフォーマー2種類あって、回転デフォーマーとワープデフォーマっていうのがありますでま、回転デフォーマは、
そのデフォーマに属するパーツを全部回転させるっていうもので、ワープデフォーマっていうのは、その
なんですかね。変形を傾けたりとか、また歪めさせたりとかっていう変形をまあ実現するためのものですね。はいはいはい
で、このデフォーマーがそれぞれ親子関係を持たせることができて、例えばま親の
ワープリフォーマーがまこの上に動かすっていうことをやると、まこのに属するリフォーマーとか、パンスは全部上に動くみたいな形に
なっていましてま。これを上手いこと組み合わせることで、キャラクターを動かすっていう感じの動きに
合ってるんですね。
で、それをsvgとかcssでどうやってやったかっていうと、デフォーマ
の構造って、ドムの気構造とすごい
まあいてるっていうか、そのままなので、今回はそれをまそのまま紐付けるっていうことで実現できました。うんでま、具体的にそのワープレフォーマー
で変形をやる方法っていうのは、まあ、
ブログ記事が詳しいんですけども。そのますとポリゴンのま三角形を
ま自由に変形させる必要があってま。それをその3つの頂点を動かすために、今回はcssのマトリックか、マトリックス関数っていうのをえ、使いました。
でま、これはどういうものかと言うと、6つパラメーターを指定することができまして、
その6つのパラメーターに応じてま。拡大とか縮小とか、
あと、弱みとかへ。傾きみたいなのを自由にへんけ指定することができるっていうのを
ができます。でま、それをjsで、ガリガリ計算して、適切な6つの値を決めて入れるっていうことを
やることによって、ワープでフォーマを実現しています。
うん、
このマトリックスってやつ、私、今初めて見たんですけど、結構ほんとになんでもできそうですね。かいな。それこそ、cssってトランスレートとか、
スケールとかは。はい、使うことはあるかなとは思いますけど、なんかなんでもできそう感は
ありますよね。あ、ま、そうですね、まさになんでもできるというか、むしろ、そのトランスフォームとか、スケールとかは
全部、そのマトリックス感想に置き換えることができるものです。ね。んうん、うん、うん、
じゃあなんかな。内部的にはどうかわかんないけど、シンタックスシュガーみたいな感じなんすかね。トランスレートとそう
そうですどっちからトランスレートが、そのマトリックス関数のシタシュアみたいな形になってると思います。
うん、うん、うん、
色々できそうというか、
そうそう今回結構ssありましたね、ここは
あ、ありがとうございます。で、あと、その上で最終的なアニメーションもcssでやったっていうとこですかね。これは
はい、そうですね、
まあ、アニメーションのところはそんなにまあ、難しいことはやっていなくて、まさっき、そのマトリックスで、6つの
パラメーターを決めるってことはもうできてるので、ま、それで、はいはいえ、最初のえ、そのパポリゴンの三角形の1と、
最後のポリオンの三角形の位置とま、その中間にあたる位置をまあ3つ与えて
で、それでそれをえ、アニメーション、タイミングファンクションで、まあ、その今回首を左右に振るっていう動きなんですけど、も
まそれがままなめらかに動くような。タイミングファンクションを使って作ってでま、それを
それぞれのポリゴンに適応したっていう感じですね。なので、まあ、うん、ここ自体はそんなにまあこったことはしてないです。ああ、なるほど、
じゃあ、さっきのマトリックスのえ、処理によって、まあそのなんでしょう。狙っているそのモデルの最終的な形っていうのは、もう割り出せてるんで、え。それをベースに
えと、スタートの状態とゴロの状態っていうのをアニメーションで、はい、マトリックスとして書いてあげたって感じですかね。
そうですね、はい、でまただ
残念ながらあの最後の方にも書いてるんですけども、そのブラウザー。おそらくブラウザ上のま制約で
なその全てのえすぐを読み込んでから、アニメーションを開始させるっていうことができなくて、
多分はい、なんか数千ぐらいの。
sbg要素を読み込んだ時点で、アニメーションを開始させてしまうっていう問題があったんで、
そこだけはどうしても解決できなくて。さえアニメーションは、産み込みが終わるまでストップさせるっていうジェースを入れました。
ああ、なるほど、なるほど、じゃああの基本的にまあ、読み込んだ後は全部csで動かしてるけど、最初だけちょっとjsを動かしてるみたいな。
そうですね、なんなので、pcssは残念ながら実現できませんでしたっていう感じです。
ま、ただでも実際ほぼほぼま99パーセントっていうか、まほぼ全てcssって感じで動いたはいっていうか。そうですね、うん、うん、うん
あ、ちょっとこんな感じで実際動かしてみて、そのまちょっと最後は軽くjs使うっていう話になりましたけど、やってみて、なんか
他もこういうことできたらいいよなとか。まあ、これcssに限らず、別にライブ2d自体でやってみて、面白かったなって思ったことでもいいんですけど、
なんかこういうのできたらなとかあったら、ちょっと教えてもらってもいいですか。
はい、
そうですね、ま、今回そのjsを使わずにcssだけで。まあ、アニメーションっていうのはまあ実現
できて思ったんですけど、もまこれ以上そのcssだけ
縛りみたい、シス縛りみたいなのっていうのは、あんまりもう意味意味がないというか、実用的ではないなっていうのを
思ったので、ま、今後あのもっと発展させるとすれば、ま、これを使ってま。jsとま連携させる
ような、何か、もっとっこう複雑なアニメーションだったりとか。はいはいはい、もっとこう、インタラクティブな
まあ、アニメーションみたいなのを、今回使ったような。csのテクニックと組み合わせてやりたいっていう。
いや、なんかライブツリとかま、今とか。はい、あの、実はこの収録もあのテレカでやってますけど、なんかみんな結構
なんでしょう。遊びがちとか
というはいか。はい、
このミーティングの時に、なんかアバターかってる人とかもいますし、結構最近ライブ2dとかもそれで注目されてる感あります。なんか、面白いと
できるとあ、それも白します。うん、はいはい、はい、あれあれですよね。そのライブ2dのキャラを
そのあればバビにして、バビニで自分え、そのライブのキャラで、テルカに出るみたいな話。あ、そうそう
そうそうたまにやってるのを見かけるんで、ああいうのが色々できても面白いなと思いますね。
それ、ブラウザオンリーでやるってのは、めちゃくちゃ面白そう。
そうですね、今だとそれこそ別にブラウザーだけで、画像の転送もウェブアル停止でできますし。はい、そういうのを1回ウェブ上で試してみたりとかしても、面白そうな感じはしますね。
面白そうですね、なんか、そのインカメラで、その顔そう。ピンクして、はいはい、それをブラウザー
とか、あと、cssのマギリスでやるっていう話ですよね。結構
そうそうそうそう
あれですよね、これ、その今回はcssでやりましたけど、普通のなんか、weglのstkも確かあるんですよね。
あ、はい、そうですね、いや、むしろこっちを使うべきなのかも。
普通にそうcss縛りはやめて、普通にそのebの技術ウェブ、一般の技術として、そういう
バビニ的なことをブラウザでやってみるとか、やってみると面白そうなそれはしますよ。それで、
面白そうじゃあ、いやいや、
ありますpssは難しそうな
いや、やってみるのもありかなと思いますね。
そりゃ、ちょっと
じゃあ、なんかやってみたら教えてください。感じですけど、
リモートワークの間、
いや、面白いですねライブ3リーはなかなかいいっすね、
はい。今回結構割とそのフロントエンドからでも、手が出せる技術っていうことがわかってよかったです。そう
いや、ありがとうございます。また、ちょっとなんかこういうのやってみたいみたいなのがあったら、ポッドキャストとかでも聞かせてもらえればと思います。
こんなバリバリの技術でよければ、はい、紹介します。
なんか、普段フロントエンドで触れないフロントエンドの機能ではあるけれども、マトリックスとかもそうですけど、これってなんか使わない技術を使ってるのを見ると、やっぱり
見てる方も面白いんで、あんならいいなと。
そうですよね、なんか、フロントエンドの技術使ってるけどない中身フロントエンドじゃないみたいな
ち内感ありますよね
というわけでですね、今回はですねえ、ライブ2dのモデルをcssで動かしてみたという話をですねえはさんにしてもらいました。
LINEのUITsではですね。ま、こんな感じでえ、業務とか関係ないえ、課外活動みたいなところもですね。え、結構こんなんやってみたよとかっていって、コミュニケーション取る機会とかもえとあったりだとか、まあ、普通に業務のライズとかも含めて、
ディスカッションする場があったりします。え、毎週ですねえ、社内のギターブの方で、色々ネタを集めてですね
毎週金曜日の勉強会で、
えー民業界でえ、技術発表を行っていたりします。え、今ですねえ、何度かえ。ポンテキャストとして公開しているビー3サビ。え、なんかですね。
そっちの方から始まった企画なので、え。また、社内勉強会とかでも、白、黒いネタなどがあれば、
ポッドキャストでも発信していければと思います。その他にですねえ、このポートキャストについてのご意見や、ご感想もお待ちしております。え、ハッシュタグシャープUIT、アンダースコアインサイド
シャープUIT、アンダースコアインサイドにてえつぶやいていただきます。とえ、運営の方がえ、ひろ
いきますので、え、もし何かにであれば、ま、こういったテーマが聞いてみたいだとかえ、こういった風なえ、収録の形も試してみてほしいみたいなものがあれば、え、
ぜひぜひついていってもらえればと思います。
というわけで、今週はライブ2aecsというテーマで。え、私はたとえはさんの2人でお送りしましたお疲れ様でした、
ありがとうございました、ありがとうございました、
ありがとうございました。