1. Spokeを使ったイベント設営TIPS
2020-07-15
VRSionUp! #7
とーやくん / Toya Sakaguchi

2. とーやくん「Spokeを使ったイベント設営TIPS」
とーやくん / Toya Sakaguchi
静岡大学情報学部4年
GREE VR Studio Lab インターン
静大xR同好会はまりあ 代表
バーチャルアバター体験の普及に備えています。
LabではひたすらHubsのことを考えています。
卒業後のことは何も決まっていません！
2019.6 着ぐるみに入っていた縁で VTuber的な話をもらう
2019.9 アバター自作のため Blenderを始める
2019.11 VIVEを買って先輩とサークル立ち上げ
2020.2 友人と小学生をトラッキング
2020.4 バーチャルマーケット 4出展
2020.6 VR Studio Labでインターン開始
なぜか大学にあったPerception Neuron

3. Akihiko.shirai / VRStudio
Lab
● Hubs専用のシーンエディタ
● ブラウザ上で動作する
● シンプルで使いやすい
● 様々な拡張子のファイルを設置可
● .spokeファイルにimport/export可
Spokeのおさらい

4. Akihiko.shirai / VRStudio
Labメディア対応状況
Spoke ルーム (D&D)
JPG/PNG/GIF ◯ ◯
MP3 ◯ ◯
MP4 ◯ ◯
GLB ◯ ◯
PDF △ ◯
URL ◯ ◯
URL (MP4/PDFの直リンク) ◯ ◯
URL (YouTube/Dropbox等) △ △

5. Akihiko.shirai / VRStudio
Labメディアの設置
PDFは別サーバーにアップロードして直リンクが安定
● 先日までDropboxが利用できたが最近は不安定
Spokeでの動画設置にYouTubeは向かない
● YouTubeサーバーがHubsを不定期にブロックする
● Vimeo/Dropboxもあまり安定しない
● 動画はなるべく直接アップロードが良い
● Twitchストリーミング実験中(遅延目安20秒)

6. Akihiko.shirai / VRStudio
Lab
Spokeでシーンを作成する際、
音声がどのように減衰するかを設定できる
Web Audio APIのPannerNodeを使っている
Hierarchyの最上部シーン名を選択し
Propertiesの「Override Audio Settings」に
チェックを入れると一括で設定できる
(Mediaの設定はSpokeではなくルームでドロップしたものに反映)
PannerNode - Spokeで音響を設定する

7. Akihiko.shirai / VRStudio
Lab
Distance Model : linear/inverse/exponential
Rolloff Factor : 減衰の係数
Ref Distance : 減衰を開始する距離
Max Distance : 完全に減衰する距離
inverse/exponentialの場合、
Max Distanceを超えても無音にはならない(0に収束)
デフォルトはinverse
PannerNode - 音の届く距離を決める

8. Akihiko.shirai / VRStudio
LabPannerNode - 2つのコーンを理解する
参考
https://developer.mozilla.org/ja/docs/Web/API/PannerNode
https://webaudio.github.io/web-audio-api/#Spatialization-sound-cones
https://g200kg.github.io/web-audio-api-ja/#Spatialization-sound-cones
PannerNodeを真上から見下ろした図

9. Akihiko.shirai / VRStudio
Labチャットに打ち込むコマンド
/grow アバターのサイズが1段階大きくなる
/shrinkアバターのサイズが1段階小さくなる
アバターの原点の高さも変わるので注意
たまに動作しないこともある

10. Akihiko.shirai / VRStudio
Lab現実のスケール感、あるいはやや大きめ
● デフォルトアバターの目線の高さは約1.7m
● 展示物はY座標を1.5～2mくらいにしておく
大スクリーンなど、離れて大人数で見るものは高い位置でOK
見上げた際に上部ほど横に狭くなってしまう 高い位置の資料は角度をつけるという手も

11. Akihiko.shirai / VRStudio
LabVRSionUp! #7 の配信形式
レコーディング会場
ビューイング会場1
Twitch
OBS
映像
YouTube Live
OBS
発表者7名 + メディア4名 + スタッフ + 関係者
Hubs内聴講10名 + スタッフ1名

