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.