🔒 Locked

drawing a fine lined grid [hlsl]

Started by terry_burns85 Jul 17, 2010 at 11:00 AM 2 replies 5.5k views

Original Post

Jul 17, 2010 at 11:00 AM

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);}

Hodgman

Jul 17, 2010 at 11:23 AM

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))) );

terry_burns85

Jul 17, 2010 at 11:53 AM

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

Hodgman

Jul 18, 2010 at 9:28 AM

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

Topic Locked

This topic has been locked by a moderator. New replies are not allowed.