ピクシブのエンジニアと「Three.jsでVTuberになろう」というテーマでハンズオンを開催しました

こんにちは、@p1assです。この度、CAMPHOR- HOUSEにピクシブ株式会社のエンジニアをお呼びし、「Three.jsでVTuberになろう」というテーマでハンズオンを開催しました！この記事ではその様子を紹介します。

イベントページはこちらのconnpassになります。

ハンズオン：Three.jsでVTuberになろう

今回はVRoid Hub・VRoid Mobileの開発に従事している@FMS_Catさんをお呼びし、先日公開された@pixiv/three-vrmというThree.js上でVRMを扱うライブラリを使ってハンズオンを行いました。

今回のハンズオンの最終的な目標は「顔認識ライブラリを使って、画面上のキャラクターを自分の動きに合わせて動かすこと」でした。内容はStep1 ~ Step4に分かれており、順番に進めていくことで理解しやすいようになっていました。

ハンズオンの資料は@FMS_CatさんのGitHub上で公開されていますので、合わせてご確認ください。

FMS-Cat/three-vrm-vtuber

Step 1: Three.jsのGetting Startedをやってみよう

今回のイベントは、Three.jsの事前知識が不要だったため、まずはThree.jsの基本的な内容から紹介していただきました。

Three.jsが使われているプロダクトの紹介やRendererやCamera、Sceneといった概念を紹介していただき、立方体の箱を回転させるコードを書きました。

Step 2: GLTFLoaderを使ってみよう

次に、GLTFLoaderを使ってglTFと呼ばれるフォーマットの3Dをモデルを読み込んでみました。モデルはマイクロソフトがCC0ライセンスで公開しているアボガドを使用しました。

個人的に興味深かったのは、GitHubにglTFの概要や仕様が丁寧にまとまっている点でした。glTFのデータ構造や実装の仕方などが画像で分かりやすく紹介されていて、glTFを使いたい開発者に親切な作りになっていました。日本語訳もあるため、日本人もとっつきやすそうですね。

Step 3: @pixiv/three-vrmを使ってみよう

ここからは three-vrm-girl という@pixiv/three-vrm向けに作られたキャラクターを使っていきました。

VRMとは3Dアバターに特化した3Dモデル用のフォーマットのことで、glTFベースで仕様が定義されています。そのため、VRM用に作られたモデルはGLTFローダーでも読み込むことができます。そこで、まずはこの方法でモデルを読み込んでみました。

次に、@pixiv/three-vrmを使って同じモデルを読み込んでみました。

この2つの違い分かりますか？

VRMでは、MToonというトゥーンシェーダー(アニメ調にレンダリングするシェーダー)が利用できるため、glTFより豊かな表現ができるようになっています。この違いを初めて見た時はかなり驚きました！

実際にどのように実装されているかなどは@FMS_Catさんが公開されているスライドをご覧ください。

他にもBoneを参照することでカメラの中心に顔がくるようにしたり、SpringBoneを使って髪の毛などを揺らす処理を紹介していただきました。

Step 4: Jeelizと組み合わせてVTuberになろう

最後のStepです。ここでは、JeelizFaceFilterというJavaScriptの顔認識ライブラリを使って、自分の頭の動きや口の開き具合をキャラクターの動きを同期させてみました！

途中Firefoxだと動かないバグに遭遇したり、マシンによってWebカメラがきちんと動作しなかったりと、一番時間のかかったStepでしたが、周りの参加者らがお互いに助け合って解決していきました。他にも発展編として、カメラ目線やポーズの変更、瞬き、マウスで表情制御などがありましたが、時間の都合により作業する時間は取れず、後で自主的に試すという流れになりました。

最後に@FMS_Catさんより今回のハンズオンで使用した技術の紹介をしていただき、今回のハンズオンは終了しました。