OpenGL ES 顶点着色器与片元着色解析

1.OpenGL ES 3.0 图形管线流程图

OpenGL ES 3.0 图形管线.png

2.流程图节点解析

1.顶点数组/顶点缓存区

顶点数组:

这个部分是把顶点坐标和纹理坐标或者其他的顶点相关的信息，比如顶点颜色可以统一的设置在这个数组里面

顶点缓存区:

这个部分是把顶点坐标 纹理数据 其他信息由内存读取到显存，为了解决CPU与GPU之间读取速度上的差异，所以，先读取到显存

2.顶点着色器:

顶点着⾊器 输⼊:

1.着⾊器程序—描述顶点上执⾏操作的顶点着⾊器程序源代码/可执⾏文件
2.顶点着⾊器输入(属性) — 用顶点数组提供每个顶点的数据
3.统⼀变量(uniform)—顶点/片元着⾊器使用的不变数据
4.采样器—代表顶点着⾊器使用纹理的特殊统一变量类型.

顶点着⾊器 业务:

1.矩阵变换位置
2.计算光照公式生成逐顶点颜色
3.生成/变换纹理坐标
4.总结: 它可以用于执行自定义计算，实施新的变换，照明或者传统的固定功能所不允许的基于顶点的效果

1.顶点着色器定义-->描述顶点上执行操作的顶点着色器呈现代码/可执行文件

2.顶点着色器输入[属性]->[attribute]->用顶点数组提供每个顶点的数据

attribute vec4 position;
attribute->修饰符->变化数据
vec4->类型表示一个四维向量xyzw, reba, strq 都可以
position->变量名

3.统一变量[uniform]->顶点/片元着色器使用的不变数据

uniform mat4 rotateMatrix;
uniform->修饰符->不变数据
mat4->类型表示一个4 x 4的矩阵，一般用于顶点三维变换使用
rotateMatrix->变量名

4.采样器->代表顶点着色器使用纹理的特殊统一变量类型

uniform sampler2D imageTexture;
uniform->修饰符->不变数据
sampler2D->采样器，用于采集纹理文素的变量类型-文素->每一个像素点对应的纹理上的颜色
imageTexture->变量名
一般在顶点着色器里面使用采样器的情形不多

5.顶点着色器代码解析

// attribute 修饰符-> attribute类型
// vec4 变量类型->四维向量->xyzw, reba, strq，都可以表示
// position变量名，这里表示为顶点坐标，当然position变量名是可以任意改的，只需要在代码里面与表示顶点坐标的变量名一致即可->代码里面变量名必须一样，表示拿到顶点着色器的position入口，才能把顶点坐标传递到顶点着色器里面来
attribute vec4 position;

// attribute 修饰符-> attribute类型
// vec2 二维向量
// textCoordinate变量名，这里表示为纹理坐标坐标，当然textCoordinate变量名是可以任意改的，只需要在代码里面与表示纹理坐标的变量名一致即可->代码里面变量名必须一样，表示拿到顶点着色器的textCoordinate入口，才能把纹理坐标传递到顶点着色器里面来
attribute vec2 textCoordinate;

// uniform 修饰符-> uniform类型
// mat4 变量类型->4 x4矩阵->一般用于表示模型视图矩阵或投影矩阵或其他需要的矩阵
// rotateMatrix变量名，这里表示为旋转矩阵，当然rotateMatrix变量名是可以任意改的，只需要在代码里面与表示旋转矩阵的变量名一致即可->代码里面变量名必须一样，表示拿到顶点着色器的rotateMatrix入口，才能把旋转矩阵的变化传递到顶点着色器里面来
uniform mat4 rotateMatrix;

