unity マウスクリックした部分の色を抽出する

Question

unityで、マウスクリックした部分の画素の色を取得したい。
http://tsubakit1.hateblo.jp/entry/20131203/1386000440
など、いろいろ調べて参考にした結果、以下のように記述しました。
しかし、実行すると

ReadPixels was called to read pixels from system frame buffer, while not inside drawing frame.
UnityEngine.Texture2D:ReadPixels(Rect, Int32, Int32)
や
[d3d11] attempting to ReadPixels outside of RenderTexture bounds! Reading (77, 1877, 78, 1878) from (951, 563)
のエラーが出てしまいました。
また
ReadPixcels(Rect,distX,distY,: int, recalculateMipMaps: bool = true): void;
のdistX,distYの部分の意味が分かっていませんし、エラーを出しつつ得られたcolorの値はすべて同じでした。

エラーの意味とReadPixcelsの解説、正しいcolorの値が得られない理由を教えていただけないでしょうか。

using UnityEngine;

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

    void Start()
    {
        tex = new Texture2D(Screen.width, Screen.height, TextureFormat.RGBA32, false);
    }

    void Update()
    {
        if (Input.GetMouseButtonDown(0))
        {
            Vector2 pos = Input.mousePosition;
            Vector2 objPos = Camera.main.ScreenToWorldPoint(pos);
            tex.ReadPixels(new Rect(objPos.x, objPos.y, 1, 1), 0, 0);
            color = tex.GetPixel(0, 0);
            Debug.Log(color.ToString());
        }
    }
}

Answer 1

ReadPixelsの引数のsourceは読み取り元（今回の場合は画面）のピクセル単位での読み取り範囲、destXとdestYは書き込み先（今回の場合はtex）のピクセル単位の位置を表します。おそらくすでにリファレンスをご覧になったかと思いますが、パラメーター説明の「読み込み元のビューの長方形領域」はまだマシな気がしますが「テクスチャ内の読みこむピクセルの水平位置／垂直位置」という表現は何だか意味不明ですね...
英語版だと「Horizontal pixel position in the texture to place the pixels that are read」...つまり「読み込まれたピクセルを置く（書き込む）、テクスチャ内の水平ピクセル位置」と説明されており、こっちのほうがしっくりくるように思います。

エラー自体は取得範囲が不適切であることを言っているようですが、ご質問者さんのコードでテクスチャのサイズやposの座標系をテラシュールブログさんのものと変えているのは、それを修正しようと試みてのことでしょうか?
今回検討するべきなのはReadPixelsを行うタイミングのように思います。Updateだと描画が終わっておらず早すぎるでしょうから、テラシュールブログさんと同様にOnPostRenderを使ってはいかがでしょう。
ただし、試してみたかぎりではOnPostRender内だとGetMouseButtonDownを正しく取れないっぽいので、Updateも併用する形がいいんじゃないかと思います。

using UnityEngine;

public class GetColor : MonoBehaviour
{
	public Color32 color;
	private GetColorHelper helper;

	void Start()
	{
		// GetColorスクリプト自体をカメラにアタッチしてもいいなら、GetColorにUpdateと
		// OnPostRenderを両方実装して連携させることができるかと思いますが、GetColorは
		// 別のオブジェクトにアタッチしたい...といった事情がある場合は、GetColor本体と
		// カメラ用コンポーネントの2つに担当を分けて連携させることになるかと思います
		// 今回の例では補助コンポーネントとしてGetColorHelperを用意し、これをメインカメラに
		// アタッチしてOnPostRender部分を担当させることにしました
		helper = Camera.main.GetComponent<GetColorHelper>();
		if (helper == null)
		{
			helper = Camera.main.gameObject.AddComponent<GetColorHelper>();
		}
	}

	void Update()
	{
		if (Input.GetMouseButtonDown(0))
		{
			color = helper.Tex.GetPixel(0, 0);
			Debug.Log(color.ToString());
		}
	}

	[RequireComponent(typeof(Camera))]
	private class GetColorHelper : MonoBehaviour
	{
		public Texture2D Tex { get; private set; }

		void Awake()
		{
			Tex = new Texture2D(1, 1, TextureFormat.RGBA32, false);
		}

