一. 渲染管线
渲染管线也被称之为渲染流水线, 是指一系列的绘制过程, 通过渲染管线处理后可以得到一帧图形
- 渲染管线由 GPU 内部 处理图形信号 的 并行处理单元组成, 越高端的 GPU, 其内部的并行处理单元数量越多
流程
ES 2.0 渲染管线如下图所示
1. 基本处理
该阶段设定 3D 空间中物体的顶点坐标/颜色/纹理坐标 等属性, 并且制定顶点的绘制方式
2. 顶点着色器
顶点着色器是指可以操控顶点变化, 法向量计算, 纹理坐标变化, 光照材质的应用…的代码
- ES 2.0 中的顶点着色器, 取代了 1.x 中的变换和光照阶段, 让这个阶段可编程化
3. 图元装配
图元的装配主要有图元的组装和处理
- 图元组装是指根据顶点数据和绘制方式结合成的图像信息
- 线段的绘制: 需要两个点组成一个图元
- 三角形的绘制: 需要三个顶点组成一个图元
- 图元处理主要是指裁剪工作
- 根据观察位置和角度的不同, 需要对图元进行裁剪操作
4. 光栅化
光栅化主要分为投影和离散
- 投影
- 顶点坐标系是三维的, 但用于显示的设备均为二维, 需要将三维的物体投影到二维平面上
- 离散
- 目前的屏幕都是由一个个像素组成, 因此需要将投影的结果分离成像素点单元, 这个单元称之为片元
5. 片元着色器
片元着色器是指可以操作纹理, 颜色, 雾面效果…的代码
- ES 2.0 中的片元着色器, 替代了 1.x 中 “纹理环境和颜色求和”, “雾”, “Alpha 测试”等阶段
可以看到整个渲染管线流程中我们能够控制的有基本处理, 顶点着色器和片元着色器阶段
接下来主要分析一下 顶点着色器 和 片元着色器
二. 顶点着色器
顶点着色器是一个可编程的处理单元, 其工作过程为首先将原始的顶点几个信息以及其他属性传送到顶点着色器中, 经过自己开发的顶点着色器处理后, 产生纹理坐标, 颜色, 点位置等后继流程需要的各项顶点属性信息, 编写的语言为 glsl
- 数据中有多少个顶点, 管线就会调用多少次顶点着色器, 每次讲一个顶点的各项数据传递到 glsl 的变量中
1. 输入变量
输入变量主要为 attribute, 指的是 3D 物理中每一个顶点各自不同的信息所属变量
- 一般包括顶点着色器中的 aPosition(顶点位置) 和 aColor(顶点颜色)
2. 全局变量
uniform 变量指的是对于同一组顶点组成的单个 3D 物体中所有顶点都相同的量
- 一般为场景中的光源位置, 摄像机位置, 投影系列矩阵等
3. 输出变量
varying 变量是从着色器计算产生并且传递到片元着色器的数据变量
- 顶点着色器可以使用 varying 来传递需要插值到片元的颜色, 法向量, 纹理坐标等值
4. 内建输出变量
- gl_Position: 是经过变换矩阵投影后的顶点最终位置
- gl_FrontFacing: 指片元所在面的朝向
- gl_PointSize: 指点的大小
三. 片元着色器
片元着色器是用于处理片元值及其相关数据的可编程单元, 其可以执行纹理的采样, 颜色的汇总等, 其编程语言为 glsl
1. 输入
varying 是从顶点着色器传递到片元着色器的数据变量, 由系统在顶点着色器后的光栅化阶段自动插值产生
2. gl_FragColor
描述计算后次片元的颜色, 一般在片元着色器后都需要对 gl_FragColor 进行赋值
总结
通过本次学习, 了解到了 GL ES2.0 的渲染管线流程, 以及其顶点着色器和片元着色器的妙用
glsl 代码的编写需要使用到 Shader Language, 将在后面的学习中展开