株式会社インフィニットループ PHPとスマホアプリ開発を行う札幌のシステム会社

技術ブログ

  1. トップ>
  2. 技術ブログ>
  3. 【VR】お金をかけずにリアルと仮想世界をクロマキー合成してみよう!

2016年10月28日 (金)

著者 : 

【VR】お金をかけずにリアルと仮想世界をクロマキー合成してみよう!

こんにちわ。「悪いな、このVRは3人乗りなんだ」と社内で意味不明なことを言ってるn-yamaguchiです。

VRコンテンツを作って人に説明する時に、映像を見せてもよくわからないって言われた経験はありませんか?
そんなわけで、こんな感じに

クロマキー合成でリアルと仮想世界を合成した映像を作れば、きっと伝わるに違いない!
・・・お金がないので極力お金をかけずにクロマキー合成をしてみよう! というのがこのコーナーの趣旨です。

1.クロマキー合成するためのスタジオ作成

クロマキー合成するには背景を単色(緑色が好ましい)とのことなので、アマゾンで安いクロマキー用の布を購入
少し大きめの方がいいのかなぁ~と思い特大サイズなるものを購入

cromaky1-amazon1

https://www.amazon.co.jp/dp/B00Y9O5PK8

3,205円也

きっと布の材質とか色々要件がありそうですが、お金をかけずにということで一番安めの布を購入です。

購入した布を会社の一角の天井からぶら下げるとこんな感じになりました。

cromaley-blog4

なんか、それっぽくなりました。

2.クロマキー合成用のカメラ

普通はきっと高価なカメラを使うと思いますが、お金をかけずにということで普通のWebカメラを使います。

cromaley-blog6

会社に転がっていたWebCam(Microsoft LIFECAM STUDIO)を使います。
Amazonで調べてみたら5,000円ぐらいでした。

3.クロマキー合成用にHTC Viveを設定

次にクロマキー合成を行うため、HTC Viveの設定を行います。

公式ではこちらにやり方が書いてあります。
仮想空間上でカメラの位置を算出するためHTC Viveのコントローラがもう一本必要と・・・
HTC Viveをもう1セット買う余裕はないので、2本のコントローラでなんとか出来ないかなぁ~と調べた結果

How to Create Mixed Reality Videos for the Vive – with Two Controllers
【HTC Vive】コントローラ2本でクロマキー合成をする方法

こちらのページに2本のコントローラでクロマキー合成を行う方法が書いてありましたのでこちらの方法を用いて仮想コントローラを作成し3本目のコントローラを認識させました。

4.OBSでクロマキー合成の画面を作成

画面合成を行うのにOpen Broadcaster Software(OBS)を使用します(無料)
本来であれば配信ソフトなのですが、録画機能もありますので録画機能を使ってクロマキー合成した画面をファイルに落とします。
OBS Studio、OBS Classicと二種類ありますがどちらを使っても問題ありません。
(本文ではOBS Classicを使っておりますが、OBS Studioの方が機能が豊富で便利です)

HTC Viveの設定を行いexternalcamera.cfgをUnityの実行ファイル内に置いて起動すると画面が4分割になります。

cromaley-blog4-b

使用するのはフロントイメージとバックイメージなのでOBSでウィンドウキャプチャーを行いクロップ(切り抜き)を行います。

OBSの描画順序と設定は
1. フロントイメージ(黒をクロマキーで透過にする)
2. Webcamの映像(緑色の布なので緑をクロマキーで透過する)
3. バックイメージ(特になにもしない)

gouseiimage

こんな感じでOBSの設定を行います。

Webカメラの位置合わせを行ってみますと

cromaley-blog2

一部隠れなかった場所がありますがしょうがないと言い聞かせ・・・

これをそのまま緑色をマスクする設定にすると

cromaley-blog3

・・・ボーナス出たらもう一枚、緑色の布を買おう・・・

5.仮想空間と現実世界のカメラの位置合わせ

2で用意したカメラと仮想空間内に設置するカメラを厳密に位置合わせしなくてはなりません。
ダウンロードを行った仮想デバイスの中にUnityAssetがあり、ある程度位置合わせを行うツールがあるのですが・・・

全然あわない!!!

2日ほど悪戦苦闘してもぜんぜん無理!!!
(そもそも、会社に落ちてたWebCamのFOVってなんぞや?? 状態)

仕方がないのでUnityでマウスやキーボード操作でカメラの座標系をリアルタイムで操作するツールを作りました。

cromaley-blog10

こんな感じでsaveするとexternalcamera.cfgを吐き出すツールです。
これでなんとかそれっぽい座標が求まりましたが・・・それでもなんか変! 
気にしないことにします。

6.実際に合成をしてみる

ここまで準備が整いましたら、HTC ViveのUnityアプリケーションを起動します。
そしてOBSの録画もONにすると録画映像が綺麗にクロマキー合成されています。
(綺麗かどうかは色々微妙ですが・・・)

結論

・緑の布はたくさん必要
・カメラの位置合わせは力技

みなさんもよかったらクロマキー合成で遊んでみてください。

あいえるたん3Dモデル無料配布中!

インフィニットループ公式キャラクターあいえるたんは、3Dモデルを無料配布中です!
LINEスタンプもありますので、みなさん是非使ってみてください。

iltan-3d-model

インフィニットループではエンジニアを募集しています。
詳しくは採用情報をご覧ください!

VRで新しいサービスを導入してみませんか?

弊社では、VRについてのご相談も受け付けております。
VR関連のサービス、イベント用のVR展示、お問い合わせはこちらのページをご覧ください。

  • このブログについて

    このブログは、札幌市・仙台市の「株式会社インフィニットループ」が運営する技術ブログです。
    お仕事で使えるITネタを社員たちが発信します!

    最新の記事