Can you dynamically set which texture to use in-shader?

Question

I'm working on a user interface system, and I want to be able to mix textured polies with frag-coloured polies. Here's my shader code, that doesn't work:

attribute vec2 vertex_coords;
attribute float texid;
attribute vec4 fragdetails;

varying float usingtex;
varying vec4 v_fragdetails;

void main(){
    gl_Position =  gl_ModelViewProjectionMatrix * vec4(vertex_coords,0.0,1.0);

    usingtex = texid;
    v_fragdetails = fragdetails;
}

Fragment:

varying float usingtex;
varying vec4 v_fragdetails;

uniform sampler2D thetexture;

void main() {
    if (usingtex != 0.0){
        thetexture = int(usingtex);
        gl_FragColor = texture2D(thetexture, vec2(v_fragdetails[0], v_fragdetails[1]));
    } else {
        thetexture;
        gl_FragColor = v_fragdetails;
    }
}

Frag_details consists of either [r, g, b, a] for a coloured poly, with texid set to 0, or [texture x, texture y, 0, 0] for a textured one.

However, samplers must be uniform, and uniforms can't be modified. So how on earth would I swap between textures in one draw? Do I have to set them all up as uniforms and then pick from those? I'd have to use an array, and know the length, which isn't really practical for a UI system where buttons will be clicked, tabs changed, and so on.

Is there a way to do this?

Answer 1

One way to do this is to make a texture atlas: a single large image that contains all the icons or textures you'd ever want to draw. You'd have some data structure keeping track of where each icon is in the atlas, and set up UVs appropriately when you generate the geometry. Then you can do the whole thing with one texture/sampler and one draw call.

If you include glyphs in the texture atlas as well, you can do all your text rendering using this system too.

To handle solid-colored polygons, you could write the shader to multiply the texture by a vertex color. Include a 1x1 white pixel someplace in the atlas and set up the UVs to use that for polygons that should be solid-colored; similarly, ensure the vertex color is set to white for any textured polygons. This does mean your vertex data has to include both color and UVs for every vertex.

Another possibility is to split things into multiple draw calls. You'd have a solid-color shader and a textured shader, with one draw call for solid colors plus one for each texture. You'd have a vertex buffer for each of these cases and while generating geometry, add each polygon to the appropriate vertex buffer.

One issue with this is that you won't have full control over the draw order. You couldn't have a solid-colored poly over a textured poly over another solid-colored poly, for instance. For UI this is a pretty big issue, so I'd go with the atlasing approach, which will ensure everything gets drawn in the order you specify.

Answer 2

For OpenGL 3.0+, an alternative to a texture atlas is a texture array, using sampler2DArray in GLSL. These are created similarly to 3D textures: glTexImage3D(GL_TEXTURE_2D_ARRAY...), followed by glTexSubImage3D(GL_TEXTURE_2D_ARRAY...) to actually fill the texture data. For pre-3.0 openGL, there is at least one extension of similar functionality (EXT_texture_array), but I don't know how good it is or on what GPUs it works.

Texture arrays have some advantages over atlases, mainly you don't have to pack them and you don't have interpolation issues at edges of textures. You can use multiple textures in the shader because your texture coordinates become three-dimensional (UV + texture id). A texture array will probably waste more space if your textures aren't of similar size, though.

Answer 3

I came up with the following solution, if you really need access to multiple samplers in a FOR loop. this even works with OpenGL ES 1.0! as you only can define 32 samplers maximum it is feasible i think.

uniform sampler2D tex[32];
vec4 c = vec4(0.0,0.0,0.0,1.0);

vec4 getColor(float i, float x, float y) {
    int ii = int(i);
    if(ii==0){c = texture2D(tex[0], vec2(x, y));}
    if(ii==1){c = texture2D(tex[1], vec2(x, y));}
    if(ii==2){c = texture2D(tex[2], vec2(x, y));}
    if(ii==3){c = texture2D(tex[3], vec2(x, y));}
    //...
    return c;
}

//in main in for loop with increment i:
//where as x and y are your coords.
vec4 color = getColor(i,x,y);