OpenGL ESOpenGL ES是OpenGL的子集是针对嵌入式设备及移动终端设备的高级3D图形应用程序 例如iOS、Android、Windows等OpenGL ES 是跨平台的 不会提供窗口相关方法 需要系统各自提供载体
在本文中 主要讲述的是iOS中的OpenGL ES OpenGL ES API、OpenGL ES Programming Guide
OpenGL ES渲染流程
OpebGL ES的渲染主要分为两部分 CPU和GPU
CPU部分app代码通过OpenGL ES API 会调度OpenGL ES Framework通过OpenGL ES client 调度 OpenGL ES server 将顶点数据等传递到GPUGPU部分:做一些图形硬件的处理 例如光栅化、显示等
OpenGL ES 图形管道
OpenGL ES 图形管道有以下两种图示 其中原理都是一致的 只是描述方式不同
图示一
API获得顶点数据 将顶点数据从内存中拷贝至顶点缓冲区 显存 拿到数据之后 通过attribute通道传递至顶点着色器 同时 纹理坐标通过Texture通道传递到顶点着色器和片元着色器然后 图元装配 即图元的连接方式 一共有9种 常用的有6种 此步骤将顶点变换为图形光栅化 确定图形与屏幕对应的位置片元/片段/像素着色器 处理对应像素点的颜色值在将处理好的每个像素点的颜色值存储到帧缓存区 然后在显示器中显示API 可以通过API操作顶点缓冲区、顶点着色器、纹理坐标、片段着色器
Apple官方图示
App 提供图元装配顶点信息 图片信息Vertex 顶点着色器 处理顶点 -- 图形变换 旋转、缩放、平移 Geometry 图元装配 图元装配 裁剪 超出屏幕部分被裁剪 Fragment 片元着色器 纹理处理 雾化处理Framebuffer Operation 帧缓冲区 透明度混合、模板、深度测试 最后在混合 这些操作都是在即将显示时 在帧缓冲区中完成的动作
顶点着色器
简单来说就是处理顶点的着色器程序 如图所示
输入 有3种方式
通过attribute通道输入顶点数据 提供每个顶点的数据通过uniform通道输入统一变量 即顶点/片元着色器中使用的不变的数据采样器 表示顶点着色器使用纹理的特殊统一变量类型
输出 经过处理的最终顶点数据 有2种
gl_Position 是GLSL 的内建变量 是将处理后的最终顶点数据赋值给它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;
}
图元装配、光栅化图元装配 将顶点数据计算成一个个图元光栅化 将图元转化为一组二维片段的过程 主要是由于屏幕是2D的 所以转换的像素点也是二维的
片元着色器
下图表示片元着色器中有哪些输入和输出
输入同顶点着色器一样 有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, 这 个类型封装了所有系统相关性,用于和原生窗⼝系统接⼝
