KxMovieGLView
该类就是展示类. 该类的图像展示是使用openGL进行绘制的.
类结构
KxMovieGLView.png
public 方法
- (id) initWithFrame:(CGRect)frame decoder: (KxMovieDecoder *) decoder;// 初始化
- (void) render: (KxVideoFrame *) frame; ///渲染图片
OpenGL 基础知识
渲染层
+ (Class) layerClass
{
return [CAEAGLLayer class];
}
想要使用openGL进行绘制,必须使用CAEAGLLayer 作为UIView的图层才可以.
使用OpenGL基本步骤
第一步:配置layer
CAEAGLLayer *eagLayer = (CAEAGLLayer *)self.layer;
eagLayer.opaque = YES; // 提高渲染质量 但会消耗内存
eagLayer.drawableProperties = @{kEAGLDrawablePropertyRetainedBacking : @(false),kEAGLColorFormatRGBA8:@(true)};
kEAGLDrawablePropertyRetainedBacking 不需要retain 已经渲染的图像
kEAGLColorFormatRGBA8 OpenGL采用的颜色空间
第二步 配置context 上下文
self.eagContext = [[EAGLContext alloc]initWithAPI:kEAGLRenderingAPIOpenGLES2];
[EAGLContext setCurrentContext:self.eagContext];
第三步 创建一个帧缓冲区
glGenFramebuffers(1, &_framebuffer); // 为帧缓存申请一个内存标示，唯一的 1.代表一个帧缓存
glBindFramebuffer(GL_FRAMEBUFFER, _framebuffer);// 把这个内存标示绑定到帧缓存上
第四步 创建渲染buffer
glGenRenderbuffers(1, &_colorRenderbuffer);
glBindRenderbuffer(GL_RENDERBUFFER, _colorRenderbuffer);
[self.eagContext renderbufferStorage:GL_RENDERBUFFER fromDrawable:(CAEAGLLayer*)self.layer];
glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0,GL_RENDERBUFFER, _colorRenderbuffer);
第五步 规定绘制屏幕大小
CGFloat scale = [[UIScreen mainScreen] scale]; //获取视图放大倍数，可以把scale设置为1试试
glViewport(self.frame.origin.x * scale, self.frame.origin.y * scale, self.frame.size.width * scale, self.frame.size.height * scale); //设置视口大小
glClearColor(1, 1, 1, 1);
glClear(GL_COLOR_BUFFER_BIT);
第六步 渲染顶点
设置顶点 和 shader
第七步 展示数据
[self.eagContext presentRenderbuffer:GL_RENDERBUFFER];
补充知识
glGetRenderbufferParameteriv(GL_RENDERBUFFER, GL_RENDERBUFFER_WIDTH, &_backingWidth);
glGetRenderbufferParameteriv(GL_RENDERBUFFER, GL_RENDERBUFFER_HEIGHT, &_backingHeight);
获取屏幕的宽高
Shader and Program编程基本概念
在OpenGL ES中，每个program对象有且仅有一个Vertex Shader对象和一个Fragment Shader对象连接到它。
Shader：类似于C编译器
Program：类似于C链接器
glLinkProgram操作产生最后的可执行程序，它包含最后可以在硬件上执行的硬件指令。
- 创建Shader
- 1.）编写Vertex Shader和Fragment Shader源码。
- 2.）创建两个shader 实例：GLuint glCreateShader(GLenum type);
- 3）给Shader实例指定源码。 glShaderSource
- 4）在线编译shaer源码 void glCompileShader(GLuint shader)
- 创建Program
- 1）创建program GLuint glCreateProgram(void)
- 2）绑定shader到program 。 void glAttachShader(GLuint program, GLuint shader)。每个program必须绑定一个Vertex Shader 和一个Fragment Shader。
- 3）链接program 。 void glLinkProgram(GLuint program)
- 4）使用porgram 。 void glUseProgram(GLuint program)
- 对于使用独立shader编译器编译的二进制shader代码，可使用glShaderBinary来加载到一个shader实例中。
shader(着色器) 编程
着色器，是一种较为简短的程序片段，用于告诉图形软件如何计算和输出图像。shader主要分两类：Vertex Shader（顶点着色器）和Fragment Shader（片段着色器）
shader三种变量类型（uniform，attribute和varying）
uniform变量一般用来表示：变换矩阵，材质，光照参数和颜色等信息。
uniform mat4 viewProjMatrix; //投影+视图矩阵
uniform mat4 viewMatrix; //视图矩阵
uniform vec3 lightPosition; //光源位置
attribute变量是只能在vertex shader中使用的变量。（它不能在fragment shader中声明attribute变量，也不能被fragment shader中使用）
一般用attribute变量来表示一些顶点的数据，如：顶点坐标，法线，纹理坐标，顶点颜色等。
在application中，一般用函数glBindAttribLocation（）来绑定每个attribute变量的位置，然后用函数glVertexAttribPointer（）为每个attribute变量赋值。
varying变量是vertex和fragment shader之间做数据传递用的。一般vertex shader修改varying变量的值，然后fragment shader使用该varying变量的值。因此varying变量在vertex和fragment shader二者之间的声明必须是一致的。application不能使用此变量。
内置变量
内置变量可以与固定函数功能进行交互。在使用前不需要声明。顶点着色器可用的内置变量如下表：
| 名称 | 类型 | 描述 |
|---|---|---|
| gl_Color | vec4 | 输入属性-表示顶点的主颜色 |
| gl_SecondaryColor | vec4 | 输入属性-表示顶点的辅助颜色 |
| gl_Normal | vec3 | 输入属性-表示顶点的法线值 |
| gl_Vertex | vec4 | 输入属性-表示物体空间的顶点位置 |
| gl_MultiTexCoordn | vec4 | 输入属性-表示顶点的第n个纹理的坐标 |
| gl_FogCoord | float | 输入属性-表示顶点的雾坐标 |
| gl_Position | vec4 | 输出属性-变换后的顶点的位置，用于后面的固定的裁剪等操作。所有的顶点着色器都必须写这个值。 |
| gl_ClipVertex | vec4 | 输出坐标，用于用户裁剪平面的裁剪 |
| gl_PointSize | float | 点的大小 |
| gl_FrontColor | vec4 | 正面的主颜色的varying输出 |
| gl_BackColor | vec4 | 背面主颜色的varying输出 |
| gl_FrontSecondaryColor | vec4 | 正面的辅助颜色的varying输出 |
| gl_BackSecondaryColor | vec4 | 背面的辅助颜色的varying输出 |
| gl_TexCoord[] | vec4 | 纹理坐标的数组varying输出 |
| gl_FogFragCoord | float | 雾坐标的varying输出 |
片段着色器的内置变量如下表：
| 名称 | 类型 | 描述 |
|---|---|---|
| gl_Color | vec4 | 包含主颜色的插值只读输入 |
| gl_SecondaryColor | vec4 | 包含辅助颜色的插值只读输入 |
| gl_TexCoord[] | vec4 | 包含纹理坐标数组的插值只读输入 |
| gl_FogFragCoord | float | 包含雾坐标的插值只读输入 |
| gl_FragCoord | vec4 | 只读输入，窗口的x,y,z和1/w |
| gl_FrontFacing | bool | 只读输入，如果是窗口正面图元的一部分，则这个值为true |
| gl_PointCoord | vec2 | 点精灵的二维空间坐标范围在(0.0, 0.0)到(1.0, 1.0)之间，仅用于点图元和点精灵开启的情况下。 |
| gl_FragData[] | vec4 | 使用glDrawBuffers输出的数据数组。不能与gl_FragColor结合使用。 |
| gl_FragColor | vec4 | 输出的颜色用于随后的像素操作 |
| gl_FragDepth | float | 输出的深度用于随后的像素操作，如果这个值没有被写，则使用固定功能管线的深度值代替 |
gl_Position 输出的是投影矩阵
矩阵变换
OpenGL中的坐标处理过程包括模型变换、视变换、投影变换、视口变换等过程.
具体变换过程可以参考这里
这里贴两张图
image.png
image.png
这里 gl_Position = 模型变换世界坐标系转换投影转换* 顶点坐标
这里 模型变换 就是自身大小,是标准矩阵
世界坐标系转换 默认把模型放在世界坐标系的原点
投影转换 是正交矩阵
顶点
顶点是啥?
顶点就是坐标位置，不管你是画直线,三角形，正方体，球体，以及3D游戏人物等，都需要顶点来确定其形状。
顶点可可以被定为为2维或者三维，这个看你的实际情况!但是你要注意，所有的内部计算都是建立在三维数据的基础之上，比如:你定义一个点(x,y) 是二维形式，OpenGL默认把它的z设置为0,看到这里你以为三维就是(x,y,z)的形式吗？不是的，OpenGL 是根据三维投影几何的齐次方程坐标进行操作的，因此在内部计算是都是用4个浮点坐标值表示(x,y,z,w) 如果w不等于0 那么这些坐标值就对应于与欧几里德三维点(x/w,y/w,z/w)。一般情况下w默认为1.0.
可以参考这里学习顶点知识
类介绍
初始化
- (id) initWithFrame:(CGRect)frame
decoder: (KxMovieDecoder *) decoder
{
self = [super initWithFrame:frame];
if (self) {
_decoder = decoder;
if ([decoder setupVideoFrameFormat:KxVideoFrameFormatYUV]) {
_renderer = [[KxMovieGLRenderer_YUV alloc] init];
LoggerVideo(1, @"OK use YUV GL renderer");
} else {
_renderer = [[KxMovieGLRenderer_RGB alloc] init];
LoggerVideo(1, @"OK use RGB GL renderer");
}
CAEAGLLayer *eaglLayer = (CAEAGLLayer*) self.layer;
eaglLayer.opaque = YES;
eaglLayer.drawableProperties = [NSDictionary dictionaryWithObjectsAndKeys:
[NSNumber numberWithBool:FALSE], kEAGLDrawablePropertyRetainedBacking,
kEAGLColorFormatRGBA8, kEAGLDrawablePropertyColorFormat,
nil];
_context = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES2];
if (!_context ||
![EAGLContext setCurrentContext:_context]) {
LoggerVideo(0, @"failed to setup EAGLContext");
self = nil;
return nil;
}
glGenFramebuffers(1, &_framebuffer);
glGenRenderbuffers(1, &_renderbuffer);
glBindFramebuffer(GL_FRAMEBUFFER, _framebuffer);
glBindRenderbuffer(GL_RENDERBUFFER, _renderbuffer);
[_context renderbufferStorage:GL_RENDERBUFFER fromDrawable:(CAEAGLLayer*)self.layer];
glGetRenderbufferParameteriv(GL_RENDERBUFFER, GL_RENDERBUFFER_WIDTH, &_backingWidth);
glGetRenderbufferParameteriv(GL_RENDERBUFFER, GL_RENDERBUFFER_HEIGHT, &_backingHeight);
glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_RENDERBUFFER, _renderbuffer);
GLenum status = glCheckFramebufferStatus(GL_FRAMEBUFFER);
if (status != GL_FRAMEBUFFER_COMPLETE) {
LoggerVideo(0, @"failed to make complete framebuffer object %x", status);
self = nil;
return nil;
}
GLenum glError = glGetError();
if (GL_NO_ERROR != glError) {
LoggerVideo(0, @"failed to setup GL %x", glError);
self = nil;
return nil;
}
if (![self loadShaders]) {
self = nil;
return nil;
}
_vertices[0] = -1.0f; // x0
_vertices[1] = -1.0f; // y0
_vertices[2] = 1.0f; // ..
_vertices[3] = -1.0f;
_vertices[4] = -1.0f;
_vertices[5] = 1.0f;
_vertices[6] = 1.0f; // x3
_vertices[7] = 1.0f; // y3
LoggerVideo(1, @"OK setup GL");
}
return self;
}
- 设置解码器解码成yuv 格式数据流
- 配置layer
- 配置上下文,上下文不合法返回
- 创建缓冲区
- 创建渲染buffer.并且绑定渲染buffer的宽高内存地址
- 加载shader
- 设置顶点(这里采用的顶点是二维的,四个角)
加载shader
这里我们主要看看shader yuv 格式的转换
attribute vec4 position;
attribute vec2 texcoord;
uniform mat4 modelViewProjectionMatrix;
varying vec2 v_texcoord;
void main()
{
gl_Position = modelViewProjectionMatrix * position;
v_texcoord = texcoord.xy;
}
modelViewProjectionMatrix 是应该模型矩阵,世界标准矩阵,和正交矩阵转换好的矩阵(二维矩阵没必要使用投影.)
v_texcoord 保存纹理
vec4 texture2D(sampler2D sampler, vec2 coord)
The texture2D function returns a texel, i.e. the (color) value of the texture for the given coordinates.
第一个参数代表图片纹理，第二个参数代表纹理坐标点(代表绘制方向)，通过GLSL的内建函数texture2D来获取对应位置纹理的颜色RGBA值
我们看yuv片段着色器
varying highp vec2 v_texcoord;
uniform sampler2D s_texture_y;
uniform sampler2D s_texture_u;
uniform sampler2D s_texture_v;
void main()
{
highp float y = texture2D(s_texture_y, v_texcoord).r;
highp float u = texture2D(s_texture_u, v_texcoord).r - 0.5;
highp float v = texture2D(s_texture_v, v_texcoord).r - 0.5;
highp float r = y + 1.402 * v;
highp float g = y - 0.344 * u - 0.714 * v;
highp float b = y + 1.772 * u;
gl_FragColor = vec4(r,g,b,1.0);
}
这里我们知道我们采用的是yuv颜色空间,而渲染要rgb 颜色,因此需要yuv颜色空间转换成rgb颜色空间.
这里我们看见每个从texture2D 获取的rgbA颜色我们只是获取的r颜色空间.这主要是外界传入给我们的数据导致的
image.png
public 方法
- (void)render: (KxVideoFrame *) frame
{
static const GLfloat texCoords[] = {
0.0f, 1.0f,
1.0f, 1.0f,
0.0f, 0.0f,
1.0f, 0.0f,
};
[EAGLContext setCurrentContext:_context];
glBindFramebuffer(GL_FRAMEBUFFER, _framebuffer);
glViewport(0, 0, _backingWidth, _backingHeight);
glClearColor(0.0f, 0.0f, 0.0f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT);
glUseProgram(_program);
if (frame) {
[_renderer setFrame:frame];
}
if ([_renderer prepareRender]) {
GLfloat modelviewProj[16];
mat4f_LoadOrtho(-1.0f, 1.0f, -1.0f, 1.0f, -1.0f, 1.0f, modelviewProj);
glUniformMatrix4fv(_uniformMatrix, 1, GL_FALSE, modelviewProj);
glVertexAttribPointer(ATTRIBUTE_VERTEX, 2, GL_FLOAT, 0, 0, _vertices);
glEnableVertexAttribArray(ATTRIBUTE_VERTEX);
glVertexAttribPointer(ATTRIBUTE_TEXCOORD, 2, GL_FLOAT, 0, 0, texCoords);
glEnableVertexAttribArray(ATTRIBUTE_TEXCOORD);
#if 0
if (!validateProgram(_program))
{
LoggerVideo(0, @"Failed to validate program");
return;
}
#endif
glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);
}
glBindRenderbuffer(GL_RENDERBUFFER, _renderbuffer);
[_context presentRenderbuffer:GL_RENDERBUFFER];
}
这个方法就是将镇数据渲染到gl所在的屏幕上.
该类还是比较简单的,就是单纯的将yuv数据进行播放.