1、OpenGL ES简介
OpenGL ES (OpenGL for Embedded Systems) 是以⼿持和嵌入式为目标的⾼级3D图形应用程序编程接口(API)。OpenGL ES 是目前智能手机中占据统治地位的图形API。⽀持的平台: iOS, Andriod , BlackBerry ,bada ,Linux ,Windows。
OpenGL ES 苹果文档：
The Open Graphics Library (OpenGL) is used for visualizing 2D and 3D data. It is a multipurpose open-
standard graphics library that supports applications for 2D and 3D digital content creation, mechanical
and architectural design, virtual prototyping, flight simulation, video games, and more. You use OpenGL to
configure a 3D graphics pipeline and submit data to it. Vertices are transformed and lit, assembled into
primitives, and rasterized to create a 2D image. OpenGL is designed to translate function calls into
graphics commands that can be sent to underlying graphics hardware. Because this underlying hardware is
dedicated to processing graphics commands, OpenGL drawing is typically very fast.
OpenGL for Embedded Systems (OpenGL ES) is a simplified version of OpenGL that eliminates redundant
functionality to provide a library that is both easier to learn and easier to implement in mobile graphics
hardware.
OpenGL ES 开放式图形库(OpenGL的)⽤于可视化的⼆维和三维数据。它是一个多功能开放标准图形库，支持2D和3D数字内容创建，机械和建筑设计，虚拟原型设计，⻜行模拟，视频游戏等应⽤用程序。您可以使用OpenGL配置3D图形管道并向其提交数据。顶点被变换和点亮，组合成图元，并光栅化以创建2D图像。OpenGL旨在将函数调用转换为可以发送到底层图形硬件的图形命令。由于此底层硬件专⽤于处理理图形命令，因此OpenGL绘图通常⾮常快。
OpenGL for Embedded Systems(OpenGL ES)是OpenGL的简化版本，它消除了冗余功能，提供了一个既易于学习⼜更易于在移动图形硬件中实现的库。
2、OpenGL ES 图形管道
OpenGL ES 图形管道
- App：提供图元装配顶点信息，图片信息
- Vertex(顶点着色器)：处理顶点->图形变换(旋转、缩放、平移)
- Geometry(图元装配)：图元装配、裁剪(超出屏幕部分被裁剪)
- Fragment(片元着色器)：纹理处理 、雾化处理
- Framebuffer Operation(帧缓冲区)：透明度混合、模板、深度测试；最后在混合，这些操作都是在即将显示时，在帧缓冲区中完成的动作
3、顶点着色器
顶点着色器输入、输出
- 输入(3中方式)：
1.通过attribute通道输入顶点数据，提供每个顶点的数据
2.通过uniform通道输入统一变量，即顶点/片元着色器中使用的不变的数据
3.采样器：表示顶点着色器使用纹理的特殊统一变量类型 - 输出(经过处理的最终顶点数据,2种):
1.gl_Position，是GLSL 的内建变量，是将处理后的最终顶点数据赋值给它
2.gl_PointSize，是指点的尺寸，即可以在顶点着色器中修改每个点的大小，使用率较低
顶点着色器输入、输出
顶点着色器业务内容
- 1.矩阵变换位置
- 2.计算光照公式⽣成逐顶点颜⾊
- 3.⽣成/变换纹理坐标
它可以⽤于执行⾃定义计算,实施新的变换,照明或者传统的固定功能所不允 的基于顶点的效果。
顶点着色器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;
}
- attribute、uniform 表示client与server之间的通道
- vec4、vec2：向量类型，表示四维向量和二维向量
- mat4：4*4矩阵
- varying：修饰符，通过varying将纹理坐标传入到片元着色器
- lowp：低精度
- gl_Position(内建变量)：将最终的顶点坐标赋值给它
- main函数:
- 1.纹理坐标的桥接
- 2.顶点旋转矩阵的相乘：列向量与列矩阵相乘，得到旋转后的顶点坐标
- 3.最终顶点坐标，赋值给
gl_Position
gl_Position：顶点着色器中某一个顶点经过一系列处理后得到的结果
4、图元装配、光栅化
- 图元装配:将顶点数据计算成⼀个个图元(图元
Primitive：点,线,三⻆角形等)。在这个阶段会执⾏裁剪、透视分割和 Viewport变换操作。 - 图元类型和顶点索确定将被渲染的单独图元。对于每个单独图元及其对应的顶点，图元装配阶段执行的操作包括:将顶点着⾊器的输出值执⾏裁剪、透视分割、视⼝变换后进⼊入光栅化阶段。
- 光栅化：将图元转化为一组二维片段的过程，由于屏幕是2D的，所以转换的像素点也是二维的。
5、片元着色器(fragment shader)
片元着色器输入、输出
- 输入(3种方式)：
1.由顶点着色器桥接传递过来的纹理坐标等
2.通过uniform通道输入统一变量，即顶点/片元着色器中使用的不变的数据
3.采样器：表示顶点着色器使用纹理的特殊统一变量类型，例如纹理就是通过采样器传递 - 输出:
1.像素点经过片元着色器处理后的结果
片元着色器输入、输出
片元着色器业务内容
- 计算颜色
- 获取纹理值
- 往像素点中填充颜⾊值(纹理值/颜色值)
它可以⽤于图片/视频/图形中每个像素的颜⾊填充(⽐如给视频添加滤镜,实际上就是将视频中每个图⽚的像素点颜⾊填充进行修改.)
片元着色器GLSL代码
varying lowp vec2 varyTextCoord;
uniform sampler2D colorMap;
void main() {
gl_FragColor = texture2D(colorMap, varyTextCoord);
}
- varying：必须和顶点着色器中一模一样，才能传递纹理坐标
- sampler2D：采样器类型
- texture2D(纹理采样器，纹理坐标)：获取对应位置/坐标的颜色值，简称获得纹素
- gl_FragColor(内建变量)：将最终的颜色值赋值给它
gl_fragColor：经过片元着色器对某一个像素点来进行处理之后的结果
6、EGL(Embedded Graphics Library)
- 1.OpenGL ES 命令需要
渲染上下⽂和绘制表面才能完成图形图像的绘制。 - 2.渲染上下⽂: 存储相关OpenGL ES状态，是一个状态机。
- 3.绘制表面：⽤于绘制图元的表面,需要指定渲染的缓存区(例如颜⾊缓、深度和模板)。
- 4.OpenGL ES API并没有提供如何创建渲染上下文或者上下文如何连接到原生窗口系统。EGL是Khronos渲染API(如OpenGL ES) 和原⽣窗⼝系统之间的接⼝。唯⼀支持 OpenGL ES 却不支持EGL的平台是iOS. Apple 提供⾃己的EGL API的iOS实现,称为EAGL。
- 5.因为每个窗⼝系统都有不同的定义,所以EGL提供基本的不透明类型—EGLDisplay, 这 个类型封装了所有系统相关性,用于和原生窗⼝系统接⼝。
OpenGL ES图片滤镜、视频滤镜
图片滤镜
- 1.获取图片中的每一个像素点
- 2.像素点做饱和度处理
- 3.得到处理后的新颜色
- 4.将新的颜色放入帧缓存区
- 5.进行显示
视频滤镜
原理以及处理方式是一模一样的(GLSL代码)。
视频同样是一帧一帧处理，每一帧就是一张图片。
- 1.获得视频MP4文件。
- 2.获取h264(视频压缩文件) 。
- 3.将视频解码(解压)。还原成一帧一帧的图片。
- 4.针对每一帧图片进行处理。
网友评论