Unityで、クリックしたピクセルの色を取得したい

Question

前提・実現したいこと

Unityで、ウェブカメラで読み込んだ画像をクリックしてそのクリックしたピクセルの色を取得するというものを作っています。

発生している問題・エラーメッセージ

ウェブカメラで映像を映し出し、クリックしたピクセルのカラーコードを表示するというところまでいったのですが表示しているカラーコードが明らかにクリックしたピクセルの色ではないカラーコードになってしまっています。

この画像は実行してみたところになります。ポインタが指すところをクリックしたところで、右のパネルに取得した色を表示しています。このように、白っぽい部分をクリックしているにも関わらず実際に表示された色はグレーに近い色になってしまっています。

該当のソースコード

以下がこのプロジェクトで使用しているスクリプトのソースコードになります。

using UnityEngine;
using UnityEngine.UI;

public class WebCameraTest : MonoBehaviour
{
    public RawImage rawImage;
    
    WebCamTexture webCamTexture;
    
    
    void Start()
    {
      webCamTexture = new WebCamTexture();
      rawImage.texture = webCamTexture;
      webCamTexture.Play();
    }

    // Update is called once per frame
    void update ()
    {      
    
    }
}

using UnityEngine;


public class GetColor : MonoBehaviour
{
	public Color color;
	private Texture2D tex = null;

	void Start()
	{
		tex = new Texture2D(1,1, TextureFormat.RGB24, false);
	}

	public void Onclick()
	{
		Vector2 pos = Input.mousePosition ;
		tex.ReadPixels(new Rect(pos.x, pos.y, 1, 1), 0, 0);
		color = tex.GetPixel(0,0);
                Debug.Log(color);
	}
}

using UnityEngine;

public class UpdateColor : MonoBehaviour
{
	private GetColor getColor;

	void Start()
	{
		getColor = GameObject.FindObjectOfType<GetColor>();
	}

	// Update is called once per frame
	void Update()
	{
		GetComponent<Renderer>().material.color = getColor.color;
                Debug.Log(getColor.color);
                Debug.Log(GetComponent<Renderer>().material.color);
        string save_1_color = ColorUtility.ToHtmlStringRGB(getColor.color);
        Debug.Log(save_1_color);
    }
}

WebCameraTestおよびGetColorはRawImageに、UpdateColorはPlaneにアタッチしてあります。

補足情報（FW/ツールのバージョンなど）

Unity 2019.2.9f1、VisualStudio2015での開発です。

何卒ご教授のほどよろしくお願いいたします。

Answer 1

間違っていたらすみません。
Input.mousePositionとReadPixelsの座標系が違うせいで狙ったのと違うピクセルを拾っているのではないでしょうか。

Answer 2

Input.mousePositionの位置からtex.ReadPixelsで色を取っていることから察しますに、もしかしてWebCamTexture上からだけでなく画面全体から色を取る必要があるのでしょうか?
もしそうでしたら、色取りのタイミングを変えてやるといいかもしれません。

using System.Collections;
using UnityEngine;

public class GetColor : MonoBehaviour
{
    public Color color;
    private Texture2D tex = null;

    void Start()
    {
        tex = new Texture2D(1, 1, TextureFormat.RGB24, false);
    }

    public void OnClick()
    {
        StartCoroutine(GetColorCoroutine());
    }

    private IEnumerator GetColorCoroutine()
    {
        // 色取得メソッドをコルーチン化し、実際の色取得をフレーム末尾まで遅延させて
        // 画面のレンダリングが完了してから色を取得するようにする
        yield return new WaitForEndOfFrame();
        Vector2 pos = Input.mousePosition;
        tex.ReadPixels(new Rect(pos.x, pos.y, 1, 1), 0, 0);
        color = tex.GetPixel(0, 0);
        Debug.Log(color);
    }
}

それともWebCamTexture上だけに絞った方が望ましいでしょうか?
その場合は、下記のように色取り方法を変更してみてはいかがでしょう。

using UnityEngine;
using UnityEngine.UI;

public class GetColor : MonoBehaviour
{
    public Color color;

    // texは使用しない
    // private Texture2D tex = null;

    void Start()
    {
        // texは使用しない
        // tex = new Texture2D(1, 1, TextureFormat.RGB24, false);
    }

    public void OnClick()
    {
        // Input.mousePositionはゲーム画面全体の中でのマウスポインタの位置を示しているので
        // RawImageに映されているWebCamTextureから正しく色を取るにはそのままでは使えず、座標変換が必要なはず
        Vector2 pos = Input.mousePosition;

        // まず自分自身のRectTransform...つまりRawImageのRectTransformを取得し...
        RectTransform rectTransform = transform as RectTransform;

        // 自分自身が所属しているCanvasも取得し...
        Canvas rootCanvas = rectTransform.GetComponentInParent<Canvas>().rootCanvas;

        // posを自分自身のローカル座標に直して...
        RectTransformUtility.ScreenPointToLocalPointInRectangle(
            rectTransform,
            pos,
            rootCanvas.renderMode == RenderMode.ScreenSpaceOverlay ? null : rootCanvas.worldCamera,
            out Vector2 localPos);

        // さらにUV座標に換算し...
        Rect rect = rectTransform.rect;
        Vector2 uv = (localPos - rect.position) / rect.size;

        // RawImage経由でWebCamTextureのサイズを調べ...
        WebCamTexture webCamTexture = this.GetComponent<RawImage>().texture as WebCamTexture;
        Vector2Int webCamTexSize = new Vector2Int(webCamTexture.width, webCamTexture.height);

        // UV座標をピクセル単位の位置に換算し...
        Vector2 texPos = uv * webCamTexSize;
        Vector2Int texPosInt = new Vector2Int(
            Mathf.Clamp((int)texPos.x, 0, webCamTexSize.x - 1),
            Mathf.Clamp((int)texPos.y, 0, webCamTexSize.y - 1));

        // WebCamTextureから色を取得する
        color = webCamTexture.GetPixel(texPosInt.x, texPosInt.y);
        Debug.Log(color);
    }
}

とはいえ、OnClickをRawImage上のクリックイベントを引き金に実行しているのでしたらどちらの方式でも大差ないかもしれませんね。

Comments

[hokusou7500]

詳しい回答をいただきありがとうございます。教えていただいたコードを用いてやってみたところうまくいきました！！フォローさせていただきましたので、今後またお世話になることがあるかもしれませんがよろしくお願い致します。