グリッドシェーダ

2018.11.18
Unity
shader

グリッド状の線を表示するシェーダです。

1. shaderの作成
2. 問題点と解決方法
3. shader
4. 実行結果

shaderの作成

　頂点座標を用いてグリッドの表示を行います。vertex shaderから頂点座標をそのままfragment shaderへ渡します(o.pos)。

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

v2f vert (appdata v)

{

v2f o;

o.vertex = UnityObjectToClipPos(v.vertex);

o.uv = TRANSFORM_TEX(v.uv, _MainTex);

o.pos = v.vertex;

return o;

}

vertex shaderから渡された頂点座標を用いて、グリッドの描画を行います。ここでは、x方向のみを扱います。

fixed4 frag (v2f i) : SV_Target
{
	fixed4 col = tex2D(_MainTex, i.uv) * _Color;
	float f = smoothstep(0.5, _Edge + 0.5, i.pos.x);
	col = fixed4(f, f, f, 1);
	return col;
}

fixed4 frag (v2f i) : SV_Target

{

fixed4 col = tex2D(_MainTex, i.uv) * _Color;

float f = smoothstep(0.5, _Edge + 0.5, i.pos.x);

col = fixed4(f, f, f, 1);

return col;

}

これを実行すると

(Edge=0)

となります。_Edgeの数値を大きくすると

(Edge=1)

このように、境界がぼやけます。つぎに、グリッドの大きさを調整できるように処理を変更します。frac(i.pos.x)とすることでsmoothstepの入力値が0～0.999･･･を繰り返すようになります。さらに、_GridSizeをi.pos.xにかけることにより、グリッドの大きさを任意に変更できるようになります。

float f = smoothstep(0.5, _Edge + 0.5, frac(i.pos.x * _GridSize));

1	float f = smoothstep(0.5, _Edge + 0.5, frac(i.pos.x * _GridSize));

(GridSize=0.5, Edge=0.3)

あとはグリッド線の太さですが、0.5としている部分が太さを決める部分となります。よって、

float f = smoothstep(_LineWidth, _Edge + _LineWidth, frac(i.pos.x * _GridSize));

1	float f = smoothstep(_LineWidth, _Edge + _LineWidth, frac(i.pos.x * _GridSize));

とすると、任意に線の太さを変更できるようになります。

(GridSize=0.5, LineWidth=0.7, Edge=0.3)

上画像を見てわかるように、線の片側しか表示できていません。そこで反対側も表示できるように変更します。

float f = smoothstep(_LineWidth, _Edge + _LineWidth, frac(i.pos.x * _GridSize))
	+ smoothstep(1 - _LineWidth, 1 - _Edge - _LineWidth, frac(i.pos.x * _GridSize));

1 2	float f = smoothstep(_LineWidth, _Edge + _LineWidth, frac(i.pos.x * _GridSize)) + smoothstep(1 - _LineWidth, 1 - _Edge - _LineWidth, frac(i.pos.x * _GridSize));

これを実行すると

(GridSize=0.5, LineWidth=0.7, Edge=0.3)

となり、反対側も表示されるようになりました。さらに、横線を表示できるように変更します。

float2 f = smoothstep(_LineWidth, _Edge + _LineWidth, frac(i.pos.xz * _GridSize))
	+ smoothstep(1 - _LineWidth, 1 - _Edge - _LineWidth, frac(i.pos.xz * _GridSize));
float grid = max(f.x, f.y);
col = fixed4(grid, grid, grid, 1);

float2 f = smoothstep(_LineWidth, _Edge + _LineWidth, frac(i.pos.xz * _GridSize))

+ smoothstep(1 - _LineWidth, 1 - _Edge - _LineWidth, frac(i.pos.xz * _GridSize));

float grid = max(f.x, f.y);

col = fixed4(grid, grid, grid, 1);

(GridSize=0.5, LineWidth=0.7, Edge=0.3)

