Tweening Colors in OpenGL

Question

I'm making a sky gradient in OpenGL by drawing with glColorPointer and glDrawArrays. I would like to be able to change the sky colour from morning to daytime to evening etc. I can either:

• Make a number of sprites and fade them in with my framework
• Somehow tween the color vector in openGL over time and use a single sprite

The second one seems like a more efficient option, but my framework doesn't pass the time delta into the draw method for me to decide how far I've progressed into fading.

Here's my current code:

glDisable(GL_BLEND);
glDisable(GL_DITHER);
glDisable(GL_FOG);
glDisable(GL_LIGHTING);
glDisable(GL_TEXTURE_2D);
glShadeModel(GL_SMOOTH);

CGSize size = [[CCDirector sharedDirector] winSize];
float w = size.width;
float h = size.height;

const GLfloat vertices[] = {
    0, 0,
    w, 0,
    0, h/3,
    w, h/3,
    0, h*2/3,
    w, h*2/3,
    0, h,
    w, h,
};

const GLubyte colors[] = {
    254,255,134,255,
    254,255,134,255,
    230,157,0,255,
    230,157,0,255,
    230,60,0,255,
    230,60,0,255,
    167,0,86,255,
    167,0,86,255,
};

glVertexPointer(2, GL_FLOAT, 0, vertices);
glEnableClientState(GL_VERTEX_ARRAY);
glColorPointer(4, GL_UNSIGNED_BYTE, 0, colors);
glEnableClientState(GL_COLOR_ARRAY);

glDrawArrays(GL_TRIANGLE_STRIP, 0, 8);

glDisableClientState(GL_COLOR_ARRAY);
glDisableClientState(GL_VERTEX_ARRAY);

glEnable(GL_TEXTURE_2D);

Which gives me:

Answer 1

I fail to see what's the problem you're having. Update the time of day and tween the colors in the Update method (assuming it has access to the dt) and leave the Draw method only for rendering. I think that's the more logical solution. Also, encapsulate this in some sort of Sky class if you haven't done so already. So I'd definetly stick to the 2nd option. Something like:

class Sky
{
    void Update(float dt)
    {
        // Update timeOfDay based on dt
        // Update colors array based on timeOfDay
    }

    void Draw()
    {
        // Render sprite using current colors
    }

    float timeOfDay;
}

Edit

You wrote on the comments:

The gradient I have defined above is split into sections, but I could conceivably split them into less or more, meaning I would complicate going from 4 colours to 3 colours etc.

So that's where the real problem lies. You should have been more clear about it instead of giving focus to the dt issue. In that case, you could consider using a fragment shader solution, but I think that the first option will be simpler to implement.

In particular, I think it would be a good idea to start by encapsulating the vertex/color generation code in a method that given a simple array of colors, would return the vertex/color arrays required for calling glVertexPointer and glColorPointer. Then use this method to generate each of the gradient sprites, and finally, given the timeOfDay determine which two of these sprites should be interpolated and by what amount. Then draw them on top of each other and interpolate the alpha value so that there's a cross-fade between them.

The alternative that would only require one sprite would be to do the gradient on a fragment shader. The first implementation that comes to my mind would be to pass it two 1D textures where each pixel corresponds to one of the colors of the gradient, along with an interpolation value between 0 and 1 to decide how much to fade between texture A and B. Then just render a single quad, and use the information above to calculate the color at each fragment. I'm not sure but you may also need to pass it either the width of the textures or how many colors there are in each of them in order to calculate the correct texture coordinates from which you should sample. There are probably other solutions though.