iPhoneで動作する映像フィルタをつくる：GPUImageってすごい！

: 2013.11.11.

: iOS アプリ開発日記

: GPUImage iOS フィルタ映像画像加工

andy

こんにちはandyです。
今回は、iPhoneで動作する映像フィルタを作ってみたいと思います。

GPUImageを使ってみました

ブログで書いてましたがGPUImageというライブラリを使います。このライブラリ、ネットで検索すると情報はいくつか出てきますが、まだまだ数が少なくて試行錯誤って感じです。特に動画で使う場合は・・・

それでは、簡単な手順を順を追って説明します。

まず、GPUImageとを使用するためにライブラリをダウンロードします。
ダウンロードサイトはこちら

ダウンロード後にファイルを解凍するとGPUImage-masterというフォルダが出来ます。

ライブラリを使ってiPhoneで出来る映像フィルタを作成していきます。

今回は、既存の映像ファイルを使用しますが、カメラからの映像で使用出来るものを作ることもできます（ただ、個人的にはカメラの映像を直接フィルタリングして保存するよりも、撮影後に行った方がいろんな意味で都合が良いと考えていますが・・・）。

Xcodeを起動して、新規プロジェクトを作成します。
Single View Applicationを選択して次に進みます。

ここの項目は、任意で大丈夫です。

入力後プロジェクトを保存したらXcode上にプロジェクトウィンドウが表示されます。

先ほどのGPUImageライブラリをこのプロジェクトで使えるようにします。

プロジェクトウィンドウの左側に表示されているFrameworksフォルダに、先ほどダウンロードしたGPUImage-masterフォルダの中のframeworkフォルダにあるGPUImage.xcodeprojをドロップします。

このプロジェクトのプロジェクトファイルをクリックしてからXcodeの表示をBuild Settingsに変更します。

検索窓に「Header Search」と入力、Header Search Pathsの項目をダブルクリックします。

入力用のウィンドウが表示されますので、「+」をクリックし、以下のように入力します。
../GPUImage-master/framework

私の場合は今作業しているプロジェクトフォルダと、GPUImage-masterフォルダが同一階層のあるために、プロジェクトファイルから先ほどドロップしたGPUImage.xcodeprojファイルがある場所までのパスは上記のような感じになるのですが、保存場所によってパスは変更する必要がありますので気をつけてください。また、右のプルダウンでrecursiveを選択します。

ARCを利用したい場合（Xcode 5.0.1の場合はデフォルトでオン）は、検索窓に「Other Linker Flags」と入力、Other Linker Flagsの項目をダブルクリックします。入力用のウィンドウが表示されますので、「+」をクリックし、以下のように入力します。
-fobjc-arc

他に必要なライブラリを読み込みますので、Xcodeの表示をBuild Phasesに変更します。

Link Binary With Librariesの項目を開き、「+」ボタンで以下のライブラリを追加します。
- CoreMedia
- CoreVideo
- OpenGLES
- AVFoundation
- QuartzCore
- libGPUImage.a

これでGPUImageライブラリが使用できるようになりました。

次に、フィルタのテストで使う映像を用意します。
今回は下記のサイトからMpeg4のファイルを使用させていただきました。
NHKクリエイティブ・ライブラリー

Xcode上でコード用のフォルダ内にResouresフォルダを作成します。

この中に用意したMpeg4のファイルをドロップします。
動画の解像度等は使用するデバイスによっては制限がありますので、余り大きなものを使用しないことをお勧めします。また、iOSシュミレータでは動画の表示ができませんので実機を使ってください。

コードは以下の通り。

NSURL *fileURL = [[NSBundle mainBundle] URLForResource:@"Resourcesフォルダに入れた動画ファイルの名前" withExtension:@"mp4"];

GPUImageView *filterView = [[GPUImageView alloc] initWithFrame:CGRectMake(0, 0, 320, 240)];

GPUImagePolkaDotFilter *filter = [[GPUImagePolkaDotFilter alloc] init];

GPUImageMovie *movieFile = [[GPUImageMovie alloc] initWithURL:fileURL];
movieFile.playAtActualSpeed = YES;[movieFile addTarget:filter];

[filter addTarget:filterView];
[self.view addSubview:filterView];
[movieFile startProcessing];

フィルタは、かなりの種類あってサンプルコードはGPUImage-masterフォルダ内にありますので、興味のある方はご覧ください。

コードのリファレンスは、前回のブログにも書きましたがこちらです。
GPUImage Reference

実際に動作させるとこんな感じのフィルタになります。ここで使用しているフィルタはGPUImagePolkaDotFilterです。