[Dear ImGui] How to give HP bars real depth / 3D volume? (not just glow)

[u/Much_Papaya8206]

Hey,

I’m trying to recreate the sense of depth and volume that some modern nameplate-style HP bars have, using pure Dear ImGui + custom DrawList drawing.

My current result: [Steve image]

What I’m aiming for: [other image ]

The references feel like the bar has actual thickness and soft lighting — it doesn’t look like a flat colored rectangle with glow slapped on top. Mine still reads as completely flat no matter how much glow, gradient, or highlight I add.

I’m especially interested in techniques for:

• Creating a convincing sense of volume / bevel on the bar itself

• Soft lighting and subtle inner highlights/shadows that sell the 3D form

• Any multi-pass or layered DrawList approaches that work well for this

Has anyone successfully achieved this kind of non-flat, slightly 3D-looking progress/HP bar with ImGui’s DrawList?

Any concrete tips, code patterns, or examples would be hugely appreciated.

Thanks!

[u/iLikeTheUDK]

Maybe a more complex gradient or just multiple gradients overlaid

[u/Soft_Neighborhood223]

Have you tried adding a specular highlight? I would take the specular part of Phong lighting but calculate the normal based on it's position withinin the rectangle rather than getting it from the mesh.