園児ニアのメモ

ただのエンジニア。何でも屋みたいな扱い受けてます。

OpenCV for Unityでローカル画像読み込み

このページではOpenCVをUnityで扱うためのAsset「OpenCV for Unity」を利用したOpenCVの機能でローカル画像を読み込み、画面に出力するまでの手順をメモしています。
こちらはUnity5.4.1で作業しました。

開発準備

  • 読み込むための画像を用意してください。
    • 用意した画像は「Assets/Resources/LoadImage/」に追加してください。
      今回はcat.jpgという名前で可愛い猫の画像を用意しました。
    • 開発を行うためにAssetをImportしてください。
      madgenius.hateblo.jp

Scriptの追加

画像読み込みには「Imgcodecs.imread("");」を使用します。
以下はそのScriptです。

csharp:LoadImageScript.cs
using UnityEngine;
using System.Collections;
using UnityEngine.UI;
using OpenCVForUnity;

public class LoadImageScript : MonoBehaviour {

	public RawImage rawImage;

	private Mat originMat;
	private Texture2D texture;
	private Color32[] color;

	// Use this for initialization
	void Start () {
		if (rawImage) {
			//Mat画像をPathから読み込み
			originMat = Imgcodecs.imread (Application.dataPath + "/Resources/LoadImage/cat.jpg");
			if (originMat != null) {
				if (!originMat.empty ()) {
					//Color32の作成
					color = new Color32[originMat.cols () * originMat.rows ()];
					if (color != null) {
						//Texture2Dを作成
						texture = new Texture2D (originMat.cols (), originMat.rows ());
						//描画するRawImageにTexture2Dを設定
						rawImage.texture = texture;
					}
				}
			}
		} else {
			Debug.LogError("NotFound:rawImage");
		}
	}
	
	// Update is called once per frame
	void Update () {
		if (originMat != null) {
			if (!originMat.empty ()) {
				if (color != null) {
					if (texture != null) {

						/* 画像加工開始 */



						/* 画像加工終了 */

						//Matの編集内容をTexture2Dに反映
						Utils.matToTexture2D (originMat, texture, color);
					}
				}
			}
		}
	}
}

GameObjectの設定

LoadImageScript.csを作成したら、プロジェクトに追加します。

Hierarchyはこんな感じです。
UI.RawImageを追加してカメラなどを調節しただけです。
f:id:nanokanato:20170412151603p:plain:w300

作成したRawImageにLoadImageScript.csのComponentを追加してシリアライズのRawImageに自身を登録。
f:id:nanokanato:20170412151611p:plain:w300

実行してみる

内部でTexture → Mat → Texture2Dに変換されているのでMatの部分でOpenCVでの加工に対応しています。

一応、可愛い猫が表示されました。
けどなんか青っぽい気が...
f:id:nanokanato:20170412151601p:plain:w300

やはり、元画像より青っぽくなり寒そうな猫に...(上:元画像)
f:id:nanokanato:20170412151558j:plain:w300
f:id:nanokanato:20170412151608p:plain:w300

画像を読み込んでいるTexture2Dに変えている「matToTexture2D(Mat, Texture2D, Color32);」メソッドの別の方法、「matToTexture2D(Mat, Texture2D);」にしても同じ青っぽいものが表示されました。
読み込み部分の「Imgcodecs.imread("");」の時点で青くなっているものと思います。

Jpegが非対応なわけないよなぁと思いながらpngの猫を追加した。
上が元画像のすやすや猫.pngで下がMatで出力した凍える猫.png
f:id:nanokanato:20170412151556p:plain:w300
f:id:nanokanato:20170412151554p:plain:w300

「imread(string,int)」の第二引数を使ってIMREAD_GRAYSCALE*1を入れてみると白黒になって悲しそうな猫に...そうじゃない。
ここに答えがあるという希望を持ちたい。
f:id:nanokanato:20170412151605p:plain:w300 < 助けて

色がおかしい!

ネットにいる知識人や賢者の方々、お助けいただきたいです。
(私のほうでも随時検証してみます。)

*1:imread(string,int)の第二引数
IMREAD_UNCHANGED:不明
IMREAD_GRAYSCALE:グレースケール
IMREAD_COLOR:デフォルト(青っぽいやつ)
IMREAD_ANYDEPTH:不明
IMREAD_ANYCOLOR:不明
IMREAD_LOAD_GDAL:不明
IMREAD_REDUCED_GRAYSCALE_2:不明
IMREAD_REDUCED_COLOR_2:不明
IMREAD_REDUCED_GRAYSCALE_4:不明
IMREAD_REDUCED_COLOR_4:不明
IMREAD_REDUCED_GRAYSCALE_8:不明
IMREAD_REDUCED_COLOR_8:不明