Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Webでもあなたの姿で。 アバターチャットアプリ「Vauta」
Search
keshigomu
March 28, 2019
Technology
0
630
Webでもあなたの姿で。 アバターチャットアプリ「Vauta」
VRM集会 in cluster #01 で発表した資料です。
https://vdg.connpass.com/event/122216/
keshigomu
March 28, 2019
Tweet
Share
Other Decks in Technology
See All in Technology
エンジニア向け会社紹介資料
caddi_eng
15
250k
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
0
3.2k
contenteditableと向き合う
kikuchikakeru
2
240
Envoy External AuthZとgRPC Extensionを利用した「頑張らない」Microservices認証認可基盤
andoshin11
0
200
サイボウズ 開発本部採用ピッチ / Cybozu Engineer Recruit
cybozuinsideout
PRO
9
41k
Datadog を使ったプロダクトとクラウドの セキュリティモニタリング
mrtc0
0
590
Oracle Database 23ai 新機能 #3 Oracle Globally Distributed Database(GDD)
oracle4engineer
PRO
1
170
標準最高!標準はださくないぞ! at fukuoka.ts #1
yoiwamoto
0
160
Building Static Websites with Sculpin
opdavies
0
1.5k
手軽に始める? おうちサーバーのすゝめ
nyagasan
0
190
Javaにおける関数型プログラミンへの取り組み
skrb
7
280
CRTO/CRTL/OSEPの比較・勉強法とAV/EDRの検知実験
chayakonanaika
1
970
Featured
See All Featured
The Mythical Team-Month
searls
218
43k
The Illustrated Children's Guide to Kubernetes
chrisshort
46
48k
GraphQLとの向き合い方2022年版
quramy
43
13k
Raft: Consensus for Rubyists
vanstee
135
6.5k
A better future with KSS
kneath
235
17k
Mobile First: as difficult as doing things right
swwweet
220
8.8k
Git: the NoSQL Database
bkeepers
PRO
425
64k
GitHub's CSS Performance
jonrohan
1029
450k
Large-scale JavaScript Application Architecture
addyosmani
508
110k
Fontdeck: Realign not Redesign
paulrobertlloyd
80
5.1k
Robots, Beer and Maslow
schacon
PRO
157
8.1k
Designing on Purpose - Digital PM Summit 2013
jponch
113
6.8k
Transcript
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