【Unite 2017 Tokyo】VIVEとUnityで、1週間で作る漫才VR
•Transferir como PPTX, PDF•
2 gostaram•2,579 visualizações
講演者：西川 美優(HTC NIPPON株式会社) 緒方 伸輔 柴田 佳祐(京都大学工学部電気電子工学科) こんな人におすすめ ・Unityを勉強・仕事で使用している人 ・UnityでVRコンテンツを開発してみたい人 受講者が得られる知見 ・UnityでのVRコンテンツの開発方法
Recomendados
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Semelhante a 【Unite 2017 Tokyo】VIVEとUnityで、1週間で作る漫才VR
Semelhante a 【Unite 2017 Tokyo】VIVEとUnityで、1週間で作る漫才VR (20)
Mais de Unite2017Tokyo
Mais de Unite2017Tokyo (20)
Último
Último (8)
【Unite 2017 Tokyo】VIVEとUnityで、1週間で作る漫才VR
- 1. 西川 美優 HTC NIPPON株式会社 緒方 伸輔 家電メーカー 柴田 佳祐 京都大学工学部電気電子工学科
- 3. 本セッションの目的 VRコンテンツの企画内容は、2次元（紙ベース）での企画書では伝わらない。プロトタ イプをざっくり作る「VR絵コンテ」が必要 → 少人数チームで、企画からプロトタイプまで、 Unityで １週間でどこまで出来るかを知る VRは周辺技術との組み合わせも重要 → 360度動画、音声認識、マルチディスプレイ制御を VRと組み合わせる方法を知る
- 4. 本セッションのアジェンダ 1. 漫才VRとは？ 2. 漫才VR開発全体の流れ 〜 開発のポイント 〜 3. 全天球360度動画の導入方法 4. ツッコミモーション認識の仕方 5. 漫才師動画・ツッコミUIのマルチディスプレイ同期制御 6. ツッコミ音声認識
- 5. 1. 漫才VRとは？
- 6. 1.漫才VRとは？
- 7. • 体験者は、VR空間内で漫才のステージに立ち、 相方のボケに対して適切な内容（声）とモーションで ツッコミを行う • 体験後、ツッコミ内容に応じて採点が行われる • VR空間の世界観を、追加のスクリーンで表現し、 観客に判りやすく伝える 1. 漫才VRとは？
- 10. 漫才師とエンジニアの 持ち味を活かしつつ、 番組を盛り上げる！ 開発の方針と戦力分析 ~ 2. 漫才VR開発全体の流れ ~ 漫才師（空） テレビマン・演出（前田） Unity 開発者（柴田・緒方・斎藤） 音声認識アプリ開発者（緒方） 回路設計者（斎藤）
- 11. 要件定義と開発・調達要素の抽出 ~ 2. 漫才VR開発全体の流れ ~ ハイエンド HMD 360度映像 を撮影 ３D-CGアプリ 開発の定番 要件 I. HMD(vive)と漫才VR映像で漫才のツッコミ体験ができる
- 12. 要件定義と開発・調達要素の抽出 ~ 2. 漫才VR開発全体の流れ ~ 要件 II. モーション検出と音声認識によるツッコミ採点ができる マイク内蔵 • 無償 • 商用利用可 • 深層学習 • オフラインで使用可 音声認識サーバアプリ
- 13. 要件定義と開発・調達要素の抽出 ~ 2. 漫才VR開発全体の流れ ~ LED電飾 要件 III. VR映像と同期した相方の正面映像を見せることで、 お客さんも楽しむことができる 正面映像用 縦ディスプレイ ゲーム プレーヤー
- 14. 開発のポイント紹介
- 16. 使用した背景・使用方法 ~ 3. 全天球360度動画の導入方法 ~ 360度動画を使った理由 • 相方の漫才師を用意する必要がある • 3Dモデルを作成するリソースが足りない • 360度動画はリアル感がある (安物のゲームっぽくならない) • チームの漫才師さんの存在を有効活用できる
- 17. 使用した背景・使用方法 ~ 3. 全天球360度動画の導入方法 ~ RICOH THETAを使った理由 • 手軽 (大事！) • 安い • 使っている人が多いので安心 • 薄いので死角が少ない • 映像をスマホに送って確認できる
- 18. メッシュへの適用手順 ~ 3. 全天球360度動画の導入方法 ~ 撮影 パノラマ 動画へ変換 .ogvへ変換 Sphere100.fbx をインポート 再生スクリプト を書く ツッコミ役
- 19. メッシュへの適用手順 ~ 3. 全天球360度動画の導入方法 ~ 撮影 パノラマ 動画へ変換 .ogvへ変換 Sphere100.fbx をインポート 再生スクリプト を書く
- 20. メッシュへの適用手順 ~ 3. 全天球360度動画の導入方法 ~ 撮影 パノラマ 動画へ変換 .ogvへ変換 Sphere100.fbx をインポート 再生スクリプト を書く RICOH THETAのWebサイトから アプリをダウンロードして 動画をドラッグ&ドロップします
- 21. メッシュへの適用手順 ~ 3. 全天球360度動画の導入方法 ~ > ffmpeg.exe -y -i (入力ファイル名) -f ogv -b 8M -ab 128k (出力ファイル名) 撮影 パノラマ 動画へ変換 .ogvへ変換 Sphere100.fbx をインポート 再生スクリプト を書く Movie Textureを使うには ovg形式の動画が必要です ffmpegでogv形式に変換します
- 22. メッシュへの適用手順 ~ 3. 全天球360度動画の導入方法 ~ Sphere100 検索 撮影 パノラマ 動画へ変換 .ogvへ変換 Sphere100.fbx をインポート 再生スクリプト を書く ダウンロードします Sphere100を配布してくださっている 伊藤さんに圧倒的感謝🙏 Unityに直接ドラッグ&ドロップします スケールを調整します
- 23. メッシュへの適用手順 ~ 3. 全天球360度動画の導入方法 ~ 撮影 パノラマ 動画へ変換 .ogvへ変換 Sphere100.fbx をインポート 再生スクリプト を書く マテリアルを作成します シェーダーをUnitのTextureに変更します
- 24. メッシュへの適用手順 ~ 3. 全天球360度動画の導入方法 ~ 撮影 パノラマ 動画へ変換 .ogvへ変換 Sphere100.fbx をインポート 再生スクリプト を書く MeshRendererに動画を貼ったマテリアルを設定します．
- 25. メッシュへの適用手順 ~ 3. 全天球360度動画の導入方法 ~ 撮影 パノラマ 動画へ変換 .ogvへ変換 Sphere100.fbx をインポート 再生スクリプト を書く スクリプトを書いてアタッチします
- 26. メッシュへの適用手順 ~ 3. 全天球360度動画の導入方法 ~ 撮影 パノラマ 動画へ変換 .ogvへ変換 Sphere100.fbx をインポート 再生スクリプト を書く 完成です！
- 27. メッシュへの適用手順 ~ 3. 全天球360度動画の導入方法 ~ 撮影 パノラマ 動画へ変換 .ogvへ変換 Sphere100.fbx をインポート 再生スクリプト を書く 360度動画はファイルサイズが大きいのでGitにコミットはしません .metaファイルのみコミットしましょう
- 29. ツッコミモーションの種類 ~ 4.ツッコミモーション認識の仕方~ 漫才のツッコミをはっきりと区別する必要がある VIVEコントローラー (SteamVR_Controller.Device) から取得できる情報の うち次の2つを使う • Velocity (速度 → 直線的な動きを検出) 「たたく」 (頭より下) • AngularVelocity (角速度 → 手首のスナップを検出） 「はたく」 (頭より上)
- 30. 「たたく」「はたく」の判別 ~ 4.ツッコミモーション認識の仕方~ 現実世界はなかなか厳しい (入力が0や1でない) • ツッコミ中以外でも速度・角速度はそこそこ大きい (認識開始の問題) • ツッコミの終わりも速度・角速度は完全に0になるとは限らない (認識終了の問題)
- 32. 「たたく」「はたく」の判別 ~ 4.ツッコミモーション認識の仕方~ ツッコミモーション認識のためにやったことはこの二つ！ • コントローラーから速度・角速度を取得する • 開始と終了の2つの閾値をつける
- 34. 同期処理のポイント ~ 5. 漫才師動画・ツッコミUIのマルチディスプレイ同期制御 ~ 5-1. ボケ役の声と、ツッコミ役の声との同期 5-2. 複数ディスプレイ間での映像・UI同期 ヘッドマウントディスプレイと縦ディスプレイ
- 35. 漫才の動画・音声収録 ~ 5-1. ボケ役の声と、ツッコミ役の声との同期 ~ 収録のポイント ・HMD映像にはツッコミ役を映さず、音声の収録のみが必要 （ツッコミはHMDの位置にいるため） ・HMD映像と正面映像のボケ役の動き同期が必要 ボケ ツッコミ
- 36. 漫才の動画・音声収録 ~ 5-1. ボケ役の声と、ツッコミ役の声との同期 ~ ツッコミ役を映さず、ツッコミ音声を収録 【課題】ボケ・ツッコミの音声を別々に収録すると、編集でタイミング調整が大変 → ツッコミ役を死角に隠し、ツッコミ音声をボケ映像・音声と一緒に収録 正面カメラ ボケ役 全天球カメラ バイソン君 なんです 誰が バイソンや！ ステージ撮影 スペース カメラ死角 スペース ツッコミ役音声の再集録を回避 → 編集作業の手間軽減 ツッコミ役
- 37. 漫才の動画・音声収録 ~ 5-1. ボケ役の声と、ツッコミ役の声との同期 ~ • HMD動画と正面映像との同期 • ・音声波形を参照しながら手動で位置合わせ（手早い） • ・一方の音声データはミュートする 全天球 映像 正面 映像
- 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#
- 40. 6. ツッコミ音声の認識
- 41. ソケット通信によるjuliusの活用 ~ 6. ツッコミ音声の認識 ~ • Julius の活用ポイント１：ソケット通信を使う • 【課題】Unity - C#で使うにはラッパー作成が必要 • → Julius はソケット通信をサポートしており、素直にソケット通信する方が楽 音声認識 ローカル サーバ [julius] 音声認識 クライアント 通信制御部 プロセス起動 通信確立 認識結果通知
- 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. 環境音ノイズ対策 ~ 6. ツッコミ音声の認識 ~ • 【課題】スピーカーによるノイズ音への対策 → ヘッドセットは使わず、VIVEに内蔵されているマイクを使う 悪い例 マイクへ音漏れ 認識処理に影響 良い例 指向性マイクで 声だけ拾う
- 44. 終わりに - ハッカソンで心がけること • １．下準備をしっかりやっておく 迷う時間をとにかく減らす。迷ったらその分開発の時間がなくなる • 作った結果が玉砕でもそれは一つの成果と考える、伝えるために作りきることが大事 • ２．開発の着地を丁寧にやる • 雰囲気さえ伝われば細かい不具合は目を瞑る。ノリと勢いで突っ切る。 • 終盤のコード修正、配線などのセッティングは特に注意。一種のチキンレース！ 開発を全力で楽しむ！ やりきった先に見えてくる達成感が最大の収穫
- 46. VIVE トラッカー • 初期入荷分は2時間で完売 • 現在は各店に在庫あります！ • 税込12,500円！ • 7階で展示中！
- 47. VIVE デラックス オーディオ ストラップ • 北米では6月6日に発売予定 • 日本でも6月6日に発売します！ • 税込12,500円！ • 7階で展示中！
- 48. Thank you!
- 49. Appendix
- 50. アイデアから開発・調達要素の抽出 ~ 漫才VR開発全体の流れ ~ アイデア ハードウェア ソフトウェア データ・コンテンツ HMD(vive)と漫才VR映 像で、漫才のツッコミ 体験ができる ・ヘッドマウントディ スプレイ（Vive） ・全天球カメラ （Recoh Theta） ・レンダリング制御 ・シナリオ制御 ・漫才台本(シナリオデー タ) ・漫才映像 - 360度 モーション検出及び音 声認識によるツッコミ 採点ができる ・モーション検出デバ イス（vive コントロー ラ） ・マイク ・音声認識エンジン (julius) ・音声認識クライア ント ・漫才台本用音声認識辞書 （概念体型辞書） VR映像と動機した相方 の正面映像を見せるこ とで、お客さんも楽し むことができる ・電飾 ・縦長ディスプレイ ・レンダリング制御 ・シナリオ制御 ・漫才映像 -正面
Notas do Editor
- 西川
- MBSの見逃し配信サイトを埋め込み予定。
- デモ動画をここで流しながら説明する 漫才師は吉本興業所属のラフ次元コンビ （ボケ役：空道太郎さん・ツッコミ役：梅村賢太郎さん） 1分～１分半程度
- MBSの見逃し配信サイトを埋め込み予定。
- 緒方さんに交代
- 配布資料用
- 柴田さんに交代 //文と文の間を開けて話す． ここからは技術的な面についてお話します．
- 今回RICOH THETAで撮影した360度動画を使ったのでそれについて説明します．
- 漫才VRの実現のためには，何と言っても相方の漫才師をVRの世界に用意しなければいけません． しかも今回はハッカソンでの開発ですから，漫才師の3Dモデルを用意してアニメーションをつけて・・・なんて時間のかかることをするわけにはいきません． 今回は，ハッカソンで同じチームになった漫才師さんの360度動画を使うことにしました．
- 360度動画の撮影には，RICOH THETAを使いました． 理由としては，手軽さを一番重視した，ということが大きいです． 360度動画で風景を撮る際には問題にならない話ですが，漫才は非常に被写体が近いので， 薄くて死角が少ないことは重要です．
- ここから実際の作り方について説明します．漫才のツッコミ役の視点に
- RICOH THETAを置いて撮影します．
- 撮影した動画は公式アプリでパノラマ動画に変換して，
- MovieTextureで再生するために，ffmpegというソフトを使ってogv形式にします．
- 360度動画を映すためにはポリゴンの法線が内側を向いた球体が必要です． 今回はSphere100を使いました． Sphere100は検索してダウンロードし，Unityに取り込みます． しかし，このままでは球体が小さすぎて，頭を動かしたときに球体からカメラがはみ出してしまうので，Scaleを大きな値にします．
- 次に，マテリアルを作ってシェーダーの種類を変更します．
- 先ほど作ったマテリアルをメッシュに設定して
- 動画をテクスチャに貼り付けて，このような再生用スクリプトをアタッチすればOKです．
- これで360度動画が見られるようになります！ この資料は公開されるので是非参照ください。 ハッカソンではMovieTextureを使いましたが，現在はAVProのアセットを使って動画を再生しています．
- ここで一つ大事なポイントがありまして，360度動画は大きすぎるのでGitの管理からは外します． ただし，動画のmetaファイルは動画ファイルを参照する為の情報を持っているのでmetaファイルのみコミットします． metaファイルをコミットしないと，他の人がシーンを触った時に，せっかくアタッチした動画が取れてしまうので注意しましょう．
- 次に，VIVEを使ってどのようにツッコミを認識しているかを説明します．
- 今回は漫才を採点するわけですから，採点者としてツッコミを区別する必要があります． コントローラーからは速度と角速度が取得できたのでこの二つを採点に使うことにしました． 速度を使って「相手のお腹を「たたく」動き」 角速度を使って「相手の頭を「はたく」動き」 を検出します． 「相手のお腹を「たたく」動き」は頭より下にコントローラーがある時に速度つまり手の動きの速さで判断します． 「相手の頭を「はたく」動き」は頭より上にコントローラーがある時に角速度つまり手首のスナップで判断します．
- そのままだと，ツッコミの動きをしていないのに認識がされてしまったり，ツッコミが認識されなかったりします． 「ツッコミ中以外にも速度・角速度がそこそこ大きい」ため，認識開始に大きめの閾値をつける必要があります． 「ツッコミの終わりも速度・角速度は完全に0になるとは限らない」ため，認識終了に小さめの閾値をつける必要があります．
- プレイヤーがコントローラーを振ると，認識開始の閾値より入力が大きくなるので認識開始です． コントローラーを振り終わると，認識終了の閾値より入力が小さくなるので認識終了です． 入力は頭より下の「たたく」モーションなら速度，頭より上の「はたく」モーションなら角速度を見ています． 認識している間の入力の最大値に応じた 効果音・エフェクト・振動が起こるので超きもちいいツッコミができます．
- ということで， コントローラーから速度・角速度を取得することと, 2つの閾値をつけることで ツッコミモーションを検出できるというお話でした.
- 緒方さんに交代
- 屋内版の話。 屋外は聞かれたら答える
- 時間なければ 資料のみ
- 西川に交代
- 西川に交代
- 西川に交代