What's the best practice for a progress bar in OpenGL ES 2.0?

Question

My attempt: I make a texture (could be a single colour or otherwise), and then stretch that texture from a minimum 0 up to a maximum max value. This works, but leaves me rather dissatisfied for a number of reasons, one of which being:

• If I want rounded corners as the bar progresses, the edges are squashed or stretched.

My question: What is the best practice to achieve a progress bar result.

Thoughts: Is there a way to stop openGL from drawing anything from a certain x value onwards of a texture? That way I could draw the texture as it should appear, but specify the value of x.

I have found this potentially useful link.

Update

I get the impression that using the stencil buffer might be the way to go. The stencil buffer allows to define any region you like through which other rendered geometry can be clipped. Apparently there are many other uses for the stencil buffer, e.g. reflections.

Possible Solution

I ultimately achieved what I wanted using the stencil buffer combined with my own shader, since OpenGL ES 2.0 does not support glAplhaTest and related functions. Here's an image of the result:

The texture drawn to the stencil buffer was an elongated rectangle with rounded corners. The texture drawn to the image buffer was just a stretched red rectangle, which as you can see is clipped to the stencil contents. You need to write your own shader to deal with the alpha channel since OpenGL ES 2.0 does not support the glAplhaTest and related functions.

Note - perhaps this isn't the best image example. In fact the presented solution allows you to progressively reveal the left and right caps, which I unfortunately didn't demonstrate in the above image.

Answer 1

No need to bring in additional entities, KISS

Just render the progress bar out of three parts - left cap, right cap and the body. Schematic:

 {left cap] [body] [right cap}

Left and Right caps are usually always the same - half-circles with transparency. The body texture needs to be stretchable without noticeable effects.

Left and Right caps usually get rendered irregardless, and the required percentage is shown with body width. So e.g. 0% could be an empty bar, 1% is caps with body of 0 width.

Further reading for stretching without distortions in both axis: google for "nine-patch button".

Answer 2

There are a few ways to do this.

This is the solution described by poirot:

I ultimately achieved what I wanted using the stencil buffer combined with my own shader... The texture drawn to the stencil buffer was an elongated rectangle with rounded corners. The texture drawn to the image buffer was just a stretched red rectangle, which as you can see is clipped to the stencil contents.

You could instead use three instances of geometry; one half circle for each end and one rectangle stitched in between. Note how this does not require custom shader or stenciling. (This solution appears to be the same as suggested in comments by wondra.) This solution is my favorite for a number of reasons.

One note about stencil buffer it can be multisampled yielding anti-aliasing for a full frame without application intervention. Alpha testing (shader or not) however is a fragment operation which is not multisampled. If you combine the two stencil buffer never truly multisamples; all samples are treated equally, thus no anti-aliasing.

Answer 3

In the end I just made use of the fact that OpenGL lets you map any part of a texture to your vertices. So, suppose you have a texture with three hearts in a row, of width 300 and height 80 say, and you only want to show two-thirds on screen. Then you would map texture (0, 0, 200, 80) to your vertices, but make sure your vertices are also reduced accordingly. Saves messing around with the stencil buffer and is much quicker and elegant. Seems obvious, but back when I thought each sprite had to use a separate texture I couldn't see it !