Horse3D游戏引擎研发笔记（五）：在QtOpenGL环境下，仿three.js的BufferGeometry管理VAO和EBO绘制四边形-EW帮帮网

一、背景介绍

在三维图形渲染中，几何形状的管理是引擎的核心功能之一。Three.js通过BufferGeometry接口实现了对顶点数据和索引数据的高效管理，而OpenGL则通过顶点数组对象（VAO）和元素数组对象（EBO）来实现类似的功能。本篇笔记将详细介绍如何在QtOpenGL环境下，仿照Three.js的BufferGeometry接口，实现对VAO和EBO的管理，并通过这些技术绘制一个四边形。

在开始之前，我们可以参考深入理解Three.js中的BufferGeometry，了解Three.js中BufferGeometry的核心设计理念和实现原理。这将帮助我们更好地理解如何在QtOpenGL环境下实现类似的功能。

二、核心实现

1. IGeometry接口设计

为了实现对几何形状的统一管理，我们设计了一个IGeometry接口。该接口定义了创建和管理几何形状渲染状态的方法，具体包括：

useGeometry(IScreen* screen)：用于绑定几何形状的OpenGL状态。
createOpenGLState(IScreen* screen)：用于创建几何形状的OpenGL状态。
createIndicesAttribute()：用于创建几何形状的索引属性。
createBufferAttributes()：用于创建几何形状的顶点属性列表。

通过该接口，我们可以实现对不同几何形状的统一管理。

提示：关于顶点属性的定义和管理，可以参考基于QtOpenGL使用仿Three.js的BufferAttribute结构重构三角形绘制，了解如何通过BufferAttribute实现顶点数据的高效管理。

2. Quadrangle类实现

Quadrangle类实现了IGeometry接口，表示一个四边形的几何形状。该类通过顶点坐标和索引数据实现了对四边形的渲染。

顶点属性定义

在Quadrangle类中，我们定义了四边形的顶点坐标：

std::list<BufferAttribute*> Quadrangle::createBufferAttributes()
{
    return {
        new BufferAttribute({
            -0.5f, 0.5f, 0.0f,  
            -0.5f, -0.5f, 0.0f, 
            0.5f, -0.5f, 0.0f,  			
            0.5f, 0.5f, 0.0f 
        }, 0, 3)
    };
}

索引属性定义

四边形由两个三角形组成，因此我们定义了两个三角形的索引数据：

IndicesAttribute* Quadrangle::createIndicesAttribute()
{
    return new IndicesAttribute({
        0, 1, 3, // 第一个三角形
        1, 2, 3  // 第二个三角形 
    });
}

OpenGL状态创建

在createOpenGLState方法中，我们创建了顶点数组对象（VAO）和元素数组对象（EBO），并将顶点属性和索引属性绑定到这些对象上：

void IGeometry::createOpenGLState(IScreen* screen)
{
    // 创建并绑定顶点数组对象
    screen->glGenVertexArrays(1, &m_vao);
    screen->glBindVertexArray(m_vao);
    m_bufferAttributes = createBufferAttributes();
    for (BufferAttribute* bufferAttribute : m_bufferAttributes)
    {
        bufferAttribute->createOpenGLState(screen);
    }
    m_indicesAttribute = createIndicesAttribute();
    m_indicesAttribute->createOpenGLState(screen);
}

3. 渲染实现

在FerghanaScreen类中，我们实现了对四边形的渲染逻辑。

初始化OpenGL状态

在initializeGL方法中，我们初始化了OpenGL函数，并创建了四边形的OpenGL状态：

void FerghanaScreen::initializeGL()
{
    initializeOpenGLFunctions();
    glClearColor(0.2f, 0.3f, 0.3f, 1.0f);

    quadrangle->createOpenGLState(this);

    // 初始化着色器程序
    shaderProgram->addShaderFromSourceCode(QOpenGLShader::Vertex, 
        R"(#version 450 core
        layout (location = 0) in vec3 aPos;
        void main()
        {
            gl_Position = vec4(aPos, 1.0);
        })");
    shaderProgram->addShaderFromSourceCode(QOpenGLShader::Fragment, 
        R"(#version 450 core
        out vec4 FragColor;
        void main()
        {
            FragColor = vec4(1.0, 0.5, 0.0, 1.0); // 橙色
        })");
    shaderProgram->link();
}

绘制四边形

在paintGL方法中，我们实现了对四边形的绘制逻辑：

void FerghanaScreen::paintGL()
{
    glClear(GL_COLOR_BUFFER_BIT);
    shaderProgram->bind();
    // 绑定顶点数组对象
    quadrangle->useGeometry(this);
    // 绘制
    glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);

    shaderProgram->release();
}

提示：关于Shader编程的实现，可以参考使用QtOpenGL的Shader编程绘制彩色三角形，了解如何通过顶点着色器和片段着色器实现更复杂的渲染效果。

三、测试与验证

通过上述实现，我们成功地在QtOpenGL环境下，仿照Three.js的BufferGeometry接口，实现了对四边形的渲染。运行程序后，我们可以在窗口中看到一个橙色的四边形。

四、项目介绍

Horse渲染内核基于Qt与OpenGL开发，是一款三维引擎。本项目将不提供编辑器，以SDK的形式对外提供接口。本项目将参考Three.js与Unity等众多渲染引擎的API设计。致力于开发出一款具有竞争力的渲染引擎内核。

地址：

Gitee
GitHub

五、总结与展望

本篇笔记详细介绍了如何在QtOpenGL环境下，仿照Three.js的BufferGeometry接口，实现对VAO和EBO的管理，并通过这些技术绘制一个四边形。通过这种方式，我们可以实现对复杂几何形状的高效管理，为后续的引擎开发打下坚实的基础。

未来，我们计划继续完善Horse3D引擎的功能，包括支持更多的几何形状、实现更复杂的渲染效果等。关于后续的开发计划，可以参考在QtOpenGL下仿three.js，封装EBO绘制四边形，了解如何通过封装EBO实现更高效的几何形状渲染。

通过不断的学习和实践，我们相信Horse3D引擎将能够支持更多复杂的三维渲染功能，为开发者提供一个强大而灵活的渲染引擎内核。

Horse3D游戏引擎研发笔记（一）：从使用Qt的OpenGL库绘制三角形开始
Horse3D游戏引擎研发笔记（二）：基于QtOpenGL使用仿Three.js的BufferAttribute结构重构三角形绘制
Horse3D游戏引擎研发笔记（三）：使用QtOpenGL的Shader编程绘制彩色三角形
Horse3D游戏引擎研发笔记（四）：在QtOpenGL下仿three.js，封装EBO绘制四边形

Horse3D游戏引擎研发笔记（五）：在QtOpenGL环境下，仿three.js的BufferGeometry管理VAO和EBO绘制四边形