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

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

- API获取图片的顶点数据(内存中),然后将顶点数据拷贝到顶点缓冲区(显存中)。
- API调用顶点着色器,纹理数据和attributes属性都可以作用于顶点着色器,进行图元装配。
- 光栅化,GPU确定像素在屏幕中的位置,将光栅化数据传入片元着色器。
- 片元着色器处理像素计算和填充。
- 然后将像素的数据存在帧缓冲区,最后用于显示到屏幕。
可以通过API操作的的部分为:
- 顶点缓冲区
- 顶点着色器
- 纹理坐标
- 片段着色器

- App:提供图元装配顶点信息,纹理信息
- Vertex(顶点着色器):顶点数据,变换管道,光照
- Geometry(图形结构):图元装配 + 裁剪(超出屏幕部分被裁剪)
- Fragment(片元着色器):纹理处理 + 雾化处理
- Framebuffer Operation(帧缓冲区):透明度混合、模板、深度测试;最后在混合,这些操作都是在即将显示时,在帧缓冲区中完成的动作。
可操作部分
顶点着色器

顶点着色器输入3种方式
- 顶点着⾊器输⼊(属性attribute) — ⽤顶点数组提供每个顶点的数据。
- 统⼀变量(uniform)—顶点/⽚元着⾊器使⽤的不变数据。
- 采样器—代表顶点着⾊器使⽤纹理的特殊统⼀变量类型。
顶点着色器输出
- gl_Position,是GLSL 的内建变量,就是我们顶点处理后的结果,系统定义,我们拿来使用即可。
- gl_PointSize,是指点的尺寸,即可以在顶点着色器中修改每个点的大小。
顶点着⾊器业务:
- 矩阵变换位置
- 计算光照公式⽣成逐顶点颜色
- ⽣成/变换纹理坐标
顶点着⾊代码案例:
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;
}
图元装配
将顶点数据计算成⼀个个图元.在这个阶段会执⾏裁剪、透视分割和Viewport变换操作。
光栅化
将图元转化成二维片段,然后将这些片段交给片元着色器处理,这些片段就是屏幕上可绘制的像素。
片元着色器

片元着色器输入
- 顶点着色器桥接后的纹理坐标等输出数据。
- 统⼀变量(uniform)—顶点/⽚元着⾊器使⽤的不变数据。
- 采样器—代表⽚元着⾊器使⽤纹理的特殊统⼀变量类型。
片元着色器输出
gl_FragColor,是GLSL 的内建变量,就是我们片元处理后的结果。
片元着色器处理业务
- 计算颜⾊。
- 获取纹理值。
- 往像素点中填充颜⾊值(纹理值/颜⾊值);。
总结: 它可以⽤于图⽚/视频/图形中每个像素的颜⾊填充(⽐如给视频添加滤镜,实际上就是将视频中每个图⽚的像素点颜⾊填充进⾏修改)。
逐片段操作
逐片段操作主要由GPU来完成,开发者不用关心具体操作过程,GPU将数据提交到帧缓冲区,然后显示。
- 像素归属测试:确定帧缓存区中位置(Xw,Yw)的像素⽬前是不是归属于OpenGL ES所有。 例如,如果⼀个显示OpenGL ES帧缓存区View被另外⼀个View 所遮蔽。则窗⼝系统可以确定被遮蔽的像素不属于OpenGL ES上下⽂。从⽽不全显示这些像素, ⽽像素归属测试是OpenGL ES的⼀部分,它不由开发者开⼈为控制,⽽是由OpenGL ES内部进⾏。
- 裁剪测试:裁剪测试确定(Xw,Yw)是否位于作为OpenGL ES状态的⼀部分裁剪矩形范围内。如果该⽚段位于裁剪区域之外,则被抛弃。
- 混合:混合将新⽣成的⽚段颜⾊与保存在帧缓存的位置的颜⾊值组合起来。
- 抖动:抖动可⽤于最⼩化因为使⽤有限精度在帧缓存区中保存颜⾊值⽽产⽣的伪像。
- 深度测试:输⼊⽚段的深度值进步⽐较,确定⽚段是否拒绝测试。
OpenGL ES的应用
- 图片滤镜:获取图片中的像素点,然后做处理,比如饱和度、颜色处理,然后将处理后的像素存储到帧缓冲区,最后显示出来。
- 视频滤镜:视频处理和图片原理是一样的,因为视频也是一帧一帧的图片组成。我们将mp4格式的视频,解压缩成h264格式的视频文件,然后解压成一帧一帧的图片进行处理。
网友评论