OpenGL ES 渲染流程

OpenGL ES 渲染流程

1、总体流程

渲染总体流程

2、流程细节

2.1、顶点着色器

• 顶点着色器的输入

  • 着色器程序：描述顶点上执行操作的顶点着色器程序源代码/可执行文件
  • 顶点着⾊器输入(属性)：用顶点数组提供每个顶点的数据
  • 统一变量(uniform)：顶点/片元着⾊器使用的不变数据
  • 采样器：代表顶点着色器使用纹理的特殊统一变量类型，一般是ID类型，GLSL会根据ID标签查找到纹理

• 顶点着色器业务

  • 矩阵变换位置
  • 计算光照公式生成逐顶点颜色
  • 生成/变换纹理坐标

• 顶点着色器代码示例

  // 属性 -- 顶点坐标 四维向量
  attribute vec4 position;
  // 属性 -- 纹理坐标 二维向量
  attribute vec2 textCoordinate; 
  // uniform 旋转矩阵
  uniform mat4 rotateMatrix; 
  // varying变量是vertex和fragment shader之间做数据传递用的，并且OpenGL ES会对其进行线性插值
  varying lowp vec2 varyTextCoord; 
  void main()
  {
      varyTextCoord = textCoordinate; 
      vec4 vPos = position;
      vPos = vPos * rotateMatrix; 
      // 输出
      gl_Position = vPos;
  }
  

2.2、图元装配

• 图元(Primitive)：点、线、三角形等.

• 图元装配：将顶点数据计算成一个个图元，在这个阶段会执行裁剪、透视分割和Viewport变换操作。

图元类型和顶点索引确定将被渲染的单独图元.

对于每个图元及其对应的顶点,图元装配阶段执行的操作包括: 将顶点着色器的输出值执行裁剪,透视分割,视口变化后进入光栅化阶段.

2.3、光栅化

• 绘制对应的图片(点、线、三角形)，将图元转化成一组二维片段的过程，就是将顶点数据计算成的图片转化成片元，然后这些片元由片元着色器处理。

2.4、片元着色器

• 片元着色器的输入：

  • 着色器程序 -- 描述片段上执行操作的片元着色器程序源代码/可执行文件。
  • 输入变量 -- 光栅化单元用插值为每个片段生成的顶点着色器输出
  • 统一变量(uniform) -- 顶点或片元着色器使用的不变数据
  • 采样器 -- 代表片元着色器使用纹理的特殊统一变量类型

• 片元着色器的业务：

  • 计算颜色
  • 获取纹理值
  • 往像素点中填充颜色值(纹理值/颜色值)

• 代码示例：

  // 纹理坐标:从顶点着色器传递过来,定义命名/类型要一致.
  varying lowp vec2 varyTextCoord; 
  // 纹理采样器 
  uniform sampler2D colorMap; 
  void main()
  {
      // 输出值 -- gl_FragColor
      // texture2D(纹理采样器, 纹理坐标) -- 获取纹理像素
      gl_FragColor = texture2D(colorMap, varyTextCoord); 
  }
  

3、参考：

• https://juejin.im/post/5cf3d29ff265da1b667bc3d0
• https://juejin.im/post/5da591e66fb9a04de818f384