Opengl ES texture rendering concept

Question

I am planning to write a simple 2D platformer in Javascript where each frame will be drawn with different (textured) tiles. Here are my questions:

How do I render different rectangles / quads with different textures? I mean do I write a separate fragment shader for rock tiles and grass tiles, and do I keep the vertex data for each type of tile in a separate buffer? I want to put all my tile vertex data in one buffer, but how do I specify that THIS tile is a grass tile which must get THAT grass texture?
How big can my textures be when I bind them to a texture unit?

Tim Tim · Accepted Answer · 2012-09-20T18:30:33

How do I render different rectangles / quads with different textures?

You've got two choices:

Create a texture for each kind of tile (grassTex and rockTex) for example. Then when you draw your scene, bind the appropriate texture before drawing all the tiles of a certain type, e.g.
```
glBindTexture(..., grassTex); 
drawAllGrasstiles();
glBindTexture(..., rockTex); 
drawAllRocktiles();
```
Use what's known as a 'sprite sheet', in which you pack all your different textures in a grid into a larger texture. So you might have one texture, in which the left half of the texture is grass, and the right half of the texture is rock. Then you can draw all your grass and rock tiles together in the same batch, and you use the texture coordinates to differentiate which part of the texture is drawn. Now instead of all your tiles having texture coordinates from 0 to 1, they are from 0 to 0.5 for grass, and from 0.5 to 1.0 for rock.

How big can my textures be when I bind them to a texture unit?

This is implementation dependent. Call glGet with GL_MAX_TEXTURE_SIZE to query the implementation limit.