Unity Meshを用いて表示した線が綺麗に表示されない

Question

Meshを用いて表示した線が綺麗に表示されません。

Meshを用いてGridを表示したところ、
画面のアスペクト比を「Free Aspect」にすると下のように綺麗に表示されますが、

「Free Aspect」ではなく、アスペクト比を指定すると下画像のように綺麗に表示されません。
(アスペクト比を指定すると、というよりも画面の解像度の問題だとは思いますが)

画面の解像度を指定しても綺麗に表示するためにはどうしたらよろしいでしょうか？
私の知識では解像度によって太さを変えるという手法しか思いつきませんでした・・・

よろしくお願いいたします。

追記

以下のコードを使用いたしました。
最終目標としては、カメラをズームアウト、インしても、太さがほぼ変わらないものを目指しています。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class TestGrid : MonoBehaviour
{

	[SerializeField]
	private UnityEngine.Grid m_grid;

	[SerializeField]
	private MeshRenderer m_meshRenderer;

	[SerializeField]
	private MeshFilter m_meshFilter;

	private Mesh m_gridMesh = null;

	[SerializeField]
	private Material m_gridMaterial;


	private const float k_GridGizmoDistanceFalloff = 50f;


	void Start()
	{
		m_gridMesh = Generate(m_grid, Color.white, 0.0f, new RectInt(0, 0, 10, 10));

		m_meshFilter.sharedMesh = m_gridMesh;

		m_meshRenderer.material = m_gridMaterial;
	}



	public static Mesh Generate(GridLayout gridLayout, Color color, float screenPixelSize, RectInt bounds)
	{
		Mesh mesh = new Mesh();
		mesh.hideFlags = HideFlags.HideAndDontSave;

		int vertex = 0;

		int totalVertices =  4 * (bounds.size.x + bounds.size.y);

		Vector3 horizontalPixelOffset = new Vector3(screenPixelSize, 0f, 0f);
		Vector3 verticalPixelOffset = new Vector3(0f, screenPixelSize, 0f);

		Vector3[] vertices = new Vector3[totalVertices];
		Vector2[] uvs2 = new Vector2[totalVertices];

		Vector3 cellStride = gridLayout.cellSize + gridLayout.cellGap;
		Vector3Int minPosition = new Vector3Int(0, bounds.min.y, 0);
		Vector3Int maxPosition = new Vector3Int(0, bounds.max.y, 0);

		Vector3 cellGap = Vector3.zero;
		if (!Mathf.Approximately(cellStride.x, 0f))
		{
			cellGap.x = gridLayout.cellSize.x / cellStride.x;
		}

		for (int x = bounds.min.x; x < bounds.max.x; x++)
		{
			minPosition.x = x;
			maxPosition.x = x;

			vertices[vertex + 0] = gridLayout.CellToLocal(minPosition);
			vertices[vertex + 1] = gridLayout.CellToLocal(maxPosition);
			uvs2[vertex + 0] = Vector2.zero;
			uvs2[vertex + 1] = new Vector2(0f, cellStride.y * bounds.size.y);

			vertex += 2;

			vertices[vertex + 0] = gridLayout.CellToLocalInterpolated(minPosition + cellGap);
			vertices[vertex + 1] = gridLayout.CellToLocalInterpolated(maxPosition + cellGap);
			uvs2[vertex + 0] = Vector2.zero;
			uvs2[vertex + 1] = new Vector2(0f, cellStride.y * bounds.size.y);

			vertex += 2;
		}

		minPosition = new Vector3Int(bounds.min.x, 0, 0);
		maxPosition = new Vector3Int(bounds.max.x, 0, 0);
		cellGap = Vector3.zero;
		if (!Mathf.Approximately(cellStride.y, 0f))
		{
			cellGap.y = gridLayout.cellSize.y / cellStride.y;
		}

		for (int y = bounds.min.y; y < bounds.max.y; y++)
		{
			minPosition.y = y;
			maxPosition.y = y;

			vertices[vertex + 0] = gridLayout.CellToLocal(minPosition);
			vertices[vertex + 1] = gridLayout.CellToLocal(maxPosition);
			uvs2[vertex + 0] = Vector2.zero;
			uvs2[vertex + 1] = new Vector2(cellStride.x * bounds.size.x, 0f);

			vertex += 2;

			vertices[vertex + 0] = gridLayout.CellToLocalInterpolated(minPosition + cellGap);
			vertices[vertex + 1] = gridLayout.CellToLocalInterpolated(maxPosition + cellGap);
			uvs2[vertex + 0] = Vector2.zero;
			uvs2[vertex + 1] = new Vector2(cellStride.x * bounds.size.x, 0f);

			vertex += 2;
		}

		var uv0 = new Vector2(k_GridGizmoDistanceFalloff, 0f);
		var uvs = new Vector2[vertex];
		var indices = new int[vertex];
		var colors = new Color[vertex];
		var normals = new Vector3[totalVertices];
		var uvs3 = new Vector2[totalVertices];

		for (int i = 0; i < vertex; i++)
		{
			uvs[i] = uv0;
			indices[i] = i;
			colors[i] = color;
			var alternate = i + ((i % 2) == 0 ? 1 : -1);
			normals[i] = vertices[alternate];
			uvs3[i] = uvs2[alternate];
		}

		mesh.vertices = vertices;
		mesh.uv = uvs;
		mesh.uv2 = uvs2;
		mesh.uv3 = uvs3;
		mesh.colors = colors;
		mesh.normals = normals;
		mesh.SetIndices(indices, MeshTopology.Lines, 0);

		return mesh;
	}


}

