【Unite 2017 Tokyo】VIVEとUnityで、1週間で作る漫才VR

西川美優 HTC NIPPON株式会社
緒方伸輔家電メーカー
柴田佳祐京都大学工学部電気電子工学科

VIVEとUnityで
1週間で作る漫才VR
~ 全天球カメラと音声認識の活用 ~

本セッションの目的
VRコンテンツの企画内容は、2次元（紙ベース）での企画書では伝わらない。プロトタ
イプをざっくり作る「VR絵コンテ」が必要
→ 少人数チームで、企画からプロトタイプまで、 Unityで
１週間でどこまで出来るかを知る
VRは周辺技術との組み合わせも重要
→ 360度動画、音声認識、マルチディスプレイ制御を
VRと組み合わせる方法を知る

本セッションのアジェンダ
1. 漫才VRとは？
2. 漫才VR開発全体の流れ
〜開発のポイント〜
3. 全天球360度動画の導入方法
4. ツッコミモーション認識の仕方
5. 漫才師動画・ツッコミUIのマルチディスプレイ同期制御
6. ツッコミ音声認識

• 体験者は、VR空間内で漫才のステージに立ち、
相方のボケに対して適切な内容（声）とモーションで
ツッコミを行う
• 体験後、ツッコミ内容に応じて採点が行われる
• VR空間の世界観を、追加のスクリーンで表現し、
観客に判りやすく伝える
1. 漫才VRとは？

• ハッカソンの模様は見逃し配信中（5月14日まで（予定））
www.mbs.jp/catchup/hackathon/
1.漫才VRとは？

2. 漫才VR開発全体の流れ

漫才師とエンジニアの
持ち味を活かしつつ、
番組を盛り上げる！
開発の方針と戦力分析
~ 2. 漫才VR開発全体の流れ ~
漫才師（空）
テレビマン・演出（前田）
Unity 開発者（柴田・緒方・斎藤）
音声認識アプリ開発者（緒方）
回路設計者（斎藤）

要件定義と開発・調達要素の抽出
ハイエンド
HMD
360度映像
を撮影
３D-CGアプリ
開発の定番
要件 I. HMD(vive)と漫才VR映像で漫才のツッコミ体験ができる

要件 II. モーション検出と音声認識によるツッコミ採点ができる
マイク内蔵 • 無償
• 商用利用可
• 深層学習
• オフラインで使用可
音声認識サーバアプリ

LED電飾
要件 III. VR映像と同期した相方の正面映像を見せることで、
お客さんも楽しむことができる
正面映像用
縦ディスプレイ
ゲーム
プレーヤー

3. 全天球360度動画の導入方法

使用した背景・使用方法
~ 3. 全天球360度動画の導入方法 ~
360度動画を使った理由
• 相方の漫才師を用意する必要がある
• 3Dモデルを作成するリソースが足りない
• 360度動画はリアル感がある (安物のゲームっぽくならない)
• チームの漫才師さんの存在を有効活用できる

使用した背景・使用方法
RICOH THETAを使った理由
• 手軽 (大事！)
• 安い
• 使っている人が多いので安心
• 薄いので死角が少ない
• 映像をスマホに送って確認できる

メッシュへの適用手順
撮影
パノラマ
動画へ変換
.ogvへ変換
Sphere100.fbx
をインポート
再生スクリプト
を書く
ツッコミ役

撮影
パノラマ
動画へ変換
.ogvへ変換
Sphere100.fbx
をインポート
を書く

撮影
パノラマ
動画へ変換
.ogvへ変換
Sphere100.fbx
をインポート
を書く
RICOH THETAのWebサイトから
アプリをダウンロードして
動画をドラッグ&ドロップします

> ffmpeg.exe -y -i (入力ファイル名) -f ogv -b 8M -ab 128k (出力ファイル名)
撮影
パノラマ
動画へ変換
.ogvへ変換
Sphere100.fbx
をインポート
を書く
Movie Textureを使うには
ovg形式の動画が必要です
ffmpegでogv形式に変換します

