Introducing the GPUImage framework

Giới thiệu

CPUImage framework là một thư viện iOS cho phép bạn áp dụng bộ lọc và những hiệu ứng vào ảnh, live camera video và movies.

Khi so sánh với Core Image(từ iOS 5.0), GPU cho phép bạn tuỳ chỉnh bộ lọc, support từ iOS 4.0 và có một giao diện đơn giản. Tuy nhiên it cũng thiếu một vài tích năng lợi thế của Core Image như là nhận diện khuôn mặt.

Đối với hoạt động song song như xử lý ảnh hoặc live video frames, GPUs có lợi thế đáng kể về hiệu năng hơn CPUs.
Ví dụ: trên iPhone4, một bộ filter ảnh đơn giản có thể chạy nhanh hơn 100 lần nếu đem kết quả GPU so với CPU

Kiến trúc tổng quan

GPUImage sử dụng OpenGL ES 2.0 để thực hiện thao tác hình ảnh và video nhanh hơn nhiều so với CPU.

Nó che giấu sự phức tạp của tương tác với OpenGL ES API trong một giao diện Objective-C đơn giản. Giao diện này cho phép bạn xác định các nguồn đầu vào cho hình ảnh và video, đính kèm các bộ lọc trong một chuỗi và gửi hình ảnh hoặc video được xử lý kết quả lên màn hình, đến một UIImage hoặc một bộ phim trên đĩa.

Hình ảnh hoặc khung video được tải lên từ các đối tượng nguồn, là các lớp con của GPUImageOutput. Chúng bao gồm GPUImageVideoCamera (cho video trực tiếp từ máy ảnh IOS) và GPUImagePicture (cho ảnh tĩnh). Các đối tượng nguồn sẽ tải các khung hình ảnh lên OpenGL ES làm kết cấu, sau đó đưa những kết cấu đó tới các đối tượng tiếp theo trong chuỗi xử lý.

Bộ lọc và các phần tử tiếp theo khác trong chuỗi phù hợp với giao thức GPUImageInput, cho phép chúng lấy được cấu trúc được cung cấp hoặc được xử lý từ liên kết trước trong chuỗi và làm gì đó với nó. Các đối tượng một bước tiếp theo của chuỗi được coi là các mục tiêu, và xử lý có thể được phân nhánh bằng cách thêm nhiều mục tiêu vào một đầu ra hoặc bộ lọc.

Ví dụ: một ứng dụng lấy video trực tiếp từ máy ảnh, chuyển đổi video đó sang giai điệu nâu đỏ, sau đó hiển thị video trên màn hình sẽ thiết lập một chuỗi tìm kiếm giống như sau:

GPUImageVideoCamera -> GPUImageSepiaFilter -> GPUImageView

Các chức năng phổ biến

Filtering live video

Để lọc video trực tiếp từ máy ảnh của thiết bị iOS, bạn có thể sử dụng mã như sau:

GPUImageVideoCamera *videoCamera = [[GPUImageVideoCamera alloc] initWithSessionPreset:AVCaptureSessionPreset640x480 cameraPosition:AVCaptureDevicePositionBack];
videoCamera.outputImageOrientation = UIInterfaceOrientationPortrait;

GPUImageFilter *customFilter = [[GPUImageFilter alloc] initWithFragmentShaderFromFile:@"CustomShader"];
GPUImageView *filteredVideoView = [[GPUImageView alloc] initWithFrame:CGRectMake(0.0, 0.0, viewWidth, viewHeight)];

// Add the view somewhere so it's visible

[videoCamera addTarget:customFilter];
[customFilter addTarget:filteredVideoView];

[videoCamera startCameraCapture];

Capturing and filtering a still photo

Để chụp và lọc ảnh tĩnh, bạn có thể sử dụng quy trình tương tự với quy trình lọc video. Thay vì GPUImageVideoCamera, bạn sử dụng GPUImageStillCamera:

stillCamera = [[GPUImageStillCamera alloc] init];
stillCamera.outputImageOrientation = UIInterfaceOrientationPortrait;

filter = [[GPUImageGammaFilter alloc] init];
[stillCamera addTarget:filter];
GPUImageView *filterView = (GPUImageView *)self.view;
[filter addTarget:filterView];

