1

I'm making a game engine in WebGL. I would like to support many textures and multiple texture sizes. I would also like to support repeating textures multiple times across a single primitive.

This is trivial if I simply bind to a new texture every time I draw something. However, from my understanding this is pretty bad performance-wise. Tiling(repeating) is easy, just make u/v coords 0-2 instead of 0-1 and the texture repeats twice:

const texCoordBufferData = new Float32Array([
  0,2,
  0,0,
  2,2,
  2,0,
]);

Here's a very simple example of that running: https://jsfiddle.net/rlouie/fpug8zm9/43/ The output looks like this:

textures repeating twice

The common solution to performance issues with this is to make a "texture atlas". That's fine, I can make that, and even use it. However, I see no way to make it so I can have my texture repeat. If I don't care about repeating, texture atlas is fine, change my uv coords based on the position in the atlas and I am good.

Here is a very simple example of that running: https://jsfiddle.net/rlouie/zuewdvk0/50/ And here is the output, but you can see no repeating:

no repeating

I have searched for this, and a comment on this question does say you have to handle repeating/clamping yourself: Fastest way to deal with multiple textures in OpenGL?

There is no answer on how to do your own repeating. So, given a texture atlas, how do I do my own repeating? Or if there is just a better way to support multiple textures of multiple sizes with repeating I am open to that.

1 Answer 1

2

So, given a texture atlas, how do I do my own repeating?

As you probably know, repeating using UV coordinates only works by wrapping around the 0..1 range, so it obviously doesn't work for atlas textures.

One solution would be to throw more geometry at the problem, essentially repeating the (probably) quad itself. Another would be to throw more data at your fragment shader, for example you could add two constants (repeatX and repeatY, for example) and do the math in code using a basic modulo operation.

However, I believe you're using the wrong tool for the job. Texture atlases are used for individual UI images, like fonts, buttons, etc. Things that inherently don't repeat. Perhaps texture arrays would be closer to what you want to use, and normal 0..1 UV repeating works with those.

2
  • Okay got it. That last bit of insight there is probably what I needed. Use atlases for non-repeating things. Even something like a character texture or whatever could go there, as it doesn't repeat. But anything that should repeat, do texture array. Thank you!
    – Rob Louie
    Jul 6, 2022 at 2:54
  • 1
    More or less, yeah. When I was writing that I actually thought of a counter-example, dialog backgrounds, the vertical and horizontal repeating parts of the frame that's not corners, they would also probably also be part of an atlas, but you'd need specialized code to handle them, and arrays wouldn't work (since they have different sizes). If I were implementing that, I would definitely go the shader route. But it's good to have choices, and I gave you a few!
    – Blindy
    Jul 6, 2022 at 15:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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