Glsl artifacts after fract uv coords [closed] - opengl

Question

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I am trying to make a grid with fragment shader and i get problems with uv coords.
On this screenshot you can see first result:
float roundRect(vec2 p, vec2 size, float radius) {
vec2 d = abs(p) - size;
return min(max(d.x, d.y), 0.0) + length(max(d, 0.0)) - radius;
}
void main() {
vec2 uv = gl_FragCoord.xy / u_resolution.xy;
vec2 f_uv = fract(uv * 22.680);
float rect = smoothstep(0.040, 0.0, roundRect(f_uv - vec2(0.5), vec2(0.44), 0.040));
gl_FragColor = vec4(vec3(rect), 1.0);
}
Second:
float roundRect(vec2 p, vec2 size, float radius) {
vec2 d = abs(p) - size;
return min(max(d.x, d.y), 0.0) + length(max(d, 0.0)) - radius;
}
void main() {
vec2 uv = gl_FragCoord.xy / u_resolution.xy;
vec2 f_uv = fract(uv * 20.680);
float rect = smoothstep(0.040, 0.0, roundRect(f_uv - vec2(0.5), vec2(0.44), 0.040));
gl_FragColor = vec4(vec3(rect), 1.0);
}
These both screenshots have a difference in line
vec2 f_uv = fract(uv * x);
How can i fix it?

Answer 1

What you see is aliasing caused by gridlines
thinner than the pixels themselves, and
spaced at non-integer pixel intervals.
To fix that you need to band-limit your function. One way of doing this is as follows:
void main() {
float scale = 22.680;
vec2 uv = gl_FragCoord.xy / u_resolution.xy * scale;
float fw = max(fwidth(uv.x), fwidth(uv.y));
float rect = smoothstep(fw, -fw, roundRect(fract(uv) - vec2(0.5), vec2(0.44), 0.040));
gl_FragColor = vec4(vec3(rect), 1.0);
}
The results look as follows:
Note that some lines are still blurrier than others -- but the only way around it is to ensure that your scale factor is an integer amount of pixels.