		void OnPostRender()
		{
			Vector2 pos = Input.mousePosition; 
			
			// 座標系がOpenGL方式かDirectX方式かによって上下が変わるのを考慮する
			if (SystemInfo.graphicsUVStartsAtTop)
			{
				pos.y = Screen.height - 1 - pos.y;
			}

			// マウスポインタが画面外にあるとReadPixelsに失敗するため、座標を範囲内におさめる
			float x = Mathf.Clamp(pos.x, 0.0f, Screen.width - 1);
			float y = Mathf.Clamp(pos.y, 0.0f, Screen.height - 1);
			
			Tex.ReadPixels(new Rect(x, y, 1, 1), 0, 0);
		}
	}
}

追記
ご指摘ありがとうございます。当初のコードはWindows版でしか試していなかったのですが、確かにMac版でMetalを使用している場合は座標の上下が逆転してしまいますね...
その場しのぎ的ですみませんが、下記のようにMetalの場合に座標の上下反転を行わせないようにしてはどうでしょうか。
もし他にうまくいかない条件が見つかりましたらコメントください（とはいえMacとWindows以外にすぐ試せる環境を持っておらず、お力になれないかもしれませんが...）。

using UnityEngine;
using UnityEngine.Rendering;

namespace GetPixelColor
{
	public class GetColor : MonoBehaviour
	{
		public Color32 color;
		private GetColorHelper helper;

		void Start()
		{
			helper = Camera.main.GetComponent<GetColorHelper>();
			if (helper == null)
			{
				helper = Camera.main.gameObject.AddComponent<GetColorHelper>();
			}
		}

		void Update()
		{
			if (Input.GetMouseButtonDown(0))
			{
				color = helper.Tex.GetPixel(0, 0);
				Debug.Log(color.ToString());
			}
		}

		[RequireComponent(typeof(Camera))]
		private class GetColorHelper : MonoBehaviour
		{
			public Texture2D Tex { get; private set; }

			void Awake()
			{
				Tex = new Texture2D(1, 1, TextureFormat.RGBA32, false);
			}

			void OnPostRender()
			{
				Vector2 pos = Input.mousePosition; 
				
				// 座標系がOpenGL方式かDirectX方式かによって上下が変わるのを考慮する
				// Metalの場合、例外的に反転は行わないようにした
				if (SystemInfo.graphicsUVStartsAtTop && SystemInfo.graphicsDeviceType != GraphicsDeviceType.Metal)
				{
					pos.y = Screen.height - 1 - pos.y;
				}

				float x = Mathf.Clamp(pos.x, 0.0f, Screen.width - 1);
				float y = Mathf.Clamp(pos.y, 0.0f, Screen.height - 1);
				
				Tex.ReadPixels(new Rect(x, y, 1, 1), 0, 0);
			}
		}
	}
}

また、Planeに貼り付けた色が取れないという現象は私の試した限りでは再現させられなかったのですが（Planeであっても他の3Dオブジェクトと違いはないはずなので、Cubeで成功したのならPlaneでもいける気がするのですが...）、ImageなどUIオブジェクトの色を取れないという現象は確認できました。
おそらくCanvasの「Render Mode」が「Screen Space - Overlay」になっているんじゃないでしょうか?どうやらこのモードの場合、UIの描画はOnPostRenderよりも後のタイミングになるため失敗したものと思われます。もしRender Modeを変えてもかまわないのなら、これを「Screen Space - Camera」や「World Space」 にすればOnPostRenderより先にUI描画が完了し、色を取ってくることができるでしょう。
あるいは、下記のようにWaitForEndOfFrameのタイミングならScreen Space - Overlayでもいけそうな感じでした。どうしてもScreen Space - Overlayでないと困るようでしたらこちらも試してみてもいいかと思います。

using System.Collections;
using UnityEngine;

namespace GetPixelColor
{
	public class GetColor : MonoBehaviour
	{
		public Color32 color;
		private GetColorHelper helper;

		void Start()
		{
			helper = Camera.main.GetComponent<GetColorHelper>();
			if (helper == null)
			{
				helper = Camera.main.gameObject.AddComponent<GetColorHelper>();
			}
		}

		void Update()
		{
			if (Input.GetMouseButtonDown(0))
			{
				color = helper.Tex.GetPixel(0, 0);
				Debug.Log(color.ToString());
			}
		}

		[RequireComponent(typeof(Camera))]
		private class GetColorHelper : MonoBehaviour
		{
			public Texture2D Tex { get; private set; }

			void Awake()
			{
				Tex = new Texture2D(1, 1, TextureFormat.RGBA32, false);
			}

