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

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 の新機能について話します

4. フィルタが増えました！
Original

5. フィルタが増えました！
CICrystallizeOriginal

6. フィルタが増えました！
CIPointillizeOriginal

7. フィルタが増えました！
Original CICircularWrap

8. フィルタが増えました！
CIKaleidoscopeOriginal

9. 使わなそう・・・

10. 本発表の方針

11. 本発表の方針
• 新フィルタの紹介

12. 本発表の方針
• 新フィルタの紹介

13. 本発表の方針
• 新フィルタの紹介
• 飛び道具的なものは省き、なるべく実用的な話をします

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. ブラーとは？

21. ブラーとは？
画像をぼかす処理のこと

22. iOS におけるブラーを用いた表現

23. iOS におけるブラーを用いた表現
コントロールパネル
- オーバーレイするパネルの背
景にブラー
- いわゆる「磨りガラス効果」

24. iOS におけるブラーを用いた表現
3D Touch - Quick
Actions
- 周囲のアイコンがタッチの強
さに応じてボケていき、
ショートカットメニューが表
示される

25. iOS におけるブラーを用いた表現
3D Touch - Live Photo 再生
- 静止画と動画のつなぎにブラーを
利用

26. iOS におけるブラーを用いた表現
Spotlight
- 下方向に画面をドラッグする
と検索窓が出てくる
- 遷移の進行に応じてホーム画
面がボケていく

27. • Appleも積極的に「ブラー」をUIに利用

28. • Appleも積極的に「ブラー」をUIに利用
• （デザイナーさんから提示される）デザイン案にブラーが
用いられることも多い

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

33. Original Box Gaussian

34. Original Box Gaussian Zoom

35. • ぼけ方が違い、用途が違う

36. • ぼけ方が違い、用途が違う
- カーネルの形状や分布が違うもの

37. • ぼけ方が違い、用途が違う
- カーネルの形状や分布が違うもの
- カーネルを動的に決定するもの

38. • ぼけ方が違い、用途が違う
- カーネルの形状や分布が違うもの
- カーネルを動的に決定するもの
- 複合的な処理をするもの

39. • ぼけ方が違い、用途が違う
- カーネルの形状や分布が違うもの
- カーネルを動的に決定するもの
- 複合的な処理をするもの
→ ブラーにもいろいろある

40. ブラー処理の負荷

41. カーネルと畳み込み処理

42. カーネルと畳み込み処理
• ブラー処理：周囲の画素との平
均値を取るカーネル（オペレー
タ／Weights とも呼ばれる）を
畳み込む

43. カーネルと畳み込み処理
• ブラー処理：周囲の画素との平
均値を取るカーネル（オペレー
タ／Weights とも呼ばれる）を
畳み込む
• カーネルサイズと画像サイズに
応じて処理量が指数関数的に増
大する

44. カーネルと畳み込み処理
• ブラー処理：周囲の画素との平
均値を取るカーネル（オペレー
タ／Weights とも呼ばれる）を
畳み込む
• カーネルサイズと画像サイズに
応じて処理量が指数関数的に増
大する
カーネルサイズ3x3、画像サイズ2448x3264の場合：演算回数7191万回
カーネルサイズが7x7だと、3億9152万回！

45. → ブラーおよび畳み込み処理はシンプルだが
処理の負荷は大きい

46. 動的にブラー処理を行う必要があるケース

47. 動的にブラー処理を行う必要があるケース
例：Spotlight 画面への遷移

48. 動的にブラー処理を行う必要があるケース
例：Spotlight 画面への遷移
• 動的にキャプチャ取得

49. 動的にブラー処理を行う必要があるケース
例：Spotlight 画面への遷移
• 動的にキャプチャ取得
• 遷移進行状況に応じてボケ度合い
を変えたブラー処理

50. 動的にブラー処理を行う必要があるケース
例：Spotlight 画面への遷移
• 動的にキャプチャ取得
• 遷移進行状況に応じてボケ度合い
を変えたブラー処理
+ 処理結果を描画（画面に表示）

51. 動的にブラー処理を行う必要があるケース
例：Spotlight 画面への遷移
• 動的にキャプチャ取得
• 遷移進行状況に応じてボケ度合い
を変えたブラー処理
+ 処理結果を描画（画面に表示）
• 60FPSなら0.016秒ごとに畳み込み
演算処理＋描画を行う必要がある

52. • ユーザーのジェスチャの処理をブロックしてはいけない

53. • ユーザーのジェスチャの処理をブロックしてはいけない
• ブラー処理を行いその出力結果を即時描画しないといけな
いので、バックグラウンドで非同期処理というわけにもい
かない

54. • ユーザーのジェスチャの処理をブロックしてはいけない
• ブラー処理を行いその出力結果を即時描画しないといけな
いので、バックグラウンドで非同期処理というわけにもい
かない
• ある程度のFPSで処理しないと「ヌルッ」とした感じにな
らない

