OPenGL ES _ 着色器_实战2

酷走天涯

发布于 2018-09-14 14:37:09

5990

发布于 2018-09-14 14:37:09

文章被收录于专栏：每日一篇技术文章每日一篇技术文章

学习是一件开心的额事情

手机截图

动画演示.gif

本节学习目标

使用OpenGLES + 着色器语言打造多屏显示视频框架。

实现步骤

1.使用AVPlayer 获取视频每一帧的YUV 像素数据

2.通过CoreVideo 框架中的几个方法,将Y分量和UV 分量进行分离

3.创建着色器，对Y分量和UV 分量进行采样.

4.在着色器中，将YUV 转换为RGB

5.计算视口的位置，分别进行渲染.

部分核心讲解

提醒各位，代码太多不能够全部讲解，我只讲关于OpenGLES 和着色器的部分，视频像素获取的代码，请自行搞定! 开发吧!

1.视频获取的代码封装了一下，文件名为"XJVRPlayerViewController.h" 和 "XJVRPlayerViewController.h" 请自定查阅.

2.我们核心讲解得是OSOpenGLESViewController控制器中的内容.

如果代码看不懂请从这里起步.

第一步.初始化

-(void)setup{
// 1.创建EALContext 对象管理GPU 
self.eagContext = [[EAGLContext alloc]initWithAPI:kEAGLRenderingAPIOpenGLES2];
[EAGLContext setCurrentContext:self.eagContext];
GLKView *view = (GLKView*)self.view;
view.drawableDepthFormat = GLKViewDrawableDepthFormat24;
view.context = self.eagContext;
// 2.设置渲染的帧率，这里我们调到最大
self.preferredFramesPerSecond = 60;
// 3.创建着色器管理对象，这个是我自己封装的
self.shaderManager = [[OSShaderManager alloc]init];
// 4.编译连个shader 文件
GLuint vertexShader,fragmentShader;
NSURL *vertexShaderPath = [[NSBundle mainBundle]URLForResource:@"Shader" withExtension:@"vsh"];
NSURL *fragmentShaderPath = [[NSBundle mainBundle]URLForResource:@"Shader" withExtension:@"fsh"];
if (![self.shaderManager compileShader:&vertexShader type:GL_VERTEX_SHADER URL:vertexShaderPath]||![self.shaderManager compileShader:&fragmentShader type:GL_FRAGMENT_SHADER URL:fragmentShaderPath]){
    return ;
}
// 5.注意获取绑定属性要在连接程序之前，为啥呢!经验，一会解释!
[self.shaderManager bindAttribLocation:GLKVertexAttribPosition andAttribName:"position"];
[self.shaderManager bindAttribLocation:GLKVertexAttribTexCoord0 andAttribName:"texCoord0"];


// 6.将编译好的两个对象和着色器程序进行连接
if(![self.shaderManager linkProgram]){
    [self.shaderManager deleteShader:&vertexShader];
    [self.shaderManager deleteShader:&fragmentShader];
}
// 7.获取着色器全局变量
_textureBufferY = [self.shaderManager getUniformLocation:"sam2DY"];
 _textureBufferUV = [self.shaderManager getUniformLocation:"sam2DUV"];
_rgbaFactor = [self.shaderManager getUniformLocation:"rgbaFactor"];

// 8.删除着色器对象
[self.shaderManager detachAndDeleteShader:&vertexShader];
[self.shaderManager detachAndDeleteShader:&fragmentShader];

// 9.启用着色器程序
[self.shaderManager useProgram];

//10.高危警告 一定要放在使用程序之后，不然程序不知道你下面的操作是干神马滴！！！

glUniform1i(_textureBufferY, 0); // 0 代表GL_TEXTURE0
glUniform1i(_textureBufferUV, 1); // 0 代表GL_TEXTURE0

// 11.创建视频纹理缓冲区
if (!_videoTextureCache) {
    CVReturn err = CVOpenGLESTextureCacheCreate(kCFAllocatorDefault, NULL, self.eagContext, NULL, &_videoTextureCache);
    if (err != noErr) {
        NSLog(@"Error at CVOpenGLESTextureCacheCreate %d", err);
        return;
    }
}

// 计算视频的宽度和高度
self.videoWidth = self.view.bounds.size.width/4.0;
self.videoHeight = self.videoWidth;;
}