平面ではこれで十分ですが、立体的なオブジェクトで使用できるよう上記コードを以下のように変更します。

float3 f = smoothstep(_LineWidth, _Edge + _LineWidth, frac(i.pos.xyz * _GridSize))
	+ smoothstep(1 - _LineWidth, 1 - _Edge - _LineWidth, frac(i.pos.xyz * _GridSize));
float grid = max(max(f.x, f.y), f.z);

float3 f = smoothstep(_LineWidth, _Edge + _LineWidth, frac(i.pos.xyz * _GridSize))

+ smoothstep(1 - _LineWidth, 1 - _Edge - _LineWidth, frac(i.pos.xyz * _GridSize));

float grid = max(max(f.x, f.y), f.z);

(GridSize=5, LineWidth=0.93, Edge=0.05)

立体にグリッドを表示することができました。しかし、一つ問題があります。

問題点と解決方法

　GridSizeを6へ変更すると

(GridSize=6, LineWidth=0.93, Edge=0.05)

このように真っ白になってしまいます。この現象は、線がエッジの部分に重なった場合なるようです。xのみに変更すると

(GridSize=6, LineWidth=0.93, Edge=0.05)

となります。この画像より、i.pos.xが同じ頂点で囲まれている面が白くなっていることが分かります。そこで、fwidthを使用してマスキングを行います。fwidthは入力値がどれだけ変化しているかを返してくれます。よって、

float fw = step(0.001, fwidth(i.pos.x));

1	float fw = step(0.001, fwidth(i.pos.x));

とすることで、fwへi.pos.xの変化がほぼない場合は0を、それ以外は1を代入することができます。fw を出力してやると

となり、i.pos.xに変化がない場所は黒(fw =0)、他の部分は白(fw =1)となっていることがわかります。これをグリッド線の式に乗算してやれば、問題が解決するはずです。

float2 f = smoothstep(_LineWidth, _Edge + _LineWidth, frac(i.pos.x * _GridSize))
	+ smoothstep(1 - _LineWidth, 1 - _Edge - _LineWidth, frac(i.pos.x * _GridSize));
float grid = max(f.x, f.y);
grid *= step(0.001, fwidth(i.pos.x));

float2 f = smoothstep(_LineWidth, _Edge + _LineWidth, frac(i.pos.x * _GridSize))

+ smoothstep(1 - _LineWidth, 1 - _Edge - _LineWidth, frac(i.pos.x * _GridSize));

float grid = max(f.x, f.y);

grid *= step(0.001, fwidth(i.pos.x));

これを実行すると

(GridSize=6, LineWidth=0.93, Edge=0.05)

となり、問題が解決しました。このコードを3次元にしてやると

float3 f = smoothstep(_LineWidth, _Edge + _LineWidth, frac(i.pos.xyz * _GridSize))
	+ smoothstep(1 - _LineWidth, 1 - _Edge - _LineWidth, frac(i.pos.xyz * _GridSize));
f *= step(0.001, fwidth(i.pos.xyz));
float grid = max(max(f.x, f.y), f.z);

float3 f = smoothstep(_LineWidth, _Edge + _LineWidth, frac(i.pos.xyz * _GridSize))

+ smoothstep(1 - _LineWidth, 1 - _Edge - _LineWidth, frac(i.pos.xyz * _GridSize));

f *= step(0.001, fwidth(i.pos.xyz));

float grid = max(max(f.x, f.y), f.z);

(GridSize=6, LineWidth=0.93, Edge=0.05)

となり、正常にグリッド線が表示されるようになりました。

shader

　テクスチャ、グリッド線の色及び基本色を変更できるようにしています。

