How can I procedurally render irregularly shaped health bars?

Question

The issue of the traditional rectangular or heart-based health bar is something well-understood and easily solved. But what is the accepted solution for more "creatively-shaped" health bars, like the mockup I've made below?

The obvious way to do this would be to have "in-between" sprites, so the third image would be its own sprite, along with many other transitions for different levels of health. But that seems really inelegant and the number of in-betweens needed to create a smooth transition between health states would be large.

The only other idea I can come up with is to overlay the "full health" sprite on top of the "empty health" sprite and pre-bake sets of pixel coordinates to represent each tick of health and then make them opaque or transparent as health goes up or down.

I intend this question to be language and platform agnostic but feel free to provide a concrete sample in any language/library/framework if it helps the answer.

Answer 1

There is a very simple way achieving this with shaders, you need three* textures: empty health bar, health bar texture and mask with gradient of health distribution with one extreme(e.g. darkest not black or most transparent alpha value) on one end and the other on other end. It is best shown on image, I am currently unable do draw curved gradient only linear one - but I am sure your artists wont have any trouble: Now, in shader sample both textures and threshold the mask value, discarding all the pixels which are not brighter than input threshold (based on health % shader input).
You could use mathematical formula for masking instead of a texture, but if you did that, you would be still very limited to shapes you are able(=simple ones) to create with said formulas - and finding one is not trivial.
*see comments

Answer 2

Implemented mathematically, as a pixel shader:

On the CPU, calculate HealthDirection and its' dot product with V2

On the GPU, calculate a normalized direction away from the centerpoint for each pixel. Compare each dot product to HealthDirections' to choose whether to shade "background", or in color.

If you "inverted" this algorithm and worked from the other direction, you could "un-slerp" each pixel's direction back into a percentage and compare them each to HealthPercent, instead. With each pixel's percentage calculated, peforming the fade from red to green on the GPU becomes trivial.

Draw the bar first applying the algorithm to a quad; output colors between rangeMin and rangeMax (could be baked) and clip() or output transparent every where else. Next, draw the (modified) sprite over it, using alpha. I traced your bar in CAD, flood-filled it, then "magic wanded" the solid color shape in Paint to delete it. Mine looks like crap due to mixing AutoCAD and Paint, by hand; assuming you blend the inner edges to transparent, yours will look perfect.

The white border is the limits of the quad. It and the red X's are for reference only:

The "sprite with hole" does not need to be rendered at the same time as the health bar. They should get instanced and drawn all at once, after all the health bars are complete. Since the algorithm is self-contained in the shader, you could also add instancing to it and then, also, draw all of the healthbars with one instanced draw call. Drawing every healthbar on the screen should take 2 DrawInstanced(...) calls and be "crazy fast".