OpenGLES渲染

OpenGLES渲染

OpenGLES使用GPU渲染图片,不占用CPU,但其使用还是挺复杂的.

先用OpenGLES显示一张图片:

//
//  ShowViewController.m
//  OpenGLES
//
//  Copyright (c) 2014年 Y.X. All rights reserved.
//

#import "ShowViewController.h"
#import <GLKit/GLKit.h>
#import <CoreImage/CoreImage.h>

@interface ShowViewController ()
@property (nonatomic, strong) GLKView   *viewBuffer;
@end

@implementation ShowViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    // 获取OpenGLES渲染环境
    EAGLContext *eaglContext = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES2];

    // 根据图片获取尺寸
    UIImage *image = [UIImage imageNamed:@"demo.png"];
    CIImage *ciimage = [[CIImage alloc] initWithImage:image];
    CGRect rect = CGRectMake(, , image.size.width, image.size.height);

    // 初始化GLKView并指定OpenGLES渲染环境
    _viewBuffer = [[GLKView alloc] initWithFrame:rect context:eaglContext];
    [self.view addSubview:_viewBuffer];

    // 与OpenGLES绑定
    [_viewBuffer bindDrawable];

    // 定义绘制区域(像素描述)
    CGRect rectInPixels = \
        CGRectMake(0.0, 0.0, _viewBuffer.drawableWidth, _viewBuffer.drawableHeight);

    // 初始化CIImage的环境,指定在OpenGLES2上操作(此处只在GPU上操作)
    CIContext *context = \
        [CIContext contextWithEAGLContext:eaglContext
                                  options:@{kCIContextWorkingColorSpace:[NSNull null]}];

    // 开始绘制
    [context drawImage:ciimage
                inRect:rectInPixels
              fromRect:[ciimage extent]];

    // 显示
    [_viewBuffer display];
}

@end

只是显示一张图片而已,就需要写这么多的代码-_-!!!!

他有什么优势呢?其实,它的优势是实时渲染图片,不卡的.

//
//  RootViewController.m
//  OpenGLES
//
//  Copyright (c) 2014年 Y.X. All rights reserved.
//

#import "RootViewController.h"
#import <GLKit/GLKit.h>
#import <CoreImage/CoreImage.h>
#import <QuartzCore/QuartzCore.h>

@interface RootViewController ()

@property (nonatomic, strong) GLKView   *viewBuffer;

@property (nonatomic, strong) CIContext *ciContext;
@property (nonatomic, strong) CIImage   *ciImage;
@property (nonatomic, strong) CIFilter  *ciFilter;

@end

@implementation RootViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    // 获取OpenGLES2渲染环境
    EAGLContext *eaglContext = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES2];

    // 初始化一个viewBuffer,并指定在OpenGLES2环境渲染
    CGRect rect = CGRectMake(, ,
                             [UIImage imageNamed:@"demo"].size.width,
                             [UIImage imageNamed:@"demo"].size.height);
    _viewBuffer = [[GLKView alloc] initWithFrame:rect
                                         context:eaglContext];

    // 绑定将这个view与OpenGLES2绑定
    [_viewBuffer bindDrawable];
    [self.view addSubview:_viewBuffer];

    // 初始化CIImage的环境,指定在OpenGLES2上操作(此处只在GPU上操作)
    _ciContext = [CIContext contextWithEAGLContext:eaglContext
                                           options:@{kCIContextWorkingColorSpace:[NSNull null]}];

    // 获取CIImage
    _ciImage = [[CIImage alloc] initWithImage:[UIImage imageNamed:@"demo"]];

    // 初始化一个CIFilter
    _ciFilter = [CIFilter filterWithName:@"CISepiaTone"];
    [_ciFilter setValue:_ciImage forKey:kCIInputImageKey];
    [_ciFilter setValue:@ forKey:kCIInputIntensityKey];

    // 定义绘制区域(像素描述)
    CGRect rectInPixels = \
        CGRectMake(0.0, 0.0, _viewBuffer.drawableWidth, _viewBuffer.drawableHeight);

    // 开始绘制
    [_ciContext drawImage:_ciImage
                   inRect:rectInPixels
                 fromRect:[_ciImage extent]];
    [_viewBuffer display];

    UISlider *slider = [[UISlider alloc] initWithFrame:CGRectMake(, , , )];
    [self.view addSubview:slider];
    [slider addTarget:self
               action:@selector(event:)
     forControlEvents:UIControlEventValueChanged];
    slider.minimumValue = ;
    slider.maximumValue = ;
}

