Jump to content
  • Advertisement
Sign in to follow this  

drawing a fine lined grid [hlsl]

This topic is 2865 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

evening all,

Got a little issue with a tool im making, Im trying to draw a grid over the viewport in the pixel shader, But the resulting grid looks patchy.

The problem is that each line isnt the same width and this looks odd. The code I use to determine the pixel colour is below

Anyone any advice on how to make this look a lil better.


if( (i.TexCoord0.x >= (1.0f/16.0f) && ( i.TexCoord0.x % (1.0f/16.0f) ) < 0.002) ||
(i.TexCoord0.y >= (1.0f/16.0f) && ( i.TexCoord0.y % (1.0f/16.0f) ) < 0.002) )
{
o.Colour = float4(0.0f, 0.0f, 1.0f, 0.0f);
}
else
{
o.Colour = float4(1.0f, 1.0f, 1.0f, 0.0f);
}

Share this post


Link to post
Share on other sites
Advertisement
Don't use true/false branching, instead use some kind of gradient. The built in smoothstep function is handy for this.

However, smoothstep creates a curve that just goes from zero up to one. You want one that goes from zero up to one, and then back down to zero again. e.g.
float smoothstep2( float min1, float max1, float min2, float max2, float input )
{
return smoothstep(min1, max1, input) * (1 - smoothstep(min2, max2, input));
}
Then use the floating-point gradient to lerp between the background color and the grid colour (instead of just choosing one or the other).
float2 coords = frac(i.TexCoord0*16.0);
float2 weights = smoothstep(float2(0.0,0.0), float2(0.032,0.032), coords) * (1 - smoothstep(float2(0.968,0.968), float2(1.0,1.0), coords);
float4 bgColor = float4(0.0f, 0.0f, 1.0f, 0.0f);
float4 grColor = float4(1.0f, 1.0f, 1.0f, 0.0f);
o.Colour = lerp( grColor, bgColor, saturate(dot(weights,float2(1.0,1.0))) );

Share this post


Link to post
Share on other sites
hi hodgman,

Thanks for the tip, it appears that this technique only works drawing the lines along the x axis. Do you know how i could apply this to the y axis also.

Cheers

Share this post


Link to post
Share on other sites
The second bit of code I posted should be doing the same tests on the x and y axes... Can you post your code?

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

Participate in the game development conversation and more when you create an account on GameDev.net!

Sign me up!