c++ - 如何使用 GL_LINES 在视口(viewport)周围绘制边框？

Question

我无法让我的着色器在纹理的周边运行。我正在关注 https://learnopengl.com/作为指南并使用索引顶点绘制线基元。问题是只绘制了右侧和底部的线，缺少顶部和左侧。

我编写了一个小程序来尝试在黑色视口(viewport)周围绘制红色边框来演示这一点。它与 learnopengl.com 中的基本代码基本相同。

这是着色器:

#version 330 core

out vec4 FragColor;

void main()
{
    FragColor = vec4(1, 0, 0, 1);
}

C++ 代码:

#include <glad/glad.h>
#include <GLFW/glfw3.h>

#include <learnopengl/shader_s.h>

#include <iostream>

void framebuffer_size_callback(GLFWwindow* window, int width, int height);
void processInput(GLFWwindow* window);

const unsigned int SCR_WIDTH = 800;
const unsigned int SCR_HEIGHT = 800;

struct vaoinfo
{
    unsigned int VBO, VAO, EBO;
    vaoinfo() : VAO(0), VBO(0), EBO(0)
    {}
};

void create_vao(vaoinfo& info)
{
    glGenVertexArrays(1, &info.VAO);
    glGenBuffers(1, &info.VBO);
    glGenBuffers(1, &info.EBO);
}

void init_vao(vaoinfo& info, float* vertices, int num_vertices, int* indices, int num_indices)
{
    glGenVertexArrays( 1, &info.VAO);
    glGenBuffers( 1, &info.VBO);
    glGenBuffers( 1, &info.EBO);
    glBindVertexArray(info.VAO);
    glBindBuffer( GL_ARRAY_BUFFER, info.VBO);
    glBufferData( GL_ARRAY_BUFFER, sizeof(float) * num_vertices, vertices, GL_STATIC_DRAW);
    glBindBuffer( GL_ELEMENT_ARRAY_BUFFER, info.EBO);
    glBufferData( GL_ELEMENT_ARRAY_BUFFER, sizeof(int) * num_indices, indices, GL_STATIC_DRAW);
    glVertexAttribPointer( 0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);
    glEnableVertexAttribArray( 0);
    glBindVertexArray( 0);
}

int main()
{
    // glfw: initialize and configure
    glfwInit();
    glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
    glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);
    glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);

    // glfw window creation
    GLFWwindow* window = glfwCreateWindow(SCR_WIDTH, SCR_HEIGHT, "LearnOpenGL", NULL, NULL);
    if (window == NULL)
    {
        std::cout << "Failed to create GLFW window" << std::endl;
        glfwTerminate();
        return -1;
    }
    glfwMakeContextCurrent(window);
    glfwSetFramebufferSizeCallback(window, framebuffer_size_callback);

    if (!gladLoadGLLoader((GLADloadproc)glfwGetProcAddress))
    {
        std::cout << "Failed to initialize GLAD" << std::endl;
        return -1;
    }

    Shader borderProgram("default.vert.glsl", "border.frag.glsl"); // you can name your shader files however you like

    float vertices[] = {
       1.f,  1.f, 0.0f,  // top right
        1.f, -1.f, 0.0f,  // bottom right
        -1.f, -1.f, 0.0f,  // bottom left
        -1.f,  1.f, 0.0f,   // top left 
    };

    vaoinfo T, B, L, R;
    int top[] = { 3,0 };
    create_vao(T);
    init_vao(T, vertices, 12, top, 2);

    int bottom[] = { 1,2 };
    create_vao(B);
    init_vao(B, vertices, 12, bottom, 2);

    int left[] = { 2,3 };
    create_vao(L);
    init_vao(L, vertices, 12, left, 2);
    
    int right[] = { 0,1 };
    create_vao(R);
    init_vao(R, vertices, 12, right, 2);
    
    glBindFramebuffer(GL_FRAMEBUFFER, 0);

    while (!glfwWindowShouldClose(window))
    {
        // input
        processInput(window);

        glClearColor(0.f, 0.f, 0.f, 0.f);
        borderProgram.use();

        glBindVertexArray(T.VAO);
        glDrawElements(GL_LINES, 2, GL_UNSIGNED_INT, nullptr);

        glBindVertexArray(B.VAO);
        glDrawElements(GL_LINES, 2, GL_UNSIGNED_INT, nullptr);

        glBindVertexArray(L.VAO);
        glDrawElements(GL_LINES, 2, GL_UNSIGNED_INT, nullptr);

        glBindVertexArray(R.VAO);
        glDrawElements(GL_LINES, 2, GL_UNSIGNED_INT, nullptr);


        glfwSwapBuffers(window);
        glfwPollEvents();

        Sleep(16);
    }

    glfwTerminate();
    return 0;
}

void processInput(GLFWwindow* window)
{
    if (glfwGetKey(window, GLFW_KEY_ESCAPE) == GLFW_PRESS)
        glfwSetWindowShouldClose(window, true);
}

void framebuffer_size_callback(GLFWwindow* window, int width, int height)
{
    glViewport(0, 0, width, height);
}

编辑:我想通了这个问题......有点。我的印象是，在处理顶点时(我认为在创建 vao 时它被称为“局部空间”)，x 和 y 的坐标范围是 [-1,1]。但显然它实际上是 [-m.x,1] 和 [-1,m.y]，其中 m=(1-1/w, 1-1/h)。这个假设是否正确？

Answer 1

裁剪空间(这是您绘制的)中的 X 和 Y 坐标 -1 和 +1 映射到视口(viewport)的边缘。问题是，当您在像素的最边缘绘制一条线时，OpenGL 需要决定由该边缘共享的两个像素中的哪一个将产生片段。就 OpenGL 规范而言，实际的 OpenGL 实现可以自由选择它想要的任何行为，只要满足某些条件即可，例如两个相邻像素不不应该产生片段，只有一个他们应该。事实上，您没有看到视口(viewport)的所有四个边缘的像素为您的线条生成片段，这是因为 OpenGL 实现也需要与打破平局的规则保持一致。当视口(viewport)向左和顶部(您目前看不到线条的任何像素)仅大一个像素时，您会在那里看到线条的像素。

如果你想确保在视口(viewport)的所有四个边缘看到所有四条线，你必须调整线的坐标，使它们穿过像素的中心(而不是两个相邻像素之间的边缘) ).

您可以将顶点坐标偏移半个像素来实现。由于裁剪空间沿每个 X 轴和 Y 轴的范围为 2 个单位，因此您需要分别将负顶点坐标偏移 1.0f/windowWidth 1.0f/windowHeight 和 -1.0f/windowWidth 的正坐标分别为 -1.0f/windowHeight。

如果你在纸上画一个小网格，将最左边/底部的边缘标记为 -1，将最右边/顶部的边缘标记为 +1，然后使用简单的数学计算出网格中心的位置，这实际上会有所帮助边缘上的像素。这将是您需要绘制的顶点的坐标。