OpenGL渲染入门-阿里云开发者社区

前言

在开始之前，先来看一段图像解码序列（格式为YUV420）的4个渲染结果，这里我分别截了4张图

其中4个渲染效果分别是
左上：直接渲染视频帧并绘制到窗口上
右上：九宫格缩放绘制帧致窗口上
左下：对视频帧进行2D变换并绘制到窗口上
右下：渲染视频帧并绘制到3D变换立方体的6个面上

试着想一下，如果在CPU端进行图像处理，比如用C/C++实现，包括上述4种效果会涉及到的格式转换、2D/3D变换、立方体贴图、无锯齿缩放等操作，实现的复杂度和代码量如何，会涉及哪些知识？
如果直接使用OpenGL，实现的复杂度和代码量又该如何？

问题

何种场景下更适合使用OpenGL？
OpenGL编程与CPU编程的区别？
如何快速入门编写OpenGL程序？

看完此文，或许你会觉得原来渲染并没有想像的那么难！

从C/C++开始

考虑上面的例子，都需要将输入图像序列的YUV420格式转成RGBA32位进行后期渲染和显示，颜色转换比如像下面这样实现

/**
 * @param dst     输出图像地址RGBA
 * @param data    输入图像地址YUV420P
 * @param width   图像宽度
 * @param height  图像高度
 * @param coef    YUV转RGB的颜色矩阵，支持BT601/709/2020
 */
void yuv420p_2_rgba(uint8_t* dst, uint8_t* data, int width, int height, float coef[9])
{
    for(int i = 0; i < (height >> 1); ++i)  // 一次处理2行
    {
        for(int j = 0; j < (width >> 1); ++j) // 一交处理2列
        {
            auto py = data + width * 2 * i + j * 2; // 获取左上角Y地址
            auto u = data[width * height + i * (width >> 1) + j] - 128; // 获取U值
            auto v = data[width * height * 5 / 4 + i * (width >> 1) + j] - 128; // 获取V值
            // 奇数行奇数列
            for(int k = 0; k < 3; ++k)
            {
                dst[i * width * 8 + j * 8 + k] = clamp(coef[k*3] * py[0] + coef[k*3+1] * u + coef[k*3+2] * v, 0, 255);
            }
            // 奇数行偶数列
            for(int k = 0; k < 3; ++k)
            {
                dst[i * width * 8 + j * 8 + k + 4] = clamp(coef[k*3] * py[1] + coef[k*3+1] * u + coef[k*3+2] * v, 0, 255);
            }
            // Y地址下移一行
            py += width;
            // 偶数行奇数列
            for(int k = 0; k < 3; ++k)
            {
                dst[i * width * 8 + j * 8 + k + width * 4] = clamp(coef[k*3] * py[0] + coef[k*3+1] * u + coef[k*3+2] * v, 0, 255);
            }
            // 偶数行偶数列
            for(int k = 0; k < 3; ++k)
            {
                dst[i * width * 8 + j * 8 + k + width * 4 + 4] = clamp(coef[k*3] * py[1] + coef[k*3+1] * u + coef[k*3+2] * v, 0, 255);
            }
        }
    }
}

上述C/C++代码的实现是一个初级版本，如果希望更高性能的运行在CPU上，还需要进行类似汇编优化、多线程优化（如OpenMP）等，但即便这样，对于解码4K的图像，运行在8核心超线程且主频3.4GHz的CPU上，仍然无法满足低延时计算的要求。

当C/C++实现的性能无法达到要求时，还可以采用汇编优化、多线程优化等方法，但复杂度会大大增加。

对于这一类计算密集型的工作，下面我们将看到更适合采用GPU进行处理，同时无须像CPU实现那样需要关注过多的细节。

OpenGL实现

与CPU的计算过程类似，可以将OpenGL理解为一个模块，我们通过设置给OpenGL模块相应的参数，并拿到处理的结果。

纹理

类似CPU上的内存，需要创建相应的GPU显存用于存储图像数据，如上所举例子，YUV420P存在三片内存，分别是Y、U、V，因此需要创建三张显存

    glGenTextures(3, texture);
    for (int i = 0; i < 3; ++i)
    {
        glBindTexture(GL_TEXTURE_2D, texture[i]);
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
        glTexImage2D(GL_TEXTURE_2D, 0, GL_RED, texture_width[i], texture_height[i], 0, GL_RED, GL_UNSIGNED_BYTE, 0);
        ASSERT_GL();
    }

