Unity 数値データからカラーマップの描画について（特にシェーダーについて知りたい）

Question

前提・実現したいこと

テキストファイルにある数値データを読み込んで、数値ごとに対応する色となるようなカラーマップ（下図のような）を作製したいです。数値データを読み込むことはできており、目標までかなり近いところまで来ているとは思うのですが、シェーダーがよくわからず苦戦しています。

↑右上から順番に数値が大きくなっているイメージ

試したこと

こちらを参考にしてテキストファイルにある数値を読み込んでそれに対応する描画を行っています。
下図がその結果です。

これを行った手順を以下に示します。
まず、Quadオブジェクトを生成して以下のC#スクリプトをアタッチします。

using UnityEngine;
using System.Collections;
using System.Collections.Generic;
using System.IO;
using UnityEngine.Networking;

public class Heatmap : MonoBehaviour
{
    public Vector4[] positions;
    public Vector4[] properties;
    public string boomin;
    public List<float> inputDataList = new List<float>();
    public Material material;
    private string result;
    private float timeleft;
    int count = 100;
    int max_position = 3;
    void Update()
    {
        positions = new Vector4[count];
        properties = new Vector4[count];
        timeleft -= Time.deltaTime;
        if (timeleft <= 0.0)
        {
            timeleft = 10.0f;
            StartCoroutine(textLoad());
            UpdateTexture();
        }
    }

    IEnumerator textLoad()
    {
        string filepath = Application.streamingAssetsPath + "/test.txt";
        if (filepath.Contains("://") || filepath.Contains(":///"))
        {
            WWW www = new WWW(filepath);
            yield return www;
            var result = www.text;
            Debug.Log("WWW" + result);
            StringReader sr = new StringReader(result);
            //var result = File.OpenText(filepath);
            while ((boomin = sr.ReadLine()) != null)
            {
                inputDataList.Add(float.Parse(boomin));
            }
        }
        else
        {
            var result = File.OpenText(filepath);
            while ((boomin = result.ReadLine()) != null)
            {
                inputDataList.Add(float.Parse(boomin));
            }
            Debug.Log("WWW" + result);
        }
    }

    private void UpdateTexture()
    {
        for (int j = 0; j < max_position; j++)
        {
            for (int i = 0; i < max_position; i++)
            {
                int k = i + j * max_position;
                float lengthX = i * 2f / max_position - 1f;
                float lengthY = j * 2f / max_position - 1f;
                
                //positions 位置(x,y,z)
                positions[k] = new Vector4(lengthX, lengthY, 0, 0);
                //properties x=半径、y=強度
                properties[k] = new Vector4(0.15f, inputDataList[k], 0, 0);
            }
        }
        //Points_Lengthの整数値を設定
        material.SetInt("_Points_Length", count);
        //ベクトル配列のPointsを設定
        material.SetVectorArray("_Points", positions);
        //ベクトル配列のPropertiesを設定
        material.SetVectorArray("_Properties", properties);
    }
}

次にマテリアルに以下のシェーダーを対応させます。
マテリアルのテクスチャには参照したいテクスチャを設定しています。
そのマテリアルをQuadにアタッチします。

Shader "Hidden/Heatmap" 
{
	Properties
	{
		_HeatTex("Texture", 2D) = "white" {}//テクスチャを定義する型
	}
	SubShader
	{
		//描画タイプの設定Queue(レンダリング順)Transparent(透明)
		Tags{ "Queue" = "Transparent" }
		Blend SrcAlpha OneMinusSrcAlpha // Alpha blend

		Pass
		{
			CGPROGRAM
			//V/F Shaderの記述（ライトの影響を受けない）
			#pragma vertex vert
			#pragma fragment frag
			
			//モデルの頂点座標を参照
			struct vertInput 
			{
				float4 pos : POSITION;
			};
			//vertexからfragmentへ変換するのに必要な情報
			struct vertOutput 
			{
				float4 pos : POSITION;
				float2 worldPos : TEXCOORD0;
			};

			//vertexシェーダー（input→output位置の計算）
			vertOutput vert(vertInput input) 
			{
				vertOutput o;
				o.pos = UnityObjectToClipPos(input.pos);//頂点の座標位置を決定
				o.worldPos = mul(unity_ObjectToWorld, input.pos).xyz;
				return o;
			}

			uniform int _Points_Length = 0;
			uniform float4 _Points[100];		// (x, y, z) = position
			uniform float4 _Properties[100];	// x = radius(半径), y = intensity(強度)
			sampler2D _HeatTex;

			//fragmentシェーダー（計算されたエリアの塗りつぶし）
			half4 frag(vertOutput output) : COLOR
			{
				// すべてのpointsをループ
				half h = 0;
				for (int i = 0; i < _Points_Length; i++)
				{
					// 各pointsの貢献度を算出
					half di = distance(output.worldPos, _Points[i].xyz);
					half ri = _Properties[i].x;
					half hi = 1 - saturate(di / ri);
					h += hi * _Properties[i].y;
				}
				// 熱量に応じて（0～1）に変換
				h = saturate(h);
				half4 color = tex2D(_HeatTex, float2(h, 0.5));
				return color;
			}
			ENDCG
		}
	}
	Fallback "Diffuse"
}

