实战OpenGLES－－iOS平台使用OpenGLES渲染YUV图片

　　上一篇文章 实战FFmpeg－－iOS平台使用FFmpeg将视频文件转换为YUV文件 演示了如何将视频文件转换为yuv文件保存，现在要做的是如何将yuv文件利用OpenGLES渲染展示出图像画面。要将一个视频文件渲染成连续的视频画面，首先要解决如何渲染一张yuv图片文件。下面就来看看如何通过OpenGLES来渲染yuv图片。

　　本文的实现是参照网上的一些零碎的信息做出来的，费了不少精力。使用opengles首先要知道它的基本使用流程，opengles的基本使用参看文章  [OpenGL ES 01]OpenGL ES之初体验、 [OpenGL ES 02]OpenGL ES渲染管线与着色器 ，仔细学习这2篇文章就能对opengles的使用会有清楚的认识。至于利用opengles来渲染yuv，这就是深层次的运用了，关于yuv的渲染，雷神的文章那必须要仔细仔细再仔细的看的 最简单的视音频播放示例6：OpenGL播放YUV420P（通过Texture，使用Shader）出，将opengl渲染yuv的流程和细节讲的很透彻，前提是要大概懂点c++方面的东西，这个使用的是vs的开发环境。我对opengles的认识，要得益于这三篇，让我对opengles有了比较深刻的认识。

　　现在开始在Xcode中实现yuv文件的渲染。首先，要提一提cocoaChina上的一篇帖子 OpenGL播放yuv视频 ，我写的工程就是参考了这篇帖子中的代码，展示yuv的openglesview的原型就是这篇帖子给的代码，所以这篇帖子以及帖子后面别人的跟帖是需要仔细看的，因为楼主没有给出完整的demo，所以我在仔细研究了这篇帖子之后，写出了实现opengles渲染yuv的demo。

　　以下罗列下cocoaChina上的帖子 OpenGL播放yuv视频 渲染yuv中楼主与跟贴者互动中说明的要注意的地方：

 

//初始化
OpenGLView20 *glView = [[OpenGLView20 alloc] initWithFrame:frame];
//设置视频原始尺寸
[glView setVideoSize:352 height:288];
//渲染yuv
[glView displayYUV420pData:yuvBuffer width:352height:288;
//将352,288换成你自己的

 

 

- (void)viewDidAppear:(BOOL)animated
{
    [super viewDidAppear:animated];
    NSData *reader = [NSData dataWithContentsOfFile:@"/Users/sky/Desktop/yuvtest/yuvtest/201461110423.yuv"];
    NSLog(@"the reader length is %i", reader.length);
    
    UInt8 * pFrameRGB = (UInt8*)[reader bytes];
    
    //[self.opengl displayYUV420pData:pFrameRGB width:1280 height:720];
    
    OpenGLView20 * myview = [[OpenGLView20 alloc]initWithFrame:CGRectMake(10, 10, 100, 100)];
    
    [self.view addSubview:myview];
    NSLog(@"window before added %@", myview.window);
    [myview setVideoSize:100 height:50];
    [myview displayYUV420pData:pFrameRGB width:100 height:100];
}


我这样写，yuv的图像总是显示不出来，现在出现的问题是在文件的这个地方

#ifdef DEBUG
    
    GLenum err = glGetError();
    if (err != GL_NO_ERROR)
    {
        printf("GL_ERROR=======>%d\n", err);
    }
    struct timeval nowtime;
    gettimeofday(&nowtime, NULL);
    if (nowtime.tv_sec != _time.tv_sec)
    {
        printf("视频 %d 帧率:   %d\n", self.tag, _frameRate);
        memcpy(&_time, &nowtime, sizeof(struct timeval));
        _frameRate = 1;
    }
    else
    {
        _frameRate++;
    }
#endif

GL_ERROR=======>1282 这个错误，是否因为我对这个库用错了，还是因为其他的原因，有点不懂 

 

[self.view addSubview:myview];执行后，需要点时间来创建缓冲区，不能立马显示数据。
你可以把创建和addsubview提前到别的地方

或者延后点再调用displayYUV420pData

看效果可以这样
[myview displayYUV420pData:pFrameRGB width:100 height:100];
改成
dispatch_async(dispatch_get_global_queue(0, 0), ^{
        sleep(1);
        [glView displayYUV420pData:data width:100 height:100];
    }); 

这个类有个bug：动态创建的view，有时候显示图像显示不出来，卡的要死，内存还会不断增大， 帧率打印是 1帧/秒。

治标的办法有2种:

1.把创建view放到viewDidLoad或者更早的地方，创建好后添加到视图上，这种不会出问题。

2.如果实在是需要动态创建，则创建并添加到视图上后，执行glview.layer.borderWidth = 1.0;glview.layer.borderWidth = 0;相当于刷新下视图，然后再调用display。这种需要找合适的时机刷新，刷新和渲染最好有时间间隔。

这个bug的原因我不清楚，貌似OpenGL的conext绑定有问题。也找不到彻底的解决方案。有谁知道原因的话，告诉我，谢谢。
就是这里描述的问题 http://www.cocoachina.com/bbs/read.php?tid=110721 

#import "SkyViewController.h"
#import "OpenGLView20.h"

@interface SkyViewController ()
//@property OpenGLView20* opengl;
@property (nonatomic , strong) OpenGLView20* opengl;
@property (nonatomic , strong) NSData* yuvData;
@property (nonatomic , strong) NSData* yuvData1;
@end

@implementation SkyViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    self.yuvData = [NSData dataWithContentsOfFile:@"/Users/sky/Desktop/yuvtest/yuvtest/201461110423.yuv"];
    self.yuvData1 = [NSData dataWithContentsOfFile:@"/Users/sky/Desktop/yuvtest/yuvtest/2014611103511.yuv"];
    NSLog(@"the reader length is %lu", (unsigned long)self.yuvData.length);
    self.opengl =[[OpenGLView20 alloc]initWithFrame:CGRectMake(0, 0, 1024, 768)];
    [self.view addSubview:self.opengl];
    
}

