MozilllaのHubs上で低遅延音声でアカペラLiveを実現するデモを行いました。音はYAMAHAのSYNCROOMでまとめて入力してます。

1. 4
T
H
C
O
F
F
E
E
H u b s で ア カ ペ ラ
＋ H u b s カ ス タ マ イ ズ 紹 介
デ ジ タ ル ・ ス タ ン ダ ー ド
H i r o n o r i
@ h i r o n o r i _ y a n

2. 4
T
H
C
O
F
F
E
E
自己紹介
Hironori @hironori_yan
大阪でプログラマーやってます
普段はWindowsアプリケーション、スマホアプリ、サー
バーサイド、インフラ開発なども少しやってます
最近はHubsの解剖、開発に注力。最先端のソーシャルＶＲ
を触って学ぶのは楽しい！
最近は、ElixirでのRTCや、Python使った機械学習による姿
勢推定に興味を持っています。

3. 4
T
H
C
O
F
F
E
E
今日の目次
・Hubsとは
・これまでのカスタイマイズざっくり紹介
・HubsによるVRアカペラ実践

4. 4
T
H
C
O
F
F
E
E
Hubsとは
• Mozillaが開発しているオープンソースのソーシャルＶＲ
• 3D空間で動く、話す、テキストチャット、メディア共有、画面共有
などが出来る
• WEBで出来ているので、ブラウザで動く。
• サインインの必要も無く、ＵＲＬを共有するだけで目的の部屋ま
でひとっとび出来る
• VR端末、PC、スマホすべてに対応

5. 4
T
H
C
O
F
F
E
E
Web XR Awards
Multi-User Experience
of The Year受賞
2021/2/21
h t t p s : / / t w i t t e r . c o m / M o z i l l a
H u b s / s t a t u s / 1 3 6 3 2 6 1 4 5 5 3 4 5
2 1 7 5 3 6 ? s = 2 0

6. 4
T
H
C
O
F
F
E
E
カスタマイズ事例
こ れ ま で の 成 果

7. 4
T
H
C
O
F
F
E
E
過去実績（１） ECサイト化
クライアントコード Hubsの改造
Iframe ×「どこでもColor me」
VTech Challenge 2020 10/23 最終選考会
https://vr.gree.net/lab/vtc/vtc20/?

8. 4
T
H
C
O
F
F
E
E
過去実績（2）別WEBサイトとのログイン連携
LambdaのAPI とReticulumのDB編集により実現

9. 4
T
H
C
O
F
F
E
E
過去実績（3）
Open Connect IDによるログイン連携

10. 4
T
H
C
O
F
F
E
E
Hubsでアカペラ
V R 空 間 で リ ア 充 っ ぽ く

11. 4
T
H
C
O
F
F
E
E
Hubsでアカペラの概要
• 複数人で構成されるアカペラ隊がHubsの部屋でライブする
• 演奏者は異なるネットワーク環境から演奏するが、遅延無く
見事なハモリが出来るかを挑戦
演奏する部屋のURLを配布すれば、一般ユーザーはそれをク
リックするだけでバーチャルライブ会場へ移動し、
生アカペラを臨場感MAXで楽しめる！

12. 4
T
H
C
O
F
F
E
E
VRアカペラ演奏環境の大枠
各演奏者の音声は別サービスSYNCROOM（YAMAHA）で同期してまとめて、
配信用として定めた任意の１台のPCで
合唱されている音声を仮想マイクVBCable(https://vb-audio.com/Cable/)
でHubsのスピーカに流す
SYNCROOMによる音の低遅延同期
VBCable
Hubsライブ会場
スピーカーアバターとしてマイクONで入室
演奏者１ 演奏者２
配信用

13. 4
T
H
C
O
F
F
E
E
SYNCROOMとは・・
• 低遅延ネットワークでセッションが
出来るYAMAHAのサービス
(https://syncroom.yamaha.com/)
• 設定画面で音の入力、出力を
指定可能
• 各演奏者の音量調整や、録画
機能などもある

14. 4
T
H
C
O
F
F
E
E
VRアカペラ演奏環境の構成（演奏者2人）
SYNCROOMによる音の低遅延同期
Output:
VBCable
Hubsライブ会場
スピーカーアバターとしてマイクONで入室
演奏者１ 演奏者２
配信用
演奏ステージにはそれぞれの3Dアバターで入場
※視聴者からすれば、
演奏者と同じユーザーである必要は無い
Input:
VBCable
Windows10
Chrome
Mac book Air
Safai
Windows10
Firefox

15. 4
T
H
C
O
F
F
E
E
加えて歌唱中に身振り手振りを付ける！
• Hubsでは、
• OculusなどのVRヘッドマウント
ディスプレイを使用すれば顔と手
の動きを表現可能！
• VR空間の観客を見ながらの演
奏はライブの臨場感さながら？

16. 4
T
H
C
O
F
F
E
E
リアルアバターっぽい、かつ、手足が動く3Dアバター作成
1. Ready Player Me
（https://readyplayer.me/）
で１枚のセルフィーからアバター作成
2. VRoidの3Dアバターの胴体を
Blenderで合体させる
kn1chtさんの記事「Mozilla Hubsで手持ちのアバターを
使えるようにする手順」
https://zenn.dev/kn1cht/articles/962fbcd5739e818e95a1
を参考にさせて頂きました

17. 4
T
H
C
O
F
F
E
E
さらに、パフォーマンスに対して投げ銭出来る様に！
• 投げ銭システムの
Doneru(https://doneru.jp/)を利用
• 演奏ステージ横にWEBサイトを表
示して、いつでも観客が投げ銭出
来る環境に！
ライブ会場のURLリンク押下 ⇒ ライブ鑑賞 ⇒ 投げ銭
のシナリオをスムーズに実現！

18. 4
T
H
C
O
F
F
E
E
困ったこと：アカペラが出来る知り合いがいない
エンジニアの本分：
無ければ、、、作ればいい（自ら歌えばいい！！）
曲目：小さな恋のうた
1st part: Hironori
2nd part: Brave My Partner

19. 4
T
H
C
O
F
F
E
E

20. 4
T
H
C
O
F
F
E
E
今後の課題と展望
• 配信環境の準備作成に慣れる（音響設備、ネットワーク回線の確認、アバター準備
など）
• 投げ銭の画面はHubsの部屋のなかで開く様に改修
• 単純にアカペラの演奏が難しかったので、ちゃんとしたアカペラグループに実践してもらい
たい！
その先に、大アカペラVTuber時代！！

21. 4
T
H
C
O
F
F
E
E
あ り が と う ご ざ い ま し た
デ ジ タ ル ・ ス タ ン ダ ー ド
H i r o n o r i
@ h i r o n o r i _ y a n