Shader "Unlit/Grid"
{
	Properties
	{
		_MainTex ("Texture", 2D) = "white" {}
		_Color ("MainColor", Color) = (0, 0, 0, 1)
		_GridColor ("GridColor", Color) = (1, 1, 1, 1)
		_GridSize ("GridSize", Range(0, 20)) = 1
		_LineWidth ("LineWidth", Range(0.4, 1)) = 0.1
		_Edge ("Edge", Range(0.001, 0.8)) = 0.1
	}
	SubShader
	{
		Tags { "RenderType"="Opaque" }
        
		Pass
		{
			CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag
			
			#include "UnityCG.cginc"

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

			struct v2f
			{
				float2 uv : TEXCOORD0;
				UNITY_FOG_COORDS(1)
				float4 vertex : SV_POSITION;
				float4 pos : TEXCOORD1;
			};

			sampler2D _MainTex;
			float4 _MainTex_ST;

			float4 _GridColor;
			float4 _Color;
			float _GridSize;
			float _LineWidth;
			float _Edge;
			
			v2f vert (appdata v)
			{
				v2f o;
				o.vertex = UnityObjectToClipPos(v.vertex);
				o.uv = TRANSFORM_TEX(v.uv, _MainTex);
				o.pos = v.vertex;
				return o;
			}
			
			fixed4 frag (v2f i) : SV_Target
			{
				fixed4 col = tex2D(_MainTex, i.uv) * _Color;

				float3 f = smoothstep(_LineWidth, _Edge + _LineWidth, frac(i.pos.xyz * _GridSize))
					+ smoothstep(1 - _LineWidth, 1 - _Edge - _LineWidth, frac(i.pos.xyz * _GridSize));
				f *= step(0.001, fwidth(i.pos.xyz));
				//float grid = saturate(f.x + f.y + f.z);
				float grid = max(max(f.x, f.y), f.z);
				col.rgb = col.rgb * (1 - grid) + grid * _GridColor.rgb;

				col = fixed4(grid, grid, grid, 1);
				return col;
			}
			ENDCG
		}
	}
}

Shader "Unlit/Grid"

{

Properties

{

_MainTex ("Texture", 2D) = "white" {}

_Color ("MainColor", Color) = (0, 0, 0, 1)

_GridColor ("GridColor", Color) = (1, 1, 1, 1)

_GridSize ("GridSize", Range(0, 20)) = 1

_LineWidth ("LineWidth", Range(0.4, 1)) = 0.1

_Edge ("Edge", Range(0.001, 0.8)) = 0.1

}

SubShader

{

Tags { "RenderType"="Opaque" }

Pass

{

CGPROGRAM

#pragma vertex vert

#pragma fragment frag

#include "UnityCG.cginc"

struct appdata

{

float4 vertex : POSITION;

float2 uv : TEXCOORD0;

};

struct v2f

{

float2 uv : TEXCOORD0;

UNITY_FOG_COORDS(1)

float4 vertex : SV_POSITION;

float4 pos : TEXCOORD1;

};

sampler2D _MainTex;

float4 _MainTex_ST;

float4 _GridColor;

float4 _Color;

float _GridSize;

float _LineWidth;

float _Edge;

v2f vert (appdata v)

{

v2f o;

o.vertex = UnityObjectToClipPos(v.vertex);

o.uv = TRANSFORM_TEX(v.uv, _MainTex);

o.pos = v.vertex;

return o;

}

fixed4 frag (v2f i) : SV_Target

{

fixed4 col = tex2D(_MainTex, i.uv) * _Color;

float3 f = smoothstep(_LineWidth, _Edge + _LineWidth, frac(i.pos.xyz * _GridSize))

+ smoothstep(1 - _LineWidth, 1 - _Edge - _LineWidth, frac(i.pos.xyz * _GridSize));

f *= step(0.001, fwidth(i.pos.xyz));

//float grid = saturate(f.x + f.y + f.z);

float grid = max(max(f.x, f.y), f.z);

col.rgb = col.rgb * (1 - grid) + grid * _GridColor.rgb;

col = fixed4(grid, grid, grid, 1);

return col;

}

ENDCG

}

実行結果

　上記shaderの実行結果は以下の通りです。
<span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span>