OpenGL入门教程：深入解析渲染管线技术

时间：11-09 民间故事提交错误

其实OpenGL入门教程：深入解析渲染管线技术的问题并不复杂，但是又很多的朋友都不太了解，因此呢，今天小编就来为大家分享OpenGL入门教程：深入解析渲染管线技术的一些知识，希望可以帮助到大家，下面我们一起来看看这个问题的分析吧！

OpenGL ES相比OpenGL做了很多删减。下面列出了一些差异。

在OpenGL ES 的世界中，不存在四边形或多边形。无论多么复杂的图形，都是由点、线、三角形组成的；没有glBegin/glEnd/glVertex，只能使用glDrawArrays/glDraw；没有double数据类型，但是增加了高性能定点十进制数据类型；没有将未压缩图像数据转换为压缩纹理（纹理）的实时功能，程序必须直接提供压缩纹理；删除了很多功能：显示列表、评估器、索引颜色模式等； glDrawArrays等函数中的数据必须紧密排列，即间隔为0；各种数据的栈深度较低。

OpenGL使用场景

OpenGL广泛应用于各种图像处理领域，包括音视频开发、动画开发（实现动画绘制）、游戏开发（游戏场景和人物的渲染）、地图开发、视频处理（视频滤镜开发）等。

图4.png

快速入门的学习步骤

了解OpenGL渲染管线流程，包括流程中的各个步骤；尝试构建EGL或者使用封装的GLSurface来编写代码；学习使用VBO、VAO、EBO等优化程序；进一步学习纹理相关知识，了解纹理映射和FBO；坐标系、矩阵变换；案例练习。

渲染管线

什么是管线

在计算机图形学中，计算机图形管道（简称渲染管道或图形管道）是一个概念模型，描述图形系统将3D 场景渲染到2D 屏幕所需的步骤。

下图展示了OpenGL渲染管线流程。顶点数据通过顶点着色器的位置变换进行组装和光栅化，纹理通过片段着色器处理并逐片段混合和裁剪，最终渲染到屏幕上。下面进一步描述每个过程的步骤。

管线流程图.png

顶点/片段着色器

Shader用于实现图像渲染，是一个可编辑的程序，用于替代固定的渲染管线。

顶点着色器（Vertex Shader）主要负责对顶点的几何关系进行操作。

片段着色器（Vertex Shader）主要负责源颜色的计算等。

Opengl API.jpg

顶点着色器

顶点着色器代码.png 顶点坐标

纹理坐标

纹理坐标是纹理与图形之间的映射关系。图形中的每个顶点都与一个纹理坐标相关联，表明该顶点需要从该位置读取纹理图像数据。

采样器

将在后续纹理处理中使用的特殊变量。例如，在实现画笔时，可以将画笔厚度和画笔随机角度作为两个不同的采样器传入。

统一变量

顶点着色器中的常量数据通常以旋转矩阵的形式传递，以实现模型-视图-投影坐标的变换。

编写着色器时需要注意以下几点：

纹理坐标的范围在0到1之间；顶点坐标一般用(x,y,z)描述，纹理坐标用(s,t,r)描述；一般情况下，默认的纹理坐标左下角是(0,0)，右上角是(1,1)。顶点着色器示例image.png 通过上面提到的旋转矩阵，可以改变顶点坐标和纹理坐标的映射，从而实现如下所示的不同显示效果。

顶点坐标和纹理坐标对应于.png。更详细的OpenGL ES着色器和程序内容，可以查看这篇文章OpenGL ES着色器和程序分析

图元装配

将经过顶点变换等操作后得到的顶点数据，通过图元进行组装，得到预定的图形。

图元，即图形元素，是可编辑的最小图形单元。图形元素是图形软件操作和组织图片的最基本的素材。图片是由图形元素组成的，图形元素是一组最简单、最通用的几何图形或文字。

Primitive assembly.png Primitive assembly method.pngGL_POINTS: 将每个顶点视为一个点。顶点n定义点n，总共绘制n个点。 GL_LINES: 将每个顶点视为独立的线段。在顶点2n-1和2n之间总共定义n条线段，并且总共绘制N/2条线段。如果N 为奇数，则忽略最后一个顶点。 GL_LINE_STRIP: 绘制一组从第一个顶点到最后一个顶点依次连接的线段。第n和第n+1个顶点定义线段n，总共绘制N-1条线段。 GL_LINE_LOOP: 绘制一组从第一个顶点到最后一个顶点依次连接的线段，然后最后一个顶点连接到第一个顶点。第n和第n+1个顶点定义线段n，然后在顶点N和1之间定义最后一条线段，总共绘制N条线段。原始组装方法2.png将每三个顶点视为一个独立的三角形。顶点3n-2、3n-1和3n定义了第n个三角形，总共绘制了N/3个三角形。绘制一组相连的三角形。对于奇数n，顶点n、n+1 和n+2 定义第n 个三角形；对于偶数n，顶点n+1、n和n+2定义了第n个三角形，总共绘制了N-2个三角形。绘制一组相连的三角形。三角形由第一个顶点和后续顶点定义。顶点1、n+1 和n+2 定义第n 个三角形。总共画N-2个三角形。

光栅化

数据经过图元组装后，得到很多图形集合，对每个图形进行光栅化，得到一点点像素。

Rasterization.png shape 图元：确定图元包含哪些由整数坐标确定的“小方块”（对应屏幕像素，现在不能称为片段，只能在光栅化完成后才能称为片段）光栅化：确定这些的大小小方块的深度和颜色值（通过图像顶点的深度和颜色插值获得），这些颜色稍后可能会被纹理等其他操作修改。

片段着色器

片段着色器将输入顶点着色器中生成的插值数据，顶点着色器的输出将通过图元汇编作为输入变量传递给片段着色器。 OpenGL ES Shader和程序分析中也有详细介绍。

片段着色器.png 片段着色器代码.png

逐片段处理

在逐片段处理过程中，可以进一步处理帧缓冲区中的现有数据，包括混合和裁剪等操作。

逐片段处理.png 像素归因测试

用于确定帧缓冲区中位置(x, y) 的像素是否属于当前上下文。例如，如果一个显示帧缓冲区窗口被另一个窗口遮挡，则窗口系统可以确定被遮挡的像素不属于该OpenGL 上下文，因此不会显示那些混合的像素

将新生成的片段颜色值与帧缓冲区中保存的颜色值相结合，产生新的RGBA。详细的混合用法和计算内容已经在另一篇文章《OpenGL混合用法、算法和计算》中有详细介绍。削波测试

如果片段在裁剪区域之外，则会被丢弃（例如：裁剪某种颜色以获得特定图案）

过渡软化模板和颜色边缘的深度测试

如果片段着色器返回的深度小于缓冲区中的深度，则放弃透明度测试

透明度测试

案例

通过上面介绍的流程，我们以下图为例简单介绍一下。具体的使用场景可以是我们在触摸屏上画画的画板应用，类似于Procreate软件。

Case 1.png Case 2.jpg Case 3.jpg Case 4.png 我们在画板上画一座房子或一架飞机，画出的线条可以看作是点的拼凑而成。这些点是顶点数据。顶点数据输入到顶点着色器中，通过变换矩阵正确转换为屏幕上的坐标，保证我们绘制的内容和我们呈现的内容不会出现偏差。有了顶点数据，就可以组装图元，得到多张飞行器样例图像右上角的三角形图元。通过光栅化和片段着色器处理进行纹理映射等操作，最终显示在屏幕上。