EVENTTweetこんにちは、@p1assです。HOUSEにピクシブ株式会社のエンジニアをお呼びし、「Three.jsでVTuberになろう」というテーマでハンズオンを開催しました!この記事ではその様子を紹介します。イベントページはこちらのconnpassになります。Mobileの開発に従事している@FMS_Catさんをお呼びし、先日公開された@pixiv/three-vrmというThree.js上でVRMを扱うライブラリを使ってハンズオンを行いました。今回のハンズオンの最終的な目標は「顔認識ライブラリを使って、画面上のキャラクターを自分の動きに合わせて動かすこと」でした。Step4に分かれており、順番に進めていくことで理解しやすいようになっていました。ハンズオンの資料は@FMS_CatさんのGitHub上で公開されていますので、合わせてご確認ください。Startedをやってみよう今回のイベントは、Three.jsの事前知識が不要だったため、まずはThree.jsの基本的な内容から紹介していただきました。Three.jsが使われているプロダクトの紹介やRendererやCamera、Sceneといった概念を紹介していただき、立方体の箱を回転させるコードを書きました。GLTFLoaderを使ってみよう次に、GLTFLoaderを使ってglTFと呼ばれるフォーマットの3Dをモデルを読み込んでみました。モデルはマイクロソフトがCC0ライセンスで公開しているアボガドを使用しました。個人的に興味深かったのは、GitHubにglTFの概要や仕様が丁寧にまとまっている点でした。glTFのデータ構造や実装の仕方などが画像で分かりやすく紹介されていて、glTFを使いたい開発者に親切な作りになっていました。日本語訳もあるため、日本人もとっつきやすそうですね。いう@pixiv/three-vrm向けに作られたキャラクターを使っていきました。VRMとは3Dアバターに特化した3Dモデル用のフォーマットのことで、glTFベースで仕様が定義されています。そのため、VRM用に作られたモデルはGLTFローダーでも読み込むことができます。そこで、まずはこの方法でモデルを読み込んでみました。次に、@pixiv/three-vrmを使って同じモデルを読み込んでみました。この2つの違い分かりますか?VRMでは、MToonというトゥーンシェーダー(アニメ調にレンダリングするシェーダー)が利用できるため、glTFより豊かな表現ができるようになっています。この違いを初めて見た時はかなり驚きました!実際にどのように実装されているかなどは@FMS_Catさんが公開されているスライドをご覧ください。他にもBoneを参照することでカメラの中心に顔がくるようにしたり、SpringBoneを使って髪の毛などを揺らす処理を紹介していただきました。Jeelizと組み合わせてVTuberになろう最後のStepです。途中Firefoxだと動かないバグに遭遇したり、マシンによってWebカメラがきちんと動作しなかったりと、一番時間のかかったStepでしたが、周りの参加者らがお互いに助け合って解決していきました。他にも発展編として、カメラ目線やポーズの変更、瞬き、マウスで表情制御などがありましたが、時間の都合により作業する時間は取れず、後で自主的に試すという流れになりました。最後に@FMS_Catさんより今回のハンズオンで使用した技術の紹介をしていただき、今回のハンズオンは終了しました。懇親会ハンズオン終了後はピクシブ株式会社さんが用意してくださったお寿司やドリンクを囲みながら、3Dグラフィックスの話や会社の話などをしました!懇親会の時間が終わった後もそのまま立ち話をしたりと、参加者同士も濃い交流をすることが出来ました。今回は久しぶりの企業イベントでしたが、とても有意義なイベントとなりました。今後も様々なイベントを開催予定ですので、よろしくお願いします!Tweet関連p1assGoをよく書いているエンジニア。サーバーサイドをメインにやりつつフロントやインフラにも手を出すよく分からない存在。コメントをキャンセルメールアドレスが公開されることはありません。