上述代码是创建三张显存，分别是Y、U、V，同时指定纹理缩小、放大使用线性插值，WRAP采样使用边缘像素颜色值。

当需要将CPU的内存数据上传到GPU显存中时，只需要将内存指针和相应的宽高格式等信息传递给glTexImage2D接口就行，如下

    for (int i = 0; i < 3; ++i)
    {
        glBindTexture(GL_TEXTURE_2D, texture[i]);
        glTexImage2D(GL_TEXTURE_2D, 0, GL_RED, texture_width[i], texture_height[i], 0, GL_RED, GL_UNSIGNED_BYTE, addressof(buffer[planar_offset[i]]));
        ASSERT_GL();
    }

这里可以看两次操作都需要使用glBindTexture接口，这是因为需要更新OpenGL内部TEXTURE_2D的当前绑定对象状态。

CPU上我们可以直接逐像素甚至逐字节的操作，但GPU不行，由于GPU内部是像素多线程并行处理，因此我们实际上是通过可编程一段可执行程序并发送给GPU处理的，可执行程序的生成分为两步。

顶点着色器

由于不是像CPU上逐像素操作那样编程，我们只需要将渲染的顶点边界值告诉GPU，GPU内部会自动帮我们对边界以内的像素位置进行计算

        #version 330 core
        layout (location = 0) in vec2 aPos;
        layout (location = 1) in vec2 aTexCoord;

        out vec2 TexCoord;

        void main()
        {
            gl_Position = vec4(aPos, 0.0, 1.0);
            TexCoord = vec2(aTexCoord.x, 1.0 - aTexCoord.y);
        }

上述代码示例了一个顶点着色器的实现，双称vertex shader，顾名思义，即是对像素顶点进行操作，其中aPos和aTexCoord分别是外部输入给GPU的顶点位置和坐标，main函数计算更新后的位置和坐标，并发送给片段着色器。

片段着色器

        #version 330 core
        out vec4 FragColor;

        in vec2 TexCoord;

        uniform sampler2D texY;
        uniform sampler2D texU;
        uniform sampler2D texV;

        uniform mat3 coef;

        void main()
        {
            float y = (texture(texY, TexCoord).r - 16.0/255.0) * (255.0/219.0);
            float u = (texture(texU, TexCoord).r - 0.5) * (255.0/224.0);
            float v = (texture(texV, TexCoord).r - 0.5) * (255.0/224.0);
            FragColor = vec4(coef * vec3(y, u, v), 1.0);
        }

这里可以看到，输入给片段着色器的是TexCoord，即顶点着色器的输出，这里uniform表示可能随时会发生变化的变量，需要外部渲染前设置更新，main函数输出计算后的像素颜色值。

可执行程序

当完成了顶点着色器和片段着色器后，我们就可以将两者编译并链接成可实际在GPU上运行的可执行程序了。

GLuint GenerateProgram(char const* vertexShaderSource, char const* fragmentShaderSource)
{
    // 编译顶点着色器
    int vertexShader = glCreateShader(GL_VERTEX_SHADER);
    glShaderSource(vertexShader, 1, &vertexShaderSource, NULL);
    glCompileShader(vertexShader);

    int success;
    char infoLog[512];
    glGetShaderiv(vertexShader, GL_COMPILE_STATUS, &success);
    if (!success)
    {
        glGetShaderInfoLog(vertexShader, 512, NULL, infoLog);
        std::cout << "ERROR::SHADER::VERTEX::COMPILATION_FAILED\n" << infoLog << std::endl;
    }

    // 编译片段着色器
    int fragmentShader = glCreateShader(GL_FRAGMENT_SHADER);
    glShaderSource(fragmentShader, 1, &fragmentShaderSource, NULL);
    glCompileShader(fragmentShader);

    glGetShaderiv(fragmentShader, GL_COMPILE_STATUS, &success);
    if (!success)
    {
        glGetShaderInfoLog(fragmentShader, 512, NULL, infoLog);
        std::cout << "ERROR::SHADER::FRAGMENT::COMPILATION_FAILED\n" << infoLog << std::endl;
    }

    // 链接顶点着色器和片段着色器
    int shaderProgram = glCreateProgram();
    glAttachShader(shaderProgram, vertexShader);
    glAttachShader(shaderProgram, fragmentShader);
    glLinkProgram(shaderProgram);

    glGetProgramiv(shaderProgram, GL_LINK_STATUS, &success);
    if (!success)
    {
        glGetProgramInfoLog(shaderProgram, 512, NULL, infoLog);
        std::cout << "ERROR::SHADER::PROGRAM::LINKING_FAILED\n" << infoLog << std::endl;
    }
    glDeleteShader(vertexShader);
    glDeleteShader(fragmentShader);
    return shaderProgram;
}

