読者です 読者をやめる 読者になる 読者になる

try! Swift Core Imageによる高度な画像処理" #tryswiftconf Day3-5

try! Swift 2016

Simon Gladman

Simonは初期のSwift言語のチャンピオンです。彼のブログ(http://flexmonkey.blogspot.co.uk)はiOSのテクノロジーを探求・検証する際の人気のソースになっています。いくつものiOSアプリをリリースしており、その中にnode.jsベースのiPad用画像処理アプリであるNodalityも含まれています。余暇は、物理・粒子シミュレーション・画像処理・今までにないユーザインタラクションといったよりクリエイティブな方向性の取り組みをしています。

twitter.com

Core ImageAppleが提供している画像処理・解析用フレームワークです。170以上の組み込みフィルタ(単独でも組み合わせても使えます)とカスタムフィルタを自分で作ることもできるので、Core Imageは静止画および動画に適用可能な視覚効果に対するとてつもないポテンシャルを提供しています。この講演では、Core Imageの基本から上級テクニックまでご紹介します。

f:id:niwatako:20160304122957j:plain

CoreImageは画像処理解析フレームワークで静止画動画を処理できます。170位上のフィルタがあります。シンプルなリニアチェーンやグラフで使うことも出来ます。そしてパフォーマンスが高いです。metalで処理したり。そしてCoreImageが無制限の可能性、我々が0からOpenGLでフィルタを作れる。画像処理に加えて画像解析も行える。CIDetecterでバーコードを認識したり。他のフレームワーク、SceneKitと使ったり出来る。

f:id:niwatako:20160304123243j:plain

f:id:niwatako:20160304123301j:plain

画像処理アルゴリズムがありアウトプットを生成

f:id:niwatako:20160304123322j:plain

軽量、並行可能、フィルターを複数かけたり出来る。

f:id:niwatako:20160304123349j:plain

CIImage で画像を扱え、UIImage返還時にフィルタが実行される。

f:id:niwatako:20160304123427j:plain

Fundamentalとして。フィルタをコンパイルして実行し、GPU、CPUへ行く。理想的には一つを使って同じコンテキストを再利用することが考えられる。異なるスレッドで共有できる。

f:id:niwatako:20160304123509j:plain

フィルタにはカテゴリがある。

f:id:niwatako:20160304123523j:plain f:id:niwatako:20160304123538j:plain f:id:niwatako:20160304123556j:plain f:id:niwatako:20160304123609j:plain f:id:niwatako:20160304123628j:plain

一つのクラスでフィルタを提供して使うことが出来ます。

f:id:niwatako:20160304123644j:plain

すべての利用可能なカテゴリが示されます。

f:id:niwatako:20160304123721j:plain

Filterを探すオープンソースがあり、ほぼすべてのFilterを試せます。

f:id:niwatako:20160304123734j:plain

Generator以外は画像のインプットを受け付けます。

f:id:niwatako:20160304123807j:plain

フィルタインスタンスを作ってパラメータを設定していく。

f:id:niwatako:20160304123831j:plain f:id:niwatako:20160304123843j:plain

便利なメソッドで簡単にもできます

f:id:niwatako:20160304123852j:plain f:id:niwatako:20160304123915j:plain

お互いコンポジットしてブレンドしていくことが出来る

f:id:niwatako:20160304123943j:plain

暗くしていって

f:id:niwatako:20160304124006j:plain

コンポジットで重ねる

f:id:niwatako:20160304124019j:plain

f:id:niwatako:20160304124033j:plain

それぞれのステップ、バッファを作ったと考えられますが、これらを連結して一つのカーネルに出来ます

f:id:niwatako:20160304124057j:plain

ラップして一つのフィルタにします

f:id:niwatako:20160304124112j:plain

ビルトインフィルタとして使うには登録します

f:id:niwatako:20160304124131j:plain

フィルタベンダの中身

f:id:niwatako:20160304124207j:plain

ビルトインフィルタと同じように使えます

f:id:niwatako:20160304124221j:plain

カーネルアウトプット画像をそれぞれ見ていきましょう、ループを作って。

f:id:niwatako:20160304124236j:plain

WarpKernelがピクセルのポジションを変えます。色は付けられません。

ClorKernelはピクセルのある場所の色を変えます。

ワープカーネルを細かく見ていきます。

回転スケールなど

f:id:niwatako:20160304124441j:plain

f:id:niwatako:20160304124501j:plain

逆さまにしたい場合 pixcel y を全体の高さから引くということをする

f:id:niwatako:20160304124525j:plain f:id:niwatako:20160304124535j:plain

f:id:niwatako:20160304124601j:plain

もう一つのワープカーネルです。

f:id:niwatako:20160304124627j:plain

カラーカーネルは色を変更します

f:id:niwatako:20160304124728j:plain

若干輝度の高いイメージを作ります

f:id:niwatako:20160304124746j:plain

カラーカーネルは他のピクセルにアクセスしませんがサンプルコードのコーディネーターはわかっています

f:id:niwatako:20160304124829j:plain

このようなタイル化は可能です。

f:id:niwatako:20160304124849j:plain f:id:niwatako:20160304124908j:plain f:id:niwatako:20160304124936j:plain f:id:niwatako:20160304124957j:plain f:id:niwatako:20160304125016j:plain f:id:niwatako:20160304125043j:plain f:id:niwatako:20160304125053j:plain

CIImageはGenerateされたものは無限の大きさになるのでCrop?

f:id:niwatako:20160304125135j:plain

これらのフィルタを適用する中で最終的にUIImageにアウトプットが必要です

f:id:niwatako:20160304125204j:plain

この時ちょっと時間がかかります。

UIImageをCIImageのために作るとパフォーマンスに影響します。コンテンツモードをサポートしていないということで奇妙な結果になります。 2つの方法があります。パフォーマンス改善のためにCIContextを使い回す

f:id:niwatako:20160304125301j:plain

コンテンツモードが尊重されるようになり、CoreImageFilterはGPUで描画します。静的なイメージなら良いが、ビデオならより早いアプローチが必要になります。

f:id:niwatako:20160304125347j:plain f:id:niwatako:20160304125357j:plain f:id:niwatako:20160304125411j:plain f:id:niwatako:20160304125424j:plain

さらにシンプルに、サブクラスを利用できる

f:id:niwatako:20160304125434j:plain f:id:niwatako:20160304125457j:plain f:id:niwatako:20160304125529j:plain f:id:niwatako:20160304125538j:plain f:id:niwatako:20160304125552j:plain f:id:niwatako:20160304125622j:plain f:id:niwatako:20160304125628j:plain f:id:niwatako:20160304125639j:plain f:id:niwatako:20160304125645j:plain f:id:niwatako:20160304125659j:plain

f:id:niwatako:20160304125706j:plain f:id:niwatako:20160304125719j:plain

QA

もう一つのGPImageViewがありますがGPUのほうが良いと思うが、カメラからのインプットに高いパフォーマンスを示すと思いますが、どうなりますか

CoreImageもGPU使います。選択できます。どちらがパフォーマンスが良いかは私にはよくわからないです。

気に入った記事は はてなブックマーク

はてなブックマークアプリiOS開発チームから来ました! はてなブックマークにはSwift特集があります! 良い記事を見逃さないように、ご利用ください! http://b.hatena.ne.jp/hotentry/it/Swift

そして良いまとめ記事があったらはてなブックマークでブックマークしましょう! try! Swift の記事で盛り上がると嬉しいです!