Sphere100 検索
撮影
パノラマ
動画へ変換
.ogvへ変換
Sphere100.fbx
をインポート
を書く
ダウンロードします
Sphere100を配布してくださっている
伊藤さんに圧倒的感謝🙏
Unityに直接ドラッグ&ドロップします
スケールを調整します

撮影
パノラマ
動画へ変換
.ogvへ変換
Sphere100.fbx
をインポート
を書く
マテリアルを作成します
シェーダーをUnitのTextureに変更します

撮影
パノラマ
動画へ変換
.ogvへ変換
Sphere100.fbx
をインポート
を書く
MeshRendererに動画を貼ったマテリアルを設定します．

撮影
パノラマ
動画へ変換
.ogvへ変換
Sphere100.fbx
をインポート
を書く
スクリプトを書いてアタッチします

撮影
パノラマ
動画へ変換
.ogvへ変換
Sphere100.fbx
をインポート
を書く
完成です！

撮影
パノラマ
動画へ変換
.ogvへ変換
Sphere100.fbx
をインポート
を書く
360度動画はファイルサイズが大きいのでGitにコミットはしません
.metaファイルのみコミットしましょう

4. ツッコミモーション認識の仕方

ツッコミモーションの種類
~ 4.ツッコミモーション認識の仕方~
漫才のツッコミをはっきりと区別する必要がある
VIVEコントローラー (SteamVR_Controller.Device) から取得できる情報の
うち次の2つを使う
• Velocity (速度 → 直線的な動きを検出)
「たたく」
(頭より下)
• AngularVelocity (角速度 → 手首のスナップを検出）
「はたく」
(頭より上)

「たたく」「はたく」の判別
現実世界はなかなか厳しい
(入力が0や1でない)
• ツッコミ中以外でも速度・角速度はそこそこ大きい
(認識開始の問題)
• ツッコミの終わりも速度・角速度は完全に0になるとは限らない
(認識終了の問題)

速度・角速度が
認識開始の閾値(大きめ)を超えたときに認識開始
認識終了(小さめ)の閾値を下回った時に認識終了
効果音
爆発エフェクト
振動
→ 超きもちいい

ツッコミモーション認識のためにやったことはこの二つ！
• コントローラーから速度・角速度を取得する
• 開始と終了の2つの閾値をつける

5. 漫才師動画・ツッコミUIの
マルチディスプレイ同期制御

同期処理のポイント
~ 5. 漫才師動画・ツッコミUIのマルチディスプレイ同期制御 ~
5-1. ボケ役の声と、ツッコミ役の声との同期
5-2. 複数ディスプレイ間での映像・UI同期
ヘッドマウントディスプレイと縦ディスプレイ

漫才の動画・音声収録
~ 5-1. ボケ役の声と、ツッコミ役の声との同期 ~
収録のポイント
・HMD映像にはツッコミ役を映さず、音声の収録のみが必要
（ツッコミはHMDの位置にいるため）
・HMD映像と正面映像のボケ役の動き同期が必要
ボケツッコミ

ツッコミ役を映さず、ツッコミ音声を収録
【課題】ボケ・ツッコミの音声を別々に収録すると、編集でタイミング調整が大変
→ ツッコミ役を死角に隠し、ツッコミ音声をボケ映像・音声と一緒に収録
正面カメラ
ボケ役全天球カメラ
バイソン君
なんです
誰が
バイソンや！
ステージ撮影
スペース
カメラ死角
スペース
ツッコミ役音声の再集録を回避 → 編集作業の手間軽減
ツッコミ役

• HMD動画と正面映像との同期
• ・音声波形を参照しながら手動で位置合わせ（手早い）
• ・一方の音声データはミュートする
全天球
映像
正面
映像

• 異なる形態のレンダリング制御が必要（HMD・縦ディスプレイ）
【課題】各形態ごとに制御コードを設計・書くのは手間がかかる
→ MVC (Model View Controller) の考え方を活用、制御コードを共通化
【 Model & Controller 】- Unity Scripts and data
UIのふるまい・タイミングを記述ディスプレイ間で共通
【 View】- Game Objects on Unity Hierarchy
ディスプレイの種類に合わせてUIの配置を変更
共通のスクリプトを
様々なView にアタッチ
C#

縦長View
HMD-View
横長ViewクロマキーView
共通スクリプトで
異なるView のUIを
同時制御

6. ツッコミ音声の認識

ソケット通信によるjuliusの活用
~ 6. ツッコミ音声の認識 ~
• Julius の活用ポイント１：ソケット通信を使う
• 【課題】Unity - C#で使うにはラッパー作成が必要
• → Julius はソケット通信をサポートしており、素直にソケット通信する方が楽
音声認識
ローカル
サーバ
[julius]
音声認識
クライアント
通信制御部
プロセス起動
通信確立
認識結果通知

Julius の辞書の作り方
• 品詞はすべて「名詞」に統一してしまう（文法を考慮しない）
• セリフ全体を一つの「名詞」としてしまう（音素列のみ考慮）
いや、ちびまる子ちゃんの花輪君か！+名詞
[イヤチビマルコチャンノハナワクンカ]
I y a ch i b i m a r u k o ch a N n o h a n a w a k u N k a
• 例：
これで一つの名詞

環境音ノイズ対策
• 【課題】スピーカーによるノイズ音への対策
→ ヘッドセットは使わず、VIVEに内蔵されているマイクを使う
悪い例
マイクへ音漏れ
認識処理に影響
良い例
指向性マイクで
声だけ拾う

終わりに - ハッカソンで心がけること
• １．下準備をしっかりやっておく
迷う時間をとにかく減らす。迷ったらその分開発の時間がなくなる
• 作った結果が玉砕でもそれは一つの成果と考える、伝えるために作りきることが大事
• ２．開発の着地を丁寧にやる
• 雰囲気さえ伝われば細かい不具合は目を瞑る。ノリと勢いで突っ切る。
• 終盤のコード修正、配線などのセッティングは特に注意。一種のチキンレース！
開発を全力で楽しむ！
やりきった先に見えてくる達成感が最大の収穫

漫才VRが体験できる、VIVEデモブース
• ホールB、7階の展示エリア。整理券配布中！

VIVE トラッカー
• 初期入荷分は2時間で完売
• 現在は各店に在庫あります！
• 税込12,500円！
• 7階で展示中！

VIVE デラックスオーディオストラップ
• 北米では6月6日に発売予定
• 日本でも6月6日に発売します！
• 税込12,500円！
• 7階で展示中！

アイデアから開発・調達要素の抽出
~ 漫才VR開発全体の流れ ~
アイデアハードウェアソフトウェアデータ・コンテンツ
HMD(vive)と漫才VR映
像で、漫才のツッコミ
体験ができる
・ヘッドマウントディ
スプレイ（Vive）
・全天球カメラ
（Recoh Theta）
・レンダリング制御
・シナリオ制御
・漫才台本(シナリオデー
タ)
・漫才映像 - 360度
モーション検出及び音
声認識によるツッコミ
採点ができる
・モーション検出デバ
イス（vive コントロー
ラ）
・マイク
・音声認識エンジン
(julius)
・音声認識クライア
ント
・漫才台本用音声認識辞書
（概念体型辞書）
VR映像と動機した相方
の正面映像を見せるこ
とで、お客さんも楽し
むことができる
・電飾
・縦長ディスプレイ
・レンダリング制御
・シナリオ制御
・漫才映像 -正面

【Unite 2017 Tokyo】VIVEとUnityで、1週間で作る漫才VR

【Unite 2017 Tokyo】VIVEとUnityで、1週間で作る漫才VR

Recommended

More Related Content

What's hot

What's hot(20)

Similar to 【Unite 2017 Tokyo】VIVEとUnityで、1週間で作る漫才VR

Similar to 【Unite 2017 Tokyo】VIVEとUnityで、1週間で作る漫才VR(20)

More from Unite2017Tokyo

More from Unite2017Tokyo(20)

Recently uploaded

Recently uploaded(11)

【Unite 2017 Tokyo】VIVEとUnityで、1週間で作る漫才VR

Editor's Notes