Skip to main content
VRMを紹介する@FMS_Catさん

ピクシブのエンジニアと「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ローダーでも読み込むことができます。そこで、まずはこの方法でモデルを読み込んでみました。

 

glTFとして読み込んだthree-vrm-girl

 

 

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

 

VRMとして読み込んだthree-vrm-girl

 

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

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

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

 

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

 

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

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

 

顔と同期して動くキャラクター
自分の頭と同期して動くキャラクター

 

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

 

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

 

VRMを紹介する@FMS_Catさん

懇親会

ハンズオン終了後はピクシブ株式会社さんが用意してくださったお寿司やドリンクを囲みながら、3Dグラフィックスの話や会社の話などをしました!

懇親会の時間が終わった後もそのまま立ち話をしたりと、参加者同士も濃い交流をすることが出来ました。

 

懇親会のお寿司

 

今回は久しぶりの企業イベントでしたが、とても有意義なイベントとなりました。今後も様々なイベントを開催予定ですので、よろしくお願いします!


p1ass

Software Engineer / Gopher / KU B3

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です