Anti-aliased grid shader fading with distance

Hello. I'm desperately trying to find a shader like this. Right now I'm using something I found here on the forums but the lines in the distance become very thick and jarring when used in GearVR (that's what this project is for). Also a total newbie when it comes to shader writing so any help would be appreciated. Basically what I'm after is fading the grid in the distance something like the native grid in the Unity editor does.

Code (CSharp):

1. Shader "Grid" {
2.    
3.     Properties {
4.       _GridThickness ("Grid Thickness", Float) = 0.01
5.       _GridSpacing ("Grid Spacing", Float) = 10.0
6.       _GridColour ("Grid Colour", Color) = (0.5, 0.5, 0.5, 0.5)
7.       _BaseColour ("Base Colour", Color) = (0.0, 0.0, 0.0, 0.0)
8.     }
9.    
10.     SubShader {
11.       Tags { "Queue" = "Transparent" }
12.    
13.       Pass {
14.         ZWrite Off
15.         Blend SrcAlpha OneMinusSrcAlpha
16.    
17.         CGPROGRAM
18.    
19.         // Define the vertex and fragment shader functions
20.         #pragma vertex vert
21.         #pragma fragment frag
22.    
23.         // Access Shaderlab properties
24.         uniform float _GridThickness;
25.         uniform float _GridSpacing;
26.         uniform float4 _GridColour;
27.         uniform float4 _BaseColour;
28.    
29.         // Input into the vertex shader
30.         struct vertexInput {
31.             float4 vertex : POSITION;
32.         };
33.         // Output from vertex shader into fragment shader
34.         struct vertexOutput {
35.           float4 pos : SV_POSITION;
36.           float4 worldPos : TEXCOORD0;
37.         };
38.    
39.         // VERTEX SHADER
40.         vertexOutput vert(vertexInput input) {
41.           vertexOutput output;
42.           output.pos = UnityObjectToClipPos(input.vertex);
43.           // Calculate the world position coordinates to pass to the fragment shader
44.           output.worldPos = mul(unity_ObjectToWorld, input.vertex);
45.           return output;
46.         }
47.         // FRAGMENT SHADER
48.         float4 frag(vertexOutput input) : COLOR {
49.           if (frac(input.worldPos.x/_GridSpacing) < _GridThickness || frac(input.worldPos.y/_GridSpacing) < _GridThickness) {
50.             return _GridColour;
51.           }
52.          else if (frac(input.worldPos.x/_GridSpacing) < _GridThickness || frac(input.worldPos.z/_GridSpacing) < _GridThickness) {
53.             return _GridColour;
54.          }
55.           else {
56.             return _BaseColour;
57.           }
58.         }
59.     ENDCG
60.     }
61.   }
62. }

 

Honestly it's way easier to just use a grid texture. Handles anti-aliasing and fading out over distance for free with mip mapping. You can enable anisotropic filtering if it gets too blurry for you. A texture with 9 tap aniso will probably end up faster than a good grid shader on mobile.

 

Thanks for the reply @bgolus. Since I'm still learning I get the concept but will still need to research what you mean by "fading out over distance with mip mapping".

 

Mips are lower resolution versions of your texture that get used when you are looking the texture from further away (that's an over-simplification, but let's stick with it). And since they are lower and lower resolutions, thin lines in the alpha channel will blend with the neighbouring pixels more and more making it less and less visible. Which makes the texture effectively fade out over distance.

 

Thanks @AcidArrow And I think I got it. made it happen and they do indeed fade with distance now. Problem is that they fade to grey with 100% opacity it seems. My texture is a simple grid pattern with solid 100% alpha for the lines and 50% alpha opacity for the base color. I've enabled Fade Mip Maps and played with the range in order to achieve the desired effect but I would like if the opacity could also fade to zero at the edges. Is that possible?

 

You can create a dds texture yourself with the help of photoshop and a plugin. With that you'd be in total control over every pixel in each mipmap level.