- (void)event:(UISlider *)slider
{
    [_ciFilter setValue:[NSNumber numberWithFloat:slider.value]
                 forKey:kCIInputIntensityKey];

    // 定义绘制区域(像素描述)
    CGRect rectInPixels = \
    CGRectMake(0.0, 0.0, _viewBuffer.drawableWidth, _viewBuffer.drawableHeight);

    [_ciContext drawImage:[_ciFilter outputImage]
                 inRect:rectInPixels
               fromRect:[_ciImage extent]];
    [_viewBuffer display];
}

@end

将这个View封装一下吧.

GPUView.h + GPUView.m

//
//  GPUView.h
//  OpenGLES
//
//  Copyright (c) 2014年 Y.X. All rights reserved.
//

#import <UIKit/UIKit.h>
#import <GLKit/GLKit.h>
#import <CoreImage/CoreImage.h>

@interface GPUView : UIView

- (void)drawCIImage:(CIImage *)ciImage;

@end

//
//  GPUView.m
//  OpenGLES
//
//  Copyright (c) 2014年 Y.X. All rights reserved.
//

#import "GPUView.h"

@interface GPUView ()

@property (nonatomic, assign)  CGRect     rectInPixels;
@property (nonatomic, strong)  CIContext *context;
@property (nonatomic, strong)  GLKView   *showView;

@end

@implementation GPUView

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self)
    {
        // 获取OpenGLES渲染环境
        EAGLContext *eaglContext = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES2];

        // 初始化GLKView并指定OpenGLES渲染环境 + 绑定
        _showView = [[GLKView alloc] initWithFrame:frame context:eaglContext];
        [_showView bindDrawable];

        // 添加进图层
        [self addSubview:_showView];

        // 创建CIContext环境
        _context = \
            [CIContext contextWithEAGLContext:eaglContext
                                      options:@{kCIContextWorkingColorSpace:[NSNull null]}];

        // 定义绘制区域(像素描述)
        _rectInPixels = \
            CGRectMake(0.0, 0.0, _showView.drawableWidth, _showView.drawableHeight);
    }
    return self;
}

- (void)drawCIImage:(CIImage *)ciImage
{
    // 开始绘制
    [_context drawImage:ciImage
                 inRect:_rectInPixels
              fromRect:[ciImage extent]];

    // 显示
    [_showView display];
}

@end

实现同样的效果:

//
//  ShowViewController.m
//  OpenGLES
//
//  Copyright (c) 2014年 Y.X. All rights reserved.
//

#import "ShowViewController.h"
#import <CoreImage/CoreImage.h>
#import "GPUView.h"

@interface ShowViewController ()
@property (nonatomic, strong) CIFilter  *ciFilter;
@property (nonatomic, strong) GPUView   *gpuView;
@end

@implementation ShowViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    // 根据图片获取尺寸
    UIImage *image   = [UIImage imageNamed:@"demo.png"];
    CIImage *ciimage = [[CIImage alloc] initWithImage:image];
    CGRect rect      = CGRectMake(, , image.size.width, image.size.height);

    // 初始化GPUView
    _gpuView = [[GPUView alloc] initWithFrame:rect];
    [self.view addSubview:_gpuView];
    [_gpuView drawCIImage:ciimage];

    // 初始化一个CIFilter
    _ciFilter = [CIFilter filterWithName:@"CISepiaTone"];
    [_ciFilter setValue:ciimage forKey:kCIInputImageKey];
    [_ciFilter setValue:@ forKey:kCIInputIntensityKey];

    // 初始化一个UISlider
    UISlider *slider = [[UISlider alloc] initWithFrame:CGRectMake(, , , )];
    [self.view addSubview:slider];
    [slider addTarget:self
               action:@selector(event:)
     forControlEvents:UIControlEventValueChanged];
    slider.minimumValue = ;
    slider.maximumValue = ;
}

