unity Texture2Dをリサイズしたいのですが,ピントが少しボケてしまいます。

Question

前提・実現したいこと

Texture2Dをリサイズしたいのですが解像度? ピントが少しボケています。
良い方法があれば教えて頂けませんか。
scaner

resize (pcにて)

resize (スマホにて)

元の画像 (640,1136)

シェーダーのリサイズ

canvas/image


canvas

該当のソースコード

   private static Texture2D GetResized(Texture2D texture, int width, int height)
    {
        // リサイズ後のサイズを持つRenderTextureを作成して書き込む
        var rt = RenderTexture.GetTemporary(width, height);
        Graphics.Blit(texture, rt);

        // リサイズ後のサイズを持つTexture2Dを作成してRenderTextureから書き込む
        var preRT = RenderTexture.active;
        RenderTexture.active = rt;
        var ret = new Texture2D(width, height);
        ret.ReadPixels(new Rect(0, 0, width, height), 0, 0);
        ret.Apply();
        RenderTexture.active = preRT;

        RenderTexture.ReleaseTemporary(rt);
        return ret;
    }

Comments

[sakura_hana]

試しに元の画像と同じ大きさの値を渡すとどうなるか確認してみてください。
但し拡大時は当然ボケますし、縮小時も適切な補完がされるのか怪しいので多少ボケるのは仕方無い気もします。

[29507-01]

縦,横サイズが違うPNGを(200,200)にリサイズするのは無理がありますか?
現在 そのまま書き出した画像と200,200にリサイズした画像を比べた場合
200,200にリサイズした画像はボケている形です。

[sakura_hana]

元の縦横サイズの明示や、ボケている画像を貼ってもらうと分かりやすいですが、
とりあえず前述の通り拡大するならボケますし、縮小の場合も縦か横が引き伸ばされるor潰されるのでイマイチな見た目になる気がします。

[edom18]

そもそもの話として、ボケることの解消が本題ではなく、実際にやりたいことをセットで説明したほうがよりよい回答が得られると思います。（場合によってはアプローチ自体も間違っていることもありますし）

[29507-01]

スマホで撮った写真を200,200のサイズにリサイズしたい。

[29507-01]

画像を添付しましたがこの程度だと我慢する?

[sakura_hana]

個人的にはscanerの方が荒く見えますしresizeのボケ方もこれぐらいならいいのでは？と思いますが、許容値は個人差があります。
「この程度ならよしとする」か「別の方法を調べる」か「200,200以外の値（例えば640,640とか）に出来ないか調べ直す」かはご自分で決めてください。
（別の方法案として「640,640の画像を200,200の領域に表示」とかも考えられますがシステム上それでいいのかと、結構縮小率が高いので綺麗に見えるか定かでないです）

[29507-01]

有難うございます。
参考にします。

Answer 1

確かにちょっとぼやけているように感じますね。
元の画像が

のとき（サイズ640×640）、ご質問者さんの方法で200×200に縮小すると

となるのに対して、Photoshopの「バイリニア法」だと

「バイキュービック法 - シャープ (縮小)」だと

といった結果になり、ぼやけの程度が小さく抑えられています。
毎フレーム行う処理でないのなら多少処理コストがかかってもかまわないでしょうから、自前でバイキュービック法のような縮小方法を実装するとか、あるいはアンシャープマスク処理を加えてやるのがいいかもしれません。

あるいは単純に、縮小前のテクスチャ中において縮小後の1ピクセルが占める領域を何カ所もサンプリングするというのはどうでしょうか。
たとえば下記のようなシェーダーを用意しておいて...

// 字数節約のため削除しました...削除前のコードは編集履歴をご参照ください

ご質問者さんのスクリプトを下記のように改変して実行したところ...

using System.IO;
using UnityEditor;
using UnityEngine;

public static class TextureResizer
{
	private static Material overSamplingMaterial;