[stillCamera startCameraCapture];

Processing a still image

Có một vài cách để xử lý một hình ảnh tĩnh và tạo ra một kết quả. Cách đầu tiên bạn có thể thực hiện bằng cách tạo một đối tượng nguồn hình ảnh tĩnh và tự tạo một chuỗi lọc:

UIImage *inputImage = [UIImage imageNamed:@"Lambeau.jpg"];

GPUImagePicture *stillImageSource = [[GPUImagePicture alloc] initWithImage:inputImage];
GPUImageSepiaFilter *stillImageFilter = [[GPUImageSepiaFilter alloc] init];

[stillImageSource addTarget:stillImageFilter];
[stillImageFilter useNextFrameForImageCapture];
[stillImageSource processImage];

UIImage *currentFilteredVideoFrame = [stillImageFilter imageFromCurrentFramebuffer];

Writing a custom filter

Một lợi thế đáng kể của thư viện này đối với Core Image trên iOS (như của iOS 5.0) là khả năng tự tạo các bộ lọc hình ảnh và xử lý video của riêng bạn. Các bộ lọc này được cung cấp dưới dạng đoạn mã OpenGL ES 2.0, được viết bằng OpenGL giống như C.

Một bộ lọc tùy chỉnh được khởi tạo với mã như sau:

GPUImageFilter *customFilter = [[GPUImageFilter alloc] initWithFragmentShaderFromFile:@"CustomShader"];

Bộ phận phân mảnh thực hiện phép tính cho mỗi pixel được hiển thị ở giai đoạn lọc đó. Họ làm điều này bằng cách sử dụng ngôn ngữ Shading OpenGL (GLSL), một ngôn ngữ giống như C với các bổ sung cụ thể cho đồ họa 2-D và 3-D. Một ví dụ của một shader mảnh là bộ lọc màu nâu sau đây:

varying highp vec2 textureCoordinate;

uniform sampler2D inputImageTexture;

void main()
{
    lowp vec4 textureColor = texture2D(inputImageTexture, textureCoordinate);
    lowp vec4 outputColor;
    outputColor.r = (textureColor.r * 0.393) + (textureColor.g * 0.769) + (textureColor.b * 0.189);
    outputColor.g = (textureColor.r * 0.349) + (textureColor.g * 0.686) + (textureColor.b * 0.168);    
    outputColor.b = (textureColor.r * 0.272) + (textureColor.g * 0.534) + (textureColor.b * 0.131);
    outputColor.a = 1.0;

    gl_FragColor = outputColor;
}

Filtering and re-encoding a movie

Movie có thể được load vào thư viện thông qua class GPUImageMovie, được lọc và sau đó viết ra sử dụng GPUImageMovieWriter:

movieFile = [[GPUImageMovie alloc] initWithURL:sampleURL];
pixellateFilter = [[GPUImagePixellateFilter alloc] init];

[movieFile addTarget:pixellateFilter];

NSString *pathToMovie = [NSHomeDirectory() stringByAppendingPathComponent:@"Documents/Movie.m4v"];
unlink([pathToMovie UTF8String]);
NSURL *movieURL = [NSURL fileURLWithPath:pathToMovie];

movieWriter = [[GPUImageMovieWriter alloc] initWithMovieURL:movieURL size:CGSizeMake(480.0, 640.0)];
[pixellateFilter addTarget:movieWriter];

movieWriter.shouldPassthroughAudio = YES;
movieFile.audioEncodingTarget = movieWriter;
[movieFile enableSynchronizedEncodingUsingMovieWriter:movieWriter];

[movieWriter startRecording];
[movieFile startProcessing];

Kết Luận

GPUImage là một điều hiếm hoi cho cộng đồng mã nguồn mở và chúng ta là những nhà phát triển Mac & iOS rất may mắn khi sử dụng chúng.
GPUImage với tốc độ xử lý filter image, video đáng nể của mình và đặc biệt chúng ta có thể viết các bộ lọc tuỳ chỉnh của riêng mình.

Cám ơn bạn đã dành thời gian cho bài viết! :)

https://github.com/BradLarson/GPUImage
http://nshipster.com/gpuimage/