0

I'm having a problem with interpolation on the fragment shader. I'm simply drawing a full-screen quad. The viewport is set to (0, 0, 128, 128).

Each vertex has a texture coordinate.

var textureCoordinates = [
    0.0, 1.0,
    1.0, 1.0,
    0.0, 0.0,
    1.0, 0.0
];

I pass the texture coordinate from the vertex shader to the fragment shader via varying variable, which works fine.

vTextureCoord = aTextureCoord;

The issue is that the interpolation starts from 0+halfpixel and ends on 1-halfpixel. Half pixel is (1/128) * 0.5.

I want the interpolation to start from 0 and end on 1. This is because vTextureCoord will be used as an input to a noise function that I have on the fragment shader.

The MAG and MIN filters are both set to NEAREST.

WRAP_S and WRAP_T are set to CLAMP_TO_EDGE.

Please note that the texture coordinate attribute is not a mandatory, it's just my way to interpolate a number from 0 to 1. If there's a simpler way to interpolate a number from 0 to 1 on the fragment shader using something else than an attribute then I'd love to know how!

I've tried to offset the texture coordinates by half pixel, but it doesn't seem to work as I expected.

I also tried to subtract half pixel on the fragment shader, but then the interpolation doesn't end at 1.

newTextureCoord = vTextureCoord - (1.0 / 128.0) * 0.5;

Any tips, comments or feedback are much appreciated!

  • Are you also passing vertex coordinates? You should be passing the vertex coordinates to the vertex shader as a 3 component array (declared as vec4 in the vertex shader) and the texture coordinates as a 2 component array (declared as vec2 in the vertex shader). For Wrap_S and Wrap_T, I use GL_CLAMP for this kind of a texture. – jwlaughton Dec 28 '14 at 11:07
  • Yes I'm also passing the vertex coordinates, everything is being drawn correctly. It's just the interpolation that is not behaving as I need. var noiseVertices = [ -1.0, 1.0, 0.0, 1.0, 1.0, 0.0, -1.0, -1.0, 0.0, 1.0, -1.0, 0.0 ]; – raRaRa Dec 28 '14 at 11:26
  • Then maybe the GL_CLAMP for WRAP_S and WRAP_T is the answer. – jwlaughton Dec 28 '14 at 11:28
  • Oops, I see You're doing that. – jwlaughton Dec 28 '14 at 11:29
  • 1
    Actually I see not quite. I looked at some of my old code and I was using GL_CLAMP, not GL_CLAMP_TO_EDGE (as you are). There is a slight difference between these two enums that has to do exactly with the kind of problem you're having. – jwlaughton Dec 28 '14 at 11:34
3

Without multisampling techniques, a fragment will always be sampled at the pixel center. The behavior you see is the intended behavior.

The texture sample parameters you mention do not influence interpolation at all. They have an effect only when sampling from a texture using the texture() family of GLSL functions.

You are right in your comment that shifting the texcoords by half a pixel is not enough, and you'll also need a scale. What you want is a mapping with f(0.5/128)=0 and f(127.5/128)=1. This is of course a simple linear transform f(x)=(128/127)*x - 1/(2*127), which you can apply to the vertex coords so that you won't have any runtime overhead, at least if your viewport size is constant.

|improve this answer|||||
1

The way texture coordinates are applied, 0 corresponds to the left edge of the first texel, and 1 to the right edge of the last texel. With a size of 128, the first texel spans the texture coordinate range from 0 to 1/128, with the center at 0.5/128. The last texel spans the range 127/128 to 1, with the center at 127.5/128.

If you want to have the center of the first/last texels at the edges, you need to adjust your texture coordinates accordingly, by adding the width of half a texel at the left edge, and subtracting the same amount at the right edge:

var textureCoordinates = [
    0.5 / 128.0, 127.5 / 128.0,
    127.5 / 128.0, 127.5 / 128.0,
    0.5 / 128.0, 0.5 / 128.0,
    127.5 / 128.0, 0.5 / 128.0
];
|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.