Comments

[Bongo]

メッシュはどのように作成していますでしょうか?
スクリプトをご提示いただくか、あるいは参考サイトなどありましたらご提示いただけると何かわかるかもしれません。

[rtag]

ありがとうございます。
ソースコードの方を追記させていただきました。

Answer 1

「『Free Aspect』ではなく、アスペクト比を指定すると」とおっしゃるのは、ゲームビュー上辺の表示設定をアスペクト比指定（設定名が「16:10」みたいな形のもの）にしたときと固定解像度（設定名が「～ (???x???)」みたいな形のもの）にしたときのいずれを指していますでしょうか?

ご提示いただいたコードを試してみたところ、後者の固定解像度の場合にご提示の画像のような線のかすれが起こりました。このとき、ゲームビュー上辺の「Scale」が1未満になっており、私の場合ですとScaleスライダーを1xに合わせたときにはかすれは起こりませんでした。

もしご質問者さんの場合もこれと同様の挙動なのでしたら、このかすれについては気にする必要はないかと思います。
「カメラをズームアウト、インしても、太さがほぼ変わらないものを目指しています」とのことですが、ご提示のコードではMeshTopologyがLinesに設定されており、「解像度によって太さを変える」とおっしゃるような措置を自前で加えなくとも、すでに解像度によらず最小の太さで描画されるようになっているはずです。ゲームビューのScaleが小さいときにかすれて見えてしまったとしても、それは指定された解像度でレンダリングされた映像をゲームビュー上で表示する際に縮小した結果しかたなく発生する現象であり、おそらくゲームをプレイする実際の環境ではちゃんと描画されるでしょう。

ゲームビュー上でちゃんとかすれずに表示されるような条件にした上で、カメラの「Size」をいろいろと変化させてみるとどうでしょうか。たぶん現状のメッシュの作り方なら、どんなサイズでも一定して細い線で描画されると思います。そうなっていればカメラをズームイン・ズームアウトさせた場合でも同様に一定の線で表示されるはずです。

ただ、「最小の太さの線」といっても、頂点位置の端数のせいでくっきり1ピクセルの線にならないかもしれません。

もしそれが気になるなら、たとえばグリッドに下記のようなマテリアルを使って...

Shader "Unlit/PixelSnap"
{
    Properties
    {
        _Color ("Color", Color) = (1, 1, 1, 1)
    }
    SubShader
    {
        Tags { "Queue"="Transparent" "RenderType"="Transparent" }

        Pass
        {
            Blend SrcAlpha OneMinusSrcAlpha

            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"

            float4 _Color;

            float4 vert(float4 vertex : POSITION) : SV_POSITION
            {
                float4 clipPos = UnityObjectToClipPos(vertex);
                float2 screenPos = _ScreenParams.xy * clipPos.xy * 0.5 / clipPos.w;
                screenPos = round(screenPos - 0.5) + 0.5;
                clipPos.xy = screenPos * clipPos.w * 2.0 / _ScreenParams.xy;
                return clipPos;
            }

            fixed4 frag() : SV_Target
            {
                return _Color;
            }
            ENDCG
        }
    }
}

頂点位置を無理やり補正してしまえば改善するんじゃないかと思います。

Comments

[rtag]

ありがとうございます！
「Scale」を1xにしたところ綺麗に表示することができました。
色々と自分の中のわだかまりが解けました。
シェーダーもありがとうございます。
さらに綺麗に表示することができました！