12. Akihiko.shirai / VRStudio
Lab配信 VRSionUp! #7 (縮小する場合)
レコーディング会場
ビューイング会場1
Twitch
OBS
映像
発表者7名 + メディア4名 + スタッフ + 関係者
Hubs内聴講10名 + スタッフ1名

13. Akihiko.shirai / VRStudio
Lab配信 Type A - 最小構成のTwitch配信
レコーディング会場
OBS
映像
Twitch
OBS
コメント欄
OBS-VirtualCam
要件
Hubsルーム参加 : 25名
Twitch視聴 : ∞
映像スタッフ : 1～2名
こんなイベントにオススメ
予想参加者数が50～100名以上
スタッフの人数が少ない
インタラクティブを求めない
視聴者がHubsに慣れていない
備考
ルームURLは公開しない
→登壇者の再入場を妨げないように
コメント投影なしも可
→スタッフがピックアップするとか

14. Akihiko.shirai / VRStudio
Lab配信 Type B - 鑑賞もHubsで
レコーディング会場
ビューイング会場1 ビューイング会場2 ビューイング会場3
Discord
Twitch
OBS
コメント
映像
別ウィンドウで確認
チャンネル1 チャンネル2 チャンネル3
要件
REC会場での参加 : 25名
View会場での参加 : 25名×ルーム数
Twitch視聴 : ∞
映像スタッフ : 1～2名
こんなイベントにオススメ
予想参加者数が100名未満
視聴側もHubsで参加したい
備考
TwitchのURLを予めSpokeで仕込む
View会場のURLのみ参加者に伝達
Twitchの配信URLも伝達OK
コメントログが分散してしまう
Discordの画面を投影も可（下図）

15. Akihiko.shirai / VRStudio
Lab配信 Type B' - よりライブビューイング風に
レコーディング会場
ビューイング会場1 ビューイング会場2 ビューイング会場3
Twitch
OBS
映像
OBS
OBS-VirtualCam
OBS
OBS-VirtualCam
OBS
OBS-VirtualCam
要件
REC会場での参加 : 25名
View会場での参加 : 25名×ルーム数
Twitch視聴 : ∞
映像スタッフ : 2～4名
こんなイベントにオススメ
予想参加者数が100名未満
視聴側もHubsで参加したい
View会場の風景をREC会場で見たい
備考
TwitchのURLを予めSpokeで仕込む
View会場のURLのみ参加者に伝達
Twitchの配信URLも伝達OK
OBS経由でコメントを読むのは至難
Twitch遅延のため往復会話は厳しい
「会場1のみなさ～ん！」がギリ？
TwitchでなくOBS+画面共有も可？

16. Akihiko.shirai / VRStudio
Lab展示と配信のハイブリッド型イベント
ポスター会場1 ポスター会場2 ポスター会場3
レコーディング会場
Twitch
OBS
要件
参加 : いっぱい
スタッフ : いっぱい
こんなイベントにオススメ
講演と展示を並列にこなす
備考
講演を全ルームにTwitch中継
参加者は自由に各会場を行き来
ルームのインデックスあると良ビューイング会場1 ビューイング会場2

17. Akihiko.shirai / VRStudio
Lab
Hubs/Spokeをフル活用したオンライン体験型学習コンテンツをつくっています
8月以降のイベントにて順次公開予定
鋭意制作中: Hubs完結型のワークショップ

18. Akihiko.shirai / VRStudio
Lab
その他、今後について
● KIDS' WORKSHOP 準備中
● Hubs利用研究進めています
困ったときは
● Hubs公式DiscordやGitHubで検索/質問
● ブラウザを変えてみる(FireFox/Chromium系)
● Hubs Cloudで起きた不具合はhubs.mozilla.comでも確認
● ブラウザ上F12キーでConsoleのエラーを確認
ありがとうございました

19. Akihiko.shirai / VRStudio
Lab
MDN - WEB Audio API / PannerNode
https://developer.mozilla.org/ja/docs/Web/API/PannerNode
Blenderマニュアル glTF2.0 Export
https://docs.blender.org/manual/en/dev/addons/import_export/scene_gltf2.html?highlight=gltf#baked-ambie
nt-occlusion
関連情報