// varying 修饰符-> varying类型->类型作用是将顶点着色器里面的值传递到片元着色器
// lowp 精度类型-> 精度三种 lowp highp mediump
// vec2 二维向量
// varyTextCoord变量名，这里表示为传递到片元着色器的纹理坐标名，且片元着色器里面的定义方式必须与顶点着色器里面完全一致，即片元着色器也必须有这样的一行定义varying lowp vec2 varyTextCoord; 表示接收的来自顶点着色器里面的纹理坐标
varying lowp vec2 varyTextCoord;

// 其他，如果需要若干上诉类型的变量需要传递到顶点着色器或者是传递到片元着色器，自定义即可，比如
uniform mat4 xxx;
uniform mat4 yyy;
attribute vec4 abc;
varying lowp vec2 xyz;
uniform mat4 xyzMatrix;
//这些都是可以的，只是要在代码里面找到对应的入口和传递相应的值进来即可

void main() {
    // 把纹理坐标textCoordinate通过varyTextCoord变量传递到片元着色器
    varyTextCoord = textCoordinate;

    // gl_Position 内建变量->OpenGL ES系统提供的->用于把顶点着色器里面的顶点坐标传递到片元着色器
  // position * rotateMatrix * vec4(-1, 1, 1, 1); 表示把旋转矩阵叉乘到顶点上且X轴取反
  // 当然如果没有这些变化影响顶点的变化，只是把顶点传递到片元着色器
gl_Position = position即可，注意position值不能被改变，比如position = position + vec4(1.0, 0.0, 1.0, 1.0)

    gl_Position = position * rotateMatrix * vec4(-1, 1, 1, 1);
}

// 下面只是把顶点坐标和纹理坐标传递片元着色器，这么写即可
attribute vec4 position;
attribute vec2 textCoordinate;
varying lowp vec2 varyTextCoord;

void main() {
    varyTextCoord = textCoordinate;
    gl_Position = position;
}

6.顶点着色器变量名与代码实现的对应关系

    ###### attribute 修饰符
    //(1)注意：第二参数字符串必须和shaderv.vsh中的输入变量：position保持一致
    // 找对对应入口
    GLuint position = glGetAttribLocation(self.myPrograme, "position");
    
    //(2).打开通道
    // 注意：iOS默认关闭attribute属性的通道，所以需要打开通道，其余没有这一步
    glEnableVertexAttribArray(position);
    
    //(3).设置读取方式
    glVertexAttribPointer(position, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 5, NULL);


    ###### uniform->修饰符
   //1. rotate等于shaderv.vsh中的uniform属性，rotateMatrix
    // 找到rotateMatrix入口
    GLuint rotate = glGetUniformLocation(self.myPrograme, "rotateMatrix");
    
    //2.获取渲旋转的弧度
    float radians = 180 * 3.14159f / 180.0f;
    
    //3.求得弧度对于的sin\cos值
    float s = sin(radians);
    float c = cos(radians);
    
    //4.因为在3D课程中用的是横向量，在OpenGL ES用的是列向量
    /*
     参考Z轴旋转矩阵
     */
    GLfloat zRotation[16] = {
        c,-s,0,0,
        s,c,0,0,
        0,0,1,0,
        0,0,0,1
    };
    //5.设置旋转矩阵
    // 为rotateMatrix参数设置值为zRotation，Uniform修饰的不同类型参数的设置方式略有不同
    glUniformMatrix4fv(rotate, 1, GL_FALSE, zRotation);
  
    // uniform 修饰修饰的 普通Int类型的time变量赋值
    glUniform1i(glGetUniformLocation(self.myPrograme, "time"), 50);

  ######sampler2D->修饰符
 //10.加载纹理
    GLuint textureID = [self setupTexture:@"kunkun"];
 
    //11. 设置纹理采样器 sampler2D
    // 激活纹理GL_TEXTURE0
    glActiveTexture(GL_TEXTURE0);
    
    // 绑定GL_TEXTURE0关联的id
    glBindTexture(GL_TEXTURE0, textureID);
    // glGetUniformLocation(self.myPrograme, "inputTexture") 表示拿到片元着色器的inputTexture入口，0表示管理的是纹理GL_TEXTURE0
    glUniform1i(glGetUniformLocation(self.myPrograme, "inputTexture"), 0);

