---
title: 【Unite 2017 Tokyo】VIVEとUnityで、1週間で作る漫才VR
tags:  #vr #unity #unity3d #htc vive #unite 2017 tokyo #漫才  
author: [Unity Technologies Japan](https://convert.docswell.com/user/UnityJapan)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/5GJ54KGD74.jpg?width=480
description: 講演者：西川 美優(HTC NIPPON株式会社)  　　　　緒方 伸輔  　　　　柴田 佳祐(京都大学工学部電気電子工学科)   こんな人におすすめ  ・Unityを勉強・仕事で使用している人  ・UnityでVRコンテンツを開発してみたい人   受講者が得られる知見  ・UnityでのVRコンテンツの開発方法  講演動画：https://youtu.be/q90kfTT33Po
published: June 07, 17
canonical: https://convert.docswell.com/s/UnityJapan/KV9MX5-unite-2017-tokyoviveunity1vr-76726864
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/5GJ54KGD74.jpg)

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


# Page. 2

![Page Image](https://bcdn.docswell.com/page/4LE3GZPQJ5.jpg)

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


# Page. 3

![Page Image](https://bcdn.docswell.com/page/V8ED1RLWJG.jpg)

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


# Page. 4

![Page Image](https://bcdn.docswell.com/page/4V7PQW2XJ8.jpg)

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


# Page. 5

![Page Image](https://bcdn.docswell.com/page/L2JV58D3JQ.jpg)

1. 漫才VRとは？


# Page. 6

![Page Image](https://bcdn.docswell.com/page/Z5EG65YY7L.jpg)

1. 漫才VRとは？


# Page. 7

![Page Image](https://bcdn.docswell.com/page/V4JQ4ZM6EP.jpg)

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


# Page. 8

![Page Image](https://bcdn.docswell.com/page/DK74Q3VME1.jpg)

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


# Page. 9

![Page Image](https://bcdn.docswell.com/page/PLJ1P13YEG.jpg)

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


# Page. 10

![Page Image](https://bcdn.docswell.com/page/8GJW28P172.jpg)

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


# Page. 11

![Page Image](https://bcdn.docswell.com/page/W4EZD8KXJ3.jpg)

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


# Page. 12

![Page Image](https://bcdn.docswell.com/page/KY761PQPJV.jpg)

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


# Page. 13

![Page Image](https://bcdn.docswell.com/page/5G754KRPE4.jpg)

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


# Page. 14

![Page Image](https://bcdn.docswell.com/page/V9J2VWDZJR.jpg)

開発のポイント紹介


# Page. 15

![Page Image](https://bcdn.docswell.com/page/5DEY3L2N7M.jpg)

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


# Page. 16

![Page Image](https://bcdn.docswell.com/page/2VJNV48V78.jpg)

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


# Page. 17

![Page Image](https://bcdn.docswell.com/page/GYE96QKVE3.jpg)

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


# Page. 18

![Page Image](https://bcdn.docswell.com/page/5GE8ZGR47D.jpg)

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


# Page. 19

![Page Image](https://bcdn.docswell.com/page/MLELDGKV7R.jpg)

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


# Page. 20

![Page Image](https://bcdn.docswell.com/page/54JMPQ2NJW.jpg)

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


# Page. 21

![Page Image](https://bcdn.docswell.com/page/ZPJR18M4J9.jpg)

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


# Page. 22

![Page Image](https://bcdn.docswell.com/page/NPEXY8VZ7X.jpg)

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


# Page. 23

![Page Image](https://bcdn.docswell.com/page/63EK3KQVED.jpg)

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


# Page. 24

![Page Image](https://bcdn.docswell.com/page/4L73GZKQE5.jpg)

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


# Page. 25

![Page Image](https://bcdn.docswell.com/page/V87D1R3WEG.jpg)

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


# Page. 26

![Page Image](https://bcdn.docswell.com/page/4VJPQW4XE8.jpg)

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


# Page. 27

![Page Image](https://bcdn.docswell.com/page/L2EV58X3EQ.jpg)

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


# Page. 28

![Page Image](https://bcdn.docswell.com/page/Z57G65VYJL.jpg)

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


# Page. 29

![Page Image](https://bcdn.docswell.com/page/V4EQ4Z667P.jpg)

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


# Page. 30

![Page Image](https://bcdn.docswell.com/page/DKJ4Q34M71.jpg)

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


# Page. 31

![Page Image](https://bcdn.docswell.com/page/PLE1P14Y7G.jpg)

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


# Page. 32

![Page Image](https://bcdn.docswell.com/page/8GEW28X1J2.jpg)

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


# Page. 33

![Page Image](https://bcdn.docswell.com/page/W47ZD86XE3.jpg)

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


# Page. 34

![Page Image](https://bcdn.docswell.com/page/KYJ61P2PEV.jpg)

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


# Page. 35

![Page Image](https://bcdn.docswell.com/page/5GJ54K2P74.jpg)

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


# Page. 36

![Page Image](https://bcdn.docswell.com/page/V9E2VW4ZER.jpg)

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


# Page. 37

![Page Image](https://bcdn.docswell.com/page/5D7Y3LMNJM.jpg)

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


# Page. 38

![Page Image](https://bcdn.docswell.com/page/2VENV4WVJ8.jpg)

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


# Page. 39

![Page Image](https://bcdn.docswell.com/page/GY796QXV73.jpg)

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


# Page. 40

![Page Image](https://bcdn.docswell.com/page/5G78ZG24JD.jpg)

6. ツッコミ音声の認識


# Page. 41

![Page Image](https://bcdn.docswell.com/page/ML7LDG2VJR.jpg)

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


# Page. 42

![Page Image](https://bcdn.docswell.com/page/54EMPQ8NEW.jpg)

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
これで一つの名詞


# Page. 43

![Page Image](https://bcdn.docswell.com/page/ZPER1854E9.jpg)

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


# Page. 44

![Page Image](https://bcdn.docswell.com/page/NP7XY8KZJX.jpg)

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


# Page. 45

![Page Image](https://bcdn.docswell.com/page/637K3K5V7D.jpg)

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


# Page. 46

![Page Image](https://bcdn.docswell.com/page/4LJ3GZ1Q75.jpg)

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


# Page. 47

![Page Image](https://bcdn.docswell.com/page/V8JD1RXW7G.jpg)

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


# Page. 48

![Page Image](https://bcdn.docswell.com/page/4VEPQWPX78.jpg)

Thank you!


# Page. 49

![Page Image](https://bcdn.docswell.com/page/L27V58237Q.jpg)

Appendix


# Page. 50

![Page Image](https://bcdn.docswell.com/page/Z5JG65RYEL.jpg)

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


