OpenGL-渲染流程

Posted 2023-03-28

参考技术A

在OpenGL中,任何事物都处于 3D 空间中，而屏幕和窗口却都是 2D 像素数组，这就导致了OpenGL大部分工作都是关于把3D坐标转变为适配你屏幕的2D像素，3D坐标转为2D坐标的处理过程是由OpenGL的 图形渲染管线 （指的是一堆原始图形数据途经一个输送管道，期间经过各种变化处理最终出现在屏幕的过程）管理的。

图形渲染管线接受一组3D坐标，然后把它们转变为你屏幕上的有色2D像素输出。图形渲染管线可以被划分为几个阶段，每个阶段将会把前一个阶段的输出作为输入。所有这些阶段都是高度专门化的（它们都有一个特定的函数），并且很容易并行执行。正是由于它们具有并行执行的特性，当今大多数显卡都有成千上万的小处理核心，它们在GPU上为每一个（渲染管线）阶段运行各自的小程序，从而在图形渲染管线中快速处理你的数据。这些小程序叫做 着色器 (Shader)。

下图是图形渲染管线的每个阶段的抽象展示。要注意蓝色部分代表的是我们可以注入自定义的着色器的部分。

首先，我们以数组的形式传递3个3D坐标作为图形渲染管线的输入，用来表示一个三角形，这个数组叫做顶点数据(Vertex Data)；顶点数据是一系列顶点的集合。一个顶点(Vertex)是一个3D坐标的数据的集合。而顶点数据是用顶点属性(Vertex Attribute)表示的，它可以包含任何我们想用的数据。

图形渲染管线的第一个部分是 顶点着色器 (Vertex Shader)，它把一个单独的顶点作为输入。顶点着色器主要的目的是把3D坐标转为另一种3D坐标（后面会解释），同时顶点着色器允许我们对顶点属性进行一些基本处理。

图元装配 (Primitive Assembly)阶段将顶点着色器输出的所有顶点作为输入（如果是GL_POINTS，那么就是一个顶点），并所有的点装配成指定图元的形状；本节例子中是一个三角形。

图元装配阶段的输出会传递给 几何着色器 (Geometry Shader)。几何着色器把图元形式的一系列顶点的集合作为输入，它可以通过产生新顶点构造出新的（或是其它的）图元来生成其他形状。例子中，它生成了另一个三角形。

几何着色器的输出会被传入 光栅化阶段 (Rasterization Stage)，这里它会把图元映射为最终屏幕上相应的像素，生成供片段着色器(Fragment Shader)使用的片段(Fragment)。在片段着色器运行之前会执行 裁切 (Clipping)。裁切会丢弃超出你的视图以外的所有像素，用来提升执行效率。

片段着色器 的主要目的是计算一个像素的最终颜色，这也是所有OpenGL高级效果产生的地方。通常，片段着色器包含3D场景的数据（比如光照、阴影、光的颜色等等），这些数据可以被用来计算最终像素的颜色。

在所有对应颜色值确定以后，最终的对象将会被传到最后一个阶段，我们叫做 Alpha测试 和 混合 (Blending)阶段。这个阶段检测片段的对应的深度（和模板(Stencil)）值，用它们来判断这个像素是其它物体的前面还是后面，决定是否应该丢弃。这个阶段也会检查 alpha 值（alpha值定义了一个物体的透明度）并对物体进行 混合 (Blend)。所以，即使在片段着色器中计算出来了一个像素输出的颜色，在渲染多个三角形的时候最后的像素颜色也可能完全不同。

可以看到，图形渲染管线非常复杂，它包含很多可配置的部分。然而，对于大多数场合，我们只需要配置顶点和片段着色器就行了。几何着色器是可选的，通常使用它默认的着色器就行了。

在现代OpenGL中，我们必须定义至少一个顶点着色器和一个片段着色器（因为GPU中没有默认的顶点/片段着色器）。

OpenGL 首先接收用户提供的 几何数据 (顶点和几何图元)，并且将它输入到一系列 着色器阶段 中进行处理，包括:顶点着色、细分着色(它本身包含两个着色器)，以及最后的几何着色，然后它将被送入 光栅化单元(rasterizer) 。光栅化单元负责对所有 剪切区域(clipping region) 内的图元生成 片元数据 ，然后对每个生成的片元都执行一个 片元着色器 。

没必要每次绘图时都复制顶点数据，而是在 图形内存中缓存 这些数据，这样可以显著改善渲染性能，也可以降低内存带宽和电力消耗需求。这就是 顶点缓冲区 对象发挥作用的地方

顶点数组对象 ：Vertex Array Object，VAO 保存缓存以及顶点属性状态信息。
顶点缓冲对象 ：Vertex Buffer Object，VBO 用于分配内存，保存顶点数据 给图形卡使用的一种缓存对象。
索引缓冲对象 ：Element Buffer Object，EBO或Index Buffer Object，IBO 保存顶点索引的一种缓存对象。

