Wrapping texture co-ordinates on a variable-size quad?

Question

Here's my situation: I need to draw a rectangle on the screen for my game's Gui. I don't really care how big this rectangle is or might be, I want to be able to handle any situation. How I'm doing it right now is I store a single VAO that contains only a very basic quad, then I re-draw this quad using uniforms to modify the size and position of it on the screen each time.

The VAO contains 4 vec4 vertices:

0, 0, 0, 0;
1, 0, 1, 0;
0, 1, 0, 1;
1, 1, 1, 1;

And then I draw it as a GL_TRIANGLE_STRIP. The XY of each vertex is it's position, and the ZW is it's texture co-ordinates*. I pass in the rect for the gui element I'm currently drawing as a uniform vec4, which offsets the vertex positions in the vertex shader like so:

vertex.xy *= guiRect.zw;
vertex.xy += guiRect.xy;

And then I convert the vertex from screen pixel co-ordinates into OpenGL NDC co-ordinates:

gl_Position = vec4(((vertex.xy / screenSize) * 2) -1, 0, 1);

This changes the range from [0, screenWidth | screenHeight] to [-1, 1].

My problem comes in when I want to do texture wrapping. Simply passing vTexCoord = vertex.zw; is fine when I want to stretch a texture, but not for wrapping. Ideally, I want to modify the texture co-ordinates such that 1 pixel on the screen is equal to 1 texel in the gui texture. Texture co-ordinates going beyond [0, 1] is fine at this stage, and is in fact exactly what I'm looking for.

I plan to implement texture atlasses for my gui textures, but managing the offsets and bounds of the appropriate sub-texture will be handled in the fragment shader - as far as the vertex shader is concerned, our quad is using one solid texture with [0, 1] co-ordinates, and wrapping accordingly.

*Note: I'm aware that this particular vertex format isn't neccesarily useful for this particular case, I could be using vec2 vertices instead. For the sake of convenience I'm using the same vertex format for all of my 2D rendering, and other objects ie text actually do need those ZW components. I might change this in the future.

TL/DR: Given the size of the screen, the size of a texture, and the location/size of a quad, how do you calculate texture co-ordinates in a vertex shader such that pixels and texels have a 1:1 correspondence, with wrapping?

Do you even need per-vertex texture coordinates? You could just calculate each fragment's texture coord by its position in world space. — Kos
Indeed, at this point it's mostly out of laziness, I'm using that same Vertex2D format elsewhere which does need per-vertex texcoords. I'll probably change this code to use vec2's sometime in the future, but it's not neccesary right now. — Haydn V. Harach

derhass derhass · Accepted Answer · 2014-08-21T13:14:38

That is really very easy math: You just need to relate the two spaces in some way. And you already formulated a rule which allows you to do so: a window space pixel is to map to a texel. Let's assume we have both vec2 screenSize and vec2 texSize which are the unnormalized dimensions in pixels/texels.

I'm not 100% sure what exactly you wan't to achieve. There is something missing: you actaully did not specify where the origin of the texture shall lie. Should it always be but to the bottom left corner of the quad? Or should it be just gloablly at the bottom left corner of the viewport? I'll assume the lattter here, but it should be easy to adjust this for the first case.

What we now need is a mapping between the [-1,1]^2 NDC in x and y to s and t. Let's first map it to [0,1]^2. If we have that, we can simply multiply the coords by screenSize/texSize to get the desired effect. So in the end, you get

vec2 texcoords = ((gl_Position.xy * 0.5) + 0.5) * screenSize/texSize;

You of course already have caclulated (gl_Position.xy * 0.5) + 0.5) * screenSize implicitely, so this could be changed to:

vec2 texcoords = vertex.xy / texSize;

Wrapping texture co-ordinates on a variable-size quad?

1 Answers