Question

I’m developing a simple 2D-game in OpenGL ES for the iPhone. My problem is that I want to render a texture using different hues. Basically I want to change the hue of the colors in the texture that i render. Simply changing the glColor will not do since it also affects the parts of the image without color. Any ideas?

Answer 1

Thanks for the clarification, it was far from my initial understanding. Note that the texture you supply to OpenGL ES already has a hue, so what you’re asking for is changing the existing hue.

First, let me answer the question as stated:

Let’s start with what needs to happen to the texels. Since OpenGL textures are stored as RGB, to transform the hue of a texel, you need to go RGB->HSL->apply new hue->RGB.
You can find the actual math to do the RGB->HSL and back conversion here. How you want to select the new hue, I suppose you’ll have to fill that out.

The biggest question is when should the transformation happen. Well, the OpenGL pipeline won’t let you do that complex a transformation on reading a texture (not in ES 1.1 anyways -ES 2.0 fragment shaders would help, but at a high cost). So you’ll have to do all the transformations outside of the GL ES texturing pipeline. Depending on how often you need to change the hues, my advice is to either do it offline (and store various themed textures), or compute new textures for the new hues on demand just before loading them to OpenGL ES.

As far as I know, GL ES 1.1 does not have any in-built facility to help do this directly.

Now, taking a step back, I’m not sure what’s prevent you from separating out in 2 textures, if you can live with the 2 textures to apply at runtime. The math I pointed to does separate saturation from lightness no matter how the texture was generated (and in theory, hue should be constant, if I understand your case correctly). Doing the computation offline should be fairly easy on any input texture ?