	[MenuItem("Utility/Resize Selected Texture to 200 x 200")]
	public static void ResizeTextureTo200x200()
	{
		const int newWidth = 200;
		const int newHeight = 200;
		const int loopCount = 16;
		var targetTexture = Selection.activeObject as Texture2D;
		if (targetTexture == null)
		{
			return;
		}

		var targetPath = AssetDatabase.GetAssetPath(targetTexture);
		if (string.IsNullOrEmpty(targetPath))
		{
			return;
		}

		var targetDirectory = Path.GetDirectoryName(targetPath);
		var targetName = Path.GetFileNameWithoutExtension(targetPath);
		var targetExtension = Path.GetExtension(targetPath);
		var newName = $"{targetName}({newWidth}x{newHeight})";
		var newPath = $"{targetDirectory}{Path.DirectorySeparatorChar}{newName}{targetExtension}";
		var newTexture = GetResized(targetTexture, newWidth, newHeight, loopCount);
		File.WriteAllBytes(newPath, newTexture.EncodeToPNG());
		AssetDatabase.ImportAsset(newPath);
	}

	private static Texture2D GetResized(Texture2D texture, int width, int height, int loopCount)
	{
		// オーバーサンプリング用マテリアルを作成する
		if (overSamplingMaterial == null)
		{
			overSamplingMaterial = new Material(Shader.Find("Hidden/OverSampling"));
		}

		// まず元と同じサイズのRenderTextureに書き込む
		var sourceRT = RenderTexture.GetTemporary(texture.width, texture.height);
		Graphics.Blit(texture, sourceRT);

		// filterModeをPointにしておき、サンプリング時に注目点以外の色が混じらないようにしておく
		sourceRT.filterMode = FilterMode.Point;

		// リサイズ後のサイズを持つRenderTextureを作成して、オーバーサンプリングマテリアルを使って書き込む
		var rt = RenderTexture.GetTemporary(width, height);
		overSamplingMaterial.SetInt("_LoopCount", Mathf.Max(loopCount, 1));
		Graphics.Blit(sourceRT, rt, overSamplingMaterial);

		// リサイズ後のサイズを持つTexture2Dを作成してRenderTextureから書き込む
		var preRT = RenderTexture.active;
		RenderTexture.active = rt;
		var ret = new Texture2D(width, height);
		ret.ReadPixels(new Rect(0, 0, width, height), 0, 0);
		ret.Apply();
		RenderTexture.active = preRT;
		RenderTexture.ReleaseTemporary(rt);
		RenderTexture.ReleaseTemporary(sourceRT);
		return ret;
	}
}

loopCountが1だと（これは実質的にニアレストネイバー法と同等のはずです）...

loopCountが4だと（1ピクセルにつき16点サンプリング）...

loopCountが16だと（1ピクセルにつき256点サンプリング）...

となりました。だいぶ精密さが向上したんじゃないかと思いますが、いかがでしょうか?

正方形トリミングについて

まずシェーダーコードは下記のように変更して、UV座標を操作することで画像切り出し範囲を調整できるようにしておきます。

Shader "Hidden/OverSampling"
{
	Properties
	{
		_MainTex ("Texture", 2D) = "white" {}
	}
	SubShader
	{
		Cull Off ZWrite Off ZTest Always

		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 _TilingAndOffset;
			int _LoopCount;

			v2f vert(appdata v)
			{
				v2f o;
				o.vertex = UnityObjectToClipPos(v.vertex);
				o.uv = (v.uv * _TilingAndOffset.xy) + _TilingAndOffset.zw;
				return o;
			}

			float4 frag (v2f i) : SV_Target
			{
				float2 texelSize = fwidth(i.uv);
				float2 deltaUV = texelSize / _LoopCount;
				float2 uv0 = i.uv + ((deltaUV - texelSize) * 0.5);
				float4 col = 0.0;
				for (int j = 0; j < _LoopCount; j++)
				{
					for (int i = 0; i < _LoopCount; i++)
					{
						col += tex2D(_MainTex, uv0 + (float2(i, j) * deltaUV));
					}
				}
				return col / (_LoopCount * _LoopCount);
			}
			ENDCG
		}
	}
}