就像编译C++代码一样，先分别编译顶点和片段着色器，生成目标文件，再将两个目标文件链接成可执行程序。

顶点数组对象
又称为VAO(Vertex Array Object），当我们生成可执行程序并发送给GPU后，还需要将顶点和纹理坐标等信息告诉Program，VAO使用如下方法生成

// *INDENT-OFF*
    float vertices[] =
    {
        // 顶点位置      // 纹理坐标
        -1.0f, -1.0f,   0.0f, 0.0f, // bottom left
         1.0f, -1.0f,   1.0f, 0.0f, // bottom right
        -1.0f,  1.0f,   0.0f, 1.0f, // top left
         1.0f,  1.0f,   1.0f, 1.0f, // top right
    };
    // *INDENT-ON*

    glGenVertexArrays(1, &VAO[kRenderNormal]);
    glGenBuffers(1, &VBO[kRenderNormal]);

    glBindVertexArray(VAO[kRenderNormal]);

    glBindBuffer(GL_ARRAY_BUFFER, VBO[kRenderNormal]);
    glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);

    // 顶点位置属性
    glVertexAttribPointer(0, 2, GL_FLOAT, GL_FALSE, 4 * sizeof(float), (void*)0);
    glEnableVertexAttribArray(0);

    // 纹理坐标属性
    glVertexAttribPointer(1, 2, GL_FLOAT, GL_FALSE, 4 * sizeof(float), (void*)(2 * sizeof(float)));
    glEnableVertexAttribArray(1);
    glBindVertexArray(0);
    ASSERT_GL();

先创建VAO，再绑定VAO到当前使用，再创建相应的VBO并绑定到VAO上，注意这里的顶点位置归一化范围为【-1，1】，纹理坐标归一化范围为【0，1】，其中左下角为原点坐标【0，0】，这与通常理解的窗口坐标系统和图像坐标系不同。

这里可以将VAO理解成一个对象，我们通过调用OpenGL的接口分别更新这个对象的参数值，尤其是顶点位置和纹理坐标固定的情况下，我们只需要从CPU到GPU上传一次数据，减少性能开销。

视口
渲染之前，还需要告诉OpenGL渲染到窗口的具体位置和区域

glViewport(0, 0, width, height);

渲染

当上述OpenGL资源都准备好后，我们就可以开始渲染了

    glUseProgram(program[render_mode]);
    auto loc = glGetUniformLocation(program[kRenderNormal], "coef");
    glUniformMatrix3fv(loc, 1, GL_FALSE, yuva_to_rgba_709);
    ASSERT_GL();
    for (int i = 0; i < 3; ++i)
    {
        glActiveTexture(GL_TEXTURE0 + i);
        glBindTexture(GL_TEXTURE_2D, texture[i]);
        auto loc = glGetUniformLocation(program[kRenderNormal], texture_name[i]);
        glUniform1i(loc, i);
        ASSERT_GL();
    }

    glBindVertexArray(VAO[render_mode]);
    glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);
    ASSERT_GL();
    glBindVertexArray(0);

如上代码所示，先将CPU上计算好的值更新到GPU中的Program中，再采用相应的Draw接口，此时OpenGL就渲染完成。

需要注意的是，GL_TEXTURE_2D设置给Program，需要先Active相应的GL_TEXTUREi，再更新位置为索引glUniform1i。

更多渲染实现

九宫格
从一屏到九屏，使用OpenGL实现非常简单，着色器可以复用，我们只需要将CPU发送给GPU的顶点位置和纹理坐标改变一下即可，这里我用了EBO实现作为例子，实际也可以使用上述的VBO。

