OpenGL ES 初探

OpenGL ES

OpenGL ES是OpenGL的子集
是针对嵌入式设备及移动终端设备的高级3D图形应用程序，例如iOS、Android、Windows等
OpenGL ES 是跨平台的，不会提供窗口相关方法，需要系统各自提供载体

OpenGL ES渲染流程

OpenGL ES允许应用程序利用底层图形处理器的强⼤功能。iOS设备上的GPU可以执行复杂的2D和3D绘图，以及最终图像中每个像素的复杂着色计算。

OpebGL ES的渲染主要分为两部分：CPU和GPU

CPU部分

app代码通过OpenGL ES API，会调度OpenGL ES Framework
通过OpenGL ES client 调度 OpenGL ES server，将顶点数据等传递到GPU
GPU部分:做一些图形硬件的处理，例如光栅化、显示等。

OpenGL ES图形管线

API获得顶点数据，将顶点数据从内存中拷贝至顶点缓冲区（显存）
拿到数据之后，通过attribute通道传递至顶点着色器，同时，纹理坐标通过Texture通道传递* 到顶点着色器和片元着色器
然后，图元装配，即图元的连接方式，一共有9种，常用的有6种，此步骤将顶点变换为图形
光栅化：确定图形与屏幕对应的位置
片元/片段/像素着色器：处理对应像素点的颜色值
在将处理好的每个像素点的颜色值存储到帧缓存区，然后在显示器中显示
API：可以通过API操作顶点缓冲区、顶点着色器、纹理坐标、片段着色器

Apple官方图示

图形管道-苹果官方图示

App：提供图元装配顶点信息，图片信息
Vertex（顶点着色器）：处理顶点 -- 图形变换（旋转、缩放、平移）
Geometry（图元装配）：图元装配 + 裁剪（超出屏幕部分被裁剪）
Fragment（片元着色器）：纹理处理 + 雾化处理
Framebuffer Operation（帧缓冲区）：透明度混合、模板、深度测试；最后在混合，这些操* 作都是在即将显示时，在帧缓冲区中完成的动作

顶点着色器

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

顶点着色器

输入，有3种方式
1、通过attribute通道输入顶点数据，提供每个顶点的数据
2、通过uniform通道输入统一变量，即顶点/片元着色器中使用的不变的数据
3、采样器：表示顶点着色器使用纹理的特殊统一变量类型
输出：经过处理的最终顶点数据，有2种
1、gl_Position，是GLSL 的内建变量，是将处理后的最终顶点数据赋值给它
2、gl_PointSize，是指点的尺寸，即可以在顶点着色器中修改每个点的大小，使用率较低

顶点着色器处理的业务

矩阵变换位置
计算光照公式生成逐顶点颜色（也可以片元着色器）
生成/变换纹理坐标：片元着色器是没有办法传入属性即attribute的，可以通过顶点着色器桥接，间接将纹理坐标属性传递到片元着色器

顶点着色器GLSL代码示例

attribute、uniform 表示client与server之间的通道
其中的vec4、vec2都是向量类型，表示四维向量和二维向量
mat4：4*4矩阵
varying是修饰符：通过varying将纹理坐标传入到片元着色器
lowp：低精读
main中的操作
实现了纹理坐标的桥接
实现了顶点旋转矩阵的相乘：列向量与列矩阵相乘，得到旋转后的顶点坐标
将上述得到的顶点坐标，赋值给gl_Position

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; 
}

图元装配、光栅化

图元(Primitive): 点,线,三⻆形等.
图元装配:将顶点数据计算成一个个图元.在这个阶段会执行裁剪、透视分割和 Viewport变换操作。
图元类型和顶点确定将被渲染的单独图元。对于每个单独图元及其对应的顶点，图元装配阶段执行的操作包括:将顶点着色器的输出值执行裁剪、透视分割、视⼝变换后进⼊光栅化阶段。
光栅化：在这个阶段绘制对应的图元(点/线/三⻆角形). 光栅化就是将图元转化成一组二维⽚段的过程.⽽这些转化的⽚段将由⽚元着色器处理.这些⼆维片段就是屏幕上可绘制的像素。

⽚段着⾊器/片元着色器

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

片元着色器输入-输出

输入同顶点着色器一样，有3种方式
由顶点着色器桥接传递过来的纹理坐标等
通过uniform通道输入统一变量，即顶点/片元着色器中使用的不变的数据
采样器：表示顶点着色器使用纹理的特殊统一变量类型，例如纹理就是通过采样器传递
输出：某个像素点经过片元着色器处理后的结果

片元着色器业务

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

片元着色器GLSL代码示例

varying：必须和顶点着色器中一模一样，这样才能传递纹理坐标
sampler2D 采样器类型
texture2D(纹理采样器，纹理坐标)：获取对应位置/坐标的颜色值，简称获得纹素
gl_FragColor（内建变量）：将最终的颜色值赋值给它

varying lowp vec2 varyTextCoord; 
uniform sampler2D colorMap;
void main() {
gl_FragColor = texture2D(colorMap, varyTextCoord); 
}

总结

顶点着色器、片元着色器都是代码段，类似于iOS中的函数/方法，有返回值
顶点着色器的返回值会被复制给gl_Position
片元着色器的结果会赋值给gl_fragColor
这两个返回值都属于GLSL中的内建变量，是封装好的，直接将数据赋值给它即可
gl_Position：顶点着色器中某一个顶点经过一系列处理后得到的结果
gl_fragColor：经过片元着色器对某一个像素点来进行处理之后的结果