Glitches in drawing grid shader

Hi All,
I am writing a fragment shader which draws a grid in Unity UI's Image object. But i am getting aliased (jagged) lines and random pixels on line are not being drawn. See angled_view.png and front_view.png.

I tried to find a solution to fix aliased lines but none of them are working specifically.

I have project with:
1. A Canvas in render mode=WorldSpace
2. A gameObject with Image component.
3. A material with below shader assigned to Image component.

Here is my shader:

Code (CSharp):

1. Shader "Custom/Grid_shader"
2. {
3.     Properties
4.     {
5.         _MainTex("Texture", 2D) = "" {}
6.         _gridColor ("Grid Colour", Color) = (0.5, 1.0, 1.0, 1.0)
7.         _bgColor ("BG Color", Color) = (1,1,1,1)
8.         _gridThicknessHor ("Thickness Horizontal", Float) = 0.01
9.         _gridThicknessVer ("Thickness Vertical", Float) = 0.01
10.         _rowCount ("Rows", Range(1,50)) = 1
11.         _columnCount ("Columns", Range(1,50)) = 1
12.         _centerlLineColor("Center Line Color", Color) = (1,1,1,1)
13.         _centerLineThickness("Center Line Thickness", Float) = 0.01
14.      
15.         _StencilComp ("Stencil Comparison", Float) = 8
16.         _Stencil ("Stencil ID", Float) = 0
17.         _StencilOp ("Stencil Operation", Float) = 0
18.         _StencilWriteMask ("Stencil Write Mask", Float) = 255
19.         _StencilReadMask ("Stencil Read Mask", Float) = 255
20.  
21.         _bgColorMask ("Color Mask", Float) = 15
22.  
23.         [Toggle(UNITY_UI_ALPHACLIP)] _UseUIAlphaClip ("Use Alpha Clip", Float) = 0
24.     }
25.  
26.     SubShader
27.     {
28.         Tags
29.         {
30.             "Queue"="Transparent"
31.             "IgnoreProjector"="True"
32.             "RenderType"="Transparent"
33.             "PreviewType"="Plane"
34.             "CanUseSpriteAtlas"="True"
35.         }
36.      
37.         Stencil
38.         {
39.             Ref [_Stencil]
40.             Comp [_StencilComp]
41.             Pass [_StencilOp]
42.             ReadMask [_StencilReadMask]
43.             WriteMask [_StencilWriteMask]
44.         }
45.  
46.         Cull Off
47.         Lighting Off
48.         ZWrite Off
49.         ZTest [unity_GUIZTestMode]
50.         Blend SrcAlpha OneMinusSrcAlpha
51.         ColorMask [_bgColorMask]
52.  
53.         Pass
54.         {
55.         CGPROGRAM
56.      
57.             #pragma exclude_renderers d3d9 gles
58.          
59.             #pragma vertex vert
60.             #pragma fragment frag
61.             #pragma target 2.0
62.             #pragma enable_d3d11_debug_symbols
63.  
64.             #include "UnityCG.cginc"
65.             #include "UnityUI.cginc"
66.  
67.             #pragma multi_compile __ UNITY_UI_ALPHACLIP
68.          
69.             struct appdata_t
70.             {
71.                 float4 vertex   : POSITION;
72.                 float4 color    : COLOR;
73.                 float4 texcoord : TEXCOORD0;
74.                 UNITY_VERTEX_INPUT_INSTANCE_ID
75.             };
76.  
77.             struct v2f
78.             {
79.                 float4 vertex   : SV_POSITION;
80.                 fixed4 color    : COLOR;
81.                 float4 texcoord  : TEXCOORD0;
82.                 float4 worldPosition : TEXCOORD1;
83.                 float4 worldPosition1 : TEXCOORD2;
84.                 UNITY_VERTEX_OUTPUT_STEREO
85.             };
86.          
87.             sampler2D _MainTex;
88.             fixed4 _bgColor;
89.             fixed4 _TextureSampleAdd;
90.             float4 _ClipRect;
91.             uniform float _gridThicknessHor;
92.             uniform float _gridThicknessVer;
93.             uniform float _rowCount;
94.             uniform float _columnCount;
95.             uniform float4 _gridColor;
96.             uniform float4 _centerlLineColor;
97.             uniform float _centerLineThickness;
98.  
99.             v2f vert(appdata_t IN)
100.             {
101.                 v2f OUT;
102.                 OUT.worldPosition = IN.vertex;
103.                 OUT.worldPosition1 = mul(unity_ObjectToWorld, IN.vertex);
104.                 OUT.vertex = UnityObjectToClipPos(IN.vertex);
105.                 //OUT.texcoord = IN.texcoord;
106.                 OUT.texcoord.xy = IN.texcoord.xy;
107.                 OUT.texcoord.zw = IN.vertex.zw;
108.                 OUT.texcoord.z = length(ObjSpaceViewDir(IN.vertex));            
109.                 OUT.color = IN.color * _bgColor;
110.                 return OUT;
111.             }
112.  
113.             fixed4 frag(v2f IN) : SV_Target
114.             {
115.                 fixed4 col = tex2D(_MainTex, IN.texcoord);
116.                 float2 l_pos = IN.texcoord;
117.                 float l_leftBoundFactor = (1.0f - _gridThicknessHor) / _columnCount;
118.                 float l_lowerBoundFactor = (1.0f - _gridThicknessVer) / _rowCount;
119.              
120.                 float4 l_finalColor = IN.color;  //Assign BG color as default received from 'vert' function.
121.              
122.                 if((l_pos.y > 0.5 - (_centerLineThickness / 2) && l_pos.y < 0.5 + (_centerLineThickness / 2))
123.                 && (l_pos.x > _gridThicknessHor &&  l_pos.x < (1.0 - _gridThicknessHor))
124.                 )
125.                 {
126.                     l_finalColor = _centerlLineColor;    //Drawing center line with different color.
127.                 }
128.                 else if( (l_pos.x % l_leftBoundFactor > 0 && l_pos.x % l_leftBoundFactor <= _gridThicknessHor) ||
129.                     (l_pos.y % l_lowerBoundFactor > 0 && l_pos.y % l_lowerBoundFactor <= _gridThicknessVer)
130.                     )
131.                 {
132.                     l_finalColor = _gridColor;            //Drawing grid line.
133.                 }
134.                              
135.                 l_finalColor = l_finalColor * col;
136.              
137.                 l_finalColor.a *= UnityGet2DClipping(IN.worldPosition1.xy, _ClipRect);
138.              
139.              
140.                 #ifdef UNITY_UI_ALPHACLIP
141.                 clip (l_finalColor.a - 0.001);
142.                 #endif
143.                              
144.                 return l_finalColor;
145.             }
146.         ENDCG
147.         }
148.     }
149. }
150.  

 

Drawing a grid using if statements will invariably lead to aliasing. The trick is to solve the problem in a different way, by solving the problem algebraically and making use of derivatives to get anti-aliased lines:
http://iquilezles.org/www/articles/filterableprocedurals/filterableprocedurals.htm

That's all in glsl, but it can be trivially changed to the hlsl Unity's shaders prefer.