お使いのブラウザは、バージョンが古すぎます。

このサイトは、Internet Explore8・Internet Explore9には対応しておりません。
恐れ入りますが、お使いのブラウザをバージョンアップしていただきますよう宜しくお願いいたします。

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

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

GPUImageを使ってみました

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

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

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

image1

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

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

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

  1. Xcodeを起動して、新規プロジェクトを作成します。
  2. Single View Applicationを選択して次に進みます。
  3. image3
  4. ここの項目は、任意で大丈夫です。
  5. image4
  6. 入力後プロジェクトを保存したらXcode上にプロジェクトウィンドウが表示されます。
  7. image5

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

  1. プロジェクトウィンドウの左側に表示されているFrameworksフォルダに、先ほどダウンロードしたGPUImage-masterフォルダの中のframeworkフォルダにあるGPUImage.xcodeprojをドロップします。
  2. image8
  3. このプロジェクトのプロジェクトファイルをクリックしてからXcodeの表示をBuild Settingsに変更します。
  4. image9
  5. 検索窓に「Header Search」と入力、Header Search Pathsの項目をダブルクリックします。
  6. image10
  7. 入力用のウィンドウが表示されますので、「+」をクリックし、以下のように入力します。

    ../GPUImage-master/framework

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

  8. image11
  9. ARCを利用したい場合(Xcode 5.0.1の場合はデフォルトでオン)は、検索窓に「Other Linker Flags」と入力、Other Linker Flagsの項目をダブルクリックします。入力用のウィンドウが表示されますので、「+」をクリックし、以下のように入力します。
    -fobjc-arc
  10. image12
  11. 他に必要なライブラリを読み込みますので、Xcodeの表示をBuild Phasesに変更します。
  12. image13
  13. Link Binary With Librariesの項目を開き、「+」ボタンで以下のライブラリを追加します。
    • CoreMedia
    • CoreVideo
    • OpenGLES
    • AVFoundation
    • QuartzCore
    • libGPUImage.a
  14. image14

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

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

  1. Xcode上でコード用のフォルダ内にResouresフォルダを作成します。
  2. image15
  3. この中に用意したMpeg4のファイルをドロップします。
    動画の解像度等は使用するデバイスによっては制限がありますので、余り大きなものを使用しないことをお勧めします。また、iOSシュミレータでは動画の表示ができませんので実機を使ってください。
  4. image16
  5. コードは以下の通り。
    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です。
image17image18

今回は、フィルタリングした映像を表示するだけでしたが、当然ファイルへの出力も出来ます。OpenGLを使用しているためにフィルタがほぼリアルタイムで動作していますので、動画を再生しながら使いたいフィルタを選択していくといったプログラムも作れそうです。

基本となる部分はこんなに簡単に出来てしまうので、これを利用してどんなアプリを作るか考えるだけでも面白いですね。

まだまだ映像に関するプログラムの作成を進めたいと思っていますので、ネタが出来たら書いていきます。

それでは。

コメントをどうぞ

メールアドレスは公開されません。* が付いている欄は必須項目です。


お気軽にお問い合わせください。

日本VTR実験室では、お仕事のご依頼、ブログ・コラムのご感想などを受け付けております。
アプリ開発・コンテンツ制作でお困りでしたら、お気軽にご相談ください。
ご連絡お待ちしております。

お問い合わせはこちらから

03-3541-1230

info@nvtrlab.jp

電話受付対応時間:平日AM9:30〜PM6:00