了解 OpenGL ES

OpenGL ES

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

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

OpenGL ES

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

CPU部分

1.app代码通过OpenGL ES API,会调度OpenGL ES Framework
2.通过OpenGL ES client 调度 OpenGL ES sever,将顶点数据等传递到GPU

GPU部分

做一些图形硬件的处理,例如光栅化、显示界面等。

图形管道
以上图片的过程

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

Apple官方图示

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

图形管道

1.APP:提供图元装配顶点信息,图片信息
2.Vertex(顶点着色器):处理顶点 -> 图形变换(旋转、缩放、平移)
3.Geometry(图元装配):图元装配 + 裁剪(超出屏幕部分被裁剪)
4.Fragment(片元着色器) :纹理处理+雾化处理
5.Framebuffer Operation(帧缓冲区) :透明度混合、模板、深度测试;最后在混合

顶点着⾊器
顶点着色器输入-输出
输入,有3种方式

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

输出:经过处理的最终顶点数据,有2种
  1. gl_Position是GLSL的内建变量,是将处理后的最终顶点数据复制给它。
  2. gl_PointSize是指顶点尺寸,即可以在顶点着色器中修改每个点的大小,使用率较低。
顶点着色器处理的业务

1.矩阵变换位置
2.计算光照公式生成逐顶点颜色(也可以片元着色器)
3.生成/变换纹理坐标:片元着色器是没有办法传入属性即attribute的,可以通过顶点着色器桥接,间接将纹理坐标属性传递到片元着色器

顶点着色器GLSL代码示例

1.attribute、uniform 表示client与server之间的通道
2.其中的vec4、vec2都是向量类型,表示四维向量和二维向量
3.mat4:4*4矩阵
4.varying是修饰符:通过varying将纹理坐标传入到片元着色器
5.lowp:低精读
6.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; 
}
图元装配、光栅化

1.图元装配:将顶点数据计算成一个个图元
2.光栅化:将图元转化为一组二维片段的过程,主要是由于屏幕是2D的,所以转换的像素点也是二维的

片元着色器
片元着色器输入-输出
输入同顶点着色器一样,有3种方式

1.由顶点着色器桥接传递过来的纹理坐标等
2.通过uniform通道输入统一变量,即顶点/片元着色器中使用的不变数据
3.采样器:表示顶点着色器使用纹理的特殊统一变量类型,例如纹理就是通过采样器来传递
4.输出:某个像素点经过片元着色器处理后的结果

片元着色器业务

1.计算颜色
2.获取纹理值
3.往像素点填充颜色值(纹理值/颜色值)

片元着色器GLSL代码示例

1.varying:必须和顶点着色器中一模一样,这样才能传递纹理坐标
2.sampler2D 采样器类型
3.texture2D(纹理采样器,纹理坐标):获取对应位置/坐标的颜色值,简称获得纹素
4.gl_FragColor(内建变量):将最终的颜色值赋值给它

varying lowp vec2 varyTextCoord; 
uniform sampler2D colorMap;
void main() {
gl_FragColor = texture2D(colorMap, varyTextCoord); }

总结

1.顶点着色器、片元着色器都是代码段,类似于iOS中的函数/方法,有返回值
1.1 顶点着色器的返回值会被复制给gl_Position
1.2 片元着色器的结果会赋值给gl_fragColor

2.这两个返回值都属于GLSL中的内建变量,是封装好的,直接将数据赋值给它即可
2.1 gl_Position 顶点着色器中某一个顶点经过一系列处理后得到的结果
2.2 gl_fragColor 经过片元着色器对某一个像素点来进行处理之后的结果

逐片段操作

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

OpenGL ES的应用

图片滤镜

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

视频滤镜
  • 原理以及处理方式是一样的(GLSL代码),视频也是一帧一帧处理的,而一帧就是一张图片

1.获得视频MP4文件
2.拿到h264(视频压缩文件)
3.将视频解码(解压),还原成一帧一帧的图片
4.针对一帧一帧的图片进行处理

EGL(Embedded Graphics Library)

  1. OpenGL ES 命令需要渲染上下⽂绘制表面才能完成图形图像的绘制
    2.渲染上下⽂: 存储相关OpenGL ES状态,是一个状态机

绘制表面:⽤于绘制图元的表面,需要指定渲染的缓存区,例如颜⾊缓、深度和模板

3.OpenGL ES API 并没有提供如何创建渲染上下文或者上下文如何连接到原生窗口系 统. EGL 是Khronos 渲染API(如OpenGL ES) 和原⽣窗⼝系统之间的接⼝. 唯⼀支持 OpenGL ES 却不支持EGL的平台是iOS. Apple 提供⾃己的EGL API的iOS实现,称为EAGL
4.因为每个窗⼝系统都有不同的定义,所以EGL提供基本的不透明类型—EGLDisplay, 这 个类型封装了所有系统相关性,用于和原生窗⼝系统接⼝

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,588评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,456评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,146评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,387评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,481评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,510评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,522评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,296评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,745评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,039评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,202评论 1 343
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,901评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,538评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,165评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,415评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,081评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,085评论 2 352