# OpenGL Drawing Sprites using Instancing - Can someone explain this behaviour?

## Recommended Posts

My idea was to use instancing to display multiple sprites using the same texture, but with different modelView matrices applied to them and using different frames of a sprite sheet if appropriate.

The basic idea being:

1. Load texture, set some things up with the sprite sheet.

2. Set up a sprite to be drawn by adding a textured quad to a VBO by passing the position etc. and sprite sheet index to a function.

3. Call a draw function once to draw all of the added sprites at once.

Now, I got to the point where I could draw 1 sprite no problem, or many sprites as long as I called the function with glDrawArrays() right after adding another quad.

But when I added more than 1, a problem occurred with the texture. I then figured out that what seemed to be happening was that all of the sprites were being drawn with the same texture, which appeared to be a combination of all of the intended sprites. i.e. Right now I'm testing it with a bitmap font, and if I tried to draw 3 sprites with the letters A, B and C, I'd get all 3 quads with the same texture, which would appear to be the A, B and C images superimposed over each other in some way. I'm using transparency BTW, so any non-letter area of the sprite is transparent, hence how I can see through.

Now... after looking at the code and thinking about it, I'm pretty sure I understand why that's happening; simply because I set up the modelView matrix (the positions are all working perfectly) using glVertexAttribDivisor() and put in the texture coordinates as normal, therefore meaning that all vertices in a single draw call have the same texture coordinates, yes?

