5

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?

khiner
  • 673
  • 8
  • 19
  • 3
    For the first option you can make antialiasing work by adding a thin border along the mesh. The vertices on the outside of the mesh have an alpha of 0 and the vertices inside an alpha of 1. If you modulate the color of your rounded rect by the alpha varying you'll get AA. – Romain Guy Apr 04 '13 at 21:21
  • Any code samples or resources for how to use this method for arbitrary curved lines? – khiner Apr 04 '13 at 22:04
  • Check the answers in the http://stackoverflow.com/questions/19560575/draw-a-rounded-rectangle-using-a-single-gldrawelement-triangle-strip-call-i/19782207#19782207 Hope it will be useful. – Arun AC Nov 05 '13 at 05:19

1 Answers1

2

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.

Community
  • 1
  • 1
eonil
  • 83,476
  • 81
  • 317
  • 516