55. • ユーザーのジェスチャの処理をブロックしてはいけない
• ブラー処理を行いその出力結果を即時描画しないといけな
いので、バックグラウンドで非同期処理というわけにもい
かない
• ある程度のFPSで処理しないと「ヌルッ」とした感じにな
らない
→ GPU Acceleration が必須！

56. いったん整理

57. いったん整理
• iOS アプリの UI においてブラーを用いた表現は重要

58. いったん整理
• iOS アプリの UI においてブラーを用いた表現は重要
• ブラーにもいろいろある

59. いったん整理
• iOS アプリの UI においてブラーを用いた表現は重要
• ブラーにもいろいろある
• ブラー処理の肝である畳み込み演算処理は負荷が大きい

60. いったん整理
• iOS アプリの UI においてブラーを用いた表現は重要
• ブラーにもいろいろある
• ブラー処理の肝である畳み込み演算処理は負荷が大きい
• 遷移アニメーション等、動的な処理が必要な場合、GPU
Acceleration が必須

61. iOSにおけるブラー実装方法
の近代史

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. ポイント

80. ポイント
• CIFilterはGPUで処理される

81. ポイント
• CIFilterはGPUで処理される
• 実装は超簡単

82. ポイント
• CIFilterはGPUで処理される
• 実装は超簡単

83. → iOS 9 では、
• 多様なブラー（Box, Gaussian, Motion…）を
• 高速（by GPU）かつ
• 手軽（ビルトイン）に
利用できるようになった

84. こういう表現がしやすくなった

85. 2. 画面遷移アニメーション

86. CIFilterのトランジションカテゴリ

87. CIFilterのトランジションカテゴリ
• CICategoryTransition

88. CIFilterのトランジションカテゴリ
• CICategoryTransition
- iOS では 6 から利用可能に

89. CIFilterのトランジションカテゴリ
• CICategoryTransition
- iOS では 6 から利用可能に
• トランジション＝遷移

90. CIFilterのトランジションカテゴリ
• CICategoryTransition
- iOS では 6 から利用可能に
• トランジション＝遷移
• スライドショーの画像間や、動画のシーン切り替え用途で
用意されたもの

91. 参考OSS：CoreImageTransition

92. 参考OSS：CoreImageTransition

93. 参考OSS：CoreImageTransition
• 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 Imageトランジション

102. カスタム画面遷移 × Core Imageトランジション
スナップショット取得

103. カスタム画面遷移 × Core Imageトランジション
スナップショット取得
スナップショットに対して
Core Image のトランジションエフェクトをかける

104. AnimatedTransitionGallery/
CoreImageTransitions
https://github.com/shu223/AnimatedTransitionGallery/tree/master/CoreImageTransitions

105. AnimatedTransitionGallery/
CoreImageTransitions
https://github.com/shu223/AnimatedTransitionGallery/tree/master/CoreImageTransitions

106. AnimatedTransitionGallery/
CoreImageTransitions
https://github.com/shu223/AnimatedTransitionGallery/tree/master/CoreImageTransitions

107. AnimatedTransitionGallery/
CoreImageTransitions
https://github.com/shu223/AnimatedTransitionGallery/tree/master/CoreImageTransitions

108. → UINavigationController の push / pop 時やモーダル遷移
時の遷移アニメーションに、Core Image のトランジショ
ンエフェクトを使ってみた
・・・ものの、

110. クセが強すぎて普通のアプリ
で使うにはちょっと・・・

111. CICategoryTransition以外の
フィルタでもOK

112. CICategoryTransition以外の
フィルタでもOK
• Transitionカテゴリのフィルタの特徴は、
「時間」の概念（kCIInputTimeKey）が
あること

113. CICategoryTransition以外の
フィルタでもOK
• Transitionカテゴリのフィルタの特徴は、
「時間」の概念（kCIInputTimeKey）が
あること
- 経過時間に応じてエフェクトのかかり具
合が進行していく

114. CICategoryTransition以外の
フィルタでもOK
• Transitionカテゴリのフィルタの特徴は、
「時間」の概念（kCIInputTimeKey）が
あること
- 経過時間に応じてエフェクトのかかり具
合が進行していく
→kCIInputTimeKey がなくても、経過時
間を何らかのパラメータに割り振ればOK

115. UIKit カスタム画面遷移
×
Core Image ブラー

116. 例1：CIBoxBlur
方針
• 遷移の経過時間に応じて kCIInputRadius を設定

117. https://github.com/shu223/AnimatedTransitionGallery/tree/master/CoreImageTransitions

118. 例2：CIMotionBlur
方針
• 遷移の方向を kCIInputAngle に適用
• 移動量に応じて kCIInputRadius を設定（早く移動するほ
どボケる）

119. https://github.com/shu223/AnimatedTransitionGallery/tree/master/CoreImageTransitions

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 連携でさ
らにヌルッとしたアニメーションを実現できるかも