在Android和iOS上的OpenGL中围绕图像绘制恒定宽度的边框答案

【问题标题】：Drawing border of constant width around image in OpenGL on Android and iOS在Android和iOS上的OpenGL中围绕图像绘制恒定宽度的边框
【发布时间】：2020-05-29 07:24:53
【问题描述】：

我正在尝试在 Android 和 iOS 应用上使用 OpenGL 渲染的图像周围绘制边框。我现在这样做的方法是，我指定图像每个角周围的 3 个顶点，如图所示，并通过绘制三角形来填充它们。

我计算这些顶点的方法是添加/减去一个名为 BORDER_WIDTH 的绝对值，该值设置为浮点数。例如，渲染图像左角周围的 3 个顶点（在上面链接的图像中标记为 0,1,2）计算如下。

[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]

这种方法会导致2个问题：

与 Android 设备相比，iOS 设备上的边框要厚得多，这可能是因为 Retina 显示屏。
图片顶部和底部的边框宽度与图片侧面的边框宽度不同。

解决此类问题的正确方法是什么？谢谢。

【问题讨论】：

您是否在搜索类似OpenGL Line Width 的内容？
感谢@Rabbid76 的帮助。我是一个 OpenGL 新手，仍然必须完全理解你的方法并使其适应我所拥有的。但首先我要试试solidpixel 的建议，看看我能不能让它发挥作用。

标签： android ios opengl-es

【解决方案1】：

与 Android 设备相比，iOS 设备上的边框要厚得多，这可能是因为 Retina 显示屏。

使用 DisplayMetrics 确定 DPI，并根据需要调整 BORDER_WIDTH 值。

图片上下边框宽度与图片两侧边框宽度不同。

无论纵横比如何，视口坐标都介于 0 和 1 之间。如果你不校正纵横比，那么一切都会被缩放。

或者，您正在假设像素是正方形的情况下进行计算。他们通常不是。

【讨论】：

嗨@solidpixel。如上所述，我仍然不清楚如何纠正纵横比。请您提供一些提示。
顶点着色器外的剪辑空间顶点坐标在视口中介于 -1 和 1 之间。如果您在剪辑空间中应用相同的“边框宽度”增量，则会按视口大小进行缩放以生成像素坐标。除非您的视口是方形的，否则对每个顶点应用相同的剪辑空间增量是行不通的。
不清楚你是如何设置的 - 你只发布了一个不完整的代码提取，没有上下文。