一、OpenGL ES 初探

OpenGL ES

• OpenGL ES是OpenGL的子集
• 是以⼿持和嵌⼊式为⽬标的⾼级3D图形应⽤程序编程接⼝(API). OpenGL ES 是⽬前智能⼿机中占据统治地位的图形API.⽀持的平台: iOS, Andriod , BlackBerry ,bada ,Linux ,Windows
• OpenGL ES是跨平台的，不会提供窗口相关方法，需要系统各自提供载体

OpenGL ES 渲染流程

下图出自苹果官方文档OpenGL ES as a Client-Server Architecture

OpenGL ES渲染流程

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

• CPU部分

  • app代码通过OpenGL ES API，会调度OpenGL ES Framework
  • 通过OpenGL ES client 调度 OpenGL ES server，将顶点数据等传递到GPU

• GPU部分：做一些图形的计算，光栅化，显示

OpenGL ES 图形管线

OpenGL ES 图形管道有以下两种图示，其中原理都是一致的，只是描述方式不同

图示一

图示一

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

图示二 Apple官方图示

来自苹果官方文档OpenGL ES as a Graphics Pipeline

图示二

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

顶点着⾊器

简单来说就是处理顶点的着色器程序，如图所示

顶点着⾊器

• 输入有三种方式

  • 通过attribute属性通道输入顶点数据，提供每个顶点的数据
  • 通过uniform通道输入统一变量，即顶点/片元着色器中使用的不变的数据
  • 采样器：表示顶点着色器使用纹理的特殊统一变量类型

• 输出经过处理的最终顶点数据，有2种

  • gl_Position，是GLSL 的内建变量，是将处理后的最终顶点数据赋值给它
  • gl_PointSize，是指点的尺寸，即可以在顶点着色器中修改每个点的大小，使用率较低

顶点着色器处理的业务

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

顶点着色器GLSL代码示例

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

光栅化

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

光栅化

⽚段着⾊器/⽚元着⾊器

• 着⾊器程序—描述⽚段上执⾏操作的⽚元着⾊器程序源代码/可执⾏⽂件
• 输⼊变量— 光栅化单元⽤插值为每个⽚段⽣成的顶点着⾊器输出
• 统⼀变量(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：经过片元着色器对某一个像素点来进行处理之后的结果

逐片段操作

这个过程都是GPU内部处理的，开发者并不需要关心，将处理好的数据存储到帧缓存区，最后读取帧缓存区将图形显示到屏幕上

OpenGL ES的应用

图片滤镜

• 获取图片中的每一个像素点
• 像素点做饱和度处理
• 得到新的颜色
• 将新的颜色翻入帧缓存区
• 最后进行显示

视频滤镜

原理以及处理方式是一样的（GLSL代码），视频也是一帧一帧处理的，而一帧就是一张图片

• 获得视频MP4文件
• 拿到h264（视频压缩文件
• 将视频解码（解压），还原成一帧一帧的图片
• 针对一帧一帧的图片进行处理

EGL(Embedded Graphics Library)

• OpenGL ES 命令需要渲染上下⽂和绘制表面才能完成图形图像的绘制
• 渲染上下⽂: 存储相关OpenGL ES状态，是一个状态机
• 绘制表面：⽤于绘制图元的表面,需要指定渲染的缓存区,例如颜⾊缓、深度和模板
• OpenGL ES API 并没有提供如何创建渲染上下文或者上下文如何连接到原生窗口系 统. EGL是Khronos 渲染API(如OpenGL ES) 和原⽣窗⼝系统之间的接⼝.唯⼀支持 OpenGL ES 却不支持EGL的平台是iOS. Apple 提供⾃己的EGL API的iOS实现,称为EAGL
• 因为每个窗⼝系统都有不同的定义,所以EGL提供基本的不透明类型—EGLDisplay, 这 个类型封装了所有系统相关性,用于和原生窗⼝系统接⼝