Webでもあなたの姿で。 アバターチャットアプリ「Vauta」 けしごむ [Twitter:@ke4563]

2 概要 「VRM」モデルをより手軽で、多くの人に アバターとして使ってもらいたい。 アバターの姿で会話ができる Webアプリ「Vauta」の仕組みについて話します。

3 目次 • 背景 • Vautaの紹介 • 実装 – モデル描画（three.js） – 表情認識 (jeeliz) – 通話 (SkyWay/WebRTC)

4 自己紹介 • けしごむ しがない大学生 趣味はゲームとプログラミング MONO消しゴムが主食 Twitter : @ke4563

5 背景 • PCやスマホでアバターを使いたい • 友達と手軽に使える • WebならPCやスマホでも使える • アプリのインストールが要らない、 URLだけでOK

6 Vauta 「Vauta」(バウータ)はブラウザで動く、 アバターチャットアプリです。 Vautaができること ・VRMモデルを読み込む ・表情に合わせて動かす ・アバターで他の人と話せる

7 Vautaによる通話 Webブラウザとカメラ、マイクがあれば、 いろいろなデバイスでアバターチャットができる。 Windows PC MacBook MacBook Windows PC Windows PC スマートフォン (Galaxy S8)

8 身も蓋もない説明 やっていることを既存のもので例えると、 Vtuberアプリ Discordなどでの画面共有通話 これをすべてブラウザ上で出来ます。

9 アバターで通話する 複数のモデルをモバイル端末で描画するのは大変 人が増えるたびにモデルの読み込みが必要… ビデオ通話にしよう

10 アバターでビデオ通話 表情認識・描画 ビデオ通話(WebRTC) つまり、これ↓

11 ネタばらし？ Windows PC MacBook MacBook Windows PC Windows PC スマートフォン (Galaxy S8)

12 実装 : VRMモデルを動かす • Three.js Three.jsはウェブブラウザ上で3DCG を描画するJavaScriptライブラリ ・ボーンアニメーション json.extensions.VRM.humanoid.humanBones ・ブレンドシェイプ json.extensions.VRM.blendShapeMaster.blendShapeGroups

13 実装 : 表情認識 jeelizはWebカメラだけでフェイストラッキングができる JavaScriptライブラリ 顔の回転 多様な表情認識可能 ・左右それぞれの眉 ・左右それぞれの目の開閉 ・左右それぞれの口角 ・口の開閉 ・口の丸まり ・歯を剥き出しにする これらをVRMモデルに対応させる https://jeeliz.com/demos/weboji/demos/threejs/fox/ (2019/3/26)

14 実装 :アバターでビデオ通話 • SkyWay (WebRTC) サーバを構築・運用する必要がない ビデオ・音声通話、データ通信が利用可能 Community Editionは料金がかからない 個人開発者にやさしい・・・。

15 課題 • 表情認識の負荷 – 端末の性能 – トラッキングがとぶ • 人数で通信量が増大する – フルメッシュの欠点

16 これから VRMで作られたアバターを いろいろなところで使いたい！ デバイスに縛られずに アバターで楽しめるように！

17 ありがとうございました Thanks! Twitter : @ke4563の プロフィールにあるURLから Vautaのデモができます。 推奨：Google Chrome