そして、Assets配下にStreamingAssetsを作成してその中に数値が入ったテキストファイルを入れています。
テキストファイルの中身は以下のようになっています。

0.1
0.2
0.3
0.4
0.5
0.6
0.7
0.8
0.9

###発生している問題
記載したC#スクリプトとシェーダーは参考にした記事のものをいじって使用しており、シェーダーに関してはどう直せばいいかわからない状況です。特にシェーダー内の「_Points_Length」という変数は「_Points_Length = 0」としているのにfor文の最大値として使用されており、ループしないのでは？という疑問があります。
シェーダーはデバックができないので、こういう変数でも詰まってしまっているのでどなたかご教授いただきたいです。
よろしくお願いします。

Answer 1

uniform int _Points_Length = 0;については、おそらくお気になさる必要はないんじゃないかと思います。
恥ずかしながら私はああいったユニフォーム変数はマテリアルやスクリプトから設定してやることが前提だと思い込んでおり、シェーダーコード上で何らかの値で初期化する...というのはやったことがありませんでした。そこで調べてみたものの、いまいち明確な情報が得られなかったのですが「Initial values for variables in CG shader not being set - Unity Forum」の意見を見ますに、シェーダーコード上の初期化時の値は無視されるんじゃないかと思います。コンパイル結果を見てみても、初期化時の値はコンパイル結果の中には登場しないようでした。
ご提示の「Arrays & shaders: heatmaps in Unity - Alan Zucconi」だとStep 1の部分では_Points_Lengthの初期化を行っていませんが、Step 2のシェーダーコード全容では唐突に初期化を行っており、これについて解説はないように見えます。なぜこのような形になっているのかは、すみませんが著者の方にたずねてみないと分かりませんね...

本題のヒートマップですが、元のコードではワールド座標をもとに影響度を計算しているところを、代わりにUV座標を使うようにしてみてはいかがでしょうか。
まず、シェーダーコードは下記のように変更しました。

Shader "Hidden/Heatmap" 
{
	Properties
	{
		_HeatTex("Texture", 2D) = "white" {}//テクスチャを定義する型
	}
	SubShader
	{
		//描画タイプの設定Queue(レンダリング順)Transparent(透明)
		Tags{ "Queue" = "Transparent" }
		Blend SrcAlpha OneMinusSrcAlpha // Alpha blend

		Pass
		{
			CGPROGRAM
			//V/F Shaderの記述（ライトの影響を受けない）
			#pragma vertex vert
			#pragma fragment frag

			//モデルの頂点座標を参照
			struct vertInput 
			{
				float4 pos : POSITION;
				float2 uv : TEXCOORD0; // 頂点単位の入力情報にUV0を追加する
			};
			//vertexからfragmentへ変換するのに必要な情報
			struct vertOutput 
			{
				float4 pos : SV_POSITION; // 現行のUnityのしきたりにならい、セマンティクスを「POSITION」から「SV_POSITION」に変更
				float2 uv : TEXCOORD0; // 名前が「worldPos」だと、後述の変更内容にそぐわないのでリネームする
			};

			//vertexシェーダー（input→output位置の計算）
			vertOutput vert(vertInput input) 
			{
				vertOutput o;
				o.pos = UnityObjectToClipPos(input.pos);//頂点の座標位置を決定
				o.uv = input.uv; // UV0は特に加工する必要はないので、そのままfragに伝達する
				return o;
			}

			uniform int _Points_Length;
			uniform float4 _Points[100]; // (x, y) = position, z = radius(半径), w = intensity(強度)
			sampler2D _HeatTex;

			//fragmentシェーダー（計算されたエリアの塗りつぶし）
			half4 frag(vertOutput output) : SV_Target // 現行のUnityのしきたりにならい、セマンティクスを「COLOR」から「SV_Target」に変更
			{
				// すべてのpointsをループ
				half h = 0;
				for (int i = 0; i < _Points_Length; i++)
				{
					// 各pointsの貢献度を算出
					// 配列を_Pointsだけに節約したのでこちらも修正を加えたが、計算ロジックは変更なし
					half di = distance(output.uv, _Points[i].xy);
					half ri = _Points[i].z;
					half hi = 1 - saturate(di / ri);
					h += hi * _Points[i].w;
				}
				// 熱量に応じて（0～1）に変換
				h = saturate(h);
				half4 color = tex2D(_HeatTex, float2(h, 0.5));
				return color;
			}
			ENDCG
		}
	}
	Fallback "Diffuse"
}

