Core Image Tips & Tricks in iOS 9
?
16 likes?37,237 views
iOS 9 における Core Image の新機能について。Apple も多用しているブラーを利用した画面遷移アニメーションの実装方法等を紹介しています。
Core Image Tips & Tricks in iOS 9
- 1. Core Image Tips & Tricks in iOS 9 Shuichi Tsutsumi @shu223 iOS 9 Bootcamp（2015.10.7）
- 2. 自己紹介 ? iOS専業フリーランスエンジニア ? ブログ『Over&Out その後』 ? GitHub: shu223 『iOS-9-Sampler』 ? 著書 - 「iOSアプリ開発 達人のレシピ100」 - 「iOS×BLE Core Bluetooth プログラミング」 ? クラスメソッド田宮さんとは13年前の就活時にグループ面接で出会った - 4年前、iOSの勉強会で偶然再開 - 昨年クラスメソッドに入社したとのことでランチ行った
- 3. 概要 iOS 9 の Core Image の新機能について話します
- 9. 使わなそう???
- 10. 本発表の方针
- 14. 本発表の方针 ? 新フィルタの紹介 ? 飛び道具的なものは省き、なるべく実用的な話をします 1. Apple も UI で多用する「ブラー」の話
- 15. 本発表の方针 ? 新フィルタの紹介 ? 飛び道具的なものは省き、なるべく実用的な話をします 1. Apple も UI で多用する「ブラー」の話 2. Core Image を画面遷移のカスタムアニメーションに使う話
- 16. 本発表の方针 ? 新フィルタの紹介 ? 飛び道具的なものは省き、なるべく実用的な話をします 1. Apple も UI で多用する「ブラー」の話 2. Core Image を画面遷移のカスタムアニメーションに使う話 3. ヌルッとしたアニメーションを実現するための Metal の話
- 17. 1. ブラー
- 18. ブラーとは？
- 19. ブラーとは？
- 20. ブラーとは？
- 23. iOS におけるブラーを用いた表現 コントロールパネル - オーバーレイするパネルの背 景にブラー - いわゆる「磨りガラス効果」
- 24. iOS におけるブラーを用いた表現 3D Touch - Quick Actions - 周囲のアイコンがタッチの強 さに応じてボケていき、 ショートカットメニューが表 示される
- 25. iOS におけるブラーを用いた表現 3D Touch - Live Photo 再生 - 静止画と動画のつなぎにブラーを 利用
- 26. iOS におけるブラーを用いた表現 Spotlight - 下方向に画面をドラッグする と検索窓が出てくる - 遷移の進行に応じてホーム画 面がボケていく
- 29. ? Appleも積極的に「ブラー」をUIに利用 ? （デザイナーさんから提示される）デザイン案にブラーが 用いられることも多い → iOS アプリの UI においてブラーを用いた表現は重要！
- 30. ? Photoshop で利用可能なブラー（の一部） - Box Blur - Gaussian Blur - Radial Blur (Zoom) - Lens Blur - Motion Blur - Shape Blur - Tilt-Shift ブラーの種類
- 31. Original
- 32. Original Box
- 34. Original Box Gaussian Zoom
- 35. ? ぼけ方が違い、用途が違う
- 37. ? ぼけ方が違い、用途が違う - カーネルの形状や分布が違うもの - カーネルを动的に决定するもの
- 38. ? ぼけ方が違い、用途が違う - カーネルの形状や分布が違うもの - カーネルを动的に决定するもの - 複合的な処理をするもの
- 39. ? ぼけ方が違い、用途が違う - カーネルの形状や分布が違うもの - カーネルを动的に决定するもの - 複合的な処理をするもの → ブラーにもいろいろある
- 40. ブラー処理の负荷
- 41. カーネルと畳み込み処理
- 43. カーネルと畳み込み処理 ? ブラー処理：周囲の画素との平 均値を取るカーネル（オペレー タ／Weights とも呼ばれる）を 畳み込む ? カーネルサイズと画像サイズに 応じて処理量が指数関数的に増 大する
- 44. カーネルと畳み込み処理 ? ブラー処理：周囲の画素との平 均値を取るカーネル（オペレー タ／Weights とも呼ばれる）を 畳み込む ? カーネルサイズと画像サイズに 応じて処理量が指数関数的に増 大する カーネルサイズ3x3、画像サイズ2448x3264の場合：演算回数7191万回 カーネルサイズが7x7だと、3億9152万回！
- 49. 动的にブラー処理を行う必要があるケース 例：Spotlight 画面への遷移 ? 動的にキャプチャ取得 ? 遷移進行状況に応じてボケ度合い を変えたブラー処理
- 50. 动的にブラー処理を行う必要があるケース 例：Spotlight 画面への遷移 ? 動的にキャプチャ取得 ? 遷移進行状況に応じてボケ度合い を変えたブラー処理 + 処理結果を描画（画面に表示）
- 51. 动的にブラー処理を行う必要があるケース 例：Spotlight 画面への遷移 ? 動的にキャプチャ取得 ? 遷移進行状況に応じてボケ度合い を変えたブラー処理 + 処理結果を描画（画面に表示） ? 60FPSなら0.016秒ごとに畳み込み 演算処理＋描画を行う必要がある
- 54. ? ユーザーのジェスチャの処理をブロックしてはいけない ? ブラー処理を行いその出力結果を即時描画しないといけな いので、バックグラウンドで非同期処理というわけにもい かない ? ある程度のFPSで処理しないと「ヌルッ」とした感じにな らない
- 55. ? ユーザーのジェスチャの処理をブロックしてはいけない ? ブラー処理を行いその出力結果を即時描画しないといけな いので、バックグラウンドで非同期処理というわけにもい かない ? ある程度のFPSで処理しないと「ヌルッ」とした感じにな らない → GPU Acceleration が必須！
- 56. いったん整理
- 57. いったん整理 ? iOS アプリの UI においてブラーを用いた表現は重要
- 58. いったん整理 ? iOS アプリの UI においてブラーを用いた表現は重要 ? ブラーにもいろいろある
- 59. いったん整理 ? iOS アプリの UI においてブラーを用いた表現は重要 ? ブラーにもいろいろある ? ブラー処理の肝である畳み込み演算処理は負荷が大きい
- 60. いったん整理 ? iOS アプリの UI においてブラーを用いた表現は重要 ? ブラーにもいろいろある ? ブラー処理の肝である畳み込み演算処理は負荷が大きい ? 遷移アニメーション等、動的な処理が必要な場合、GPU Acceleration が必須
- 62. iOS 7 以前
- 63. iOS 7 以前 Core Graphics CPUでの処理になるので当然重い 実装が面倒／自分で要最適化
- 64. iOS 7 以前 Core Graphics CPUでの処理になるので当然重い 実装が面倒／自分で要最適化 OpenGLシェーダ CIKernelがまだないのでOpenGLの知識が必要
- 65. iOS 7 以前 Core Graphics CPUでの処理になるので当然重い 実装が面倒／自分で要最適化 OpenGLシェーダ CIKernelがまだないのでOpenGLの知識が必要 vImage 実装が面倒／情報も少ない
- 66. iOS 7 以前 Core Graphics CPUでの処理になるので当然重い 実装が面倒／自分で要最適化 OpenGLシェーダ CIKernelがまだないのでOpenGLの知識が必要 vImage 実装が面倒／情報も少ない Core Image CIGaussianBlurしかない
- 67. iOS 7 以前 Core Graphics CPUでの処理になるので当然重い 実装が面倒／自分で要最適化 OpenGLシェーダ CIKernelがまだないのでOpenGLの知識が必要 vImage 実装が面倒／情報も少ない Core Image CIGaussianBlurしかない UIToolBarを流用 邪道
- 68. iOS 7 以前 Core Graphics CPUでの処理になるので当然重い 実装が面倒／自分で要最適化 OpenGLシェーダ CIKernelがまだないのでOpenGLの知識が必要 vImage 実装が面倒／情報も少ない Core Image CIGaussianBlurしかない UIToolBarを流用 邪道 GPUImage サードパーティ製／コードでかい
- 69. iOS 8
- 70. iOS 8 ? CIKernel
- 71. iOS 8 ? CIKernel - GPUで処理される高速フィルタを自作し、 CIFilterとして扱えるようになった
- 72. iOS 8 ? CIKernel - GPUで処理される高速フィルタを自作し、 CIFilterとして扱えるようになった - Shading Language の知識が必要
- 73. iOS 8 ? CIKernel - GPUで処理される高速フィルタを自作し、 CIFilterとして扱えるようになった - Shading Language の知識が必要 ? UIEffect
- 74. iOS 8 ? CIKernel - GPUで処理される高速フィルタを自作し、 CIFilterとして扱えるようになった - Shading Language の知識が必要 ? UIEffect - 「磨りガラス効果」が簡単にできるように
- 75. iOS 8 ? CIKernel - GPUで処理される高速フィルタを自作し、 CIFilterとして扱えるようになった - Shading Language の知識が必要 ? UIEffect - 「磨りガラス効果」が簡単にできるように - ただ明るい／暗いしか開発者は選択の余地が ない（ぼけ具合すらコントロールできない）
- 76. iOS 9
- 77. iOS 9 ? CIFilter
- 78. iOS 9 ? CIFilter - CIBoxBlur - CIDiscBlur - CIMotionBlur - CIZoomBlur （Motion / Zoom は実際には 8.3 から）
- 79. ポイント
- 83. → iOS 9 では、 ? 多様なブラー（Box, Gaussian, Motion…）を ? 高速（by GPU）かつ ? 手軽（ビルトイン）に 利用できるようになった
- 84. こういう表现がしやすくなった
- 85. 2. 画面遷移アニメーション
- 88. 颁滨贵颈濒迟别谤のトランジションカテゴリ ? CICategoryTransition - iOS では 6 から利用可能に
- 89. 颁滨贵颈濒迟别谤のトランジションカテゴリ ? CICategoryTransition - iOS では 6 から利用可能に ? トランジション＝遷移
- 90. 颁滨贵颈濒迟别谤のトランジションカテゴリ ? CICategoryTransition - iOS では 6 から利用可能に ? トランジション＝遷移 ? スライドショーの画像間や、動画のシーン切り替え用途で 用意されたもの
- 93. 参考翱厂厂：颁辞谤别滨尘补驳别罢谤补苍蝉颈迟颈辞苍 ? https://github.com/shu223/ CoreImageTransition ? CICategoryTransition のフィルタ9種 類を試せるサンプル ? 解説記事：? http://d.hatena.ne.jp/ shu223/20130311/1362962817
- 94. iOS 9 で追加されたトランジション CIPageCurlTransition CIPageCurlWithShadowTransition CIRippleTransition
- 95. iOS 9 で追加されたトランジション CIPageCurlTransition CIPageCurlWithShadowTransition CIRippleTransition
- 96. iOS 9 で追加されたトランジション CIPageCurlTransition CIPageCurlWithShadowTransition CIRippleTransition
- 97. iOS 9 で追加されたトランジション CIPageCurlTransition CIPageCurlWithShadowTransition CIRippleTransition
- 98. UIKit カスタム画面遷移 × Core Image トランジション
- 99. カスタム画面遷移 ? iOS 7 より、UINavigationController やモーダル表示によ る画面遷移アニメーションを簡単に自作できるようになっ た
- 100. 参考OSS：AnimatedTransitionGallery ? https://github.com/shu223/ AnimatedTransitionGallery ? 53種類のカスタム画面遷移を 試せるサンプルコード ? 解説記事：? http://d.hatena.ne.jp/ shu223/20140416/1397608 824
- 101. カスタム画面遷移 × Core 滨尘补驳别トランジション
- 102. カスタム画面遷移 × Core 滨尘补驳别トランジション スナップショット取得
- 103. カスタム画面遷移 × Core 滨尘补驳别トランジション スナップショット取得 スナップショットに対して Core Image のトランジションエフェクトをかける
- 108. → UINavigationController の push / pop 時やモーダル遷移 時の遷移アニメーションに、Core Image のトランジショ ンエフェクトを使ってみた ???ものの、
- 114. CICategoryTransition以外の? フィルタでもOK ? Transitionカテゴリのフィルタの特徴は、 「時間」の概念（kCIInputTimeKey）が あること - 経過時間に応じてエフェクトのかかり具 合が進行していく →kCIInputTimeKey がなくても、経過時 間を何らかのパラメータに割り振ればOK
- 115. UIKit カスタム画面遷移 × Core Image ブラー
- 118. 例2：CIMotionBlur 方針 ? 遷移の方向を kCIInputAngle に適用 ? 移動量に応じて kCIInputRadius を设定（早く移動するほ どボケる）
- 120. ? 遷移方向に ? 移動量に応じた強さで ボケる → 迁移のスピード感を表现
- 121. 3. Core Image × Metal
- 122. Metal ? OpenGL に代わるローレベルのグラフィックAPI ? OpenGL は多くのハードをサポートするために、特定の ハードの性能を限界まで引き出せていなかった ? Metal は Apple のハードに特化しているため、最大で OpenGL の10倍速い（by Apple）
- 123. Core Image × Metal CIFilter のビルトインフィルタ（のいくつか）は Metal Performance Shader を利用
- 124. Core Image × Metal MTLTexture から CIFilter への直接入力、CIFilter から MTLTexture への直接出力も可能に
- 125. MetalKit
- 126. MetalKit
- 127. ? GLKit の GLKView ライクに、MetalKit の MTKView に CIFilter の処理結果を直接描画可能に → Metal でフィルタをかけて Metal で描画！
- 128. まとめ ? iOS 9 では CIFilter にブラー系のビルトインフィルタがいくつか追 加された - GPU で高速処理されるブラーフィルタが手軽に使えるように なった！ - Apple も大好きなブラーを使った UI が実現しやすくなった！ ? そんな Core Image のブラー系フィルタを画面遷移のカスタムアニ メーションに使ってみるといいかも ? iOS 9 で追加された MetalKit および Core Image の Metal 連携でさ らにヌルッとしたアニメーションを実現できるかも