Webでもあなたの姿で。 アバターチャットアプリ「Vauta」

VRM集会 in cluster #01 で発表した資料です。
https://vdg.connpass.com/event/122216/

Transcript

1. Webでもあなたの姿で。 アバターチャットアプリ「Vauta」 けしごむ [Twitter:@ke4563]
2. 2 概要 「VRM」モデルをより手軽で、多くの人に アバターとして使ってもらいたい。 アバターの姿で会話ができる Webアプリ「Vauta」の仕組みについて話します。
3. 3 目次 • 背景 • Vautaの紹介 • 実装 – モデル描画（three.js） – 表情認識 (jeeliz) – 通話 (SkyWay/WebRTC)
4. 4 自己紹介 • けしごむ しがない大学生 趣味はゲームとプログラミング MONO消しゴムが主食 Twitter : @ke4563
5. 5 背景 • PCやスマホでアバターを使いたい • 友達と手軽に使える • WebならPCやスマホでも使える • アプリのインストールが要らない、 URLだけでOK
6. 6 Vauta 「Vauta」(バウータ)はブラウザで動く、 アバターチャットアプリです。 Vautaができること ・VRMモデルを読み込む ・表情に合わせて動かす ・アバターで他の人と話せる
7. 7 Vautaによる通話 Webブラウザとカメラ、マイクがあれば、 いろいろなデバイスでアバターチャットができる。 Windows PC MacBook MacBook Windows PC Windows PC スマートフォン (Galaxy S8)
8. 8 身も蓋もない説明 やっていることを既存のもので例えると、 Vtuberアプリ Discordなどでの画面共有通話 これをすべてブラウザ上で出来ます。
9. 9 アバターで通話する 複数のモデルをモバイル端末で描画するのは大変 人が増えるたびにモデルの読み込みが必要… ビデオ通話にしよう
10. 10 アバターでビデオ通話 表情認識・描画 ビデオ通話(WebRTC) つまり、これ↓
11. 11 ネタばらし？ Windows PC MacBook MacBook Windows PC Windows PC スマートフォン (Galaxy S8)
12. 12 実装 : VRMモデルを動かす • Three.js Three.jsはウェブブラウザ上で3DCG を描画するJavaScriptライブラリ ・ボーンアニメーション json.extensions.VRM.humanoid.humanBones ・ブレンドシェイプ json.extensions.VRM.blendShapeMaster.blendShapeGroups
13. 13 実装 : 表情認識 jeelizはWebカメラだけでフェイストラッキングができる JavaScriptライブラリ 顔の回転 多様な表情認識可能 ・左右それぞれの眉 ・左右それぞれの目の開閉 ・左右それぞれの口角 ・口の開閉 ・口の丸まり ・歯を剥き出しにする これらをVRMモデルに対応させる https://jeeliz.com/demos/weboji/demos/threejs/fox/ (2019/3/26)
14. 14 実装 :アバターでビデオ通話 • SkyWay (WebRTC) サーバを構築・運用する必要がない ビデオ・音声通話、データ通信が利用可能 Community Editionは料金がかからない 個人開発者にやさしい・・・。
15. 15 課題 • 表情認識の負荷 – 端末の性能 – トラッキングがとぶ • 人数で通信量が増大する – フルメッシュの欠点
16. 16 これから VRMで作られたアバターを いろいろなところで使いたい！ デバイスに縛られずに アバターで楽しめるように！
17. 17 ありがとうございました Thanks! Twitter : @ke4563の プロフィールにあるURLから Vautaのデモができます。 推奨：Google Chrome