そして、スクリプト側は下記のようにしました。

using UnityEngine;
using System.Collections;
using System.Collections.Generic;
using System.IO;
using UnityEngine.Networking;

public class Heatmap : MonoBehaviour
{
	const int max_position = 3;
	public string boomin;
	private Vector4[] positions = new Vector4[max_position * max_position];
	public List<float> inputDataList = new List<float>();
	public Material material;
	public float radius = 0.15f;
	private float timeleft;

	void Update()
	{
		timeleft -= Time.deltaTime;
		if (timeleft <= 0.0)
		{
			timeleft = 10.0f;
			StartCoroutine(textLoad());
		}
	}

	IEnumerator textLoad()
	{
		// 古いデータは削除することにした
		inputDataList.Clear();

		string filepath = Application.streamingAssetsPath + "/test.txt";
		if (filepath.Contains("://") || filepath.Contains(":///"))
		{
			// WWWは古い機能なのでUnityWebRequestを使え...と警告が出るため改修
			UnityWebRequest request = UnityWebRequest.Get(filepath);
			yield return request.SendWebRequest();
			if (request.result != UnityWebRequest.Result.Success)
			{
				Debug.Log(request.error);
				yield break;
			}
			string result = request.downloadHandler.text;
			Debug.Log("WWW" + result);
			StringReader sr = new StringReader(result);
			//var result = File.OpenText(filepath);
			while ((boomin = sr.ReadLine()) != null)
			{
				inputDataList.Add(float.Parse(boomin));
			}
		}
		else
		{
			StreamReader result = File.OpenText(filepath);
			while ((boomin = result.ReadLine()) != null)
			{
				inputDataList.Add(float.Parse(boomin));
			}
			Debug.Log("WWW" + result);
		}

		// inputDataListのロードが終わってからマテリアルデータを更新したいので
		// UpdateTextureをコルーチンの末尾に引っ越し
		UpdateTexture();
	}

	private void UpdateTexture()
	{
		for (int j = 0; j < max_position; j++)
		{
			for (int i = 0; i < max_position; i++)
			{
				// UV空間上で右上起点に点を並べることを前提に改修
				int k = i + j * max_position;
				if (k >= inputDataList.Count)
				{
					break;
				}
				float lengthX = 1.0f - (i + 0.5f) / max_position;
				float lengthY = 1.0f - (j + 0.5f) / max_position;
				
				//positions 位置(x,y)、z=半径、w=強度
				// 調整を容易にするため、半径は固定値0.15fの代わりにpublicフィールドとする
				positions[k] = new Vector4(lengthX, lengthY, radius, inputDataList[k]);
			}
		}
		//Points_Lengthの整数値を設定
		material.SetInt("_Points_Length", Mathf.Min(inputDataList.Count, max_position * max_position));
		//ベクトル配列のPointsを設定
		material.SetVectorArray("_Points", positions);
	}
}

グラデーション画像として下図のようなものを用いたところ...

半径がデフォルトの0.15だと...

0.3だと...

0.45だと...

となりました。
また、ご提示いただいたイメージ図から勝手に想像しますと、方式をちょっと変更してしまってもいいんじゃないかと思います。
まずスクリプトは下記のようにして...

using UnityEngine;
using System.Collections;
using System.Collections.Generic;
using System.IO;
using UnityEngine.Networking;

public class Heatmap2 : MonoBehaviour
{
	public string boomin;
	public List<float> inputDataList = new List<float>();
	public Material material;

	Texture2D heatmap;
	float[] heatmapData;
	float timeleft;

	void Update()
	{
		timeleft -= Time.deltaTime;
		if (timeleft <= 0.0)
		{
			timeleft = 10.0f;
			StartCoroutine(textLoad());
		}
	}

	// データのロードは変更なし
	IEnumerator textLoad()
	{
		inputDataList.Clear();

		string filepath = Application.streamingAssetsPath + "/test.txt";
		if (filepath.Contains("://") || filepath.Contains(":///"))
		{
			UnityWebRequest request = UnityWebRequest.Get(filepath);
			yield return request.SendWebRequest();
			if (request.result != UnityWebRequest.Result.Success)
			{
				Debug.Log(request.error);
				yield break;
			}
			string result = request.downloadHandler.text;
			Debug.Log("WWW" + result);
			StringReader sr = new StringReader(result);
			while ((boomin = sr.ReadLine()) != null)
			{
				inputDataList.Add(float.Parse(boomin));
			}
		}
		else
		{
			StreamReader result = File.OpenText(filepath);
			while ((boomin = result.ReadLine()) != null)
			{
				inputDataList.Add(float.Parse(boomin));
			}
			Debug.Log("WWW" + result);
		}
		
		UpdateTexture();
	}