//6.开始绘制
-(void)renderLayer
{
    //设置清屏颜色
    glClearColor(1.0f, 1.0f, 1.0f, 1.0f);

    //清除屏幕
    glClear(GL_COLOR_BUFFER_BIT);
    
    //1.设置视口大小
    CGFloat scale = [[UIScreen mainScreen]scale];
    glViewport(self.frame.origin.x * scale, self.frame.origin.y * scale, self.frame.size.width * scale, self.frame.size.height * scale);
    
    //2.读取顶点着色程序、片元着色程序
    NSString *vertFile = [[NSBundle mainBundle]pathForResource:@"shaderv" ofType:@"vsh"];
    NSString *fragFile = [[NSBundle mainBundle]pathForResource:@"shaderf" ofType:@"fsh"];
    
    NSLog(@"vertFile:%@",vertFile);
    NSLog(@"fragFile:%@",fragFile);
    
    //3.加载shader
    self.myPrograme = [self loadShaders:vertFile Withfrag:fragFile];
    
    //4.链接
    glLinkProgram(self.myPrograme);
    GLint linkStatus;
    //获取链接状态
    glGetProgramiv(self.myPrograme, GL_LINK_STATUS, &linkStatus);
    if (linkStatus == GL_FALSE) {
        GLchar message[512];
        glGetProgramInfoLog(self.myPrograme, sizeof(message), 0, &message[0]);
        NSString *messageString = [NSString stringWithUTF8String:message];
        NSLog(@"Program Link Error:%@",messageString);
        return;
    }
    
    NSLog(@"Program Link Success!");
    //5.使用program
    glUseProgram(self.myPrograme);
    
    //6.设置顶点、纹理坐标
    //前3个是顶点坐标，后2个是纹理坐标
    GLfloat attrArr[] =
    {
        0.5f, -0.5f, -1.0f,     1.0f, 0.0f,
        -0.5f, 0.5f, -1.0f,     0.0f, 1.0f,
        -0.5f, -0.5f, -1.0f,    0.0f, 0.0f,
        
        0.5f, 0.5f, -1.0f,      1.0f, 1.0f,
        -0.5f, 0.5f, -1.0f,     0.0f, 1.0f,
        0.5f, -0.5f, -1.0f,     1.0f, 0.0f,
    };
    
    
    //7.-----处理顶点数据--------
    //(1)顶点缓存区
    GLuint attrBuffer;
    //(2)申请一个缓存区标识符
    glGenBuffers(1, &attrBuffer);
    //(3)将attrBuffer绑定到GL_ARRAY_BUFFER标识符上
    glBindBuffer(GL_ARRAY_BUFFER, attrBuffer);
    //(4)把顶点数据从CPU内存复制到GPU上
    glBufferData(GL_ARRAY_BUFFER, sizeof(attrArr), attrArr, GL_DYNAMIC_DRAW);

    //8.将顶点数据通过myPrograme中的传递到顶点着色程序的position
    //1.glGetAttribLocation,用来获取vertex attribute的入口的.
    //2.告诉OpenGL ES,通过glEnableVertexAttribArray，
    //3.最后数据是通过glVertexAttribPointer传递过去的。
    
    //(1)注意：第二参数字符串必须和shaderv.vsh中的输入变量：position保持一致
    GLuint position = glGetAttribLocation(self.myPrograme, "position");
    
    //(2).设置合适的格式从buffer里面读取数据
    glEnableVertexAttribArray(position);
    
    //(3).设置读取方式
    //参数1：index,顶点数据的索引
    //参数2：size,每个顶点属性的组件数量，1，2，3，或者4.默认初始值是4.
    //参数3：type,数据中的每个组件的类型，常用的有GL_FLOAT,GL_BYTE,GL_SHORT。默认初始值为GL_FLOAT
    //参数4：normalized,固定点数据值是否应该归一化，或者直接转换为固定值。（GL_FALSE）
    //参数5：stride,连续顶点属性之间的偏移量，默认为0；
    //参数6：指定一个指针，指向数组中的第一个顶点属性的第一个组件。默认为0
    glVertexAttribPointer(position, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 5, NULL);
    
    
    //9.----处理纹理数据-------
    //(1).glGetAttribLocation,用来获取vertex attribute的入口的.
    //注意：第二参数字符串必须和shaderv.vsh中的输入变量：textCoordinate保持一致
    GLuint textCoor = glGetAttribLocation(self.myPrograme, "textCoordinate");
    
    //(2).设置合适的格式从buffer里面读取数据
    glEnableVertexAttribArray(textCoor);
    
    //(3).设置读取方式
    //参数1：index,顶点数据的索引
    //参数2：size,每个顶点属性的组件数量，1，2，3，或者4.默认初始值是4.
    //参数3：type,数据中的每个组件的类型，常用的有GL_FLOAT,GL_BYTE,GL_SHORT。默认初始值为GL_FLOAT
    //参数4：normalized,固定点数据值是否应该归一化，或者直接转换为固定值。（GL_FALSE）
    //参数5：stride,连续顶点属性之间的偏移量，默认为0；
    //参数6：指定一个指针，指向数组中的第一个顶点属性的第一个组件。默认为0
    glVertexAttribPointer(textCoor, 2, GL_FLOAT, GL_FALSE, sizeof(GLfloat)*5, (float *)NULL + 3);
    
    //注意，想要获取shader里面的变量，这里记得要在glLinkProgram后面，后面，后面！
    //1. rotate等于shaderv.vsh中的uniform属性，rotateMatrix
    GLuint rotate = glGetUniformLocation(self.myPrograme, "rotateMatrix");
    
    //2.获取渲旋转的弧度
    float radians = 180 * 3.14159f / 180.0f;
    
    //3.求得弧度对于的sin\cos值
    float s = sin(radians);
    float c = cos(radians);
    
    //4.因为在3D课程中用的是横向量，在OpenGL ES用的是列向量
    /*
     参考Z轴旋转矩阵
     */
    GLfloat zRotation[16] = {
        c,-s,0,0,
        s,c,0,0,
        0,0,1,0,
        0,0,0,1
    };
    //5.设置旋转矩阵
    /*
     glUniformMatrix4fv (GLint location, GLsizei count, GLboolean transpose, const GLfloat* value)
     location : 对于shader 中的ID
     count : 个数
     transpose : 转置
     value : 指针
     */
    glUniformMatrix4fv(rotate, 1, GL_FALSE, zRotation);
    
    //10.加载纹理
    [self setupTexture:@"kunkun"];
    
    //11. 设置纹理采样器 sampler2D
    glUniform1i(glGetUniformLocation(self.myPrograme, "inputTexture"), 0);
    
    //解决纹理翻转(方法1)
    [self rotateTextureImage];
    
    //12.绘图
    glDrawArrays(GL_TRIANGLES, 0, 6);
    
    //13.从渲染缓存区显示到屏幕上
    [self.myContext presentRenderbuffer:GL_RENDERBUFFER];
}

