～OpenCVの画像処理結果をサブウィンドウで確認しよう～
このシリーズについて
このシリーズでは、Unity上でカメラ映像を解析し、その結果をゲーム画面へ反映させる仕組みを構築してきました。
| 回 | 内容 | 主なテーマ |
|---|---|---|
| 第1回 | OpenCV for Unityの導入と動作確認 | OpenCV環境構築 |
| 第2回 | Webカメラ映像をMat形式で取得 | Unity＋OpenCVの基本 |
| 第3回 | オプティカルフローで動きを検出 | 特徴点追跡（PyrLK） |
| 第4回（今回） | 映像を別ウィンドウで表示 | デバッグ・ツール分離 |
今回がシリーズ最終回です！
🎯 今回の目的
画像処理を行っていくと、
「ゲーム画面とは別に、処理結果を拡大表示したい」
「解析用の画面と、ゲーム画面は分けたい」
というケースがよくあります。
例えば：
- オプティカルフローの結果を大きく表示して確認したい
- デバッグ情報（特徴点、ベクトル、バウンディングボックス）を見たい
- ゲーム画面のUIを汚さずに解析ウィンドウを独立させたい
今回は以下のような Unity Editor 拡張ウィンドウ を作って、
OpenCVの映像を自由に表示できる仕組みをつくります👇
🖼️ Inspector でも Gameビューでもない、独立した映像ウィンドウ
UnityのEditorWindowを使う方法なので、
ゲーム実行中にサブウィンドウを自由に動かしたり拡大したりできます。
1. EditorWindowで新規ウィンドウを作る
Unityには EditorWindow クラスがあり、
これを継承すると 好きなUIを持った独自のウィンドウ が作れます。
まずはテンプレート。
🎨 OpenCVWindow.cs
using UnityEditor;
using UnityEngine;
public class OpenCVWindow : EditorWindow
{
Texture2D displayTexture;
// メニューから開く
[MenuItem("Window/OpenCV Display")]
public static void ShowWindow()
{
GetWindow<OpenCVWindow>("OpenCV Display");
}
// 外部からテクスチャを受け取る
public void SetTexture(Texture2D tex)
{
displayTexture = tex;
Repaint();
}
void OnGUI()
{
if (displayTexture == null)
{
GUILayout.Label("表示できるテクスチャがありません。");
return;
}
// ウィンドウのサイズに合わせて描画
Rect rect = GUILayoutUtility.GetRect(position.width, position.height);
GUI.DrawTexture(rect, displayTexture, ScaleMode.ScaleToFit, false);
}
}
これで、Unity上部メニューから
Window > （アプリ名） > （新規ウィンドウ名）
で新しいウィンドウを開けます。
（例：Window > VR Fit Trip > Optical Flow Debug）
2. ゲーム側スクリプトからウィンドウに画像を送る
第2回〜第3回で作成した「WebCamTexture＋Mat→Texture2D」の流れを使い、
毎フレームテクスチャを渡して更新します。
🎥 OpenCVWindowSender.cs
using UnityEngine;
using OpenCVForUnity.UnityUtils.Helper;
using OpenCVForUnity.CoreModule;
public class OpenCVWindowSender : MonoBehaviour
{
WebCamTextureToMatHelper camHelper;
Texture2D texture;
OpenCVWindow window;
void Start()
{
camHelper = gameObject.AddComponent<WebCamTextureToMatHelper>();
camHelper.Initialize();
// EditorWindowを取得
window = EditorWindow.GetWindow<OpenCVWindow>();
}
void OnWebCamTextureToMatHelperInitialized()
{
Mat frame = camHelper.GetMat();
texture = new Texture2D(frame.cols(), frame.rows(), TextureFormat.RGBA32, false);
}
void Update()
{
if (!camHelper.IsPlaying() || !camHelper.DidUpdateThisFrame())
return;
// カメラ映像のMat
Mat frame = camHelper.GetMat();
// Unity Texture2Dに変換
OpenCVMatUtils.MatToTexture2D(frame, texture);
// サブウィンドウに転送
if (window != null)
window.SetTexture(texture);
}
}
3. 実行結果
▶ を押すと、以下のように動作します：
Gameビューとは別に、独立したウィンドウが表示される
- ウィンドウはドラッグで移動可能
- サイズ変更も自由
- OpenCVで加工した画像をリアルタイムに表示
- デバッグが非常にしやすい
ゲーム画面と解析用ウィンドウ
を完全に分離できるため、複雑な処理を扱いやすくなります。
（左がゲーム画面、右が解析用ウィンドウ）
4. さらに発展：解析ウィンドウを複数持つ
EditorWindowは複数作れます。
例えば：
- 生のカメラ映像
- オプティカルフロー結果
- 特徴点ヒートマップ
- 輪郭抽出結果
- 背景差分結果
をそれぞれ別ウィンドウに表示することも可能です。
OpenCVWindow flowWindow = GetWindow<OpenCVWindow>("Flow");
OpenCVWindow maskWindow = GetWindow<OpenCVWindow>("Mask");
研究開発・デバッグ工程で非常に威力を発揮します。
5. 注意（EditorWindowの仕様）
-
EditorWindowはUnity Editor内でのみ動作
→ ビルドしたゲームには含まれません -
重い処理をOnGUIに入れない
→ 表示するだけにする -
テクスチャのDestroy漏れに注意
→ 終了時にはDispose推奨
開発中のみ使うデバッグウィンドウとして利用する形が最適です。
6. 次のステップ
今回でシリーズは完結ですが、以下の応用が簡単にできます。
- 手の動きでゲーム操作
- 物体追跡との組み合わせ
- 特徴量＋ML（機械学習）でモーション分類
第1回～第4回の内容を組み合わせれば、
Unity × OpenCV を使ったインタラクション開発の基礎が身についた状態になるかと思います。
まとめ
- EditorWindowを使えば、独立した解析ウィンドウを作れる
- OpenCVの結果をリアルタイム表示することで、デバッグ効率が大幅向上
- Gameビューを汚さずに高度な解析が可能
- 研究開発・工具としてのUnity運用にも最適
📚 シリーズ一覧
- 【第1回】OpenCV for Unityの導入と環境設定
- 【第2回】Webカメラからリアルタイム映像を取得して表示する
- 【第3回】オプティカルフローで動きを検出してみよう
- 【第4回】Unity Editorとは別ウィンドウで映像を表示する（この記事）
これでシリーズは完結！
最後まで読んで下さりありがとうございました。