	// データをテクスチャとして供給するように変更
	void UpdateTexture()
	{
		int dataCount = inputDataList.Count;
		int textureSize = Mathf.CeilToInt(Mathf.Sqrt(dataCount));
		int dataCapacity = textureSize * textureSize;
		if ((heatmap == null) || (heatmap.width != textureSize))
		{
			Destroy(heatmap);
			heatmap = new Texture2D(textureSize, textureSize, TextureFormat.RFloat, true)
			{
				wrapMode = TextureWrapMode.Clamp
			};
			heatmapData = new float[dataCapacity];
			material.SetTexture("_Heatmap", heatmap);
		}
		for (int i = 0; i < dataCapacity; i++)
		{
			int j = dataCapacity - 1 - i;
			heatmapData[j] = inputDataList[Mathf.Min(i, dataCount - 1)];
		}
		heatmap.SetPixelData(heatmapData, 0);
		heatmap.Apply();
	}
}

シェーダーは下記のようにしたところ...

Shader "Hidden/Heatmap2" 
{
	Properties
	{
		[NoScaleOffset] _HeatTex("Texture", 2D) = "white" {}
	}
	SubShader
	{
		Tags{ "Queue" = "Transparent" }
		Blend SrcAlpha OneMinusSrcAlpha

		Pass
		{
			CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag

			struct vertInput 
			{
				float4 pos : POSITION;
				float2 uv : TEXCOORD0;
			};

			struct vertOutput 
			{
				float4 pos : SV_POSITION;
				float2 uv : TEXCOORD0;
			};

			vertOutput vert(vertInput input) 
			{
				vertOutput o;
				o.pos = UnityObjectToClipPos(input.pos);
				o.uv = input.uv;
				return o;
			}

			sampler2D _HeatTex;
			sampler2D _Heatmap;

			half4 frag(vertOutput output) : SV_Target
			{
				float h = saturate(tex2D(_Heatmap, output.uv).r);
				return tex2D(_HeatTex, float2(h, 0.5));
			}
			ENDCG
		}
	}
	Fallback "Diffuse"
}

下図のような見た目になりました。

字数節約のためコード中のコメントは簡素になっています。もし疑問点がありましたらお気軽にコメントください。

##範囲外を透明に抜く件について

まず、testファイル上のデータを下記のようにして、プラス方向とマイナス方向に範囲をはみ出すようにしました。

-0.25
-0.08333333333
0.08333333333
0.25
0.41666666666
0.58333333333
0.75
0.91666666666
1.08333333333

シェーダーは最初のHidden/Heatmapをベースに検討することにし、マテリアルのRadiusは0.45としました。

まず第1案としては、グラデーションテクスチャの両端を透明にしてしまうのはどうでしょうか?
両端1ピクセルを透明にすれば...

0.0以下や1.0以上の部分が透明になるでしょうし...

両端の透明度をなだらかに変化させれば...

境界をなめらかにすることができるかと思います。

また第2案として、グラデーションテクスチャには変更を加えず、シェーダーコードの下記部分を...

h = saturate(h);
half4 color = tex2D(_HeatTex, float2(h, 0.5));
return color;

下記のように変更し、hが0.0を下回ったり1.0を上回ったフラグメントを破棄してしまう手もあるかと思います。

half clampedH = saturate(h);
clip(-abs(h - clampedH));
half4 color = tex2D(_HeatTex, float2(clampedH, 0.5));
return color;

こちらの場合だと、0.0ぴったりや1.0ぴったりは範囲内におさまっていると判定させることができるでしょう。

Comments

[masutake0]

返信遅くなってしまい申し訳ございません。
的確な回答ありがとうございます。
私のやりたいことはまさにBongoさんが回答してくださった通りで、
こちらでも確認することができました。
スクリプトではファイル内の値を0-1の範囲でクランプするという形になっているかと思います。
できれば値が範囲外の場合は透明にしたいと思っているのですが、
指針だけでもご教授いただけないでしょうか。

[Bongo]

範囲外を透明にする案を検討してみました。
「範囲外」ということですと、後者の案のように1.0を超えたり0.0に満たない部分だけを抜いた方が望ましいでしょうかね?

[masutake0]

ご回答してくださり、ありがとうございます。
言葉足らずで申し訳ありません。
値が１を超えるか０に満たない場合に透明にするのが理想でした。
ただ、前者の場合でも問題はなく、参照するカラースケールの両端を透明にすればいいという発想がなかったため、大変助かりました。
とても丁寧に回答してくださり本当にありがとうございます。