オープンソースで構築するWebメタバース～Mozilla Hubsで学ぶUX開発から運用コスト最小化まで #CEDEC2022

オープンソースで構築するWebメタバース
～Mozilla Hubsで学ぶUX開発から運用まで
REALITY株式会社 GREE VR Studio Laboratory
白井暁彦、堀部貴紀
グリー株式会社開発本部
駒崎拓斗

～Mozilla Hubsで学ぶUX開発から運用コスト最小化まで
MozillaがOSSで開発しているWebXR「Mozilla Hubs」を題材に、
令和メタバース時代に求められる垂直な技術要素を
GREE VR Studio Laboratoryが培ってきたノウハウをもとに紹介します。
1. インフラエンジニアから見た
Hubs Cloudベストプラクティス
2. 大学院生が学ぶ Hubs Cloud大解剖(アナトミー)
ローカルビルドを通してクラウドサービスを分解
3. 令和メタバース時代に求められる垂直技術と
研究開発における挑戦
REALITY株式会社 GREE VR Studio Laboratory 白井暁彦、堀部貴紀
グリー株式会社開発本部駒崎拓斗
08月23日(火) 17:30 - 18:30
第6会場にお越し下さい！

本セッションでは、Mozillaがオープンソースで開発している
WebXR「Mozilla Hubs」(https://hubs.mozilla.com/ )を題材に、
令和メタバース時代に求められる垂直な技術要素を解説していきま
す。展示会やオープンキャンパス、学会やワークショップのようなイ
ベント業務用途、快適な音響空間の設計、ToC向けサービスの開発、
サーバのカスタマイズ、カスタムクライアント、そしてインフラ面は
Hubs Cloud AWSおよびReticulumの運用テクニックについて、GREE
VR Studio Laboratoryが中心に長年行ってきたドキュメントの日本語
化やコンサルテーションのノウハウを整理して、チュートリアル形式
で垂直統合開発の実際と普及展開手法を紹介します。
[チュートリアルセッション] 本日17:30〜18:30(第6会場)
【登壇】
駒崎拓斗グリー株式会社開発本部リードエンジニア
堀部貴紀 REALITY株式会社/明治大学大学院(インターン)
白井暁彦 REALITY株式会社 GREE VR Studio Lab.
(1)インフラエンジニアから見た
(2)大学院生が学ぶ Hubs Cloud大解剖
(3)令和メタバース時代に求められる
垂直技術と研究開発における挑戦
https://vr.gree.net/lab/demo/hubs/

オープンソースで構築するWebメタバース～Mozilla Hubsで学ぶUX開発から運用まで
8月23日(火) 17:30 〜 18:30（第6会場）
本セッションでは、Mozillaがオープンソースで開発しているWebXR「Mozilla Hubs」
(https://hubs.mozilla.com/ )を題材に、令和メタバース時代に求められる垂直な技術要
素を解説していきます。展示会やオープンキャンパス、学会やワークショップのようなイ
ベント業務用途、快適な音響空間の設計、ToC向けサービスの開発、サーバのカスタマイ
ズ、カスタムクライアント、そしてインフラ面はHubs Cloud AWS 1.1.3および
Reticulumの運用テクニックについて、GREE VR Studio Laboratoryが中心に長年行って
きたドキュメントの日本語化やコンサルテーションのノウハウを整理して、チュートリア
ル形式で垂直統合開発の実際と普及展開手法を紹介します。
[チュートリアルセッション] 本日17:30〜18:30(第6会場)
【登壇】

白井暁彦 @o_ob
GREE VR Studio Laboratory, Director。メタバース時代のR&D・UX開発に加え、
Mozilla Hubsドキュメントの日本語化、デジハリ大学院での「メタバース年賀状」や、
企業向けメタバース技術のコンサルティングや普及活動を行っている。
堀部貴紀
2019年10月より、GREE VR Studio Laboratoryに参加。これまで『転声こえうらな
い』(https://vr.gree.net/lab/vc/)利用者の音声分析やボイスチェンジャーのiOS実装や
高速化、XRメタバースでのUX開発、特に音声体験を担当。
駒崎拓斗
現在、グリー株式会社開発本部所属。インフラエンジニアとしてサーバ環境の立ち上
げ・運用などを担当。
登壇者紹介
チュートリアル：オープンソースで構築するWebメタバース

1. インフラエンジニアから見たHubs Cloudベストプラクティス
2. 大学院生が学ぶ Hubs Cloud大解剖(アナトミー)
3. 令和メタバース時代に求められる垂直技術と
研究開発における挑戦
チュートリアル構成

Hubs Cloud AWS 1.1.3をベースに解説
インフラエンジニアから見た

[自己紹介] 駒崎拓斗（コマザキタクト）
グリー株式会社開発本部インフラストラクチャ部
AWS や GCP 等のクラウドを中心にグリーグループ各種
サービスのインフラ環境開発・運用などを幅広く行う。
WRIGHT FLYER STUDIOS アナザーエデン/ダンまち/まお
りゅうなど各種ゲームサービスのインフラエンジニアリン
グに従事
Hubs Cloud AWS では VR Studio Lab. からの依頼で
CloudFormation 関連を中心に AWS 領域の調査分析、
各種環境の構築を担当

● Mozilla Hubs とは
○ Web XR / コラボレーションプラットフォーム
● Hubs Cloud とは
○ Hubs を自前でホストできるパッケージ
● Hubs Cloud AWS とは
○ AWS 環境向け Hubs Cloud
○ 自分の AWS アカウント内で完結
● 本日のチュートリアル
○ 構築編 : ゼロから最初の Web アクセスまで
○ 運用編 : 継続稼働に際し考えること
Hubs Cloud AWS について
ほかに DigitalOcean 向けもある

ゼロから最初の Web アクセスまで
構築編

● AWS アカウント
○ 要管理者(相当)権限
● ドメイン
○ 自分に所有権があるものを 2つ
■ メイン用
● アプリ URL はここのサブドメイン
■ 短縮 URL 用
○ AWS Route 53 でのレコード管理を強く推奨
用意するもの

● AWS Quick Start (Hubs by Mozilla ドキュメント)
● AWS アカウント準備
● ドメインを決める
○ ちょいちょい罠があるので
ドキュメントの Domain Recipes を本当によく読んでください！
● AWS Market place からポチポチ
○ パラメータ入力
■ ドメイン、インスタンススペック、
バックアップ日数、アクセス元制限、etc.
● VR Lab では日本語訳も公開しています
■ https://github.com/gree/hubs-docs-jp/wiki/hubs-cloud-aws-quick-start
立ち上げるまで

● Lab での例
○ 管理しているゾーン
■ vr.gree.net (メイン)
■ vr-internal.gree.net
■ gvr.la (短縮用)
○ ※ 階層の問題でマケプレ配布設定そのままだと動かないので
パッチして構築している
● そのまま動かせる例
○ myhubsapp.com のようにトップ直下のゾーン
補足: ドメインについて

Domain Recipes をよく読んでください！
ブラウザ操作で完結

Domain Recipes をよく読んでください！

● AWS CloudFormation
○ 設定ファイルを渡すと
システムを構築してくれるサービス
○ マーケットプレイスで Hubs 一式を構築するための
設定ファイルが配布されている
● CloudFormation の詳細は弊社エンジニアブログ
「Hubs Cloud で学ぶ AWS CloudFormation 実践入門」
もご参照ください
構築のしくみ Resources:
HelloBucket:
Type: AWS::S3::Bucket
Properties:
AccessControl: PublicRead

https://labs.gree.jp/blog/2022/07/21668/

継続稼働に際しての考慮
運用編
Q&A で見ていきます

● いくらかかるのか
● なるべく安く済ませるにはどうするか
● クラウド破産を防ぐには
● どのくらいの負荷に対応できるのか
● オートスケーリングできるのか
● インフラ障害時はどうするのか
● リソース監視、障害検知はできるか
● バックアップをとるにはどうすればいいか
● サーバにログインして調査、デバッグできるか
● アップデートするにはどうするか
● 認証やアクセス制限はできるのか

Q. いくらかかるのか
A. つけっぱなしだと
- 最低￥4,000/月～くらいのイメージ
※Personal版、t3.micro, ELB 無し, Aurora 休眠あり
- 上は青天井
● 完全に使い方による…が
○ 無料枠で維持～は難しい
● 主な課金要素
○ EC2(VM), RDS(DB), ライセンス料, データ通信費
○ 大きい課金ポイントを把握しておく
※意外と(?) 高くなりがち

AWS Marketplace 上の推定コストも参考に
アプリ+VM 部分の費用
インフラ部分の費用(月額)
※合算したものが総コストです

A. Personal を使う, EC2 最小サイズ, DB 休眠有効化,
使わない時間はオフラインモード
● 小規模+冗長構成が不要なら Hubs Cloud Personal
● Enterprise は必要な台数、スペックを見積もる
○ 動かすまえに見積もるのは難しい、動かしてみて落としていく
● DB 休眠: Aurora Serverless の機能, 一定時間無アクセ
スの際に休眠状態になる
● オフラインモード: データを保持しつつ計算資源を停止
Q. なるべく安く済ませるにはどうするか

・8,193円/月が底値
（挑戦者募集中…！）
・冬眠状態からURLを叩くこと
で起動できる(暖機)、5分ぐら
いは待つが開発環境なので可。
・3月にコンサル案件で激しく
利用、とはいえ内部テスト用な
のでセッションは開発者のみ。
[結論]開発サーバは
平均10,000円/月程度。
★ちなみに運用Svはアクセス数
に依るところが大きいです。
（人気になると高くなる！）
[ラボ公開] VRStudioLab開発環境での実測データ
[Hubs Cloud AWS Enterprise]コスト最小化チャレンジ

A. DB 予算を設定しておきましょう
● 作成時のパラメータに DB予算入力欄がある
● 超えた場合に自動的にオフラインモードになる
● Hubs の設定以外にも
AWS の予算アラートを
設定しておくとよい
Q. クラウド破産を防ぐには

A. コンテンツに依存するので実際に試して計測しましょう
● 推定同時ユーザ数上限はドキュメントに記載がある、が
https://hubs.mozilla.com/docs/hubs-cloud-aws-estimated-ccu-limits.html
● 例えば、動画コンテンツ多めだと
ストリーミングサーバが
ボトルネックになる、等
コンテンツ依存が大きい
Q. どのくらいの負荷に対応できるのか

A. DB : できる
VM : むずかしい
● DB は Aurora Serverless v1: 負荷に応じて性能変化
● VM(EC2) は AutoScalingGroup により台数維持されて
いるが、自動スケールはされない
○ 都度手動スケールは可能 (パラメータ更新)
Q. オートスケーリングできるのか

A. ネットワーク、VM、DB、CDN などに障害出た場合に
サービス停止を伴う可能性が高いが、
多くは自動復旧可能
● アプリケーション起因でなければ、ただ AWS 側の復旧
を待つだけになることも多い
■ VM(EC2): AutoScalingGroup で正常インスタンス台数を維持
■ DB(Aurora): 障害時は裏で別インスタンスに切り替わる(見えない)
■ マネージド・サービスはユーザができることが少ない
Q. インフラ障害時はどうするのか

A. Amazon CloudWatch サービスを利用できます
● 基本的なメトリクスなら CloudWatch で十分使える
○ 必要に応じてアラート設定可能
● Hubs パッケージ中の機能としては無い
● アプリケーションのメトリクスを取り込む設定も無い
Q. リソース監視、障害検知はできるか

A. デフォルトで日時バックアップが有効
(NFS データ領域, DB が対象)
Hubs を消しても残る
● データ領域には EFS (マネージド NFS) と DB (Aurora)
が使われる
○ VM ローカルにはユーザデータ保存されない
■ VM はいつでも入れ替え可能
● バックアップデータ参照はいつでも可能
● 完全レストア時には Hubs をまるごと作り直す
Q. バックアップをとるにはどうすればいいか

A. SSH で自由にログイン可能
接続元 IP を絞る設定もあり
● アプリケーションサーバは VM (EC2) が本体なのでログ
インして自由に操作可能
● Session Manager でブラウザからの擬似 SSH も可
Q. サーバにログインして調査、デバッグできるか

A. 接続元 IP 制限くらいは可能
● 認証機能は提供されていない
● 構築後のカスタマイズで LB 等の認証を追加することは
できる
○ ただし、アップデートやオフラインモード時の巻き戻りには注意
● ログイン方法がメールのマジックリンクなので、ドメイ
ン制限などで間接的にログイン制限できなくもない
Q. 認証やアクセス制限はできるのか

A. バックアップ取得 -> 停止 -> CloudFormation 更新
● 最新の CloudFormation テンプレートを取得し更新
○ CloudFormation 外での設定変更は
巻き戻されるので注意
■ 整合性とれなくて更新できなくなる場合も
● 更新中はサービス停止させるのが無難
○ 無停止アップデートは考えない
● VM 上のアプリケーションサーバは自動更新
○ サーバのセキュリティパッチ等
Q. アップデートするにはどうするか
オフラインモード

● AWS 知識が無くても立ち上げ、公開できます
● Hubs 簡単にできること:
○ 可用性要件や厳密性のあまり高くない短期イベント
○ 調査・研究
● ちょっと要専門人員なこと:
○ 中長期での運用、継続的なアップデート
■ AWS 全体的なスキル
○ カスタマイズ : インフラ面、フロント面両方
● 製品のレールから外れない運用をおすすめ
○ 何が製品 (CloudFormation で提供される機能) の管理下なのかを
把握しておく
■ 生のリソースを AWS 上で自由に設定変更できてしまうが、
巻き戻りや不整合など更新時の影響も忘れずに
おわりにひとこと

グリー開発本部
https://labs.gree.jp/
https://techcon.gree.jp/2022
その他のHubs関係資料はこちら

Hubs Cloud AWS 1.1.3をベースに
大学院生が学ぶ Hubs Cloud大解剖
アナトミー

GREE VR Studio Laboratory インターン
明治大学大学院先端数理科学研究科
先端メディアサイエンス専攻修士1年
音声に関係するメディアサイエンス研究を担当。
最近は研究開発をショートフィルムで表現する活動
「UXDev」で音声信号と表情の研究を担当。
[自己紹介] 堀部貴紀（ホリベタカノリ）
https://youtu.be/bU8QUlxOTFU クレッセントさんでモーションアクターも体験

1. Mozilla Hubsに関する大調査
→ Discordログ + Git History + ソース/データベースそのもの
2. ローカルビルドしてみよう
Gitリポジトリで見るMozilla Hubs
→ ローカルビルドまでのログは、GoogleDocs 30P超えになりました。
3. ハマリポイント
4. データベースを覗いてみた。

Mozilla Hubsサービスを提供するサーバ群 (Hubs Cloud 1.1.1をベースにした図解)
Hubs-Ops v1.0.20200423002053 EC2x4 (C5.2xlarge)
NAF
JanusVR
[Reticulum]
AppInstance
[各ユーザ端末]
Hubsクライアント
Node.js
AFrame(Three.js)
● セッション
● チャット
● シーン
● アバター
● 動画キャッシュ
● ユーザテーブル
● ユーザ間通信
● 3Dモーション
● WebRTC会話
[CloudFlare]
CDNキャッシュ
Workersで実装
HubsAdminで設定
アプリログ(有料)
Sentry.io
デバッグ用途
アプリログ
Google Analytics
ユーザKPI観測
Telemetry.js:設定はHubs-Admin画面内でAPIへのタグやエンドポイントを設定
AWS側の機能利用
[S3]メディア保管 [ELB]ロードバランサー
[SES]メール発信
[Lambda] botomatic Botなど
[Route53]ドメイン管理
Discord連携
Discordのユーザ認証や現在のルーム内のユーザ名取得、タイマー
機能などWebAPIでの連携しやすそうなコマンドが実装されている。
ボットサーバ経由で通信はクライアントのdiscord.jsのみで行っている
が、Reticulmへの問い合わせも実現している。
Farspark
[Spoke]
シーンエディタ
Hubs-Admin
Lib-Hubs
[Reticulum]
Streaming
postgrest_server = "https://hubs.local:3000"
[cors_proxy_server]
"cors-proxy-dev.reticulum.io"
[thumbnail_server]
nearspark-dev.reticulum.io
Reticulumは hubs.vr.gree.netのバックエンドとして機能 vr-internal.gree.netもしくはdev.reticulum.io
non_cors_proxy_domains = "hubs.local,dev.reticulum.io"
★この図で描き切れていないもの
・WebSocketでの通信
・NAFとJanusの詳細
・WebRTC, STUN, ICE
サムネを作るだけのサーバ NearSpark
複数構成になった時の影
セキュリティ設定注意
EC2が2台構成
PostgreSQL
AWS Aurora
database

Mozilla Hubsサービスを提供するサーバ群 (Hubs Cloud AWS 1.1.3版を一部反映)
Hubs-Ops v1.0.20200423002053 EC2x4 (C5.2xlarge)
【Dialog】
[Reticulum]
AppInstance
[各ユーザ端末]
Hubsクライアント
Node.js
AFrame(Three.js)
● セッション
● チャット
● シーン
● アバター
● 動画キャッシュ
● ユーザテーブル
● ユーザ間通信
● 3Dモーション
● WebRTC会話
[CloudFlare]
CDNキャッシュ
Workersで実装
HubsAdminで設定
アプリログ(有料)
Sentry.io
デバッグ用途
アプリログ
Google Analytics
ユーザKPI観測
Telemetry.js:設定はHubs-Admin画面内でAPIへのタグやエンドポイントを設定
AWS側の機能利用
[S3]メディア保管 [ELB]ロードバランサー
[SES]メール発信
[Lambda] botomatic Botなど
[Route53]ドメイン管理
Discord連携
Discordのユーザ認証や現在のルーム内のユーザ名取得、タイマー
機能などWebAPIでの連携しやすそうなコマンドが実装されている。
ボットサーバ経由で通信はクライアントのdiscord.jsのみで行っている
が、Reticulmへの問い合わせも実現している。
Farspark
[Spoke]
シーンエディタ
Hubs-Admin
Lib-Hubs
[Reticulum]
Streaming
postgrest_server = "https://hubs.local:3000"
[cors_proxy_server]
"cors-proxy-dev.reticulum.io"
[thumbnail_server]
nearspark-dev.reticulum.io
Reticulumは hubs.vr.gree.netのバックエンドとして機能 vr-internal.gree.netもしくはdev.reticulum.io
non_cors_proxy_domains = "hubs.local,dev.reticulum.io"
サムネを作るだけのサーバ NearSpark
複数構成になった時の影
セキュリティ設定注意
EC2が2台構成
PostgreSQL
AWS Aurora
database
★この図で描き切れていないもの
・WebSocketでの通信
・NAFとJanusの詳細
・WebRTC, STUN, ICE
Janus→Dialog

Dialog - Mediasoup based WebRTC SFU for Mozilla Hubs.
Mediasoup https://mediasoup.org/
● オープンソースで公開されているWebRTC SFU。
● API：Node.js、WebRTC：C++で実装されている。
● Dialog：`npm ci` で追加される。
【Git History】
[Date/Repository]
[20-05-20/Dialog] Initial commit
[20-06-12/Hubs] Support for new Mediasoup-based SFU, dialog
[21-08-05/hubs-docs] ドキュメントにDialogが追記される

Mozilla Hubsをローカルビルドしてみよう。
Due to our small team size, we don't support setting up Reticulum locally due to
restrictions on developer credentials. Although relatively diﬃcult and new
territory, you're welcome to set up this up yourself.
https://github.com/mozilla/reticulum/blob/master/README.md より
> チームの規模が小さく、開発者に限界があるため、ローカルでのReticulumのセット
アップはサポートしていません。比較的難しく、新しい分野ではありますが、ご自身で
セットアップを行っていただくことは歓迎します。
Mozilla Hubs（フルスタック！）をローカル環境にビルドするためには...
Reticulum + Dialog + Hubs + Hubs Admin + Spoke
環境：M1搭載Macbook Pro
※(明記されていないが) Windows環境はお勧めできない

【Reticulum】
ゲームネットワークとWeb APIのハイブリッド
サーバー
https://github.com/mozilla/reticulum
● Avatar transforms
● Auth/magic sign in links
● Decrypt
● Scene updates
● User permission validation
● Node.js
● PostgreSQL (recommended version 11.x)
● Erlang (v22) + Elixir (v1.8) + Phoenix
● Ansible
System Overview: https://hubs.mozilla.com/docs/system-overview.html
【Dialog】
MediasoupをベースとしたWebRTCサーバー
→ 音声/ビデオの処理を担う
https://github.com/mozilla/dialog

【Spoke】
Hubsシーンを簡単に製作できるエディタ
https://github.com/mozilla/spoke
【Hubs】
Mozilla Hubsにおけるクライアントサイド
https://github.com/mozilla/hubs
オープンソースならではのこと
→ カスタムクライアント
● React.jsベース
● 機能ベース
● Node.js
8/3 READMEにて16.16.0に更新
System Overview: https://hubs.mozilla.com/docs/system-overview.html

ローカルビルド成功！

ハマリポイント
① Cross-Origin Resource Sharing; CORSエ
ラー
② 証明書
● セットアップが終わったのに、
サーバが起動できない
● perms_keyを利用しても動かない
→ ローカルビルド用に証明書を作るほうが
はやい
ローカルSpokeで発生するCORSエラー
conﬁg/test.exsにあるperms_key
https://github.com/mozilla/reticulum/blob/master/conﬁg/test.exs
…がこれは動かないので注意!

データベースを覗いてみた。
● account_favorites
● accounts
● api_credintials
● app_configs
● assets
● avatar_listings
● avatars
● cached_files
● hub_binding
● hub_invites
● hub_role_memberships
● hubs
● identities
● login_tokens
● logins
● node_stats
● oauth_providers
● owned_files
● project_assets
● projects
● room_objects
● scene_listings
● scenes
● schema_migrations
● session_stats
● support_subscriptions
● web_push_subscriptions
(DB) ret_dev > (schema) ret0 > Table (27)

accounts
account_id (bigint)
inserted_at (timestamp without time zone)
updated_at (timestamp without time zone)
min_token_issued_at (timestamp without time zone)
is_admin (boolean)
state (account_state)

identities
identity_id (bigint)
name (character varying)
account_id (bigint)

login_tokens
login_token_id (bigint)
token (character varying)
identiﬁer_hash (character varying)
payload_key (character varying)

logins
login_id (bigint)
identiﬁer_hash (character varying)
account_id (bigint)

room_objects
room_object_id (bigint)
object_id (character varying)
hub_id (bigint)
gltf_node (bytea)
account_id (bigint)

session_stats
session_id (uuid)
started_at (timestamp without time zone)
ended_at (timestamp without time zone)
entered_event_payload (jsonb)
entered_event_received_at (timestamp without time
zone)

データベースを覗いてみた。- hubsテーブル
● hub_id (bigint)
● hub_sid (character varying)
● slug (character varying)
● name (character varying)
● default_environment_gltf_bundle_url
(character varying)
● inserted_at
(timestamp without time zone)
● updated_at
● max_occupant_count (integer)
● entry_mode (hub_entry_mode)
● spawned_object_types (bigint)
● scene_id (bigint)
● entry_code (integer)
● entry_code_expires_at
● host (character varying)
● created_by_account_id (bigint)
● scene_listing_id (bigint)
● creator_assignment_token (character
varying)
● last_active_at
● embed_token (character varying)
● embedded (boolean)
● member_permissions (integer)
● allow_promotion (boolean)
● description (character varying)
● room_size (integer)
● user_data (jsonb)
カッコ内は
データ形式

データベースを覗いてみた。- hubsテーブル
● hub_id (bigint)
● hub_sid (character varying)
● slug (character varying)
● name (character varying)
● default_environment_gltf_bundle_url
(character varying)
● inserted_at
● updated_at
● max_occupant_count (integer)
● entry_mode (hub_entry_mode)
● spawned_object_types (bigint)
● scene_id (bigint)
● entry_code (integer)
● entry_code_expires_at
● host (character varying)
● created_by_account_id (bigint)
● scene_listing_id (bigint)
● creator_assignment_token (character
varying)
● last_active_at
● embed_token (character varying)
● embedded (boolean)
● member_permissions (integer)
● allow_promotion (boolean)
● description (character varying)
● room_size (integer)
● user_data (jsonb)
ローカルビルドでは、アップロードしたプロジェクトやアセットが
json形式で記録/書き出しされる。
（storage/devフォルダにjsonが保存される。）
カッコ内は
データ形式

Mozilla Hubsのローカルビルドは難しくない！
● M1 Macでもできる！(IntelMacのほうがスッと通りますが)
→メタバース実験環境として使えそう
● READMEが整っている
○ 日本語化 github.com/gree/hubs-docs-jp/wiki
● AWSにデプロイも可能

Hubs-Ops内部使用ポート (AWS CloudFormation)
RetExternal:外部向け通信(SSL) Port: 443
RetInternal: 内部通信 Port: 4000
RetTurnExternal:TURN Port: 5349
DialogInternal:Dialog内部通信 Port: 8443
DialogExternal:Dialog外部通信 AppPort: 8443
DialogExternal: StreamPort: 443
DialogTurnExternal:DialogTURN Port: 5349
DialogAdmin:Dialog管理 Port: 7000
DialogWebRTCFrom: Port: 51610
DialogWebRTCTo: Port: 60999
YTDL:YouTubeDownloader Port: 8080
BioCensus: ？ Port: 9631
BioRingRPCIngress: Port: 9638
SSH: Port: 22
PostgreSQL: Port: 5432
ver.1.1.2(2021/10/7 GREE VR Studio Lab 調べ)
※主要なもののみ
AWS::Lambda Functions
Runtime: nodejs14.x
NearSpark: サムネをつくるだけのλ関数
AWS::Route53
DNS, ショートリンク制御
AWS::SES: メール発信
AWS::S3:AssetsBucket
AWS::AutoScaling
PauseTime: PT30M SuspendProcesses:
- HealthCheck - ReplaceUnhealthy
- AZRebalance - AlarmNotiﬁcation
- ScheduledActions
AWS::KMS::Alias AWS::Budgets
AWS::RDS::DBSubnetGroup AWS::RDS::DBCluster
Secrets{Janus+ReticulumAdmin,
Phoenix,Guardian,ReticulumOAuthToken,ReticulumCookie,Retic
ulumBot, SendEmailPassword
chrome://webrtc-internals/ で見れるよ!

PostgreSQL - データ型
uuid：8.12. UUID 型
integer：4バイト整数 / bigint：8バイト整数 8.1. 数値データ型
character varying：可変長文字列 5.3. 文字列データ型
bytea：可変長のバイナリ列 8.4. バイナリ列データ型
jsonb：json形式バイナリ型 8.14. JSONデータ型
timestamp without time zone：8バイト, 日付・時間（時間帯ない） 8.5. 日付/時刻データ型
boolean：true/false（有効な形式がいくつかありそう→） 8.6. 論理値データ型
【以下、独自？（少なくとも標準ではない）データ型】
account_state, hub_entry_mode, oauth_provider_source

日本語翻訳/FAQから学ぶ最新情報と
GREE VR Studio Laboratory の研究開発
令和メタバース時代に求められる
垂直技術と研究開発における挑戦

イベント、展示会やオープンキャンパス、学会やワークショップ…B2B/B2B2C
など本格的なメタバースサービスにおける課題
GREE VR Studio Lab/DHGS,日本語翻訳/FAQから学ぶ最新情報
■たくさんの人がきても住み心地の良い場所をつくる
■日本のコンプライアンスに対応する
■UX面の研究開発：快適な音響空間への取り組み
■UGC環境の開発への課題と挑戦
最後にお知らせがあります！
令和メタバース時代に求められる垂直技術とUXの挑戦

GREE VR Studio Laboratory, Director / REALITY株式会社
Digital Hollywood University 大学院(DHGS) 客員教授
白井暁彦 @o_ob
GREE VR Studio Laboratoryの
研究開発

REALITY
スマホひとつでアバター作成、ライブ配信による交流やゲームまで楽しめるスマートフォン向けメタバース
アバター作成ライブ視聴ギフト・コラボ
ライブ配信ゲーム
61
▶ https://reality.app でダウンロード

「REALITY」4周年ありがとうございます!!!

東急田園都市線渋谷駅B1F
A0/A1出口方面の壁面(8/28まで)

“REALITY” Overview
10 billion yen investment from GREE, Inc., expected to continue growth in the future
64
Downloads
5,000,000+
Time Spent per Person
p/day for Active Users
average170min
Global
12 Lang.
63Country/Region
Active Streamers
600%+ than
past year
Age Gender Global
Gen-Z(18-24)
58.2%
25-34
15.7%
35-44
14.2%
45+
11.9%
※U17 excluded. The age data comes from user own reported “born year”,
which is not changeable user data.
Female
63.1%
Male
36.9%
JP
US
Others

REALITY株式会社における「GREE VR Studio Laboratory」
REALITY
[PF]
BizDev and operating
the metaverse through
our own service “REALITY.app”
[XRC]
Corporate solutions for B2B
Metaverse construction
REALITY XR cloud
[R&D Division]
Long-span R&D,
IP Creation,
Alliances, CSR,
Academic Relations,
Social implementation,
Experimental Service,
Consulting, PoC Dev
WebXR, new tech.
Supports
Shareholder: GREE, Inc. (100%)

[XRC]「人がいるメタバース」の開発
REALITYが提供した
「HISトラベルワールド」の
来場者数が130万人を突破
～バーチャル支店では国内最大級
の来場者数へ～
(2022/8/9 PR)
https://reality.inc/news/000414/
H.I.S. Travel World: 1,355,831 visitors (June 29 to July 27)
Male:Female={36,64}%
Age 18-24: 60.7%
Repeat rate: 61.6%
ユーザの体験による
あらたなUGCコンテンツの発生
広告や企業ブランドの
コミュニケーションとしての価値
Gen-Z世代より下の世代は
PCよりも圧倒的に
「スマホから繋がるメタバース」

(焼肉のワタミでお客さんをお迎えする )
「街の人気者になりたい」
「あの人に会いたい！」

「なぜやるのか?」（「REALITY」の進化成長と並列に）
AI技術/触覚/新規デバイス/UGC/異業種連携といったVR/XR/VTuber/ライブエンタメ/
メタバース時代のUX開発のなかで「世界のWebXRの先端」として調査探求。
研究成果を発信、OSSでのコミュニティ貢献や、B2B2C研究開発としての貢献を行い、
メタバース時代の新たなR&Dの価値創出を業界の先陣を切って切り拓いていく。
▲https://j.mp/VRSYT ▲Hubs内でのコンテスト “VTech Challenge” ▲最新作 ”MetaDreamers:AIFusion”
[VRStudioLab]未来のメタバースUX開発におけるHubs研究

2020年初頭からMozilla Hubsの「ドキュメント日本語化」や普及イベントで活動。
https://vr.gree.net/lab/demo/hubs/ https://github.com/gree/hubs-docs-jp/wiki
【企業コンサル案件】業務的にXRCと協働でB2B2C産業向けコンサルティングを提供
（抜粋）①イオンシネマ様「バーチャルシネマ」のメタバース化PoC開発
②DNP様「PARALLEL SITE」Hubs活用メタバース案件のクラウド側コンサルテーション
【執筆・講演】(抜粋)
・白井暁彦,Bredikhina LIUDMILA,坂口塔也,栢之間諒汰,堀部貴紀,山崎勇祐,中村清人「Mozilla Hubs を用いたオンラインイベントのWebVR化」
(DHU JOURNAL Vol.07, 2020/11/26) ・「Web3D Live Distance Workshop for Children in Mozilla Hubs」 (Web3D Conference 2020,
2020/11/12)・「Mozilla Hubs を用いたオンラインイベント WebVR 化テクニック」(グリー技術書典部誌 2020年秋号)・「交流型WebVRにお
ける空間音響のオンライン評価手法」(第25回日本バーチャルリアリティ学会大会)・「Mozilla Hubsの音響とアバターTips – 夏のインターン完
了報告書より」・「Mozilla Hubsが拓く新世代WebVRのススメ」・こども向けワークショップ、国際会議等のイベント、作品コンテスト開催…
[GREE VRStudio Lab]Hubsこれまでの取り組み

Hubs活用テクニックAtoZ
● Archive: プレゼンをアーカイブ
● Blenderワークショップ
● CameraManモードを使おう
● Discord連携, 公式Discordを検索
● Exporterはまだまだ未完
● Firefoxを使いこなそう
● Github Issuesを検索しよう
● HLSサーバーを立てよう
● Issuesでコミュニケーション
● JSXでUIをカスタマイズ！
● Kids Workshop:子供でも使える
● Linearで勝利、PannerNode。
● Mozilla版をうまく使おう
● Node.js環境と仲良くなろう
● OBSを使いこなそう
● PDFはユーザのDrag&Drop
● Quest2は快適
● Ready Player Meでリアルアバター
● Sugorokuメソッドで設計する
● Twitchストリームを使いこなせ
● User Promoteを使いこなせ
● ViveShareで熱狂共有,YouTube連携
● WordpressでCORSを解決!
● XRというよりは”VR4.x”会いに行く!
● YouTube共聴は便利だが規約違反
● Zoomはスタッフ用に確保せよ
[XR Kaigi 2020]
Mozilla Hubsを用いたバーチャルイベントの
WebVR化～その可能性と実際～

「メタバース時代のUX開発とUGC開発者の育成技術」
[メタバース時代のUX開発におけるHubsの役割と価値創出]
・令和メタバースの幻滅期・質実剛健なWeb3 ・ブラウザUGC環境Spoke
・「にぎわい」の重要性・セキュリティ/品質コンプラ・PoC→モバイル
[UGC開発者の育成技術] 学生インターン/デジハリ大学院
[子供でもできる] 垂直に、だれでも、いっしょに創り出せる、高品質に。
[情報系の学生] React/ThreeJS/クラウドサービス開発を学ぶ機会
[情報科学系修士] Hubsをベースにしたメタバース時代の実験環境
[デジハリ大学院] デジタルコンテンツマネジメント修士としての演習
Spokeでのオーサリングでポートフォリオを開発して発信する
#メタバース年賀状

たくさんの人が来ても
住み心地の良い場所をつくる

FAQ: Hubsルームの収容可能人数を教えてください。
ルーム内の参加者は最大25名までとすることを推奨します。
このキャパシティは、携帯電話やスタンドアロン型VRヘッドセットなどの低消費電力デバイスにおい
て、混雑したルームでパフォーマンス問題が発生し始める可能性があるため、この設定がデフォルトと
なっています。ルーム設定メニューでルームの収容人数を調整できます。
ルームが満員になっても、すべての追加参加者（26人目以降）はロビーに参加した上で視聴する事が
できます。ロビーにいるユーザーは、部屋の様子を見たり、聞いたり、テキストチャットで対話するこ
とができますが、部屋にはアバターとして表示されず、マイクも有効化されません。
ロビーの収容人数に特に制限はありませんが、100人を超えるとパフォーマンスが低下する可能性があ
ります。
大規模なイベント用にHubsを拡張したい場合は、用途に応じて、クラウドを複数の部屋に分割して少
人数で利用したり、イベントをライブストリーミングすることをお勧めします。大規模イベント向けの
Hubsのセットアップに関する詳細については、組織のイベントニーズに対応するオプションとして
Hubs Cloudを検討することをお勧めします。
[白井補足]最近の変更でメールでの問い合わせが削除され、Hubs Cloudを使うことが明確になった。

Hubsのルームは、
ドロップダウンメニューから[Close Room]オプションを
選択しない限り、永続的に開放されたままになります。
ルームが閉鎖されていない限り、いつでもURLを使用してルームに
戻ることができます。
ルームを再度訪問する予定がある場合は、簡単にアクセスできる
ようにお気に入りに追加しておくとよいでしょう。
FAQ:Hubsのルームはいつまで利用できますか？

Mozillaによるメテオフォール事件簿
[2022/02/08] 公式Discord#Hubs-Cloud チャンネルにて…
・Hubs Cloudからのコンテンツが読み込まれないという問題がある方はいらっ
しゃいますか？例：部屋の読み込みは始まるが、その後「シーンの読み込みに
失敗しました」と表示される
・インスタンスは動作しているようです。管理画面に入ることができます。し
かしルーム、シーンのプレビュー、アバターなどのコンテンツがロードされま
せん。基本的にコンテンツに関連するものはすべてです。
・これは、別々のAWSアカウントで複数のインスタンスで起こっています。
・(神)私たちの側でも、複数のインスタンスで同じことが起こっています。
・403? それが今見ているものです。アグリッグス
・(神)私も403が表示されるようになりました

[2/8 11:57] Mozilla側から誤送信のお詫び
(神)誤送信のお詫び: このリリースでは、手動でのテンプレート更新が必要であ
り、事前に明確に伝えるべきでした。
上記の手順でスタックを更新していただければ、すべて正常に動作するはずで
す。今アナウンスします。もっと調査するまでアナウンスを保留します。

[2/8 12:28]Mozilla側による認識が表明される
(神)明日には、このうちのいくつかをクリアしなければなりません。
皆様には大変ご迷惑をおかけいたしました。テンプレートの更新が成功したら
教えてください。疲れていない限り、テストと確認のための手順を自分で確認
することができず（マーケットプレイスでuiの流れが変わったか）、ロール
バックなどを行うにはエンジニアリングチームの助けが必要になります。
とりあえず何かわかったら、アナウンスするか、ここに書き込むかします。

[潜在的問題]カスタムクライアントに関する衝突
カスタムクライアントを使っている場合は注意が必要
Pete Moss -2/10 07:21 ブランチ全体をマージするのは
待とうと思いますが、そのプルリクエストだけをマージする
場合、getUploadsUrl関数が以前からなかった場合、問題
にぶつかるのでしょうか？最新の
hubs-cloudのコードの
他の場所で参照されているかどうかだけ気になります。
robinkwilson - 今日 07:35 ああ、その通りです。
hubs-cloudブランチをプルダウンして、それがどこで初期
化され、参照されているかを覗いてみると、新しいカスタム
クライアントで同様にマージされる必要がありますね。
ああ、そうだ！これは
githubのディスカッションですでに回
答されていると思います。
1つまたは複数の提供した
CNAMEがすでに別のリソースに関連付けられている」で
検索するか、githubディスカッションでこの件について新し
い質問をすることができますか？
https://github.com/mozilla/hubs/discussions
https://github.com/mozilla/hubs/discussions

日本のコンプライアンスに対応する

Hubsには、ルーム内でビデオを再生する機能があり、友人と一緒に見たり、既
存のストリームからコンテンツをライブ配信したりすることができます。
ビデオについては、Hubsは標準的なビデオフォーマットをサポートしていま
す。ライブストリーミングコンテンツはHLS形式でサポートされています。
Vimeo、YouTube、Twitchなどの一般的なビデオホスティングサイトからビデ
オを埋め込むことができますが、高負荷のため、これらは時々信頼できない場
合があります。
ミッションクリティカルなコンテンツについては、HubsルームやSpokeにアッ
プロードするか（これらのビデオには128MBのサイズ制限があります）、
Amazon S3などのホスティングプロバイダを使用してHubsサーバーにビデオを
ホスティングすることをお勧めします。
[白井補足]YouTube利用規約を考えると、内部的にダウンロードする方式は微
妙。またHLSはTwitchが扱いやすい。AWS Elemental Video Liveも実績あり。
FAQ:Hubsでビデオコンテンツを再生できますか？

コンプライアンスについて - Youtube再生
Hubs空間内でYoutubeを再生するのは、Youtube利用規約違反となる可能性がある。
どのような場合に、Youtube利用規約の違反になるのか、その場合、どのような回避方法があるか。
【回答】
この改定で基本的に YouTubeの動画をダウンロードすることは規約違反となりましたが、 2018年11月14日から
「You Tube Premium」の登場によって動画ダウンロードが合法的にできるようになった。
YouTube以外の動画利用としては、 Twitch等のライブストリーミングの利用（各種方法があります）、またシーン
ファイルへのMPEGファイルの埋め込みで回避可能。
現行のYouTube利用規約よりhttps://www.youtube.com/static?template=terms&hl=ja&gl=JP
本サービスの利用には制限があり、以下の行為が禁止されています。
本サービスまたはコンテンツのいずれかの部分に対しても、アクセス、複製、ダウンロード、配信、送信、放送、展示、販売、ライセンス供与、改変、修正、またはその他
の方法での使用を行うこと。ただし、（
a）本サービスによって明示的に承認されている場合、または（
b）YouTube および（適用される場合）各権利所持者が事前に書
面
で許可している場合を除きます。
本サービスのいずれかの部分を迂回、無効化、不正利用、またはその他の方法で妨害すること（またはこれらのいずれかを試みること）。なお、この「本サービスのい
ずれかの部分」には、セキュリティ関連の機能、または（
a）コンテンツのコピーもしくはその他の利用法を防止もしくは制限する機能、もしくは（
b）本サービスもしくはコン
テンツの利用を制限する機能が含まれます。
過去の利用規約より(Mar 26, 2018)
いかなる動画であっても、
YouTubeの動画をダウンロードすることは規約で禁止されています。
お客様は、「ダウンロード」または同様のリンクが本コンテンツについて
本サービス上でYouTubeにより表示されている場合を除き、いかなる本コンテンツもダウンロードしてはなりません。

チャットログは一時的にしか存在しません。
メッセージは一定時間経過すると消えます。
チャットのスクロールバックは現在開発中です。
これがリリースされるまでは、Hubs Discord Botを設定することで、ワールド
内のチャットを追跡することも可能です。
[白井補足]日本でサービス事業を実施するのであればチャットログは保存必要
FAQ:チャットのログはどこに行くのですか？

アクセスログの保存必要性(最低90日)
・「犯罪の国際化及び組織化並びに情報処理の高度化に対処するための刑法等
の一部を改正する法律案」
・「不正アクセス行為の禁止等に関する法律」
・「刑事訴訟法」218条1項
チャットログの保存必要性
・利用者間のトラブル
・カスタマーサポート
[補足]チャットログの保存必要性

[参考]日本のコンプライアンスに適合させる例
日本においては事件・事故の発生時に犯罪捜査機関、裁判官の令状など当局からの要請で提出を求められます。
Webサー
ビスで国際展開する場合、他の各国についても考慮が必要になります。ログイン機能を持たないサービスの場合、入退出の
記録からIPアドレス・時間が取得できることが極めて重要であると考えます。
参考1：LINEさんの例（抜粋） https://linecorp.com/ja/security/article/28
どのような法律に基づきどのような場合に捜査機関に対して情報を開示することがあるのか
「LINE」は日本法に準拠して運用されています。
日本法においては、検察官、検察事務官又は司法警察職員は、犯罪の捜査をするについて必要があるときは、裁判官の発する令状により、捜索・差押えをすることができ、事業者がその
命令に従う義務が生じます（刑事訴訟法
218条1項）。
また、捜査機関は、捜査については、捜査関係事項照会等に基づき、必要な事項の報告を求めることができます（刑事訴訟法
197条2項）。
さらに、緊急避難（刑法
37条1項）として、たとえば自殺予告や誘拐等の人命の保護の必要がある場合など、人の生命、身体等に対する現在の危難を避けるため、やむを得ずに情報を開示することが適切と判断される状況となることが
あります。
このように、①捜索差押令状がある場合、②（日本における捜査関係事項照会等の）法的根拠に基づく捜査協力の要請があった場合、③緊急避難が成立すると判断した場合に限り、適切と判断される範囲で、当社は捜査機関への対
応を行う場合があります。
これらの法律は、当社のみならず、日本の他事業者においても同様に適用されます。
捜査機関への対応とは何か当社による捜査機関への対応の際は、上記の①〜③の場合に限り、犯罪が発生したときの事件解決や人命・身体・財産保護のため、被疑者・被害者など関係者のサービスの登録情報や利用情報を、警察
等の捜査機関に対して当社から提出します。捜査機関への対応の際に、不特定のユーザーの情報を提出することはありません。
なぜ、捜査機関への対応をするのか
当社サービスを利用した詐欺、殺人、暴行等の刑法犯罪に対し、被疑者の検挙や被害軽減、犯罪抑止につなげ、人命・身体・財産を保護するためです。
当社は、ユーザーにとって、より安心安全な環境を提供することがサービス提供者の責務の一つと考えており、後述のとおり法令の範囲内、かつ会社内の厳格な基準を満たしたケースにおいてのみ、捜査機関への対応を実施する場合
があります。
日本国外の国家からの要請の場合
「国際捜査共助等に関する法律」や、特定国家との刑事共助条約（
MLAT）等、国際捜査協力の枠組み等に基づき海外からの要請を受けることがあります。これには、国際刑事警察機構（
ICPO）を
経由して日本の警察が要請を受領するケースや、大使館を通じて日本の外務省が要請を受領するケース等が含まれます。この場合においても、令状の受領やプライバシー保護組織による検証等、同様の取り扱いルールが適用されま
す。
参考2：各国の通話録音とその合意に関する法律 https://knowledge.hubspot.com/jp/calling/what-are-the-call-recording-laws

ライセンス問題 MPLv2
Hubs/Reticulum/Dialog ⇨ Mozilla Public License 2.0
> Permissions of this weak copyleft license are conditioned on making available source code of licensed files and
modifications of those files under the same license (or in certain cases, one of the GNU licenses). Copyright and license
notices must be preserved. Contributors provide an express grant of patent rights. However, a larger work using the
licensed work may be distributed under different terms and without source code for files added in the larger work.
> この弱いコピーレフト・ライセンスのPermissionsは、ライセンスされたファイルのソースコードおよび同じライセンス（また
は場合によってはGNUライセンスの一つ）下のファイルの変更を可能にすることが条件となります。著作権とライセンスの表示は
維持されなければなりません。Contributorsは、特許権の明示的な付与を行います。ただし、ライセンスされた作品を使用したよ
り大規模な作品は、異なる条件で配布される可能性があり、追加されるファイルのソースコードがない場合もあります。
Permissions: Commercial use (商用), Modification (改造), Distribution (流通), Patent use (特許), Private use (私的)
Limitations: Liability, Trademark use (商標), Warranty
Conditions: Disclose source (ソース公開), License and copyright notice (ライセンスと著作権表示), Same license (file)
https://github.com/mozilla/dialog/blob/master/LICENSE より

UX面の研究開発
快適な音響空間への取り組み

交流型WebVRにおける
空間音響のオンライン評価手法
坂口塔也*1, 山崎勇祐*2, Bredikhina Liudmila*3, 白井暁彦*2
*1: 静岡大学
*2: (株) Wright Flyer Live Entertaimnent / GREE VR Studio Laboratory
*3: Geneva University
日本VR学会第25回大会一般発表 (9/18)
10:30-11:50 テレプレゼンス 3D2-1

背景: Covid-19以降のカンファレンスにおける問題
国際会議や学会、展示会へのソーシャルVR(Hubs等)の活用
Social VR platform are extending to conference & expo.
複数人同時会話による音声混線の問題がある！
Here is audio crosstalk issue in social VR platform!
ポスター発表や商品紹介等の交流に使えるか？
Is it possible to apply to product or poster presentation?
Motivation: Issues in online conferences after Covid-19 crisis.

ソーシャルVR空間で発生する音声混線の例
(1)不特定多数の動的音源(話者)が同時に声を発する
Unspeciﬁed number of speakers (Dynamic moving) speak at the same time.
(2)交流目的であり”賑わい”は感じたい
Want to feel "presence" for the interaction in the network.
(3)環境効果をリアルタイム処理できない
In Real-time processing, environmental eﬀects are not possible to perform.
Target case: audio crosstalk in spatial social VR
Group A Group B

Hubsで設定可能な音量減衰パラメータ [PannerNode]
減衰の関数モデル
DistanceModel
減衰の傾き
Rolloﬀ Factor
減衰の開始地点
Ref Distance for reducing volume (meter)
減衰の終了地点
Max Distance (in meter)
● Linear
● Inverse
● Exponential
*Standardized on Web3D audio interface.

実験内容 - Experiments in Hubs (completely online!)
同時に存在する見えない2つの音源間を自由に移動しながら聴き、
質問に対する回答位置を記号(A～Y)で入力。
Hubsを用いて、完全にオンラインで実施。複数の実験用ルーム(6種)を用意。
Multiple experimental rooms (6 types) are prepared. Subjects can move freely, and listens between two invisible sound
sources that exist at the same time. Subjects then answer the survey questions with their position (A to Y) in the room.

実験内容
左右にのみ移動が可能

実験内容：各ルームの設定
Room 音源A 音源B
1 サイン波ホワイトノイズ
2 サイン波ホワイトノイズ
3 女性3人の会話ホワイトノイズ
4 女性3人の会話ホワイトノイズ
5 女性3人の会話男性3人の会話
6 女性3人の会話男性3人の会話
利用したデータベース：千葉大学3人会話コーパス

実験内容
(Room 1,3,5) (Room 2,4,6)
Linear Inverse

実験内容
音源Aの位置
Q1
音源Aが聞こえなくなる境界の位置
Q2
音源Bの位置
Q3
音源Bが聞こえなくなる境界の位置
Q4
両音源が同程度に混ざって聞こえる位置
Q5
実施時間24時間
被験者 14名

実験結果: 自由に動けるにもかかわらず対人の位置関係がわからない...!
２つの減衰モデルで明らかに異なる傾向。
Inverseの”裾野”での差は距離としては聴き分けられていない
Inverseモデルは２音源の融合距離の定位も難しい
= 賑わっているが2つのグループの境界がどこにあるかわからない

結論：オンライン実験で2つのモデルが確認できた
会話グループが複数あるイベント
● 部屋の減衰モデルをLinearにする
● 部屋の減衰開始距離を短くする
会話グループが単一のイベント
● 部屋の減衰モデルをLinearにする
● 部屋の減衰開始距離が長くてもよい
・Inverseモデルを交流会
場に使わない！(負荷が大き
く、ユーザも混乱する）
・ゾーン設計においてポスター
交流を目的とする場合は細い
Linearを使う、懇親会で声が混
ざって良いなら広くとる。
・InverseはPA(Public Audio:会
場アナウンス)のみに使うべき、
もしくはLinearのRolloﬀ Factor
の値を小さく。
・動画等のメディアは全体告知
用か、サイネージかによって
個々のオブジェクトで変更。

実際のシーンへの応用例
KIDS’ WORKSHOP (8/12)
このワークショップでは会場を3つのゾーンに区切った
基本となる会話音声はLinearモデルに設定し、
減衰の終了地点をゾーンの半径に合わせて15mとした
→自由に発言する子供たちの発声練習にも対応できた
課題：今後同様の実験をされる方へ…
(1) 減衰開始地点を0mに設定したInverseで実験を行う
(2) LinearモデルでRolloﬀ Factorを1以下に設定してInverseモデルと比較する
Virtual Being World in SIGGRAPH2020 (8/25)
左側に設置してある動画サイネージと
会場右側に設置してある登壇ステージで
音声が重ならないように設定してある
→多言語の参加者向け、ピッチコンテストに混ざらない
十分な広さとサイネージ、ギャラリーの設計に貢献。
https://hubs.mozilla.com/7LuRA4N/virtual-beings-world
https://hubs.mozilla.com/

最新のHubs:[Audio Zone]
詳細：https://hubs.mozilla.com/docs/spoke-adding-scene-content.html#audio-zones
Spokeで音源が聴こえるエリアを調整できるようになった。
（2022-02-07 CHENGELOG.md）
詳細：https://github.com/mozilla/hubs/pull/4399
検証：https://hubs.mozilla.com/scenes/PXxP3be

https://github.com/gree/hubs-docs-jp/issues/8
[最近の更新]公式/Hubs Cloud AWS 1.1.4
2月7日
three.jsが r128
4月4日
Chromeの
video-texture-targetレン
ダリングの問題を修正
5月2日
鏡が使えるようになる
6月8日
three.js の GLTFLoader が
バージョン r128 に更新
7月5日
isSafari()の結果をキャッ
シュすることでクライアン
トパフォーマンスを向上
8月1日
Three.js を r141 にアップ
グレード。
最大解像度設定用のスライ
ダーの導入
Audio PanningQuality 環境
設定の導入

・Audio Zone：音領域設定
・Troika Text：3D Text
・Mirror：Rendering Texture
※まだ不具合はありそう
Mozilla Hubs 最新機能
Scene https://hubs.mozilla.com/scenes/MzjKptU
Room https://hubs.mozilla.com/ccYaJcP

UGC環境の開発への課題と挑戦

“Virtual Beings World” in SIGGRAPH 2020
を使った拍手やYouTubeコメントとの融合, Discord認証
bit.ly/7LuRA4N

森ビル「キッズワークショップ」駆動開発
小学校3年～中学3年まで各回15人程度
KIDS WORKSHOP 2020(Online)
「WebVRでライブエンタメ番組を研究しよう」
Hubsによるライブ番組の製作体験
KIDS WORKSHOP 2022(Hybrid)
「ゼロから作るメタバースで夏祭り」
[BlockVrock]レベルエンター(株)と協力
ThreeJSのWebVRにQuestからVRM Animを実装
KIDS WORKSHOP 2021(Online)
「みんなで(バーチャル)世界旅行」
VibeShare::MapTop (VanillaJS)

Zone 1: introduction and character design
Zone 2: scenario design
Zone 3: ﬁlming area
R&D事例「Sugoroku method」
“Web3D Live Distance Workshop for Children in Mozilla Hubs”,
In The 25th International ACM Conference on 3D Web Technology
・それぞれのゾーンにミッションがある
・時間を使い過ぎずに進行できる

[UGC]HubsでもくもくBlenderワークショップ
・自習用の動画をスゴロクメソッドで配置
・自分のペースでいつでも学習を進行できる
・デスクトップ共有で先生と一緒に進められる
・作ったGLBモデルをそのまま3D空間で共有できる
インターン学生とーやくん(Toya Sakaguchi)による開発

Blenderを使った
モデルデータの取得と活用

メタバース新書発行：デジタルハリウッド・パブリッシャーズ
「ゼロから始めるWeb メタバース - Mozilla Hubs コンプリートブック」(仮)
[おしらせ] 本講演が書籍になります！
▶デジタルハリウッド株式会社の「デジタルハリウッ
ド・パブリッシャーズ」にて、「メタバース新書」シ
リーズを制作・発行する運びとなりました。第1弾とし
て、今回のCEDEC2022での講演をもとに制作中。
▶本シリーズは、「つくる人のための、つくれるよう
になる本」をコンセプトに、同人的なコミュニティで
読まれる技術書として制作して参ります。また大学に
おけるメタバース領域のカリキュラムをアップデート
するための実験・開発の成果物の一つとして、広く産
学官に提供していく予定です。
既刊「デジタル・ストリーム ―未来のリ・デザイニング」（杉山知之）
https://www.amazon.co.jp/dp/B09WQZ5Z7J/
協力者等募集中！
Twitter@o_ob までどうぞ

これからも日本の/世界の
Hubsの開発者コミュニティや
OSSを使ったメタバース開発事例の共有
に貢献できればと思います！
（Hubsのみに限ったことではなくOSSを利用する日本人に共有したいマインド）
【ご連絡はこちらまで】 jp-gi-vr@gree.net

オープンソースで構築するWebメタバース～Mozilla Hubsで学ぶUX開発から運用コスト最小化まで #CEDEC2022

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to オープンソースで構築するWebメタバース～Mozilla Hubsで学ぶUX開発から運用コスト最小化まで #CEDEC2022

Similar to オープンソースで構築するWebメタバース～Mozilla Hubsで学ぶUX開発から運用コスト最小化まで #CEDEC2022 (20)

More from GREE VR Studio Lab

More from GREE VR Studio Lab (20)