在定义好顶点数据以后，需要在内存中存储这些顶点，我们通过 顶点缓冲对象(Vertex Buffer Objects, VBO) 管理这个内存，它会在GPU内存（通常被称为显存）中储存大量顶点。使用这些缓冲对象的好处是我们可以一次性的发送一大批数据到显卡上，而不是每个顶点发送一次。从CPU把数据发送到显卡相对较慢，所以只要可能我们都要尝试尽量一次性发送尽可能多的数据。当数据发送至显卡的内存中后，顶点着色器几乎能立即访问顶点，这是个非常快的过程。

下面是一个生成顶点缓冲区的例子

glGenBuffers(GLsizei n, GLuint * buffers) ：分配n个缓冲区对象名称，并在buffers中返回它们。

glBindBuffer 用于指定当前缓冲区对象。第一次通过调用
glBindBuffer 绑定缓冲区对象名称时，缓冲区对象可以默认状态分配；如果分配成功，则分配的对象绑定微目标的当前缓冲区对象。
glBufferData 用于创建和初始化顶点数组或元素数组。

简而言之，光栅化阶段绘制对应的图元(点、线、三角形)，将 图元 转化为一组 二维数组 的过程，然后传递给 片元着色器 处理。这些二维数组代表屏幕上绘制的 像素

片元着色器主要是对 光栅化 处理后生成的片元 逐个进行 处理（并行）。接收顶点着色器输出的值，需要传入的数据，以及它经过变换矩阵后输出值存储位置。

关于混合可以参考 这篇文章

拓展阅读：

ios 渲染原理解析

OpenGL - 004通过简单案例介绍绘制渲染流程

绘制一个正方形，可以有很多方式，之前有说 OpenGL 中是不存在长方形的，需要用2个三角形拼成。而关于拼接方式，有很多种，这里暂不介绍，后续进行补充。

案例为：绘制一个正方形，并通过键盘上下左右操作对正方形位置进行改变，从而简单介绍绘制流程。

 

 流程介绍

一、setUp

　　设置背景色 RGBA：glClearColor

　　初始化着色器：shaderManager.InitializeStockShaders()

　　批次处理，将顶点数据传到着色器：

　　　　　　triangleBatch.Begin(GL_TRIANGLE_FAN, 4);// 设置画图连接方式 GL_TRIANGLE_FAN

　　　　　　triangleBatch.CopyVertexData3f(vVerts);// 绘制正方形的4个顶点数据 的 数组(4个顶点数据：有2个点是相同的进行复用 - GL_TRIANGLE_FAN)

　　　　　　triangleBatch.End();

二、RenderScene 绘制

　　清除缓存区：glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT|GL_STENCIL_BUFFER_BIT);// 当前激活的用来进行颜色写入缓冲区 | 深度缓存区 | 模板缓冲区

　　使用固定着色器：shaderManager.UseStockShader(GLT_SHADER_IDENTITY,vRed);//  vRed：绘制颜色 GLfloat

　　绘制，提交：triangleBatch.Draw();

　　交换缓存区：glutSwapBuffers();

　　// 交换缓冲区：在开始设置 openGL 窗口时，我们指定 要一个双缓冲区的渲染环境。这就意味渲染工作将在后台缓冲区进行渲染，渲染结束后交换给前台。这种方式可以防止观察者看到 可能伴随着动画帧与动画帧之间 闪烁的渲染过程。缓冲区交换平台将以平台特定的方式进行。

三、键盘移动

　　注册特殊函数：glutSpecialFunc(SpecialKeys);// SpecialKeys 键盘上下左右按键 移动事件；

　　处理移动，计算顶点位置变换；　　

　　新顶点数据传给着色器：triangleBatch.CopyVertexData3f(vVerts);

　　提交重新渲染：glutPostRedisplay();// 手动触发渲染，调用 RenderScene；

 

代码实现：

方法一：坐标计算位置移动

void RenderScene(void) {

    printf("RenderScene");
    // 清除一个或者一组特定的缓存区
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT|GL_STENCIL_BUFFER_BIT);
    
    // 设置一组浮点数 表示红色
    GLfloat vRed[] = {1.0,0.0,0.0,1.0f};
    
    // 传递到存储/固定着色器，即 GLT_SHADER_IDENTITY 着色器，这个着色器只是使用指定颜色以默认笛卡尔坐标第在屏幕上渲染几何图形
    shaderManager.UseStockShader(GLT_SHADER_IDENTITY,vRed);
    
    // 绘制，提交着色器
    triangleBatch.Draw();
   
    // 将后台缓冲区进行渲染，然后结束后交换给前台
    glutSwapBuffers();
}