そして制御用のスクリプトは下記のようにしました。
ご追記のスクリーンショットを拝見しますに、どうやらImageを使って縮小後のテクスチャを表示している様子ですね。表示用のスプライトはどのように用意していますでしょうか?私の場合はさしあたり縮小後のテクスチャを使ったスプライトを新規作成し、それをImageコンポーネントにセットしてやることにしました。
スクリプトはサイズ200×200のImageオブジェクトにアタッチして使うことを想定しており、Start内で元テクスチャをロード・縮小テクスチャを生成・スプライトを作成してImageにセット...の処理を行っています。

using UnityEngine;
using UnityEngine.UI;

[RequireComponent(typeof(Image))]
public class ResizedImageLoader : MonoBehaviour
{
	private static Material overSamplingMaterial;

	[SerializeField] private bool useActualSize;

	private void Start()
	{
		var texture2D = Resources.Load<Texture2D>("motogp");

		// 目標サイズは200x200決め打ちではなく、Imageのサイズを見て決めることにする
		var image = this.GetComponent<Image>();
		var rectTransform = this.transform as RectTransform;
		var sizeDelta = rectTransform.sizeDelta;
		var toWidth = Mathf.RoundToInt(sizeDelta.x);
		var toHeight = Mathf.RoundToInt(sizeDelta.y);

		// インスペクターの「Use Actual Size」がオンの場合
		// 目標サイズを最終的な表示サイズに合わせて調整する
		if (this.useActualSize)
		{
			var canvas = image.canvas;
			var canvasCamera = canvas.renderMode == RenderMode.ScreenSpaceOverlay ? null : canvas.worldCamera;
			var corners = new Vector3[4];
			rectTransform.GetWorldCorners(corners);
			var bottomLeft = RectTransformUtility.WorldToScreenPoint(canvasCamera, corners[0]);
			var topRight = RectTransformUtility.WorldToScreenPoint(canvasCamera, corners[2]);
			var actualSize = topRight - bottomLeft;
			toWidth = Mathf.RoundToInt(Mathf.Abs(actualSize.x));
			toHeight = Mathf.RoundToInt(Mathf.Abs(actualSize.y));
		}

		// 元のテクスチャから切り出すべき領域を求める
		// テクスチャの中心からなるべく大きな矩形を切り出したいので
		// まずテクスチャの高さに縦横比を掛けて希望切り出し幅を求める
		// テクスチャの幅が希望切り出し幅よりも小さい場合、切り出し幅は
		// テクスチャ幅とし、代わりに切り出し高さを切り詰める
		// 起点のズレは余白の大きさの半分ということになる
		var toAspect = (float)toWidth / toHeight;
		var width = texture2D.width;
		var height = texture2D.height;
		var expectedWidth = Mathf.RoundToInt(height * toAspect);
		var fromWidth = Mathf.Min(width, expectedWidth);
		var fromHeight = expectedWidth > width ? Mathf.RoundToInt(width / toAspect) : height;
		var offsetX = (width - fromWidth) / 2;
		var offsetY = (height - fromHeight) / 2;

		// 確認のため、リサイズ前とリサイズ後のサイズをコンソールに表示してみる
		Debug.LogFormat("({0}, {1}) -> [({2}, {3}), ({4}, {5})] -> ({6}, {7})",
			width, height,
			offsetX, offsetY, fromWidth, fromHeight,
			toWidth, toHeight);

		// 切り出された領域をリサイズして最終的なテクスチャとする
		// ちなみに、ご質問者さんが作成された方のGetResizedも残してありますので、
		// 引数を元テクスチャと目標サイズだけに省略するとそちらが使われます
		// そちらに切り替えてみると、トリミング処理の有無による違いやぼけ具合の
		// 比較ができるかと思います
		var resizedTexture = GetResized(texture2D, offsetX, offsetY, fromWidth, fromHeight, toWidth, toHeight);
		//var resizedTexture = GetResized(texture2D, 200, 200);

		// 最終的に表示される位置・サイズによっては、小数点以下のズレのため
		// ぼやけやImage外周部に反対側の辺の色が乗る現象が起こる可能性がある
		// そこで、それらを回避するようにテクスチャの設定を変更する
		resizedTexture.filterMode = FilterMode.Point;
		resizedTexture.wrapMode = TextureWrapMode.Clamp;

		// リサイズ後のテクスチャをもとにスプライトを作成し、Imageにセット
		var sprite = Sprite.Create(
			resizedTexture,
			new Rect(0, 0, resizedTexture.width, resizedTexture.height),
			new Vector2(0.5f, 0.5f));
		image.sprite = sprite;
	}

