I have a shader that calculates contour lines based on a parameter in the program, in my case the height value of a mesh. The calculation is performed using standard derivatives as follows:
float contourWidth = 0.5;
float f = abs( fract( height ) - 0.5 );
float df = fwidth( height );
float mi = max( 0.0, contourWidth - 1.0 );
float ma = max( 1.0 , contourWidth );
float contour = clamp( (f - df * mi ) / ( df * ( ma - mi ) ), 0.0, 1.0 );
This works as expected, however when I feed the height parameter from a texture, and zoom in, such that the rendered pixels are much smaller than the sampled texels, artifacts begin to appear.
The sampled texture has linear filtering and to investigate I implemented linear filtering manually in the shader to try to isolate the problem. This resolved the issue, but I'd like to understand why this is happening and if the only solution is to manually implement linear filtering in the shader as I have, or if there is a better way.
Below is a comparison of the two rendering techniques:
I have created an working example on Shadertoy to demonstrate the issue: https://www.shadertoy.com/view/MljcDy
I'm seeing this issue on Mac OSX as well as mobile Safari (where the atrifacts are even worse)
