Strange artifacts when using gl_FragCoord to access texels

Question

I ran into a problem with using gl_FragCoord variable to access texels. The problem can be illustrated by following example:

First I render a textured quad into texture of size (W, H) where W and H are viewport width and height correspondingly. Then I draw another quad with lower left corner in (0, 0) and upper right corner in (W, H) (so that it effectively takes whole viewport) which is textured with this texture. Let's call it quad A. Then I draw another quad (let's call it quad B) on top of it, with lower left corner in (0, H1) and upper right in (W, H) and also use the same texture for it. The whole scene can be illustrated by this picture:

As you can see, the bottom part of the first quad lays in quad A and a top part in quad B. Thus when I experiment with fragment shader for quad B I can see whether the top part of the quad matches the bottom part.

Now to the problem:

When in fragment shader for quad B I use

gl_FragColor = texture2D(u_backgroundTexture, v_texCoord);

(v_texCoord is (0, 0) for lower left corner and (1, 1) for upper right)

to determine fragment color, everything is fine. Top and bottom parts of the first quad perfectly match each other:

However, when I change this line to:

gl_FragColor = texture2D(u_backgroundTexture, gl_FragCoord.xy / u_resolution);

(where u_resolution is a vec2(W, H))

the top and bottom parts of the quad doesn't match anymore. If I render that quad close to right edge of the screen I get following artifacts:

and if I draw it close to the left side artifacts looks like this:

Could anyone please explain what are the possible causes for such artifacts? Apparently I am missing some fundamental understanding of how texturing works, since in my mind texture2D(u_backgroundTexture, v_texCoord) should be completely equivalent to texture2D(u_backgroundTexture, gl_FragCoord.xy / u_resolution); in my case.

P.S. Obviously, for quad A I always use gl_FragColor = texture2D(u_backgroundTexture, v_texCoord) in fragment shader.

Answer 1

I finally found the root-cause of this weird discrepancy.

I use Cocos2d framework which builds projection matrix from the current camera settings. As it turned out, projection matrix built by Cocos2d has some precision loss. Thus, after vertices of quads A and B multiplied by projection matrix, the result vertices don't hit exact points (-1, -1), (-1, 1), (1, 1), (1, -1) in NDC as I would expect. The actual NDC of the points look more like (-1.00164..., -1.00164...) etc. This causes texture on quad A to be just a little bit stretched which is why it doesn't match texture on quad B.

To "fix" for this issue I changed coordinates of quads A and B to NDC and removed multiplication by Cocos2d's projection matrix from vertex shader.