// *INDENT-OFF*
    float vertices[] =
    {
        // 顶点位置      // 纹理坐标
        -1.0f, -1.0f,   0.0f, 3.0f, // bottom left
         1.0f, -1.0f,   3.0f, 3.0f, // bottom right
        -1.0f,  1.0f,   0.0f, 0.0f, // top left
         1.0f,  1.0f,   3.0f, 0.0f, // top right
    };
    // *INDENT-ON*

    unsigned char indices[] =
    {
        0, 1, 2, // first triangle
        1, 2, 3  // second triangle
    };

    glGenVertexArrays(1, &VAO[kRenderRepeat]);
    glGenBuffers(1, &VBO[kRenderRepeat]);
    glGenBuffers(1, &EBO[kRenderRepeat]);

    glBindVertexArray(VAO[kRenderRepeat]);

    glBindBuffer(GL_ARRAY_BUFFER, VBO[kRenderRepeat]);
    glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);

    glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO[kRenderRepeat]);
    glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);

    // 顶点位置属性
    glVertexAttribPointer(0, 2, GL_FLOAT, GL_FALSE, 4 * sizeof(float), (void*)0);
    glEnableVertexAttribArray(0);

    // 纹理坐标属性
    glVertexAttribPointer(1, 2, GL_FLOAT, GL_FALSE, 4 * sizeof(float), (void*)(2 * sizeof(float)));
    glEnableVertexAttribArray(1);
    glBindVertexArray(0);
    ASSERT_GL();

如上代码所未，最大的不同，即是直接将纹理坐标位置从【0，1】的范围变成了【0，3】，在渲染时还需要更新纹理的采样模式

    for (int i = 0; i < 3; ++i)
    {
        glBindTexture(GL_TEXTURE_2D, texture[i]);
        glTexImage2D(GL_TEXTURE_2D, 0, GL_RED, texture_width[i], texture_height[i], 0, GL_RED, GL_UNSIGNED_BYTE, addressof(buffer[planar_offset[i]]));
        ASSERT_GL();
        if (render_mode == kRenderRepeat)
        {
            glGenerateMipmap(GL_TEXTURE_2D);
        }
    }
        auto wrap_mode = render_mode == kRenderRepeat ? GL_REPEAT : GL_CLAMP_TO_EDGE;
        auto filter_mode = render_mode == kRenderRepeat ? GL_NEAREST_MIPMAP_LINEAR : GL_LINEAR;
        for (int i = 0; i < 3; ++i)
        {
            glBindTexture(GL_TEXTURE_2D, texture[i]);
            glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, filter_mode);
            glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, wrap_mode);
            glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, wrap_mode);
            ASSERT_GL();
        }

上述代码修改后，由于使用EBO，因此需要采用索引绘制接口进行渲染

glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_BYTE, 0);

如此就可以见到9屏的效果了，是不是so easy！

立方体

试想一下，如果使用C++实现一个立方体渲染，是不是相当复杂，光是想想空间变换及纹理贴图这些东西就比较头疼，但是GPU实现就相当简单了，我们只需要多增加几个三角形绘制

// *INDENT-OFF*
    float vertices[] =
    {
        -0.5f, -0.5f, -0.5f,  0.0f, 0.0f,
         0.5f, -0.5f, -0.5f,  1.0f, 0.0f,
         0.5f,  0.5f, -0.5f,  1.0f, 1.0f,
         0.5f,  0.5f, -0.5f,  1.0f, 1.0f,
        -0.5f,  0.5f, -0.5f,  0.0f, 1.0f,
        -0.5f, -0.5f, -0.5f,  0.0f, 0.0f,

        -0.5f, -0.5f,  0.5f,  0.0f, 0.0f,
         0.5f, -0.5f,  0.5f,  1.0f, 0.0f,
         0.5f,  0.5f,  0.5f,  1.0f, 1.0f,
         0.5f,  0.5f,  0.5f,  1.0f, 1.0f,
        -0.5f,  0.5f,  0.5f,  0.0f, 1.0f,
        -0.5f, -0.5f,  0.5f,  0.0f, 0.0f,

        -0.5f,  0.5f,  0.5f,  1.0f, 0.0f,
        -0.5f,  0.5f, -0.5f,  1.0f, 1.0f,
        -0.5f, -0.5f, -0.5f,  0.0f, 1.0f,
        -0.5f, -0.5f, -0.5f,  0.0f, 1.0f,
        -0.5f, -0.5f,  0.5f,  0.0f, 0.0f,
        -0.5f,  0.5f,  0.5f,  1.0f, 0.0f,

         0.5f,  0.5f,  0.5f,  1.0f, 0.0f,
         0.5f,  0.5f, -0.5f,  1.0f, 1.0f,
         0.5f, -0.5f, -0.5f,  0.0f, 1.0f,
         0.5f, -0.5f, -0.5f,  0.0f, 1.0f,
         0.5f, -0.5f,  0.5f,  0.0f, 0.0f,
         0.5f,  0.5f,  0.5f,  1.0f, 0.0f,

        -0.5f, -0.5f, -0.5f,  0.0f, 1.0f,
         0.5f, -0.5f, -0.5f,  1.0f, 1.0f,
         0.5f, -0.5f,  0.5f,  1.0f, 0.0f,
         0.5f, -0.5f,  0.5f,  1.0f, 0.0f,
        -0.5f, -0.5f,  0.5f,  0.0f, 0.0f,
        -0.5f, -0.5f, -0.5f,  0.0f, 1.0f,

        -0.5f,  0.5f, -0.5f,  0.0f, 1.0f,
         0.5f,  0.5f, -0.5f,  1.0f, 1.0f,
         0.5f,  0.5f,  0.5f,  1.0f, 0.0f,
         0.5f,  0.5f,  0.5f,  1.0f, 0.0f,
        -0.5f,  0.5f,  0.5f,  0.0f, 0.0f,
        -0.5f,  0.5f, -0.5f,  0.0f, 1.0f
    };

