Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

1,737 views

Published on

講演者:西川 美優(HTC NIPPON株式会社)
    緒方 伸輔
    柴田 佳祐(京都大学工学部電気電子工学科)

こんな人におすすめ
・Unityを勉強・仕事で使用している人
・UnityでVRコンテンツを開発してみたい人

受講者が得られる知見
・UnityでのVRコンテンツの開発方法

Published in: Technology
  • Be the first to comment

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

  1. 1. 西川 美優 HTC NIPPON株式会社 緒方 伸輔 家電メーカー 柴田 佳祐 京都大学工学部電気電子工学科
  2. 2. VIVEとUnityで 1週間で作る漫才VR ~ 全天球カメラと音声認識の活用 ~
  3. 3. 本セッションの目的 VRコンテンツの企画内容は、2次元(紙ベース)での企画書では伝わらない。プロトタ イプをざっくり作る「VR絵コンテ」が必要 → 少人数チームで、企画からプロトタイプまで、 Unityで 1週間でどこまで出来るかを知る VRは周辺技術との組み合わせも重要 → 360度動画、音声認識、マルチディスプレイ制御を VRと組み合わせる方法を知る
  4. 4. 本セッションのアジェンダ 1. 漫才VRとは? 2. 漫才VR開発全体の流れ 〜 開発のポイント 〜 3. 全天球360度動画の導入方法 4. ツッコミモーション認識の仕方 5. 漫才師動画・ツッコミUIのマルチディスプレイ同期制御 6. ツッコミ音声認識
  5. 5. 1. 漫才VRとは?
  6. 6. 1.漫才VRとは?
  7. 7. • 体験者は、VR空間内で漫才のステージに立ち、 相方のボケに対して適切な内容(声)とモーションで ツッコミを行う • 体験後、ツッコミ内容に応じて採点が行われる • VR空間の世界観を、追加のスクリーンで表現し、 観客に判りやすく伝える 1. 漫才VRとは?
  8. 8. • ハッカソンの模様は見逃し配信中(5月14日まで(予定)) www.mbs.jp/catchup/hackathon/ 1.漫才VRとは?
  9. 9. 2. 漫才VR開発全体の流れ
  10. 10. 漫才師とエンジニアの 持ち味を活かしつつ、 番組を盛り上げる! 開発の方針と戦力分析 ~ 2. 漫才VR開発全体の流れ ~ 漫才師(空) テレビマン・演出(前田) Unity 開発者(柴田・緒方・斎藤) 音声認識アプリ開発者(緒方) 回路設計者(斎藤)
  11. 11. 要件定義と開発・調達要素の抽出 ~ 2. 漫才VR開発全体の流れ ~ ハイエンド HMD 360度映像 を撮影 3D-CGアプリ 開発の定番 要件 I. HMD(vive)と漫才VR映像で漫才のツッコミ体験ができる
  12. 12. 要件定義と開発・調達要素の抽出 ~ 2. 漫才VR開発全体の流れ ~ 要件 II. モーション検出と音声認識によるツッコミ採点ができる マイク内蔵 • 無償 • 商用利用可 • 深層学習 • オフラインで使用可 音声認識サーバアプリ
  13. 13. 要件定義と開発・調達要素の抽出 ~ 2. 漫才VR開発全体の流れ ~ LED電飾 要件 III. VR映像と同期した相方の正面映像を見せることで、 お客さんも楽しむことができる 正面映像用 縦ディスプレイ ゲーム プレーヤー
  14. 14. 開発のポイント紹介
  15. 15. 3. 全天球360度動画の導入方法
  16. 16. 使用した背景・使用方法 ~ 3. 全天球360度動画の導入方法 ~ 360度動画を使った理由 • 相方の漫才師を用意する必要がある • 3Dモデルを作成するリソースが足りない • 360度動画はリアル感がある (安物のゲームっぽくならない) • チームの漫才師さんの存在を有効活用できる
  17. 17. 使用した背景・使用方法 ~ 3. 全天球360度動画の導入方法 ~ RICOH THETAを使った理由 • 手軽 (大事!) • 安い • 使っている人が多いので安心 • 薄いので死角が少ない • 映像をスマホに送って確認できる
  18. 18. メッシュへの適用手順 ~ 3. 全天球360度動画の導入方法 ~ 撮影 パノラマ 動画へ変換 .ogvへ変換 Sphere100.fbx をインポート 再生スクリプト を書く ツッコミ役
  19. 19. メッシュへの適用手順 ~ 3. 全天球360度動画の導入方法 ~ 撮影 パノラマ 動画へ変換 .ogvへ変換 Sphere100.fbx をインポート 再生スクリプト を書く
  20. 20. メッシュへの適用手順 ~ 3. 全天球360度動画の導入方法 ~ 撮影 パノラマ 動画へ変換 .ogvへ変換 Sphere100.fbx をインポート 再生スクリプト を書く RICOH THETAのWebサイトから アプリをダウンロードして 動画をドラッグ&ドロップします
  21. 21. メッシュへの適用手順 ~ 3. 全天球360度動画の導入方法 ~ > ffmpeg.exe -y -i (入力ファイル名) -f ogv -b 8M -ab 128k (出力ファイル名) 撮影 パノラマ 動画へ変換 .ogvへ変換 Sphere100.fbx をインポート 再生スクリプト を書く Movie Textureを使うには ovg形式の動画が必要です ffmpegでogv形式に変換します
  22. 22. メッシュへの適用手順 ~ 3. 全天球360度動画の導入方法 ~ Sphere100 検索 撮影 パノラマ 動画へ変換 .ogvへ変換 Sphere100.fbx をインポート 再生スクリプト を書く ダウンロードします Sphere100を配布してくださっている 伊藤さんに圧倒的感謝🙏 Unityに直接ドラッグ&ドロップします スケールを調整します
  23. 23. メッシュへの適用手順 ~ 3. 全天球360度動画の導入方法 ~ 撮影 パノラマ 動画へ変換 .ogvへ変換 Sphere100.fbx をインポート 再生スクリプト を書く マテリアルを作成します シェーダーをUnitのTextureに変更します
  24. 24. メッシュへの適用手順 ~ 3. 全天球360度動画の導入方法 ~ 撮影 パノラマ 動画へ変換 .ogvへ変換 Sphere100.fbx をインポート 再生スクリプト を書く MeshRendererに動画を貼ったマテリアルを設定します.
  25. 25. メッシュへの適用手順 ~ 3. 全天球360度動画の導入方法 ~ 撮影 パノラマ 動画へ変換 .ogvへ変換 Sphere100.fbx をインポート 再生スクリプト を書く スクリプトを書いてアタッチします
  26. 26. メッシュへの適用手順 ~ 3. 全天球360度動画の導入方法 ~ 撮影 パノラマ 動画へ変換 .ogvへ変換 Sphere100.fbx をインポート 再生スクリプト を書く 完成です!
  27. 27. メッシュへの適用手順 ~ 3. 全天球360度動画の導入方法 ~ 撮影 パノラマ 動画へ変換 .ogvへ変換 Sphere100.fbx をインポート 再生スクリプト を書く 360度動画はファイルサイズが大きいのでGitにコミットはしません .metaファイルのみコミットしましょう
  28. 28. 4. ツッコミモーション認識の仕方
  29. 29. ツッコミモーションの種類 ~ 4.ツッコミモーション認識の仕方~ 漫才のツッコミをはっきりと区別する必要がある VIVEコントローラー (SteamVR_Controller.Device) から取得できる情報の うち次の2つを使う • Velocity (速度 → 直線的な動きを検出) 「たたく」 (頭より下) • AngularVelocity (角速度 → 手首のスナップを検出) 「はたく」 (頭より上)
  30. 30. 「たたく」「はたく」の判別 ~ 4.ツッコミモーション認識の仕方~ 現実世界はなかなか厳しい (入力が0や1でない) • ツッコミ中以外でも速度・角速度はそこそこ大きい (認識開始の問題) • ツッコミの終わりも速度・角速度は完全に0になるとは限らない (認識終了の問題)
  31. 31. 「たたく」「はたく」の判別 ~ 4.ツッコミモーション認識の仕方~ 速度・角速度が 認識開始の閾値(大きめ)を超えたときに認識開始 認識終了(小さめ)の閾値を下回った時に認識終了 効果音 爆発エフェクト 振動 → 超きもちいい
  32. 32. 「たたく」「はたく」の判別 ~ 4.ツッコミモーション認識の仕方~ ツッコミモーション認識のためにやったことはこの二つ! • コントローラーから速度・角速度を取得する • 開始と終了の2つの閾値をつける
  33. 33. 5. 漫才師動画・ツッコミUIの マルチディスプレイ同期制御
  34. 34. 同期処理のポイント ~ 5. 漫才師動画・ツッコミUIのマルチディスプレイ同期制御 ~ 5-1. ボケ役の声と、ツッコミ役の声との同期 5-2. 複数ディスプレイ間での映像・UI同期 ヘッドマウントディスプレイと縦ディスプレイ
  35. 35. 漫才の動画・音声収録 ~ 5-1. ボケ役の声と、ツッコミ役の声との同期 ~ 収録のポイント ・HMD映像にはツッコミ役を映さず、音声の収録のみが必要 (ツッコミはHMDの位置にいるため) ・HMD映像と正面映像のボケ役の動き同期が必要 ボケ ツッコミ
  36. 36. 漫才の動画・音声収録 ~ 5-1. ボケ役の声と、ツッコミ役の声との同期 ~ ツッコミ役を映さず、ツッコミ音声を収録 【課題】ボケ・ツッコミの音声を別々に収録すると、編集でタイミング調整が大変 → ツッコミ役を死角に隠し、ツッコミ音声をボケ映像・音声と一緒に収録 正面カメラ ボケ役 全天球カメラ バイソン君 なんです 誰が バイソンや! ステージ撮影 スペース カメラ死角 スペース ツッコミ役音声の再集録を回避 → 編集作業の手間軽減 ツッコミ役
  37. 37. 漫才の動画・音声収録 ~ 5-1. ボケ役の声と、ツッコミ役の声との同期 ~ • HMD動画と正面映像との同期 • ・音声波形を参照しながら手動で位置合わせ(手早い) • ・一方の音声データはミュートする 全天球 映像 正面 映像
  38. 38. 5-2. 複数ディスプレイ間での映像・UI同期 • 異なる形態のレンダリング制御が必要(HMD・縦ディスプレイ) 【課題】各形態ごとに制御コードを設計・書くのは手間がかかる → MVC (Model View Controller) の考え方を活用、制御コードを共通化 【 Model & Controller 】- Unity Scripts and data UIのふるまい・タイミングを記述ディスプレイ間で共通 【 View】- Game Objects on Unity Hierarchy ディスプレイの種類に合わせてUIの配置を変更 共通のスクリプトを 様々なView にアタッチ C#
  39. 39. 5-2. 複数ディスプレイ間での映像・UI同期 縦長View HMD-View 横長ViewクロマキーView 共通スクリプトで 異なるView のUIを 同時制御
  40. 40. 6. ツッコミ音声の認識
  41. 41. ソケット通信によるjuliusの活用 ~ 6. ツッコミ音声の認識 ~ • Julius の活用ポイント1:ソケット通信を使う • 【課題】Unity - C#で使うにはラッパー作成が必要 • → Julius はソケット通信をサポートしており、素直にソケット通信する方が楽 音声認識 ローカル サーバ [julius] 音声認識 クライアント 通信制御部 プロセス起動 通信確立 認識結果通知
  42. 42. 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 • 例: これで一つの名詞
  43. 43. 環境音ノイズ対策 ~ 6. ツッコミ音声の認識 ~ • 【課題】スピーカーによるノイズ音への対策 → ヘッドセットは使わず、VIVEに内蔵されているマイクを使う 悪い例 マイクへ音漏れ 認識処理に影響 良い例 指向性マイクで 声だけ拾う
  44. 44. 終わりに - ハッカソンで心がけること • 1.下準備をしっかりやっておく 迷う時間をとにかく減らす。迷ったらその分開発の時間がなくなる • 作った結果が玉砕でもそれは一つの成果と考える、伝えるために作りきることが大事 • 2.開発の着地を丁寧にやる • 雰囲気さえ伝われば細かい不具合は目を瞑る。ノリと勢いで突っ切る。 • 終盤のコード修正、配線などのセッティングは特に注意。一種のチキンレース! 開発を全力で楽しむ! やりきった先に見えてくる達成感が最大の収穫
  45. 45. 漫才VRが体験できる、VIVEデモブース • ホールB、7階の展示エリア。整理券配布中!
  46. 46. VIVE トラッカー • 初期入荷分は2時間で完売 • 現在は各店に在庫あります! • 税込12,500円! • 7階で展示中!
  47. 47. VIVE デラックス オーディオ ストラップ • 北米では6月6日に発売予定 • 日本でも6月6日に発売します! • 税込12,500円! • 7階で展示中!
  48. 48. Thank you!
  49. 49. Appendix
  50. 50. アイデアから開発・調達要素の抽出 ~ 漫才VR開発全体の流れ ~ アイデア ハードウェア ソフトウェア データ・コンテンツ HMD(vive)と漫才VR映 像で、漫才のツッコミ 体験ができる ・ヘッドマウントディ スプレイ(Vive) ・全天球カメラ (Recoh Theta) ・レンダリング制御 ・シナリオ制御 ・漫才台本(シナリオデー タ) ・漫才映像 - 360度 モーション検出及び音 声認識によるツッコミ 採点ができる ・モーション検出デバ イス(vive コントロー ラ) ・マイク ・音声認識エンジン (julius) ・音声認識クライア ント ・漫才台本用音声認識辞書 (概念体型辞書) VR映像と動機した相方 の正面映像を見せるこ とで、お客さんも楽し むことができる ・電飾 ・縦長ディスプレイ ・レンダリング制御 ・シナリオ制御 ・漫才映像 -正面

×