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

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

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

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

keshigomu

Other Decks in Technology

Featured

Transcript