	// 元のテクスチャから(fromX, fromY)を起点とする幅fromWidth、高さfromHeightの領域を
	// 切り出し、それを幅toWidth、高さtoHeightにリサイズしたテクスチャを生成する
	private static Texture2D GetResized(
		Texture2D texture,
		int fromX, int fromY, int fromWidth, int fromHeight,
		int toWidth, int toHeight,
		int loopCount = 16,
		bool generateMipmaps = false)
	{
		if (overSamplingMaterial == null)
		{
			overSamplingMaterial = new Material(Shader.Find("Hidden/OverSampling"));
		}

		// まずは以前同様に元テクスチャをRenderTextureに写し取り、FilterModeをPointにしておく
		var preRT = RenderTexture.active;
		var sourceWidth = texture.width;
		var sourceHeight = texture.height;
		var sourceRT = RenderTexture.GetTemporary(sourceWidth, sourceHeight);
		Graphics.Blit(texture, sourceRT);
		sourceRT.filterMode = FilterMode.Point;

		// マテリアルの設定を行う
		// 元のテクスチャから起点(fromX, fromY)、サイズ(fromWidth, fromHeight)の部分を
		// 切り出すということは、UV座標のタイリング・オフセットは下記のようになる
		overSamplingMaterial.SetVector(
			"_TilingAndOffset",
			new Vector4(
				(float)fromWidth / sourceWidth,
				(float)fromHeight / sourceHeight,
				(float)fromX / sourceWidth,
				(float)fromY / sourceHeight));
		overSamplingMaterial.SetInt("_LoopCount", Mathf.Max(loopCount, 1));

		// あとは以前と同様にリサイズし、結果を返す
		var rt = RenderTexture.GetTemporary(toWidth, toHeight);
		Graphics.Blit(sourceRT, rt, overSamplingMaterial);
		RenderTexture.active = rt;
		var ret = new Texture2D(toWidth, toHeight, TextureFormat.ARGB32, generateMipmaps);
		ret.ReadPixels(new Rect(0, 0, toWidth, toHeight), 0, 0);
		ret.Apply();
		RenderTexture.active = preRT;
		RenderTexture.ReleaseTemporary(rt);
		RenderTexture.ReleaseTemporary(sourceRT);
		return ret;
	}

	// ご質問者さんの方法によるGetResized
	private static Texture2D GetResized(Texture2D texture, int width, int height)
	{
		var rt = RenderTexture.GetTemporary(width, height);
		Graphics.Blit(texture, rt);
		var preRT = RenderTexture.active;
		RenderTexture.active = rt;
		var ret = new Texture2D(width, height);
		ret.ReadPixels(new Rect(0, 0, width, height), 0, 0);
		ret.Apply();
		RenderTexture.active = preRT;
		RenderTexture.ReleaseTemporary(rt);
		return ret;
	}
}

当初の方法だと、縦長の画像が正方形に縮小されることで縦に潰れてしまっていたのが...

正方形に切り出す処理が加わることで、被写体が潰れないようになりました。

Comments

[29507-01]

