Geek asks and answers

Best practice for rounded rectangles in OpenGL ES

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

  • Manually draw a shape using a trigger. (This is what I am doing now.)
  • Use a texture or group of textures that scale accordingly, such as 9-Slice Scaling

The problem with the first option is that anti-aliasing does not come for free, and if you are aimed at compatibility with a wide range of devices, you can not rely on recommendations for anti-aliasing OpenGL for the actual work with the equipment. Thus, you are left with steep rectangular rectangles, especially for small ones, and the overhead of making another call to the vertex array. I would like to give it up

The second option (9-Slice or 9-Patch), apparently, is a go-to method for elements with a rounded rectangle UI, but there is unexpectedly little information about the implementation of 9-fix in OpenGL ES.

I would like to: an efficient strategy for rendering smooth rectangles in OpenGL ES with custom border widths, border colors and fill colors. Any suggestions?

+5
source share
1 answer

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

This answer says very well: OpenGL ES iPhone - drawing smooth lines

Just apply transparent vertices to the outer border of your rectangle.

+2
source

More articles:


All Articles