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

294 Views

June 07, 17

スライド概要

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

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

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

講演動画:https://youtu.be/q90kfTT33Po

profile-image

リアルタイム3Dコンテンツを制作・運用するための世界的にリードするプラットフォームである「Unity」の日本国内における販売、サポート、コミュニティ活動、研究開発、教育支援を行っています。ゲーム開発者からアーティスト、建築家、自動車デザイナー、映画製作者など、さまざまなクリエイターがUnityを使い想像力を発揮しています。

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

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

2.

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

3.

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

4.

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

5.

1. 漫才VRとは?

6.

1. 漫才VRとは?

7.

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

8.

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

9.

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

10.

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

11.

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

12.

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

13.

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

14.

開発のポイント紹介

15.

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

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へ変換 RICOH THETAのWebサイトから アプリをダウンロードして 動画をドラッグ&ドロップします Sphere100.fbx をインポート 再生スクリプト を書く

21.

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

22.

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

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ファイルのみコミットしましょう 再生スクリプト を書く

28.

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

29.

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

30.

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

31.

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

32.

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

33.

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

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) の考え方を活用、制御コードを共通化 C# 【 Model & Controller 】- Unity Scripts and data UIのふるまい・タイミングを記述ディスプレイ間で共通 共通のスクリプトを 様々なView にアタッチ 【 View】- Game Objects on Unity Hierarchy ディスプレイの種類に合わせてUIの配置を変更

39.

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

40.

6. ツッコミ音声の認識

41.

ソケット通信によるjuliusの活用 ~ 6. ツッコミ音声の認識 ~ • Julius の活用ポイント1:ソケット通信を使う • 【課題】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.

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

45.

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

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