OpenGL 將紋理四邊形渲染為 (0,0) 處的單個像素？

Question

我有一個非常基本的 renderer2D，但不能正確渲染我的基本 2D 四邊形。 它將其渲染為 window 左下角的單個像素。 window 尺寸為 800x600

正交投影矩陣使用glm::ortho(0.0f, 800.0f, 0.0f, 600.0f) 。 出於某種原因，它只在錯誤的位置呈現單個像素。 為了讓它更奇怪，如果我將Model矩陣設置為轉換到屏幕中間，它會在屏幕中間渲染那個孤立的像素

我在我的渲染器 class 中這樣稱呼它：

m_Renderer2D.RenderQuad(glm::vec3(400.0f, 300.0f, 1.0f), &m_CrosshairTexture, &m_Camera2D);

渲染器 class：

    class Renderer2D    
    {
        public:
    
            Renderer2D();
        
            void RenderQuad(const glm::vec2& position, GLClasses::Texture* texture, OrthographicCamera* camera);
    
        private : 
    
            GLClasses::VertexBuffer m_VBO;
            GLClasses::VertexArray m_VAO;
            GLClasses::IndexBuffer m_IBO;
            GLClasses::Shader m_DefaultShader;
    };
    
cpp file : 

    Renderer2D::Renderer2D() : m_VBO(GL_ARRAY_BUFFER)
    {
        GLuint index_buffer[6] = { 0,1,2,2,3,0 };

        m_VAO.Bind();
        m_VBO.Bind();
        m_IBO.Bind();
        m_VBO.VertexAttribPointer(0, 3, GL_FLOAT, 0, 5 * sizeof(GLfloat), (void*)0);
        m_VBO.VertexAttribPointer(0, 2, GL_FLOAT, 0, 5 * sizeof(GLfloat), (void*)(3 * sizeof(GLfloat)));
        m_IBO.BufferData(6 * sizeof(GLuint), index_buffer, GL_STATIC_DRAW);
        m_VAO.Unbind();

        m_DefaultShader.CreateShaderProgramFromFile("Shaders/2DElementShaderVert.glsl", "Shaders/2DElementShaderFrag.glsl");
        m_DefaultShader.CompileShaders();
    }

    void Renderer2D::RenderQuad(const glm::vec2& position, GLClasses::Texture* texture, OrthographicCamera* camera)
    {
        glDisable(GL_DEPTH_TEST);

        const std::array<GLfloat, 8> texture_coords = texture->GetTextureCoords();

        float x, y, w, h;

        x = position.x;
        y = position.y;
        w = position.x + texture->GetWidth(); // The width and height of the texture is correct
        h = position.y + texture->GetHeight();

    GLfloat Vertices[] = {
        w, y, 0.0f, texture_coords[0], texture_coords[1],
        w, h, 0.0f, texture_coords[2], texture_coords[3],
        x, h, 0.0f, texture_coords[4], texture_coords[5],
        x, y, 0.0f, texture_coords[6], texture_coords[7],
    };

        m_DefaultShader.Use();

        glm::mat4 proj = glm::ortho(0.0f, 800.0f, 0.0f, 600.0f);

        texture->Bind(1);
        m_DefaultShader.SetMatrix4("u_Projection", proj, 0);
        m_DefaultShader.SetMatrix4("u_View", camera->GetViewMatrix(), 0);
        m_DefaultShader.SetMatrix4("u_Model", glm::mat4(1.0f), 0);
        m_DefaultShader.SetInteger("u_Texture", 1, 0);
        
        // Draw the 2D quad 
        m_VAO.Bind();
        m_VBO.BufferData(20 * sizeof(GLfloat), Vertices, GL_STATIC_DRAW);
        glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, (void*)0);
        m_VAO.Unbind();

        glEnable(GL_DEPTH_TEST);
    }

着色器：

頂點着色器：

#version 330 core

layout(location = 0) in vec3 a_Position;
layout(location = 1) in vec2 a_TexCoord;

out vec2 v_TexCoord;

uniform mat4 u_Projection;
uniform mat4 u_View;
uniform mat4 u_Model;

void main()
{
    gl_Position = u_Projection * u_View * u_Model * vec4(a_Position, 1.0f);
    v_TexCoord = a_TexCoord;
}

片段着色器：

#version 330 core

in vec2 v_TexCoord;
out vec4 o_Color;

uniform sampler2D u_Texture;

void main()
{
    o_Color = texture(u_Texture, v_TexCoord);
}

Answer 1

布局位置將頂點坐標關聯到屬性索引 0，將紋理坐標關聯到屬性索引 1：

 layout(location = 0) in vec3 a_Position; layout(location = 1) in vec2 a_TexCoord;

當您指定通用頂點屬性數據的 arrays 時，則指定了兩次頂點屬性數組 0，但您錯過了指定頂點屬性數組 1：

 m_VBO.VertexAttribPointer(0, 3, GL_FLOAT, 0, 5 * sizeof(GLfloat), (void*)0); m_VBO.VertexAttribPointer(0, 2, GL_FLOAT, 0, 5 * sizeof(GLfloat), (void*)(3 * sizeof(GLfloat)));

因此紋理坐標覆蓋了頂點坐標，並且根本沒有指定紋理坐標屬性。

紋理坐標的屬性索引必須是 1 而不是 0：

m_VBO.VertexAttribPointer(0, 2, GL_FLOAT, 0, 5 * sizeof(GLfloat), (void*)(3 * sizeof(GLfloat)));

m_VBO.VertexAttribPointer(1, 2, GL_FLOAT, 0, 5 * sizeof(GLfloat), (void*)(3 * sizeof(GLfloat)));