[Android] GPUImage for Android で超爆速画像フィルターを作成しよう！ | アドカレ2013 : SP #13

超爆速で画像を加工！

アドベントカレンダー13日目は GPUImage for Android という画像加工ライブラリのご紹介です。

GPUImage for Android はその名の通り GPU で画像加工を処理するライブラリです。 同じ名前の GPUImage という iOS 用のライブラリがありますが、GPUImage for Android はこのライブラリの Android 移植版です。CyberAgent さんの github で公開されており、Apache License 2.0 でライセンスされています。

CPU で処理する場合と比べ物にならないほど超爆速で処理できるのが最大の特長です。また、各フィルタークラスが Photoshop の写真加工を意識した設計になっているという点もかなり捗ります。画像加工する上で右に出るものは居ないライブラリだと思います！ということで GPUImage for Android の使いかたをまとめてみました。

ライブラリをインポートする

ライブラリは Github にあるので clone してきます。

git clone https://github.com/CyberAgent/android-gpuimage.git

このリポジトリを Eclipse にインポートします。library と sample の2つのプロジェクトが含まれているので両方ともインポートしましょう。

これでOKです。サンプルプロジェクトを実行してみましょう。…と思ったら私の環境では以下のようなエラーになりました。

これはライブラリの so ファイルが library と sample で競合しているためでした。sample/libs/armeabi の sample/libs/x86 フォルダを消すとエラーが消えて実行できるようになると思います。

ちなみに Maven のプロジェクトになっているので、Maven を使ってインポートすることもできます。

<dependency>
  <groupId>jp.co.cyberagent.android.gpuimage</groupId>
  <artifactId>gpuimage-library</artifactId>
  <type>apklib</type>
  <version>(use current version here)</version>
</dependency>

サンプルアプリで遊んでみる

サンプルアプリでは GPUImage for Android で使うことができるさまざまなフィルター処理を試すことができます。フィルターをかける対象は Bitmap かカメラプレビューのいずれかになるので、好きな方を試してみると良いと思います。カメラプレビューでリアルタイムで高速にフィルターをかけることができるのはかなり感動します！さすが GPU ですね！

画像を加工してみる

それでは画像を加工する処理を実装してみたいと思います。本記事では適当な Bitmap にスケッチ風のフィルターをかける処理を実装してみます。下図はオリジナル画像です。

ちなみにこちらの柴犬さんは以下のサイトからいただきました！

http://anijan.net/photo/index.html

まずはプロジェクトを作って GPUImage for Android ライブラリをインポートしましょう。 また、加工元となる画像を assets フォルダに入れておきます。

あとは Activity#onCreate() で assets フォルダから画像を取り出し、GPUImage クラスを使って画像加工処理を実装します。加工した Bitmap を ImageView にセットして表示します。

// 画像をとってくる
AssetManager as = getAssets();
InputStream is = null;
Bitmap bitmap = null;
try {
	is = as.open("dog.jpg");
	bitmap = BitmapFactory.decodeStream(is);
	is.close();
} catch (IOException e) {
	Log.e("MainActivity", "Error");
}

// GPUImage で写真加工
GPUImage gpuImage = new GPUImage(this);
gpuImage.setImage(bitmap);
gpuImage.setFilter(new GPUImageToonFilter());
bitmap = gpuImage.getBitmapWithFilterApplied();

// ImageView に表示
ImageView view = new ImageView(this);
view.setImageBitmap(bitmap);
setContentView(view);

実行してみましょう。ちなみにデバッグ実行すると処理が遅いので、なかなか処理が終わらない場合はデバッグ実行ではなく普通に実行するようにしましょう。

こんな感じでサクッと画像加工できます！

Photoshop で作成したトーンカーブをそのまま適用する

GPUImage for Android の魅力は高速なだけではありません！Photoshop のトーンカーブファイルをセットするだけでトーンカーブをかけることができます！これはデザイン側も実装側も相当捗る素晴らしい機能だと思います！(もちろん本家 iOS 版の GPUImage にも付いています)手順もかなりカンタンなのでぜひ使ってみてください！下図のような感じのフィルターが速攻で作れます。

手順を解説します。まず Photoshop でいい感じのトーンカーブを作ります。まずは写真を開き「色調補正」ウインドウのメニューで「トーンカーブ」を選択します。

トーンカーブの名前は適当でOKです。

トーンカーブ調整ウインドウが表示されるので、いい感じにトーンをカーブさせます。今回は適当にいい感じにしました。

レッド

グリーン

ブルー

値を変えると写真がリアルタイムに変化するので、確認しながらいい感じに調整しましょう。調整が終わったらメニューから「トーンカーブプリセットを保存」を選び、プロジェクトフォルダの assets フォルダに保存しましょう。acv という拡張子のファイルが保存されると思います。

ここまでできたら Photoshop の作業は終わりです。ADT に戻り、先ほどの画像加工処理のソースコードを修正します。

// 画像をとってくる
AssetManager as = getAssets();
InputStream is = null;
Bitmap bitmap = null;
try {
	is = as.open("dog.jpg");
	bitmap = BitmapFactory.decodeStream(is);
	is.close();
} catch (IOException e) {
	Log.e("MainActivity", "Error");
}

// ACVファイルをとってきてFilterを作成
GPUImageToneCurveFilter filter = new GPUImageToneCurveFilter();
try {
	is = as.open("tone_curve.acv");
	filter.setFromCurveFileInputStream(is);
	is.close();
} catch (IOException e) {
	Log.e("MainActivity", "Error");
}

// GPUImage で写真加工
GPUImage gpuImage = new GPUImage(self);
gpuImage.setImage(bitmap);
gpuImage.setFilter(filter);
bitmap = gpuImage.getBitmapWithFilterApplied();

// ImageView に表示
ImageView view = new ImageView(self);
view.setImageBitmap(bitmap);
setContentView(view);

実行してみると…いい感じになりました！

こんな感じで、Photoshop から書き出したトーンカーブファイルを読み込んで適用させることができます。トーンカーブの調整値はファイルを上書きするだけで良いので、デザイナーさんにあとで「やっぱりもうちょっと調整したいんだけど…」とお願いされてもソースコードを修正することなく変更できますね。

このライブラリを活用したアプリ「四字熟語カメラ」

この便利なライブラリを活用したアプリ「四字熟語カメラ」を先日リリースしました！ Android 版と iOS 版の同時リリースになりますが、いずれも GPUImage ライブラリを使わせていただきました。

Android 版をインストールする

iOS 版をインストールする

本アプリは「四字熟語」をコンセプトに、四字熟語の意味に合ったエフェクトがかかる面白系カメラアプリです。下図のようなエフェクトがかかった写真をカンタンに作り、シェアすることができます。

この写真加工の処理すべてに GPUImage を使っています。実際に開発してみたところ、写真加工の処理の作業がかなり捗りました！ GPUImage for Android が本家 GPUImage のクラス名や調整値をほぼそのまま移植しているので、どちらかのプラットフォームでフィルターを作ってしまえば移植はクラスの作りかたとかを変えるだけで済みます。どのような処理速度で加工できるのか試す意味でも、まずはインストールして試していただければと思います！

まとめ

以上、素敵な画像加工ライブラリの紹介でした！いいこと尽くめなライブラリですので、画像加工するアプリを作る場合はぜひ活用しましょう！