- (void)viewDidAppear:(BOOL)animated
{
    [super viewDidAppear:animated];
    
    UInt8 * pFrameRGB = (UInt8*)[self.yuvData bytes];
    UInt8 * pFrameRGB1 = (UInt8*)[self.yuvData1 bytes];
  
    
    NSLog(@"window before added %@", self.opengl.window);
    [self.opengl setVideoSize:1280 height:720];
    int n = 12;
    while (n--) {
        [self.opengl displayYUV420pData:pFrameRGB width:1280 height:720];
        [self.opengl displayYUV420pData:pFrameRGB1 width:1280 height:720];
    }



    
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
}

@end

那个文件里面不是有个帧率么，虽说那个算法不是很准确，也差不多，那个里面算出来的。我观察了一下，播放24帧用了3秒多，不过这个是在模拟器里面运行的，毕竟模拟器没有硬件来处理这些东西，在真机里面还没测，测了之后告诉你 

 

　　上面罗列的内容就是帖子的关键点，我是看了这些跟贴才整出可运行的demo的，搞这个demo的过程中遇到各种问题，费神啊，还好经过几个回合终于搞定了。

　　下面贴出我的代码，也就是上面帖子中谈到的关键地方：

//
//  ViewController.m
//  OpenGLESRenderYUVImage
//
//  Created by dev.temobi on 15/4/29.
//  Copyright (c) 2015年 dev.temobi. All rights reserved.
//

#import "ViewController.h"

#import "OpenGLView20.h"

@interface ViewController ()

@end

@implementation ViewController
{
    NSData *yuvData;
    OpenGLView20 * myview;
}

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    NSString *yuvFile = [[NSBundle mainBundle] pathForResource:@"jpgimage1_image_640_480" ofType:@"yuv"];
    yuvData = [NSData dataWithContentsOfFile:yuvFile];
    NSLog(@"the reader length is %lu", (unsigned long)yuvData.length);
    
    myview = [[OpenGLView20 alloc]initWithFrame:CGRectMake(20, 20, self.view.frame.size.width - 40, self.view.frame.size.height - 40)];
    [self.view addSubview:myview];
}

- (void)viewDidAppear:(BOOL)animated
{
    [super viewDidAppear:animated];
    
    UInt8 * pFrameRGB = (UInt8*)[yuvData bytes];
    [myview setVideoSize:640 height:480];
    [myview displayYUV420pData:pFrameRGB width:640 height:480];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

 

　　贴一张demo的运行效果图：

　　我写的完整demo －－ OpenGLESRenderYUVImage 下载地址为：http://pan.baidu.com/s/1hq09qoG