- (void)event:(UISlider *)slider
{
    [_ciFilter setValue:[NSNumber numberWithFloat:slider.value]
                 forKey:kCIInputIntensityKey];
    [_gpuView drawCIImage:[_ciFilter outputImage]];
}

@end

看起来简洁多了.....

来点复杂点的,同时操作两个滤镜

//
//  ShowViewController.m
//  OpenGLES
//
//  Copyright (c) 2014年 Y.X. All rights reserved.
//

#import "ShowViewController.h"
#import <CoreImage/CoreImage.h>
#import "GPUView.h"

@interface ShowViewController ()
@property (nonatomic, strong) CIFilter  *ciFilter1;
@property (nonatomic, strong) CIFilter  *ciFilter2;
@property (nonatomic, strong) GPUView   *gpuView;

@property (nonatomic, strong) UISlider  *slider1;
@property (nonatomic, strong) UISlider  *slider2;
@end

@implementation ShowViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    // 根据图片获取尺寸
    UIImage *image   = [UIImage imageNamed:@"demo.png"];
    CIImage *ciimage = [[CIImage alloc] initWithImage:image];
    CGRect rect      = CGRectMake(, , image.size.width, image.size.height);

    // 初始化GPUView
    _gpuView = [[GPUView alloc] initWithFrame:rect];
    [self.view addSubview:_gpuView];
    [_gpuView drawCIImage:ciimage];

    // 初始化一个CIFilter
    _ciFilter1 = [CIFilter filterWithName:@"CISepiaTone"];
    [_ciFilter1 setValue:ciimage forKey:kCIInputImageKey];
    [_ciFilter1 setValue:@.f forKey:kCIInputIntensityKey];

    _ciFilter2 = [CIFilter filterWithName:@"CIHueAdjust"];
    [_ciFilter2 setValue:[_ciFilter1 outputImage] forKeyPath:kCIInputImageKey];
    [_ciFilter2 setValue:@.f forKeyPath:kCIInputAngleKey];

    // 初始化UISlider
    _slider1 = [[UISlider alloc] initWithFrame:CGRectMake(, , , )];
    [self.view addSubview:_slider1];
    [_slider1 addTarget:self
               action:@selector(event1:)
     forControlEvents:UIControlEventValueChanged];
    _slider1.minimumValue = ;
    _slider1.maximumValue = ;
    _slider1.value = 0.5f;

    _slider2 = [[UISlider alloc] initWithFrame:CGRectMake(, , , )];
    [self.view addSubview:_slider2];
    [_slider2 addTarget:self
                action:@selector(event2:)
      forControlEvents:UIControlEventValueChanged];
    _slider2.minimumValue = -3.14f;
    _slider2.maximumValue = +3.14f;
    _slider2.value = .f;
}

- (void)event1:(UISlider *)slider
{
    [_ciFilter1 setValue:[NSNumber numberWithFloat:_slider1.value]
                 forKey:kCIInputIntensityKey];
    [_ciFilter2 setValue:[_ciFilter1 outputImage] forKeyPath:kCIInputImageKey];
    [_ciFilter2 setValue:[NSNumber numberWithFloat:_slider2.value] forKeyPath:kCIInputAngleKey];
    [_gpuView drawCIImage:[_ciFilter2 outputImage]];
}

- (void)event2:(UISlider *)slider
{
    [_ciFilter1 setValue:[NSNumber numberWithFloat:_slider1.value]
                  forKey:kCIInputIntensityKey];
    [_ciFilter2 setValue:[_ciFilter1 outputImage] forKeyPath:kCIInputImageKey];
    [_ciFilter2 setValue:[NSNumber numberWithFloat:_slider2.value] forKeyPath:kCIInputAngleKey];
    [_gpuView drawCIImage:[_ciFilter2 outputImage]];
}

@end