我们只需要在2D渲染的基础上，增加所有6个面的深度信息

glDrawArrays(GL_TRIANGLES, 0, 36);

即是简单的从渲染2个三角形，到改成渲染12个三角形，就完成立方体渲染。

2D变换
要让图像动起来，我们只需要将计算逐帧变化的模型、视图矩阵更新给Program

static glm::mat4 model = glm::mat4(1.0f);
            static glm::mat4 view = glm::mat4(1.0f);
            if (!pause)
            {
                model = glm::scale(glm::mat4(1.0f), glm::vec3(sinf(glfwGetTime()), sinf(glfwGetTime()), 1.f));
                model = glm::scale(model, glm::vec3((float)window_height / window_width, 1.f, 1.f));
                model = glm::rotate(model, glm::radians(-45.0f * (float)glfwGetTime()), glm::vec3(0.0f, 0.0f, 1.0f));
                model = glm::scale(model, glm::vec3((float)window_width / window_height, 1.f, 1.f));
            }
            auto loc = glGetUniformLocation(program[render_mode], "model");
            glUniformMatrix4fv(loc, 1, GL_FALSE, glm::value_ptr(model));
            ASSERT_GL();
            loc = glGetUniformLocation(program[render_mode], "view");
            glUniformMatrix4fv(loc, 1, GL_FALSE, glm::value_ptr(view));
            ASSERT_GL();

3D变换
三维变换稍微复杂些，需要考虑深度信息，同时将计算好的变化的模型、视图、投影矩阵更新给Program

glm::mat4 projection = glm::perspective(glm::radians(45.0f), (float)window_width / window_height, 0.1f, 100.0f);
    loc = glGetUniformLocation(program[kRenderCube], "projection");
    glUniformMatrix4fv(loc, 1, GL_FALSE, glm::value_ptr(projection));
    ASSERT_GL();

static glm::mat4 view = glm::mat4(1.0f);
            float radius = 5.0f;
            float camX   = sin(glfwGetTime()) * radius;
            float camZ   = cos(glfwGetTime()) * radius;
            if (!pause)
            {
                view = glm::lookAt(glm::vec3(camX, 0.0f, camZ), glm::vec3(0.0f, 0.0f, 0.0f), glm::vec3(0.0f, 1.0f, 0.0f));
            }
            auto loc = glGetUniformLocation(program[render_mode], "view");
            glUniformMatrix4fv(loc, 1, GL_FALSE, glm::value_ptr(view));
            ASSERT_GL();

            glm::mat4 model = glm::mat4(1.0f);
            float angle = 45.0f;
            model = glm::rotate(model, glm::radians(angle), glm::vec3(1.0f, 1.0f, 1.0f));
            loc = glGetUniformLocation(program[render_mode], "model");
            glUniformMatrix4fv(loc, 1, GL_FALSE, glm::value_ptr(model));
            ASSERT_GL();

总结

本文以实例的例子和代码讲解OpenGL的入门概念和实现步骤，附件为实现的具体代码，更复杂的知识还等待你去发现。

OpenGL渲染入门

前言

问题

从C/C++开始

OpenGL实现

更多渲染实现

总结

热门文章

最新文章

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

OpenGL渲染入门

前言

问题

从C/C++开始

OpenGL实现

更多渲染实现

总结

热门文章

最新文章

相关电子书