Core Image Tips & Tricks in iOS 9

28,216 views

Published on

iOS 9 における Core Image の新機能について。Apple も多用しているブラーを利用した画面遷移アニメーションの実装方法等を紹介しています。

Published in: Mobile
0 Comments
15 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
28,216
On SlideShare
0
From Embeds
0
Number of Embeds
21,521
Actions
Shares
0
Downloads
21
Comments
0
Likes
15
Embeds 0
No embeds

No notes for slide

Core Image Tips & Tricks in iOS 9

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

×