2.加载顶点坐标和纹理坐标

顶点坐标数据

static GLfloat vertex[8] = {
1,1, //1
-1,1,//0
-1,-1, //2
1,-1, //3 
};

纹理坐标

static GLfloat textureCoords[8] = {
 1,0,
 0,0,
 0,1,
 1,1
 };

 下面的代码是将顶点坐标和纹理坐标加载到GPU中去，这段代码不解释，请看实战1.

-(void)loadVertex{
glGenVertexArraysOES(1, &_vertexArray);
glBindVertexArrayOES( _vertexArray);
// 加载顶点坐标
glGenBuffers(1, &_vertexBuffer);
glBindBuffer(GL_ARRAY_BUFFER, _vertexBuffer);
glBufferData(GL_ARRAY_BUFFER, sizeof(vertex), &vertex, GL_STATIC_DRAW);
glEnableVertexAttribArray(GLKVertexAttribPosition);
glVertexAttribPointer(GLKVertexAttribPosition, 2, GL_FLOAT, GL_FALSE, 8, NULL);

//加载纹理坐标
glGenBuffers(1, &_textureCoordBuffer);
glBindBuffer(GL_ARRAY_BUFFER, _textureCoordBuffer);
glBufferData(GL_ARRAY_BUFFER, sizeof(textureCoords), textureCoords, GL_STATIC_DRAW);
glEnableVertexAttribArray(GLKVertexAttribTexCoord0);
glVertexAttribPointer(GLKVertexAttribTexCoord0, 2, GL_FLOAT, GL_FALSE, 8, NULL);
glEnableVertexAttribArray(_vertexArray);  
}

3.将视频帧数据进行Y分量和UV 分量分解，加载到GPU 中去.

-(void)loadTexture{

if (!_videoTextureCache) {
    NSLog(@"No video texture cache");
    return;
}

// 下面这个是判断视频数据格式的，我在转换的时候，直接写死的.可以不要!
CFTypeRef colorAttachments = CVBufferGetAttachment(_pixelbuffer, kCVImageBufferYCbCrMatrixKey, NULL);
if (colorAttachments == kCVImageBufferYCbCrMatrix_ITU_R_601_4) {
   
}
else {
  
}

CGFloat width = CVPixelBufferGetWidth(self.pixelbuffer);
CGFloat height = CVPixelBufferGetHeight(self.pixelbuffer);

[self cleanUpTextures];
 CVReturn err;
 // 启用纹理缓冲区0
glActiveTexture(GL_TEXTURE0);
 // 获取Y 分量数据
err = CVOpenGLESTextureCacheCreateTextureFromImage(kCFAllocatorDefault,
                                                   _videoTextureCache,
                                                   _pixelbuffer,
                                                   NULL,
                                                   GL_TEXTURE_2D,
                                                   GL_RED_EXT,
                                                   width,
                                                   height,
                                                   GL_RED_EXT,
                                                   GL_UNSIGNED_BYTE,
                                                   0,
                                                   &_lumaTexture);
if (err) {
    NSLog(@"Error at CVOpenGLESTextureCacheCreateTextureFromImage %d", err);
    
}
// 绑定到纹理0 缓冲区
glBindTexture(CVOpenGLESTextureGetTarget(_lumaTexture), CVOpenGLESTextureGetName(_lumaTexture));
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);

// UV-plane.
glActiveTexture(GL_TEXTURE1);
err = CVOpenGLESTextureCacheCreateTextureFromImage(kCFAllocatorDefault,
                                                   _videoTextureCache,
                                                   _pixelbuffer,
                                                   NULL,
                                                   GL_TEXTURE_2D,
                                                   GL_RG_EXT,
                                                   width /2,
                                                   height /2,
                                                   GL_RG_EXT,
                                                   GL_UNSIGNED_BYTE,
                                                   1,
                                                   &_chromaTexture);