			IEnumerator Start()
			{
				var waitForEndOfFrame = new WaitForEndOfFrame();

				while (true)
				{
					yield return waitForEndOfFrame;

					Vector2 pos = Input.mousePosition;

					float x = Mathf.Clamp(pos.x, 0.0f, Screen.width - 1);
					float y = Mathf.Clamp(pos.y, 0.0f, Screen.height - 1);

					Tex.ReadPixels(new Rect(x, y, 1, 1), 0, 0);
				}
			}
		}
	}
}

追記
まず、下記のようなメインテクスチャ・メインカラーで塗るだけのシンプルなUnlitシェーダーを用意しました。

Shader "Unlit/UnlitAlbedo"
{
	Properties
	{
		_MainTex ("Texture", 2D) = "white" {}
		_Color ("Color", Color) = (1, 1, 1, 1)
	}
	SubShader
	{
		Tags { "RenderType"="Opaque" }
		LOD 100

		Pass
		{
			CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag

			#include "UnityCG.cginc"

			struct appdata
			{
				float4 vertex : POSITION;
				float2 uv : TEXCOORD0;
			};

			struct v2f
			{
				float2 uv : TEXCOORD0;
				float4 vertex : SV_POSITION;
			};

			sampler2D _MainTex;
			float4 _MainTex_ST;
			fixed4 _Color;

			v2f vert(appdata v)
			{
				v2f o;
				o.vertex = UnityObjectToClipPos(v.vertex);
				o.uv = TRANSFORM_TEX(v.uv, _MainTex);
				return o;
			}

			fixed4 frag(v2f i) : SV_Target
			{
				return tex2D(_MainTex, i.uv) * _Color;
			}
			ENDCG
		}
	}
}

通常のレンダリングの場合下図のように見えるシーンを...

この代替シェーダーでシーンをレンダリングした場合、下図のように環境の映り込みや陰影がない単純な色塗り状態の映像が得られます。実際にはこの映像を画面上に表示するわけではなく、RenderTexture上に描画して色取り元とすることになりますね。

また、この追加レンダリングはわざわざ画面全体について行う必要はなく、色を取りたい地点の1ピクセル分だけの大きさがあれば十分なはずです。そこで、このレンダリングの時だけ一時的に投影行列に手を加えて注目点だけを拡大し、それを1×1サイズのRenderTextureに描画することにしました。描画面積が大幅に節約でき、レンダリングコストを低減できると思われます。

色取りスクリプトは下記のようにしてみました。補助スクリプトは不要になったため廃止しています。

using System.Collections;
using UnityEngine;

public class AlbedoColorPicker : MonoBehaviour
{
	public Color32 color;
	public Renderer targetRenderer;

	private Camera mainCamera;
	private Shader alternativeShader;
	private Texture2D pixelTexture;

	private void Start()
	{
		this.mainCamera = Camera.main;
		this.alternativeShader = Shader.Find("Unlit/UnlitAlbedo");
		this.pixelTexture = new Texture2D(1, 1, TextureFormat.RGBA32, false);
	}

	private void Update()
	{
		if (Input.GetMouseButtonDown(0))
		{
			// マウスポインタの位置を狙う変換行列を作り...
			var screenScale = new Vector2(Screen.width, Screen.height);
			var pixelPosition = ((Vector2)Input.mousePosition * 2.0f) - screenScale;
			var pixelMatrix = Matrix4x4.TRS(
				-pixelPosition,
				Quaternion.identity,
				new Vector3(screenScale.x, screenScale.y, 1.0f));

			// projectionMatrixの後段に追加の変換を加え、alternativeShaderを使ってレンダリングする
			var targetTexture = this.mainCamera.targetTexture;
			var projectionMatrix = this.mainCamera.projectionMatrix;
			var renderTexture = RenderTexture.GetTemporary(1, 1);
			this.mainCamera.targetTexture = renderTexture;
			this.mainCamera.projectionMatrix = pixelMatrix * projectionMatrix;
			this.mainCamera.RenderWithShader(this.alternativeShader, null);
			this.mainCamera.targetTexture = targetTexture;
			this.mainCamera.ResetProjectionMatrix();

			// renderTextureの内容をpixelTextureに読み取り、さらにpixelTextureから色を取り出す
			var activeTexture = RenderTexture.active;
			RenderTexture.active = renderTexture;
			this.pixelTexture.ReadPixels(new Rect(0, 0, 1, 1), 0, 0);
			RenderTexture.active = activeTexture;
			RenderTexture.ReleaseTemporary(renderTexture);
			this.color = this.pixelTexture.GetPixel(0, 0);

			// 色設定対象がセットされていれば、それに取得された色をセットする
			if (this.targetRenderer != null)
			{
				this.targetRenderer.material.color = this.color;
			}
		}
	}
}

