2

I am trying to draw a border around an image that is rendered using OpenGL on an Android and iOS app. The way I do it now is that I specify the 3 vertices around each corner of the image as shown in the diagram and fill them up by drawing triangles.

image link

The way I compute these vertices is by adding/subtracting an absolute value called BORDER_WIDTH that is set to a float. For example, the 3 vertices around the left corner of the rendered image (marked as 0,1,2 in the image linked above) are computed as follows.

[bottom_left_viewport_vertex[0] - BORDER_WIDTH, bottom_left_viewport_vertex[1], 0.0f,
bottom_left_viewport_vertex[0] - BORDER_WIDTH, bottom_left_viewport_vertex[1] - BORDER_WIDTH, 0.0f,
bottom_left_viewport_vertex[0], bottom_left_viewport_vertex[1] - BORDER_WIDTH, 0.0f]

This method causes 2 problems:

  1. The border is way thicker on iOS devices compared to Android devices probably because of the Retina display.
  2. The width of the border on the top and the bottom of the image is different from that on the sides of the image.

What is the right way to solve such a problem? Thank you.

Rabbid76
  • 202,892
  • 27
  • 131
  • 174
pendingIntent
  • 45
  • 5
  • Are you searching for something like [OpenGL Line Width](https://stackoverflow.com/questions/3484260/opengl-line-width/59688394#59688394)? – Rabbid76 May 28 '20 at 16:38
  • Thanks @Rabbid76 for your help. I am an OpenGL newbie and still have to understand your method fully and adapt it to what I have. But first I'm going to try what solidpixel suggested to see if I can get it to work. – pendingIntent May 28 '20 at 23:30

1 Answers1

1

The border is way thicker on iOS devices compared to Android devices probably because of the Retina display.

Determine the DPI using DisplayMetrics, and adjust your BORDER_WIDTH value as appropriate.

The width of the border on the top and the bottom of the image is different from that on the sides of the image.

Viewport coordinates are between zero and one, regardless of aspect ratio. If you're not correcting for aspect ratio, then everything is going to get scaled by that.

Alternatively, you are doing calculations assuming pixels are square. They usually aren't.

solidpixel
  • 10,688
  • 1
  • 20
  • 33
  • Hi @solidpixel. I'm still not clear how I can correct for aspect ratio, as you mentioned above. Could you provide some hints please. – pendingIntent May 31 '20 at 22:05
  • Clip-space vertex coordinates out of the vertex shader are between -1 and 1 in the viewport. If you apply the same increment of "border width" applied in clipspace, that will get scaled by the viewport size to generate pixel coordinates. Unless your viewport is square, applying the same clip-space increment to each vertex won't work. – solidpixel Jun 01 '20 at 09:09
  • It's not entirely clear how you are setting this up - you only posted an incomplete code extract with no context. – solidpixel Jun 01 '20 at 09:09