【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. ツッコミ音声認識

1. 漫才VRとは？

1. 漫才VRとは？

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

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

• http://www.mbs.jp/catchup/hackathon/

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

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

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

要件定義と開発・調達要素の抽出 ~ 2. 漫才VR開発全体の流れ ~ 要件 II. モーション検出と音声認識によるツッコミ採点ができる 音声認識サーバアプリ マイク内蔵 • • • • 無償 商用利用可 深層学習 オフラインで使用可

要件定義と開発・調達要素の抽出 ~ 2. 漫才VR開発全体の流れ ~ 要件 III. VR映像と同期した相方の正面映像を見せることで、 お客さんも楽しむことができる ゲーム プレーヤー 正面映像用 縦ディスプレイ LED電飾

開発のポイント紹介

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

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

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

メッシュへの適用手順 ~ 3. 全天球360度動画の導入方法 ~ 撮影 パノラマ 動画へ変換 .ogvへ変換 Sphere100.fbx をインポート ツッコミ役 再生スクリプト を書く

メッシュへの適用手順 ~ 3. 全天球360度動画の導入方法 ~ 撮影 パノラマ 動画へ変換 .ogvへ変換 Sphere100.fbx をインポート 再生スクリプト を書く

メッシュへの適用手順 ~ 3. 全天球360度動画の導入方法 ~ 撮影 パノラマ 動画へ変換 .ogvへ変換 RICOH THETAのWebサイトから アプリをダウンロードして 動画をドラッグ&ドロップします Sphere100.fbx をインポート 再生スクリプト を書く

メッシュへの適用手順 ~ 3. 全天球360度動画の導入方法 ~ 撮影 パノラマ 動画へ変換 .ogvへ変換 Sphere100.fbx をインポート > ffmpeg.exe -y -i (入力ファイル名) -f ogv -b 8M -ab 128k (出力ファイル名) Movie Textureを使うには ovg形式の動画が必要です ffmpegでogv形式に変換します 再生スクリプト を書く

メッシュへの適用手順 ~ 3. 全天球360度動画の導入方法 ~ 撮影 Sphere100 パノラマ 動画へ変換 .ogvへ変換 Sphere100.fbx をインポート 再生スクリプト を書く 検索 スケールを調整します ダウンロードします Unityに直接ドラッグ&ドロップします Sphere100を配布してくださっている 伊藤さんに圧倒的感謝🙏

メッシュへの適用手順 ~ 3. 全天球360度動画の導入方法 ~ 撮影 パノラマ 動画へ変換 .ogvへ変換 Sphere100.fbx をインポート マテリアルを作成します シェーダーをUnitのTextureに変更します 再生スクリプト を書く

メッシュへの適用手順 ~ 3. 全天球360度動画の導入方法 ~ 撮影 パノラマ 動画へ変換 .ogvへ変換 Sphere100.fbx をインポート MeshRendererに動画を貼ったマテリアルを設定します． 再生スクリプト を書く

メッシュへの適用手順 ~ 3. 全天球360度動画の導入方法 ~ 撮影 パノラマ 動画へ変換 .ogvへ変換 Sphere100.fbx をインポート スクリプトを書いてアタッチします 再生スクリプト を書く

メッシュへの適用手順 ~ 3. 全天球360度動画の導入方法 ~ 撮影 パノラマ 動画へ変換 .ogvへ変換 Sphere100.fbx をインポート 完成です！ 再生スクリプト を書く

メッシュへの適用手順 ~ 3. 全天球360度動画の導入方法 ~ 撮影 パノラマ 動画へ変換 .ogvへ変換 Sphere100.fbx をインポート 360度動画はファイルサイズが大きいのでGitにコミットはしません .metaファイルのみコミットしましょう 再生スクリプト を書く

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

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

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

「たたく」「はたく」の判別 ~ 4. ツッコミモーション認識の仕方 ~ 速度・角速度が 認識開始の閾値(大きめ)を超えたときに認識開始 認識終了(小さめ)の閾値を下回った時に認識終了 効果音 爆発エフェクト 振動 → 超きもちいい

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

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

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

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

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

漫才の動画・音声収録 ~ 5-1. ボケ役の声と、ツッコミ役の声との同期 ~ • HMD動画と正面映像との同期 • ・音声波形を参照しながら手動で位置合わせ（手早い） • ・一方の音声データはミュートする 全天球 映像 正面 映像

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

5-2. 複数ディスプレイ間での映像・UI同期 共通スクリプトで 異なるView のUIを HMD-View 同時制御 縦長View クロマキーView 横長View

6. ツッコミ音声の認識

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

Julius の辞書の作り方 ~ 6. ツッコミ音声の認識 ~ • 品詞はすべて「名詞」に統一してしまう（文法を考慮しない） • セリフ全体を一つの「名詞」としてしまう（音素列のみ考慮） • 例： いや、ちびまる子ちゃんの花輪君か！+名詞 [イヤチビマルコチャンノハナワクンカ] 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 これで一つの名詞

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

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

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

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

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

Thank you!

Appendix

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