3.图元装配

顶点着色器之后,下一个阶段就是图元装配.
图元(Primitive): 点,线,三⻆角形等.
图元装配: 将顶点数据计算成⼀个个图元.在这个阶段会执⾏裁剪、透视分割和 Viewport变换操作。
图元类型和顶点索确定将被渲染的单独图元。对于每个单独图元及其对应的顶点，图元装配阶段执行的操作包括:将顶点着⾊器的输出值执⾏裁剪、透视分割、视口变换后进⼊入光栅化阶段。

顶点坐标之间的链接方式，也就是把顶点之间用一种更小的方式去布满，直接上图，就是顶点数组里面这些顶点到底怎么连接，OpenGL ES里面基本图元三种->点，线，三角形，也就是说无论怎么组合都只能用这三种里面的一种且不能混用，要么点，要么线，要么三角形

图元装配的过程里面是有裁剪的步骤的，比如超出视口之外的就没有必要图元装配了

举个例子，比如窗户要焊接防护网，左上左下右上右下4个顶点，中间的是用规矩的横竖焊接几条组成很多方格子，还是斜着焊接组成很多三角形，焊接很多圆，焊接很多个美女，或者铺甬路用不同类型的瓷砖-方的-三角的-菱形的等等，这就是图元装配，当然，OpenGL ES里面是有规定的几种方式，如下图