HOWEVER, while I assume that if I simply set up the texture coords in the same way, it would start to work as desired (and I've always realized as a result that the vertex coord code should probably be cleaned up a bit)... I can't actually quite get my head around just WHY this is happening, and I'd really like to find out before going forward.

The setup is:

- Every time I call the addQuad() function, the texture coordinates for that sprite are calculated using the sprite sheet index, then the vertices and tex coords are added to a VBO thus:

for( int i = 0; i < 6; i++ )
{
vbo.addData( &vertices[i], sizeof( glm::vec3 ) );
vbo.addData( &texVerts[i], sizeof( glm::vec2 ) );
}

Where vbo is an instance of a class that wraps a vertex buffer object, and addData places data sequentially in an internal byte array before the call of glBufferData() which occurs when drawSprites() is called.

There are 6 vertices and tex coords because I'm drawing 2 triangles without indices.

- In the drawSprites() function, after the call to glBufferData(), I set up the vertex attributes:

//Vertex positions
glEnableVertexAttribArray( 0 );
glVertexAttribPointer( 0, 3, GL_FLOAT, GL_FALSE, sizeof( glm::vec3 ) + sizeof( glm::vec2 ), 0 );

//Texture coordinates
glEnableVertexAttribArray( 1 );
glVertexAttribPointer( 1, 2, GL_FLOAT, GL_FALSE, sizeof( glm::vec3 ) + sizeof( glm::vec2 ), reinterpret_cast<void*>( sizeof( glm::vec3 ) ) );

As you can see, the buffers contains a vec3 for a vertex position, followed by a vec2 for texture coordinates, repeating for as many vertices as there are.

The start of the vertex shader looks like this:

#version 330

uniform mat4 projMatrix;

layout (location = 0) in vec3 inPosition;
layout (location = 1) in vec2 inCoord;
layout (location = 2) in mat4 modelView; //(Takes up locations 2-5)

out vec2 texCoord;

Where inCoord is the texture coordinate input and it's just later passed to the fragment shader by the texCoord out variable, where it is then sampled using texture2D().

Like I said, it all works when 1 quad is used, so I assume there aren't any fundamental errors here.

f there are 2 quads, say, that would mean 6*2 = 12 vec2 structures in the VBO (or 24 floats). Because I'm trying to draw multiple objects with 1 draw call and the texture coordinates aren't properly set up for this, that means I'm applying all of these to just 6 vertices for every quad.

I assume what's happening is, one sprite is being applied to the texture, and then another is being applied later on top of it, resulting in the garbled image I'm seeing.

But HOW exactly is that happening? What are the stages it's all going through? I would have thought that the data in the buffer would be traversed sequentially and the result would be that each vertex would be paired up with the correct texture coordinates, would would be sampled to apply the texture to that vertex's location on screen... not resulting in what I've been seeing here. But somehow, even the texture coordinates at the end of the buffer wind up influencing the texture that is applied to the vertex at the very start of the buffer.

I'm sure it's just something simple I'm missing about how these things work, but I just can't quite make sense of it, even though I see that it kind of makes sense when I consider that all quads must have the same texture coordinates.

Is the texture colour applied in more than 1 pass? Does OpenGL maybe deal with all of the vertex positions first (i.e. the vertex shader, though even when the first vertex position is passed in, so is its texture coordinate pair), create the areas on screen that are to be drawn to, then texture over them with the first set of texture coordinates (i.e. applies the first quad's texture to every quad), then eventually comes to the last sprite's texture coordinates and applies those over every quad again?

That must be how it works, but I never thought it worked like that. I'd imagined it much more... parallel or something. But maybe I just never quite thought too hard about it.

Sorry if I've rambled, but I've just been struggling to try and understand this.

##### Share on other sites

Also, am I right in thinking that attributes using glVertexAttribDivisor() need their own buffer? Or can they also be in a buffer along with other attributes with the same divisor setting?

##### Share on other sites

I did something similar a while back. For starters, I used an array texture instead of a sprite sheet. Next I found out that you don't even need to use a VBO when you are using core profile. Simply bind a VAO and then do nothing else. You can put the vertex coordinates in an array inside your vertex shader and index it using gl_VertexID. Next you set up a UBO/SSBO which contains your transformation matrices and the sprite texture index for each sprite. You index these arrays using gl_InstanceID and you are done.

##### Share on other sites

I did something similar a while back. For starters, I used an array texture instead of a sprite sheet. Next I found out that you don't even need to use a VBO when you are using core profile. Simply bind a VAO and then do nothing else.

Isn't that deprecated though? I've definitely heard of something along those lines, but I think people said it wasn't the modern way of doing things.

I have my VBOs all set up now anyways...

Now I've tried changing the glVertexAttribDivisor for the texture coordinates and realized something obvious: It isn't going to work if I change the divisor to only change after each quad is rendered, because that would obviously result in every vertex having the same texture coordinates and causing nothing to be rendered >_<

So I think what I actually need is to pass in some form of information and use that to alter the texture coordinates in the shaders.

i.e. My texture coordinates are currently set up like this:

const float offsetPixX = 0.01f / ( float ) texWidth;
const float offsetPixY = 0.01f / ( float ) texHeight;

const float tw = ( float( spriteWidth ) )/ ( float ) texWidth; //Width of sprite relative to texture
const float th = ( float( spriteHeight ) )/ ( float ) texHeight; //Height of sprite relative to texture
const int numPerRow = texWidth / spriteWidth;
const float tx = ( ( float )( frameIndex % numPerRow ) )* tw; //X texture coordinate
const float ty = ( ( float )( frameIndex / numPerRow ) )* th; //Y texture coordinate

glm::vec2 texVerts[] =
{
glm::vec2( tx + offsetPixX, ty + offsetPixY ),
glm::vec2( tx + tw - offsetPixX, ty + offsetPixY ),
glm::vec2( tx + tw - offsetPixX, ty + th - offsetPixY ),

glm::vec2( tx + tw - offsetPixX, ty + th - offsetPixY ),
glm::vec2( tx + offsetPixX, ty + th - offsetPixY ),
glm::vec2( tx + offsetPixX, ty + offsetPixY ),
};

The key values that must change per vertex being:

const float tx = ( ( float )( frameIndex % numPerRow ) )* tw; //X texture coordinate
const float ty = ( ( float )( frameIndex / numPerRow ) )* th; //Y texture coordinate

Where frameIndex is.

However, I really don't know how to do that...

While the tex coords in the shaders are a simple vec2 and I assume it's easy to access both elements of a vec2 from a shader, I'm not sure how to go about setting them to the right values...

Hmmm... should I in fact just replace the tx and ty values in my current tex coords with 0, then input the frameIndex and numPerRow values as uniforms, and use those to calculate the value to add to every 1st and 2nd component of the texture coordinate vec2 sent to the shader...?

I think that's a reasonable plan... if no one can see any holes in it...

EDIT: Oh, and for that to work, I'd also have to pass in the tw and th values... those being the width of the area I want to sample relative to the whole texture.

EDIT2: I'm actually not sure anymore if what I said made any sense... I can't quite grasp what I was thinking anymore and why I thought it would be different to just calculating them outside the shaders and passing them in...

There must be examples of this somewhere... or can anyone give me a clue of where to start?... I think I've been looking at the same problem for too long...

EDIT3: I think I have it again... the texture coordinates need to change similarly to how I have the ModelView matrix successfully working differently with each sprite. The only different here is that there are 6 texture coordinates per quad... and the ModelView matrix works by applying the same matrix to the 6 vertices of each quad. If I could figure out the offset I need for a particular quad's texture coordinates, then I could make that the same kind of attribute that varies once for every 6 vertices, and just apply it to each texture coordinate before being passed to the fragment shader.

Whew, I think I have that right.

Edited by Sean_Seanston

##### Share on other sites

Isn't that deprecated though?

Is what deprecated? Rendering with a "blank" VAO bound? It's the opposite. This can only be done in core profile OpenGL, if you try this in compatibility mode you will get undefined behavior.

layout(std140, binding = 0) readonly buffer matrix_buffer
{
mat4 matrix[];
};

layout(packed, binding = 1) readonly buffer texid_buffer
{
int texid[];
};

const vec2 position[4] = vec2[]
(
vec2(-1.0,  1.0),
vec2(-1.0, -1.0),
vec2( 1.0,  1.0),
vec2( 1.0, -1.0)
);

out vec3 tex_coord;

void main()
{
vec2 pos = position[gl_VertexID];

tex_coord = vec3(pos * 0.5 + 0.5, texid[gl_InstanceID]);

gl_Position = matrix[gl_InstanceID] * vec4(pos, 0.0f, 1.0);
}
layout(binding = 0) uniform sampler2DArray textures;

in vec3 tex_coord;
out vec4 frag_color;

void main()
{
frag_color = texture(textures, tex_coord);
}

I was using SSBOs but you could use UBOs instead if you need to.

Edited by Chris_F

##### Share on other sites

Isn't that deprecated though?

Is what deprecated? Rendering with a "blank" VAO bound? It's the opposite. This can only be done in core profile OpenGL, if you try this in compatibility mode you will get undefined behavior.

Come to think of it... I think I might actually have been thinking of rendering without a VAO, rather than without a VBO. Nvm.

Interesting... I haven't looked into SSBOs yet. Is there any real advantage for most things apart from avoiding the hassle of setting up VBOs?

##### Share on other sites

The advantages of SSBO are enumerated here. If you are using GL 4.3+ then they are available.

## Create an account

Register a new account

• ## Partner Spotlight

• ### Forum Statistics

• Total Topics
627661
• Total Posts
2978496
• ### Similar Content

• Both functions are available since 3.0, and I'm currently using glMapBuffer(), which works fine.
But, I was wondering if anyone has experienced advantage in using glMapBufferRange(), which allows to specify the range of the mapped buffer. Could this be only a safety measure or does it improve performance?
Note: I'm not asking about glBufferSubData()/glBufferData. Those two are irrelevant in this case.
• By xhcao
Before using void glBindImageTexture(    GLuint unit, GLuint texture, GLint level, GLboolean layered, GLint layer, GLenum access, GLenum format), does need to make sure that texture is completeness.
• By cebugdev
hi guys,
are there any books, link online or any other resources that discusses on how to build special effects such as magic, lightning, etc. in OpenGL? i mean, yeah most of them are using particles but im looking for resources specifically on how to manipulate the particles to look like an effect that can be use for games,. i did fire particle before, and I want to learn how to do the other 'magic' as well.
Like are there one book or link(cant find in google) that atleast featured how to make different particle effects in OpenGL (or DirectX)? If there is no one stop shop for it, maybe ill just look for some tips on how to make a particle engine that is flexible enough to enable me to design different effects/magic
let me know if you guys have recommendations.
• By dud3
How do we rotate the camera around x axis 360 degrees, without having the strange effect as in my video below?
Mine behaves exactly the same way spherical coordinates would, I'm using euler angles.
Tried googling, but couldn't find a proper answer, guessing I don't know what exactly to google for, googled 'rotate 360 around x axis', got no proper answers.

References:
Code: https://pastebin.com/Hcshj3FQ
The video shows the difference between blender and my rotation:

• By Defend
I've had a Google around for this but haven't yet found some solid advice. There is a lot of "it depends", but I'm not sure on what.
My question is what's a good rule of thumb to follow when it comes to creating/using VBOs & VAOs? As in, when should I use multiple or when should I not? My understanding so far is that if I need a new VBO, then I need a new VAO. So when it comes to rendering multiple objects I can either:
* make lots of VAO/VBO pairs and flip through them to render different objects, or
* make one big VBO and jump around its memory to render different objects.
I also understand that if I need to render objects with different vertex attributes, then a new VAO is necessary in this case.
If that "it depends" really is quite variable, what's best for a beginner with OpenGL, assuming that better approaches can be learnt later with better understanding?

• 10
• 12
• 22
• 13
• 33