TOC
OpenGL ES 初识
OpenGL ES 简介
OpenGL ES (OpenGL for Embedded Systems)是以手持和嵌入式为⽬标的⾼级3D图形应⽤程序编程接⼝(API). OpenGL ES 是⽬前智能⼿机中占据统治地位的图形API.⽀持的平台: iOS, Andriod , BlackBerry ,bada ,Linux ,Windows.
- OpenGL的跨平台并不是说一套代码适配安卓和iOS两套系统，OpenGL不提供窗口
- 跨平台跨的是GLSL语言，顶点数据和着色器
OpenGL ES 在APPLE中的解释
- 苹果对于OpenGL ES的介绍
- 简化了OpenGL代码，剔除了非移动的代码
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的简化版本，它消除了冗余功能，提供了一个既易于学习又更易于在移动图形硬件中实现的库。
OpenGL ES framework
image
OpenGL ES允许应⽤程序利用底层图形处理器的强⼤功能。iOS设备上的GPU可以执行复杂的2D和3D绘图，以及最终图像中每个像素的复杂着⾊计算。
- OpenGL ES framework提供的API，也是运行在CPU，也就是client里面
- 直到到顶点渲染开始就是GPU处理阶段
OpenGL ES 图形管线
- 蓝宝书中的管线：数据类型
image
- 图像管线，简化版，重点关注左侧4个箭头
image
- 顶点数据：内存拷贝到顶点缓存区里面（所有数据最开始一定是先在内存中，不会直接存在显存中）
- 左侧的箭头表示可以通过API来控制这四个东西
- 苹果给出的图像管线：重点在每个过程所做的工作
image
着色器相关内容
前面学到的所有固定着色器就是一个代码片段，由GPU执行
顶点着色器
1. 顶点着色器作用
- 着⾊器程序—描述顶点上执⾏操作的顶点着⾊器程序源代码/可执⾏文件
- 顶点着⾊器输⼊(属性) — 用顶点数组提供每个顶点的数据
- 统⼀变量(uniform)—顶点/⽚元着⾊器使用的不变数据
- 采样器—代表顶点着⾊器使⽤纹理的特殊统一变量类型
2. 顶点着色器数据处理
image
- 可以通过统一变量、属性、采样器（例如纹理采样）输入给顶点着色器
-
gl_Position：顶点着色器最终输出结果的关键类型（最终类型）。内建变量，事先已经定义好了，直接使用即可 - gl_PointSize：点的尺寸
3. 顶点着色器业务
- 矩阵变换位置
- 计算光照公式⽣成逐顶点颜色
- 生成/变换纹理坐标
- 片元着色器需要传递属性（attribute）时，需要通过顶点着色器将属性（attribute）透传过来，因为它本身是不能直接获取到属性（attribute）的。
总结: 它可以⽤于执行⾃定义计算,实施新的变换,照明或者传统的固定功能所不允许的基于顶点的效果。
4. 顶点着色器代码
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;
}
- 代码并不复杂，因为GPU不处理逻辑业务
- 可能是没有代码提示等风格，导致看起来复杂
- 实现内容1：纹理坐标的桥接
- 实现内容2：纹理和旋转矩阵的乘法
图元装配
顶点着⾊器之后,下一个阶段就是图元装配。
图元(Primitive): 点,线,三⻆形等。
图元装配: 将顶点数据计算成⼀个图元.在这个阶段会执⾏裁剪、透视分割和Viewport变换操作。这个过程由OpenGL完成，开发者不能编写。
图元类型和顶点确定将被渲染的单独图元。对于每个单独图元及其对应的顶点，图元装配阶段执行的操作包括:将顶点着色器的输出值执⾏裁剪、透视分割、视口变换 后进入光栅化阶段。
光栅化
在这个阶段绘制对应的图元(点/线/三⻆形). 光栅化就是将图元转化成一组二维片段的过程。而这些转化的⽚段将由⽚元着⾊器处理.这些⼆维⽚段就是屏幕上可绘制的像素。
光栅化的作用：就是将图元转换成片元
- 有多少个像素点，片元着色器就会执行多少次
- 但不会出现性能问题，因为GPU是真正的高并发，有很多ALU（计算单元）
光栅化
⽚元着⾊器/片段着⾊器/像素着色器
1. 片元着色器作用
- 着⾊器程序—描述片段上执行操作的⽚元着⾊器程序源代码/可执行⽂件
- 输入变量— 光栅化单元用插值为每个片段⽣成的顶点着⾊器输出
- 统⼀一变量量(uniform)—顶点/片元着⾊器使用的不变数据
- 采样器—代表⽚元着⾊器使⽤纹理的特殊统一变量类型.
2. 片元着色器数据处理
image
- 输入变量：由顶点着色器透传过来
- gl_fragColor：片元着色器对某一个像素点进行处理之后的结果。内建变量
3. 片元着色器业务
- 计算颜⾊
- 获取纹理值
- 往像素点中填充颜色值(纹理值/颜色值);
总结: 它可以⽤于图片/视频/图形中每个像素的颜⾊填充(⽐如给视频添加滤镜，实际上就是将视频中每个图⽚的像素点颜⾊填充进行修改。
4. 片元着色器代码
varying lowp vec2 varyTextCoord;
uniform sampler2D colorMap;
void main() {
gl_FragColor = texture2D(colorMap, varyTextCoord);
}
【补充】滤镜处理过程
-
图片滤镜：
图片中每一个像素点 -->像素点饱和度处理 ---->新的颜色 ------>帧缓存区 -------->显示 -
视频滤镜：原理与图片滤镜处理一模一样
-
视频mp4：转成图片之后的处理过程都是一样的
h264（视频压缩文件） -->解码(解压） ---->一帧一帧图片 视频也是由图片组成。视频中的图片是YUV格式，只占3/2个颜色通道
逐片元操作
逐片元操作流程
-
像素归属测试: 确定帧缓存区中位置(Xw,Yw)的像素目前是不是归属于OpenGL ES所有. 例如,如果⼀个显示OpenGL ES帧缓存区View被另外一个View 所遮蔽.则窗口系统
可以确定被遮蔽的像素不属于OpenGL ES上下文.从⽽不全显示这些像素.⽽而像素归属测试是OpenGL ES 的一部分,它不由开发者人为控制,⽽是由OpenGL ES 内部进⾏. -
裁剪测试: 裁剪测试确定(Xw,Yw)是否位于作为OpenGL ES状态的一部分裁剪矩形范围 内.如果该片段位于裁剪区域之外,则被抛弃. -
深度测试: 输⼊片段的深度值进步比较,确定片段是否拒绝测试 -
混合: 混合将新生成的⽚段颜色与保存在帧缓存的位置的颜⾊值组合起来. -
抖动: 抖动可用于最⼩化因为使⽤有限精度在帧缓存区中保存颜色值⽽而产生的伪像.
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是基于C的API，因此它⾮常便携且受到⼴泛⽀支持。作为C API，它与Objective-C Cocoa Touch应⽤程序无缝集成。OpenGL ES规范没有定义窗⼝层; 相反，托管操作系统必须提供函数来创建一个接受命令的OpenGL ES 渲染上下文和⼀个帧缓冲区，其中写入任何绘图命令的结果。在iOS上使⽤用OpenGL ES需要使⽤用iOS类来设置和呈现绘图表⾯，并使⽤平台中立的API来呈现其内容。
- 苹果提供 glkview 作为窗口
- EGL：提供 OpenGL ES 与 原生窗口之间链接的接口。iOS系统推出的是 EAGL
- 核心动画：特殊图层（专门提供给 OpenGL ES使用的图片 CAEAGLayer）
理解动画
1. 动画循环
image
- 视觉暂留
- 16帧就能看起来像动画
- 逐帧动画
2. OpenGL ES 显示器执⾏动画的应⽤程序流程
image
网友评论