GL ES: Fragment shader optimization

Question

Summary: I get FPS slowdown as soon as I try to tint the sprites (i.e: multiply texture with color in the fragment shader)

Details:

Hardware: iPod touch 4

I am drawing 700 sprites on the screen using glDrawArrays. And yes I am batching all of these in a single draw call. Following shows Vertex data structure:

struct Vertex {
    float Position[2];
    float Color[4];
    float Texture[2];
};

Yes I am sending colour with each vertex because I selectively need to tint some sprites but not others. Following is the fragment shader I am using:

varying lowp vec2 TexCoord;
uniform sampler2D TextureSampler;

void main(void)
{
    gl_FragColor = texture2D( TextureSampler, TexCoord );
}

Till now it is working GREAT, giving me full 60 FPS !!!

BUT

As soon as I change the fragment shader to the following (to allowing tinting):

varying lowp vec4 DestinationColor;
varying lowp vec2 TexCoord;
uniform sampler2D TextureSampler;

void main(void)
{
    gl_FragColor = texture2D( TextureSampler, TexCoord ) * DestinationColor;
}

Using following 64x64 png texture containing alpha channel, rendering with glEnable(GL_BLEND):

The performance drops to 47 FPS only due to this single change {just by multiplication with ONE vector} (FPS measured using xcode instruments and OpenGL detective). Any ideas what is going on ?

Thanks.

Edit:

I've also tried stripping off per vertex color attribute:

struct Vertex {
    float Position[2];
    float Texture[2];
};

And modifying the fragment shader as follows:

precision lowp float;
varying lowp vec2 TexCoord;
uniform sampler2D TextureSampler;

void main(void)
{
    gl_FragColor = texture2D( TextureSampler, TexCoord ) * vec4(1.0,0.0,0.0,1.0);
}

It is running at 52 FPS for 700 sprites (a gain of only 5 FPS). So this is not interpolation, seems like the multiplication is extremely expensive. Just this ONE multiplication?

Answer 1

I don't think the performance problem is happening on the multiplication, but on the interpolation of your DestinationColor across the triangles, between vertex and fragment shaders. You have four floats to interpolate between tree vertices, for each fragment for each sprite.

For 700 sprites 64x64 pixels each, this is 11468800 additional operations per frame that you're asking the GPU to perform. It's quite possible that you will be missing some vsyncs, and therefore dropping to 40-ish FPS.

If you want each vertex to have a different color, so you can have gradients for each sprite, you're out of luck. There's also some other tricks you may want to try, but I think this is not the case.

Since what you seem to be doing is tinting each sprite, you could demote your DestinationColor to a uniform, use it directly in the fragment shader, and change it for each call. That way no interpolations will take place. You will lose the entire batching, but you may be able to batch a bit if you sort them by color.