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:
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:
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.