遅くなり申し訳ありません。
var newName = $"{targetName}({newWidth}x{newHeight})";
var newPath = $"{targetDirectory}{Path.DirectorySeparatorChar}{newName}{targetExtension}";
この箇所がc#4では使用できませんと表示されます。
申し訳無いですが,修正方法を教えて頂けませんか?

[Bongo]

すみませんでした、昔のバージョンのUnityをお使いでしょうか?
では、

var newName = string.Format("{0}({1}x{2})", targetName, newWidth, newHeight);
var newPath = string.Format("{0}{1}{2}{3}", targetDirectory, Path.DirectorySeparatorChar, newName, targetExtension);

ならどうでしょうか。他の箇所はたぶん旧バージョンでも大丈夫だろうとは思うのですが、見落としているかもしれませんのでエラーがありましたらコメントいただければ修正してみます。

[29507-01]

初心者なもので申し訳ないのですが,エラーは無くなったのですが
内部関数として扱っていたので
texture2D = GetResized(texture2D, 200, 200);で呼んで処理していました。
外部のClassの呼び方がわかりません。
教えて頂けないでしょうか。

[Bongo]

説明が足りずすみません。あの「TextureResizer」は、回答文中に実験結果を画像として載せるために、縮小したTexture2DをPNGファイルとして出力させる目的で作ったものです（ちなみに、使い方としてはプロジェクトに「Editor」フォルダを作ってTextureResizerスクリプトを入れ、処理対象のテクスチャファイルを選択し、メニューに新しく現れた「Utility」→「Resize Selected Texture to 200 x 200」を実行する...という手順を想定しています）。

Texture2Dを作るだけでしたらGetResizedメソッドと「private static Material overSamplingMaterial;」があれば十分なようにしたつもりですので、それらを適当なスクリプト...たとえばご質問者さんが使っているスクリプトにコピー&ペーストして、あとはシェーダーコードだけあれば、従来と似たような形で「texture2D = GetResized(texture2D, 200, 200, 16);」といった風に使用できるかと思います。

なお念のため申し上げますと、今回の例ではシェーダーをShader.Findを使って探す方法をとっています。ですのでプレイモードで動かす上ではそのままでもいいですが、ビルドして動作させるには「Edit」→「Project Settings...」の「Graphics」→「Built-in Shader Settings」→「Always Included Shaders」に「Hidden/OverSampling」を追加してやる必要があるでしょう。

[29507-01]

すみません。最後の行を見ていませんでした。

[29507-01]

エレメントを一つ増やし,None(Shader)になったのですが
Hidden/OverSamplingの登録ができません。

[Bongo]

シェーダーが見つからないということでしょうか?
増やした欄の右端の◎ボタンで選択しようとしているのでしたら、その選択ウィンドウ中ではシェーダー名（「Hidden/OverSampling」）ではなくシェーダーファイル名（「OverSampling.shader」という名前で作成した場合は「OverSampling」）になるっぽいので、ウィンドウ上部の検索ボックスでその名前で探してみてはいかがでしょう。

[29507-01]

単純にHidden/OverSamplingというシェーダーをAssetsから作成し実行できたのですが
画像が崩れています。Assetsからシェーダーを作ったのですが作り方に問題があるのでしょうか? .jpgのリサイズにシェーダーを使う意味がわからないのですが

以下の方法でやってみました。
texture2D = Resources.Load<Texture2D>("motogp");
texture2D = GetResized(texture2D, 200, 200, 16);

[Bongo]

「Assets」→「Create」→...で作成したのでしたら手順的に問題はないと思います。

texture2D = Resources.Load<Texture2D>("motogp");
texture2D = GetResized(texture2D, 200, 200, 16);

の方も別段おかしいところはなさそうですね...

