Open GL ES 3.0渲染流程图

1.顶点着色器

顶点着色器 输入

Shader program（着色器程序）：顶点着色器程序源代码或可执行程序,描述将在顶点上执行的操作

Vertex shader inputs / attributes （顶点着色器输入/属性）：用于装载每个顶点数据的数组

Uniforms（统一变量）：顶点/片元着色器使用的数据（这个值一般是不变的）

Samplers（采样器）：代表顶点着色器使用纹理的特殊统一变量类型

OpenGL ES 3.0 顶点着色器

顶点着色器 业务

1. 矩阵变换位置

2.计算光照公式生成逐顶点颜色

3.⽣成/变换纹理坐标

总结: 它可以⽤于执行自定义计算,实施新的变换,照明或者传统的固定功能所不允许的基于顶点的效果

顶点着色器 示例代码

attribute vec4 position;    //顶点数据

attribute vec2 textCoordinate;     //纹理坐标

uniform mat4 rotateMatrix;     //矩阵

varying lowp vec2 varyTextCoord;     //传到片元着色器的值

void main()

{

    varyTextCoord = textCoordinate; 

    vec4 vPos = position;

    vPos = vPos * rotateMatrix; 

    gl_Position = vPos;    //结果赋值，不然不生效

}

2.图元装配

顶点着色器之后,下一个阶段就是图元装配

图元(Primitive): 点,线,三角形等.

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

图元类型和顶点索确定将被渲染的单独图元。对于每个单独图元及其对应的顶点，图元装配阶段执行的操作包括:将顶点着⾊器的输出值执⾏裁剪、透视分割、视⼝变换后进⼊光栅化阶段。

3.光栅化

在这个阶段绘制对应的图元(点/线/三⻆角形). 

光栅化就是将图元转化成一组二维⽚片段的过程.⽽这些转化的片段将由⽚元着色器处理.这些二维片段就是屏幕上可绘制的像素

光栅化

4.片元着色器

片元着色器 输入

Shader program（着色器程序）：—片段着色器程序源码或描述将在该片段上可以执行的操作

Input variables （输入变量）：光栅化阶段使用插补技术为每个⽚段生成的顶点着色器输出 

Uniforms（统一变量）：顶点/片元着色器使用的数据（这个值一般是不变的） 

Samplers（采样器）：代表片元着⾊器使用纹理的特殊统一变量类型

片元着色器流程

片元着色器 业务

1. 计算颜色

2. 获取纹理值

3. 往像素点中填充颜色值(纹理值/颜色值);

总结: 它可以⽤于图片/视频/图形中每个像素的颜⾊填充(⽐如给视频添加滤镜,实际上就是将视中每个图片的像素点颜色填充进行修改.)

片元着色器 示例代码

varying lowp vec2 varyTextCoord;     //用于接收顶点着色器传来的数据，必须和顶点着色器代码一致

uniform sampler2D colorMap;     //纹理

void main()

{

    gl_FragColor = texture2D(colorMap, varyTextCoord); //把纹理中对应纹理坐标的那个点填入像素点中

}