動かしてみると下図のようになりました。取った色に陰影付けの影響が及んでいないことをアピールするため、色の適用先はPlaneではなく画面右側にあるSphereにしています。

Comments

[pigma689]

windowsでうまく動いていたのですが、macで動かすと正しいcolorの値が得られませんでした。UIのimageやPlaneに貼ったテクスチャの色をうまく読み取ることができていないようです。試しに3DオブジェクトのCubeを置いて色を変えてみたところ、こちらは正常に色を読み込めています。
画像の色が取れないようです。これはなぜなのでしょうか
改善策等教えていただけないでしょうか

[pigma689]

なぜか座標がズレているような感じで画像を表示されていない部分をクリックすると画像の色要素が取れてしまったりしています

[Bongo]

対症療法的ですが修正を加えてみました。これならどうでしょうか?

[pigma689]

正しく色を取れるようになりました！ありがとうございます。
Planeに取得した色を反映させるようにしたのですが、そのPlaneをクリックするとcolorの値が変わってしまいます。
これはなぜなのでしょうか。

[Bongo]

なるほど...すぐには原因が思いつきませんが、のちほど（今はUnityが手元にないのでしばらく後になってしまいますがご容赦ください）再現させられるか試してみようと思います。念のため、その「Planeに取得した色を反映させる」という部分のコードもご提示いただけるでしょうか?もしかすると原因特定のヒントになるかもしれません。

[pigma689]

Pleneに当たっているライトの影響で取得した色より白くなってしまい、さらにその部分をクリックすることでどんどん白に近づいてしまったようです。
ライトの影響を受けず、かつ色をスクリプトから動的に変更する手段はあるのでしょうか...

[Bongo]

なるほど、そういう意味でしたか。ご希望としては「ゲーム画面上のPlaneの見た目は通常通り照明効果のかかった（つやつやの材質なら光沢が出る）状態にしたい、しかしクリック時に取得される色は純粋なアルベド色そのままであってほしい」といった感じでしょうか?だとすると描画過程に一工夫加える必要がありそうですね...
案としては「通常のレンダリングとは別に、一時的にシーン上のオブジェクトのマテリアルをUnlitシェーダーに差し替えてRenderTexture上に描画し、色はそこから取ってくる」とか「カメラをDeferredモードにして、色は拡散色バッファーから取ってくる」とかでしょうかね。
何かいい手が思いつきましたら追記いたします。

[pigma689]

Unlitシェーダーを使うとスクリプトから色を変えられなくなってしまいますよね...
照明効果自体もう必要ないと考えていて、かといってライトを無効にするだけでは暗くなってしまうし、どうしたらいいのでしょうか

[Bongo]

「一時的にUnlitシェーダーに差し替え」の方針で試してみたので追記しましたが、あんな感じではどうでしょうか?
ただし、シェーダー差し替え描画にRenderWithShaderを使っている...つまり特定のカメラ上でのレンダリングに基づいているため、先のコメントで申し上げた「Screen Space - OverlayでレンダリングしているUIの色は取れない」という弱点は残ってしまいましたが...

[Bongo]

「照明効果自体もう必要ないと考えていて」とのお返事を見落としておりました。確かにUnityが用意しているUnlitシェーダーには「単色塗り」と「テクスチャ塗り」はあっても、二つを併せ持つシェーダーはないようですね。
でしたら、追記の中で申し上げたUnlitAlbedoをそのままマテリアルのシェーダーとして使用してみてはいかがでしょうか?これは両者を複合させたような形になっていますので、テクスチャを貼った上でさらにcolorプロパティから色をセットできるはずです。最終的にレンダリングされる色は、提示しましたコードの通りテクスチャ色と単色を乗算合成した色になります。

[pigma689]

イメージした通りにできました。
丁寧に教えてくださり、本当にありがとうございました!

[Bongo]

すみません、別の方のご質問（ https://teratail.com/questions/217389 ）にてコードを再利用するために見直していたところ、今さらながらピクセル拡大行列の拡大量が足りておらず、2×2ピクセル相当までしか拡大できていなかったことに気付きました。
まさしく1ピクセル単位での色取りが求められないのであればさほど問題にはならないとは思うのですが、念のため修正しました。