画像が崩れるといいますと、どのような状態でしょうか?縮小前の画像と、崩れてしまった縮小後の画像を質問文に追記いただけますでしょうか（たとえばライセンス的な問題で画像をアップロードすることはできないようでしたら、代わりに何か別の問題ない画像で同様に縮小して、崩れてしまった様子をお示しいただくのでもかまいません）。
併せて、その縮小前のテクスチャファイルをProjectビュー上で選択するとインスペクター上にテクスチャのインポート設定が表示されるかと思いますが、その内容もご提示いただけますでしょうか。もしかするとこっちの設定が関係しているかもしれません。ちょっと予想外の症状で原因特定に時間がかかるかもしれませんが、調べてみようと思います。

[29507-01]

画像を添付しました。
指摘の内容とあっているでしょうか?

[Bongo]

お返事遅くなりました。ちょっと念のため確認したいのですが、まさか「単純にHidden/OverSamplingというシェーダーをAssetsから作成し実行できたのですが」とおっしゃるのは...

1. 「Assets」→「Create」→「Shader」→「Image Effect Shader」で新規シェーダーファイルを作る。
2. ファイル名入力待ち状態になるので、「OverSampling」と入力、確定する。
3. するとシェーダー名が「Hidden/OverSampling」のシェーダーができあがる。

としたあと、そのOverSamplingシェーダーの内容を何も変更しないまま実行した...ということでしょうか?
ご提示いただいた異常画像がどうしてあんな風に白黒反転するのか謎で手詰まりだったのですが、もし仮にそのような手順だったと仮定しますと、そのデフォルト状態のイメージエフェクトシェーダーは白黒反転機能を持っていますので説明がつきそうだ...と思ったわけです。

それともう一つ、ご質問者さんのおっしゃる「リサイズ」というのは、正方形からはみ出た部分をトリミングする事も含むと考えていいでしょうか?
つまり、ご提示の元画像は縦長で、中央に写っているレーサーの上下にはサーキットの路面が写っていますが、「scaner」や「resize (スマホにて)」の画像は上下がトリミングされ、画像が縦に潰れることなく正方形になっています。
もしその方が望ましいのなら、もう少しコードに手を加える必要がありそうです。

[29507-01]

遅くなり申し訳ございません。

OverSamplingシェーダーの内容を何も変更しないまま実行しました。
シェーダーを使った事がないもので。
又,正方形からはみ出た部分をトリミングしたいですが,
現在　canvas/imageがありカメラロールの画像をimageに取り込んでいるので
場合によっては画像が正方形内に上手く収まったり,人間だと頭の部分がカットされたりしている状況です。
カメラロールから画像を取り込み,その絵にBongoさんから教えていただいた方法で絵を描こうと思っています。
最終的にはカメラロールの写真をcanvasに表示し枠内の画像を200X200のサイズに変更し絵を描きたいです。

[Bongo]

なるほど、白黒反転してしまったのはそれが原因だったようですね。私の意図としては、新規作成されたシェーダーファイルの内容を丸ごと回答文中に載せた「Hidden/OverSampling」のコードで置き換えていただくことを想定しておりました。言葉足らずですみません。
なお、もしこれから置き換えていただけるのでしたら、最初の回答投稿時に載せたコードの代わりに、先ほど追記しました部分に載せた同名の「Hidden/OverSampling」を使ってみてください。こちらは最初のコードに範囲切り出し機能を追加したものでして、そのさらに後に載せました正方形切り出し機能付きスクリプトに対応させたものです。ご参考になりましたら幸いです。

とはいえ、あの例では単純に画像中心から正方形に切り出しているだけですので、見せたい部分が中心にない場合...「人間だと頭の部分がカットされたり」とおっしゃるようなケースにも対応するにはさらに工夫が必要そうですね。
GetResized自体は任意の範囲を切り出せるように作ったつもりですので、あとは切り出し範囲をどう決定するかという問題のように思います。もし画像に応じて被写体を自動認識し中央に据えてくれるような機能が作れたとしたら、ゲームのプレイヤーにとってはかなり親切でしょうが、さすがにそこまでのものとなるとお手軽に作るわけにはいかないでしょうね...
「画像選択後、まずはプレイヤーに切り出し前の長方形状態の画像を提示して被写体をタップしてもらい、その点を中心とした正方形領域を切り出す」あたりのレベルに妥協した方がいいかもしれません。

