WebGL tiling from texture atlas

Question

I have map tiles (256px x 256px) stored in a texture atlas and want to select a tile and draw it with the adjacent 8 tiles around it. My texture atlas is something like this (named the tiles 1-9 for simplicity):

I already have a setup to make the texture atlas. The tiles are stored in a random available location and I can get the texture coords from the tile coords. E.g. texCoords for tile 5 could be: [{x: 0.00030517578125, y: 0.00018310546875}, {x: 0.01593017578125, y: 0.01580810546875}]

This works fine for drawing a single tile, but now I want to draw with the adjacent tiles, so 9 tiles to a framebuffer like this:

I am using regl if that matters, but the main part I am struggling with is how to set up the shaders. I will always just draw 9 tiles to a 768 x 768 framebuffer. I can send the texture atlas and 9 uniforms with the texCoords for the tiles, but where do I go from there? I could probably figure out how to do it with 9 draw calls, but can it be done with only 1 draw call?

I would really appreciate any feedback.

Answer 1

I originally was drawing a single tile with the triangle strip primitive and 4 vertex positions. I could not get this to work properly when extending to 9 tiles. I now understand that it was because there would only be one texCoord for each vertex, which would not work when the texture for each tile was in random positions. I guess I could use degenerate triangles somehow?

I changed to drawing with triangles primitive which made it much simpler. I now give 54 vertex positions and texCoords and it now works as required. There might be better ways to do this, but it works for me.