void setupRC() {

    printf("setupRC");

    // 设置清屏颜色（背景颜色）
    glClearColor(0.98f, 0.40f, 0.7f, 1);
    
    
    // 如果没有着色器，在OpenGL 核心框架中是无法进行任何渲染的。必须初始化一个渲染管理器。
    // 采用固管线渲染
    shaderManager.InitializeStockShaders();
    
    // 修改为GL_TRIANGLE_FAN ，4个顶点
    triangleBatch.Begin(GL_TRIANGLE_FAN, 4);
    triangleBatch.CopyVertexData3f(vVerts);
    triangleBatch.End();
}

void SpecialKeys(int key, int x, int y) {
    
    GLfloat stepSize = 0.025f;
    
    GLfloat blockX = vVerts[0];
    GLfloat blockY = vVerts[10];
    
    printf("v[0] = %f
",blockX);
    printf("v[10] = %f
",blockY);
    
    
    if (key == GLUT_KEY_UP) {
        blockY += stepSize;
    }
    
    if (key == GLUT_KEY_DOWN) {
        blockY -= stepSize;
    }
    
    if (key == GLUT_KEY_LEFT) {
        blockX -= stepSize;
    }
    
    if (key == GLUT_KEY_RIGHT) {
        blockX += stepSize;
    }

    // 触碰到边界（4个边界）的处理
    // 当正方形移动超过最左边的时候
    if (blockX < -1.0f) {
        blockX = -1.0f;
    }
    
    // 当正方形移动到最右边时
    // 1.0 - blockSize * 2 = 总边长 - 正方形的边长 = 最左边点的位置
    if (blockX > (1.0 - blockSize * 2)) {
        blockX = 1.0f - blockSize * 2;
    }
    
    // 当正方形移动到最下面时
    // -1.0 - blockSize * 2 = Y（负轴边界） - 正方形边长 = 最下面点的位置
    if (blockY < -1.0f + blockSize * 2 ) {
        blockY = -1.0f + blockSize * 2;
    }
    
    // 当正方形移动到最上面时
    if (blockY > 1.0f) {
        blockY = 1.0f;
    }

    printf("blockX = %f
",blockX);
    printf("blockY = %f
",blockY);
    
    // Recalculate vertex positions
    vVerts[0] = blockX;
    vVerts[1] = blockY - blockSize*2;
    printf("(%f,%f)
",vVerts[0],vVerts[1]);
    
    vVerts[3] = blockX + blockSize*2;
    vVerts[4] = blockY - blockSize*2;
    printf("(%f,%f)
",vVerts[3],vVerts[4]);
    
    vVerts[6] = blockX + blockSize*2;
    vVerts[7] = blockY;
    printf("(%f,%f)
",vVerts[6],vVerts[7]);
    
    vVerts[9] = blockX;
    vVerts[10] = blockY;
    printf("(%f,%f)
",vVerts[9],vVerts[10]);
    
    triangleBatch.CopyVertexData3f(vVerts);// 新顶点数据
    
    glutPostRedisplay();// 提交重绘
}

方法二：矩阵

void RenderScene(void) {

    // 清除缓存区    
glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT|GL_STENCIL_BUFFER_BIT);
    
    GLfloat vRed[] = {1.0f,0.0f,0.0f,0.0f};
    
    M3DMatrix44f mFinalTransform,mTransfromMatrix,mRotationMartix;
    
    // 平移
    m3dTranslationMatrix44(mTransfromMatrix, xPos, yPos, 0.0f);
    
    // 每次平移时，旋转5度
    static float yRot = 0.0f;
    yRot += 5.0f;
    m3dRotationMatrix44(mRotationMartix, m3dDegToRad(yRot), 0.0f, 0.0f, 1.0f);
    
    // 将旋转和移动的矩阵结果 合并到mFinalTransform （矩阵相乘）
    m3dMatrixMultiply44(mFinalTransform, mTransfromMatrix, mRotationMartix);
    
    // 将矩阵结果 提交给固定着色器（平面着色器）中绘制      shaderManager.UseStockShader(GLT_SHADER_FLAT,mFinalTransform,vRed);
    triangleBatch.Draw();
    
    // 交换缓存区
    glutSwapBuffers();
}

void SpecialKeys(int key, int x, int y) {
    
    GLfloat stepSize = 0.025f;
    // yPos: Y轴移动距离    xPos: X轴移动距离
    if (key == GLUT_KEY_UP) {
        yPos += stepSize;
    }
    
    if (key == GLUT_KEY_DOWN) {
        yPos -= stepSize;
    }
    
    if (key == GLUT_KEY_LEFT) {
        xPos -= stepSize;
    }
    
    if (key == GLUT_KEY_RIGHT) {
        xPos += stepSize;
    }
    
    // 边界碰撞检测
    if (xPos < (-1.0f + blockSize)) {
        xPos = -1.0f + blockSize;
    }
    
    if (xPos > (1.0f - blockSize)) {
        xPos = 1.0f - blockSize;
    }
    
    if (yPos < (-1.0f + blockSize)) {
        yPos = -1.0f + blockSize;
    }
    
    if (yPos > (1.0f - blockSize)) {
        yPos = 1.0f - blockSize;
    }
    
    glutPostRedisplay();
}