ところで話題が変わりますが、縮小後のテクスチャがもっとも美しく表示されるのは最終的にテクスチャが画面上に表示される時のサイズとテクスチャのサイズが一致する時だと考えられますので、表示方法にも気を遣っていただくとさらに効果的だと思います。
縮小後のテクスチャサイズと画面上の表示サイズが異なる場合、縮小済みのテクスチャがさらにUnityのレンダリングエンジンによって拡大あるいは縮小されて最終的なサイズになるはずで、このときの拡大縮小は当初ご質問者さんがご提示いただいたコードのようなマテリアルなしBlitと同等の品質で行われると思われます。ですのでせっかく高品質に縮小しても、そのあとの拡大縮小によって品質が悪化してしまう可能性があるでしょう。

インスペクターのスクリーンショットを拝見しますにImageオブジェクト自体は200×200に設定されているようですが、それより上の階層はどうでしょうか?
たとえばCanvasオブジェクトのCanvas Scalerの設定次第では、キャンバス全体に拡大縮小がかかって最終的な表示サイズが200×200にならないかもしれません（UI Scale ModeがScale With Screen Sizeの場合だとか）。もしぼやけが解消しないようでしたら、このへんの設定をご提示いただければ、もしいい回避案が思いつきましたら修正してみようと思います。

[29507-01]

有難うございます。被写体が潰れないようになりました。
コーディングについては週末の時間のある時に見ようと思います。
この後はcanvasに全体像を表示し枠内を切り抜きしようと思います。

Canvasのスクショを登録しました。

Canvas Scalerの設定次第では、キャンバス全体に拡大縮小がかかって最終的な表示サイズが200×200にならないかもしれません（UI Scale ModeがScale With Screen Sizeの場合だとか）
テクスチャがもっとも美しく表示されるのは最終的にテクスチャが画面上に表示される時のサイズとテクスチャのサイズが一致する時

よろしければ,この辺りの事を教えて頂けませんか?

[Bongo]

Canvas Scalerの件に関しては、「Unity Canvas Scaler」あたりのキーワードで検索（https://www.google.com/search?q=Unity+Canvas+Scaler ）していただけるといろいろな解説が出てくるかと思います。「実行時のモバイル端末の解像度がさまざまでも、UIのレイアウトを同じように見せるにはどうするべきか」というテーマで説明しているサイトが多いように思われますね。

UI Scale ModeをScale With Screen Sizeとして、ゲームビュー上部の解像度プルダウンメニューを「Free Aspect」とした状態でゲームビューの外周をドラッグしてサイズを変更してみると、Canvasのインスペクター上のRect TransformのScaleの値がゲームビューのサイズに応じて変化する様子を観察できるかと思います。
Canvas ScalerのReference Resolutionで設定した解像度よりもゲームビューのサイズが小さければCanvasは縮小され、大きければ拡大されるはずです。Canvasの子であるImageも拡大縮小の影響を受け、たとえImage自身のサイズを200×200に設定していたとしても、ゲームビューのスクリーンショットを撮影して実際のサイズを画像処理ソフトで調べてみると200ピクセル×200ピクセルになっているとは限らないんじゃないでしょうか。

前回追記しましたスクリプトを改変して、200×200決め打ちではなく実際の表示サイズを考慮してリサイズするオプションを追加してみました（インスペクター上で「Use Actual Size」をオンにしてみてください）。シェーダーコードはいじっていません。
また、その結果投稿字数制限を超えてしまったため、すみませんが最初の回答で例示しました古い方の「Hidden/OverSampling」のコードを回答文から削除しました。
私の回答欄本文の末尾に編集を行った日時が表示されているはずですが、そのリンクを開くとどの部分が変更されたか見ることができるかと思います。

[29507-01]

丁寧に有難うございました。
勉強になる事ばかりです。