How to create latitudinal (horizontal) contour lines in GLSL?
I am targeting this effect: (horizontal contour lines only):
I found this example , however it creates horizontal horizontal vertical contour lines and . I can’t wrap my head around how the call fwidth()
creates strings.
uniform float gsize;//size of the grid
uniform float gwidth;//grid lines'width in pixels
varying vec3 P;
void main()
{
vec3 f = abs(fract (P * gsize)-0.5);
vec3 df = fwidth(P * gsize);
float mi=max(0.0,gwidth-1.0), ma=max(1.0,gwidth);//should be uniforms
vec3 g=clamp((f-df*mi)/(df*(ma-mi)),max(0.0,1.0-gwidth),1.0);//max(0.0,1.0-gwidth) should also be sent as uniform
float c = g.x * g.y * g.z;
gl_FragColor = vec4(c, c, c, 1.0);
gl_FragColor = gl_FragColor * gl_Color;
}
How do I change this example to be horizontal lines?
Is there a better solution?
Update:
The solution from the modified shader is below. Use float using only value y
.
void main() {
float f = fract (_pos.y * 15.0);
float df = fwidth(_pos.y * 15.0);
float g = smoothstep(df * 1.0, df * 2.0, f);
float c = g;
gl_FragColor = vec4(c, c, c, 1.0);
}
source to share
fwidth
doesn't accurately generate lines, basically fract
. fwidth
used only to maintain a constant line width in screen space.
If you try to draw 1px lines only using the parameter it works. But if you want wide lines or antialiased lines, you will need fwidth to do reasonable interpolations.
To only have horizontal lines, you probably just need to remove one of the coordinates in the fract / fwidth calculation. Though, maybe you should try with the simpler version first from your link (much easier to understand: D):
varying vec3 k;
void main()
{
vec3 f = fract (k * 100.0);
vec3 df = fwidth(k * 100.0);
vec3 g = smoothstep(df * 1.0, df * 2.0, f);
float c = g.x * g.y * g.z;
gl_FragColor = vec4(c, c, c, 1.0);
}
source to share