纹理周围的边框，OpenGL

Posted 2023-02-22

【中文标题】纹理周围的边框，OpenGL

【英文标题】：Border around texture, OpenGL

【发布时间】：2012-12-12 13:34:17

【问题描述】：

这是我在程序中用来绘制矩形的代码：

glBegin(GL_QUADS);
    glTexCoord2f(0.0f, maxTexCoordHeight);              glVertex2i(pos.x, pos.y + height);
    glTexCoord2f(0.0f, 0.0f);                           glVertex2i(pos.x, pos.y);
    glTexCoord2f(maxTexCoordWidth, 0.0f);               glVertex2i(pos.x + width, pos.y);
    glTexCoord2f(maxTexCoordWidth, maxTexCoordHeight);  glVertex2i(pos.x + width, pos.y + height);
glEnd();

它只绘制一个具有指定纹理的简单矩形，例如像这样：

我想问一下是否可以在OpenGL中实现这样的边框效果：

正如您在此图块中看到的那样，只有一个纯蓝色背景，可以单独处理 - 只是自动调整大小的纹理。这可以通过我给出的代码 sn-p 轻松实现，但问题在于边框。

如果边框应该是一种颜色，我可以尝试在纹理周围使用GL_LINES 绘制空的、未填充的矩形，但事实并非如此。

此外，如果图块始终具有固定大小，我可以准备一个与之匹配的纹理，但它们必须易于调整大小，而无需更改我用作纹理的位图文件。

因此，如果使用基本的 OpenGL 函数无法实现，那么实现这种效果的最有效和/或最容易的方法是什么？

编辑：它必须是 2D 的。

【问题讨论】：

除非您需要它是 2d 的，否则为什么不通过在 3D 中制作梯形 Y 形状来实际创建斜切效果并使用照明来获得您需要的阴影效果？

@Quetzalcoatl 谢谢你的回答，但是是的，它必须是 2D 的。我将编辑我的问题以添加此信息。

您可以编写片段着色器来添加边框。但是，如果您仍在使用即时模式（glVertex 等过时函数），您可能需要一段时间才能赶上 OpenGL 2.0 及更高版本的精彩世界。

@Mosquito：您仍然可以使用 OpenGL 光照并只修改边缘法线向量。实际的空间几何形状与光照计算无关，它只发生在用户提供的法向量上，可以是任何东西。

【参考方案1】：

这是使用 OpenGL 的 GUI 的经典问题，通常使用 9 单元模式解决。在此，您将效果添加到原始图像（或通过其他 opengl 参数定义）并将渲染的四边形分成九个四边形：三行和三列。

然后将上下行的高度固定，就像固定左右列的宽度一样。中心四边形被缩放，以便您的对象适合您想要适合的矩形。然后，您只将纹理的边界部分映射到形成外部单元的四边形，同时将纹理的中心映射到中心四边形。

---

与 cmets 中所说的相关，您还可以通过将四边形设为 3D 来使用实际的 3D 效果。在这种情况下，没有人强迫您使用透视投影，您可以使用正交投影（2D 模式）。无论如何，OpenGL 总是会进行 3D 计算。

【讨论】：

我认为答案包含我需要知道的一切。非常感谢乔纳斯！

【参考方案2】：

除了 Jonas 的回答非常好，我想再添加两个选项。 第一个是让纹理看起来像你想要的正方形。如果您可以在 Photoshop 中完成，则无需花哨的代码；）。 第二个是使您的绘图代码复杂一点。如果您查看图像，您会发现正方形的每个“边坡”都可以用两个三角形绘制。您可以让您的代码绘制 10 个三角形而不是一个正方形，并为每组两个三角形使用不同的颜色：

draw() 
    GLFloat i = <your_inset_here>;

    //top border part, top left triangle
    glColor3f(<color_0>);
    glVertex2f(pos.x, pos.y);
    glVertex2f(pos.x + w, pos.y);
    glVertex2f(pos.x + i, pos.y + i);
    //top border part, bottom right triangle
    glVertex2f(pos.x + w, pos.y);
    glVertex2f(pos.x + w - i, pos.y + i);
    glVertex2f(pos.x + i, pos.y + i);

    //repeat this process with the other coordinates for the other three borders

    // draw the middle square using (pos.x+i,pos.y+i),(pos.x+w-i,pos.y+i),(pos.x+w-i,pos.y+h-i),(pos.x+i,pos.y+h-i) as coordinates

您可以通过创建一个函数来进一步改进这一点，用给定的坐标和颜色绘制一个不规则形状的四边形，然后调用该函数 5 次。