if (err) {
    NSLog(@"Error at CVOpenGLESTextureCacheCreateTextureFromImage %d", err);
}


glBindTexture(CVOpenGLESTextureGetTarget(_chromaTexture), CVOpenGLESTextureGetName(_chromaTexture));
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
}

5.绘制

-(void)glkView:(GLKView *)view drawInRect:(CGRect)rect{
glClearColor(1, 1, 1, 1);
glClear(GL_COLOR_BUFFER_BIT);
[self.shaderManager useProgram];

for (int i = 0 ; i< 4 ;i++){
   // 设置视口的位置大小
    glViewport(i%4 * self.videoWidth*2,i/4 *self.videoWidth*2 , self.videoWidth*2, self.videoWidth*2);
    switch (i) {
        case 0:
            glUniform4f(_rgbaFactor, self.redSlider.value, 1, 1, 1);
            break;
        case 1:
            glUniform4f(_rgbaFactor, 1.0, self.greenSlider.value, 1.0, 1.0);
            break;
        case 2:
            glUniform4f(_rgbaFactor, 1.0, 1.0, self.blueSlider.value, 1.0);
            break;
        case 3:
            glUniform4f(_rgbaFactor, 1.0, 1.0, 1.0, self.alphaSlider.value);                
            break;                
        default:
            break;
    }
    glDrawArrays(GL_TRIANGLE_FAN, 0, 4);
} 
}

看看着色器里面的源码

Shader.vsh

attribute vec4 position; // 顶点位置属性
attribute vec2 texCoord0;// 纹理坐标属性
varying  vec2 texCoordVarying;// 着色器输入变量
void main (){
texCoordVarying = texCoord0;
gl_Position = position;
}

Shader.fsh

precision mediump float;//设置float 精度 这个一定要设置
varying  vec2 texCoordVarying;
uniform sampler2D sam2DY; // Y分量的采样器
uniform sampler2D sam2DUV;// UV分量的采样器
uniform  vec4 rgbaFactor; // 控制reba数据的因子矢量
void main(){
mediump vec3 yuv;
lowp vec3 rgb;
mediump mat3 convert = mat3(1.164,  1.164, 1.164,
                            0.0, -0.213, 2.112,
                            1.793, -0.533,   0.0);
yuv.x = texture2D(sam2DY,texCoordVarying).r - (16.0/255.0);
yuv.yz = texture2D(sam2DUV,texCoordVarying).rg - vec2(0.5, 0.5);
rgb = convert*yuv;
rgb.r = rgb.r * rgbaFactor.x;
rgb.g = rgb.g * rgbaFactor.y;
rgb.b = rgb.b * rgbaFactor.z;
rgb = rgb*rgbaFactor.w;
gl_FragColor = vec4(rgb,1);
}

经验分享

绑定着色器属性，一定要放在连接程序之前 .因为程序连接后，会将着色器对象删除掉，这时候，你就找不到着色器对象的属性了，还怎么绑定呢? self.shaderManager bindAttribLocation:GLKVertexAttribPosition andAttribName:"position"; self.shaderManager bindAttribLocation:GLKVertexAttribTexCoord0 andAttribName:"texCoord0";
给着色器变量设置值得时候,一定要调用一次 glUseProgram(); 这个函数, 是为了告诉GPU 我设置属性是针对这个着色器程序的。因为着色器程序有可能被创建多个。他们可能还有相同的变量.下面是我封装的方法 self.shaderManager useProgram;
着色器视口的设置,我们一般设置视图大小的时候，都是按照物理尺寸来的,但是视口设置是按照像素来计算的，所以设置视口的时候，一般要根据你手机的分辨率进行设置，我手机是2倍屏，所以x2. glViewport(i%4 * self.videoWidth*2,i/4 *self.videoWidth*2 , self.videoWidth*2, self.videoWidth*2);

总结

先说到这里，你以为这就结束了，这才刚刚开始，后面还有几十个案例，持续讲解! 如有疑问请加群号交流:578734141。

需要代码的亲,请点赞

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2016.08.23 ，如有侵权请联系 cloudcommunity@tencent.com 删除

其他

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

其他

登录后参与评论

0 条评论

热度