Best Practice for Rounded Rectangles in OpenGL ES

Question

Using OpenGL ES, there seem to be two viable options for rounded rectangles:

1. Manually draw the shape using trig. (This is what I'm currently doing.)
2. Use a a texture or group of textures that scale appropriately, such as 9-Slice Scaling

The problem with the first option is that antialiasing does not come for free, and if you are aiming for compatibility with a wide array of devices, one can't count on OpenGL antialiasing hints to actually work on the hardware. So you're left with choppy-looking rounded rectangles, especially for small ones, and the performance overhead of making another vertex array draw call. I would like to switch away from this

The second option (9-Slice or 9-Patch) seems to be the go-to method for UI rounded rect elements, but there is surprisingly little information out there about implementing 9-patching in OpenGL ES.

What I would like is: an efficient strategy for rendering antialiased rounded rectangles in OpenGL ES with adjustable border widths, border colors and fill colors. Any suggestions?

Answer 1

What you want is essentially a technique called Edge Anti-Aliasing.

It is described very well in this answer: OpenGL ES iPhone - drawing anti aliased lines

Just apply the transparent vertexes at outmost borderline of your rectangle.