OpenGL ES图元装配.png

4.光栅化

在这个阶段绘制对应的图元(点/线/三角形). 光栅化就是将图元转化成⼀组二维⽚段 的过程.而这些转化的⽚段将由⽚元着⾊器处理.这些二维片段就是屏幕上可绘制的像素

光栅化就是确定屏幕上的每一个像素点

5.片元着色器

⽚元着⾊器/⽚段着色器 输入:

1.着⾊器程序—描述⽚段上执⾏操作的顶点着⾊器程序源代码/可执⾏文件
2.输⼊变量— 光栅化单元用插值为每个片段生成的顶点着色器输出
3.统⼀变量(uniform)—顶点/片元着色器使⽤的不变数据
4.采样器—代表片元着⾊器使⽤纹理的特殊统一变量类型.

⽚元着⾊器 业务:

1.计算颜色
2.获取纹理值
3.往像素点中填充颜⾊值(理理值/颜色值);
总结:它可以⽤于图片/视频/图形中每个像素的颜色填充(⽐如给视频添加滤镜,实际 上就是将视频中每个图片的像素点颜色填充进行修改.)
注意：片元着色器只是计算出来了每个像素的颜色并没有进行着色

⽚元着⾊器 代码:

// 含义同顶点着色器，修饰符，精度，类型名，变量名，参数的个数等
// varyTextCoord 顶点传递过来的纹理坐标
varying lowp vec2 varyTextCoord;

// 采样器
uniform sampler2D inputTexture;

void main() {
  // 片元着色器通过采样器inputTexture和纹理坐标varyTextCoord，通过texture2D函数获取每一个像素点的颜色值->用内建变量gl_FragColor标识
 // varyTextCoord 纹理坐标本身不可变，比如varyTextCoord=xxx
    gl_FragColor = texture2D(inputTexture, varyTextCoord);
}

6.逐片段操作

这个阶段是对每一个像素点的颜色进行填充

像素归属测试: 确定帧缓存区中位置(Xw,Yw)的像素⽬前是不是归属于OpenGL ES所 有. 例如,如果⼀个显示OpenGL ES帧缓存区View被另外⼀个View 所遮蔽.则窗口系统可以确定被遮蔽的像素不属于OpenGL ES上下文.从而不全显示这些像素.
而像素归 属测试是OpenGL ES 的一部分,它不由开发者开⼈为控制,而是由OpenGL ES 内部进⾏
• 裁剪测试: 裁剪测试确定(Xw,Yw)是否位于作为OpenGL ES状态的⼀部分裁剪矩形范围 内.如果该片段位于裁剪区域之外,则被抛弃.
• • •
深度测试: 输⼊片段的深度值进步比较,确定⽚段是否拒绝测试
混合: 混合将新生成的⽚段颜色与保存在帧缓存的位置的颜⾊值组合起来.
抖动: 抖动可⽤于最⼩化因为使⽤有限精度在帧缓存区中保存颜⾊值⽽产生的伪像

7.帧缓存区

这个阶段是下一阵要显示的数据渲染完毕，等待显示