OpenGL ES(一) OpenGL ES初探

OpenGL ES (OpenGL for Embedded Systems) 是以手持和嵌入式为目标的高级3D图形应用程序编程接⼝(API)。OpenGL ES 是目前智能⼿机中占据统治地位的图形API。支持的平台: iOS、Android、Windows等。

OpenGL ES渲染流程

苹果官方文档

图片来源于网络

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

OpenGL ES的渲染

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

CPU

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

GPU

• 做一些图形硬件的处理，例如光栅化、显示等；

OpenGL ES图形渲染管线

图片来源于网络

图片来源于网络

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

顶点着色器

就是处理顶点的着色器程序。

图片来源于网络

输入

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

输出

经过处理的最终顶点数据，有2种。

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

顶点着色器处理的业务

⽤于执行自定义计算，实施新的变换、照明或者传统的固定功能所不允许的基于顶点的效果

• 矩阵变换位置
• 计算光照公式生成逐顶点颜色
• 生成/变换纹理坐标

图元装配

图元(Primitive):：点、线、三⻆形

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

光栅化

将图元转化为一组二维片段的过程，主要是由于屏幕是2D的，所以转换的像素点也是二维的。

片元着色器/片段着色器

图片来源于网络

输入

• 由顶点着色器桥接传递过来的纹理坐标等
• 通过uniform通道输入统一变量，即顶点/片元着色器中使用的不变的数据
• 采样器：表示顶点着色器使用纹理的特殊统一变量类型，例如纹理就是通过采样器传递

输出

某个像素点经过片元着色器处理后的结果

片元着色器业务

⽤于图片/视频/图形中每个像素的颜色填充。(比如给视频添加滤镜，实际上就是将视频中每个图片的像素点颜⾊填充进⾏修改)

• 计算颜色
• 获取纹理值
• 往像素点中填充颜色值（纹理值/颜色值）

逐片段操作

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

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, 这个类型封装了所有系统相关性，用于和原生窗⼝系统接⼝；

OpenGL ES的应用

图片滤镜、视频滤镜