2017/11/2に講演したポストフィルタに関するスライドです。 講演者：株式会社ロジカルビート・堂前嘉樹

1. ポストフィルタ論
株式会社ロジカルビート
代表取締役 / 堂前 嘉樹

2. 自己紹介

3. 自己紹介
株式会社ロジカルビートの代表取締役・プログラマー。
2016年5月に法人設立。新横浜にあります。
ゲームプログラミング系の会社です。
スタッフ数6名。（2017/10）
個人としてはグラフィック系のプログラムが主戦場。
関連作は「いけにえと雪のセツナ」（スクウェア・エニックス）など。
書籍に「ゲームを動かす技術と発想」「ゲームを動かす数学・物
理」がある。

4. 本日のテーマ

7. 今回は
ポストフィルタについて

8. ポストフィルタがテーマ
今回はポストフィルタについて話を進めます。
「イメージエフェクト」「ポストエフェクト」など呼び名がたくさんありま
すが、「ポストフィルタ」で進めます。
3Dで描画したものを画像加工して、絵に様々な効果を加える
処理のことを指します。
2Dベースで処理。
Photoshopの「フィルタ」みたいなものだと思ってください。

9. Unityでの
簡単な使い方

10. 少し前までのImage Effects導入方法

11. 最近のImage Effects導入方法（2017から？）

14. Unityでの簡単な使い方
Unityにはいくつかポストフィルタが用意されています。
プロジェクトへの追加は容易。
Cameraに各ポストフィルタを追加することによって、簡単に利
用することが出来ます。
最近ではPost Processing Stackというのもあるらしいです。
触ったことなく未検証です。。。

15. 中身を
見てみよう！

17. void OnRenderImage (RenderTexture source, RenderTexture
destination)

18. https://docs.unity3d.com/ja/current/Manual/ExecutionOrder.html

19. OnRenderImage
Camera内の通常の描画

20. Unityでの処理のされ方
サンプルとしてBloomのスクリプトを見てみます。
OnRenderImageでフックを掛けてCameraに対する絵をもらい、
その中で加工する流れ。
イベント関数順でも描画後を意味する。
Cameraにコンポーネントを着けるのは自然の流れ。

21. もう少し
詳しく見る

25. Temp
（一時バッファ）
Default Target
（表示バッファ）
テクスチャとして利用！

26. Unityでの描画処理
今回はColor Correction Curvesを例に取ります。
Cameraに映る3Dオブジェクトを一時的なRender Textureに描
画し、それをテクスチャとして、Default Targetに描く。
CameraのTarget Textureの項目がNoneの場合、通常はDefault
Targetに描画するが、OnRenderImageを含むコンポーネント（ポ
ストフィルタ）がある場合は内部的に一時バッファを利用する模様。

27. 非常にシンプル！

28. ただし
注意点がひとつ

29. 高負荷に
なりやすい！！

30. 理由その1
フルカラーフォーマット
主体

32. Temp
（一時バッファ）
Default Target
（表示バッファ）
テクスチャとして利用！
ARGB32

33. 理由その2
参照＆描画ピクセル
数が多い

34. 1280
720

35. Temp
（一時バッファ）
Default Target
（表示バッファ）
テクスチャとして利用！
1280×720
1280×720

36. いくつか重ねると
負荷も高くなる

37. ポストフィルタの負荷
ポストフィルタは総じてGPU負荷が高くなる！
CPU負荷はそんなにかからない。ピクセル負荷高し。
描いた画像をテクスチャとして利用するので、必然的にフルカ
ラー形式のテクスチャを扱うことになる。
モデルでは圧縮テクスチャを使えるが、そういうわけにいかない。
しかもサイズが大きい！
フレームの10%〜20%くらいは取られると考える。

38. 対策

39. 高負荷なピクセル描画を
少なくする

41. ぼかし処理
縮小コピー
合成

42. 4→2に変更してみる

43. ぼかし処理
縮小コピー
合成

44. パラメータが
描画回数に関わる
こともある

45. 縮小コピー ぼかし

46. わざわざ
縮小コピーを
挟むのは何故？

47. ぼかし
複数回テクスチャを参照する
（1ピクセル描くのに4回参照）
大きいテクスチャを参照すると
高負荷になりがち！

48. 縮小コピー ぼかし
コピーは1ピクセルで
テクスチャを1回参照するだけ
4回参照するが、
小さいテクスチャから読み取っ
ているのでマシ

49. 描画回数とピクセルの質
ポストフィルタを軽くする単純な指標として、描画回数を減らす
というのが挙げられる。
非常にわかりやすい。
しかし、負荷を下げるためにあえて単純コピーなどを行う方が
いい場合もある。
大きいテクスチャから読み取ると（テクスチャキャッシュの関係か
ら）遅くなるので。
絵的な質も上がることがある。

51. ブルーム
カラーコレクション

52. Temp
Temp
Temp
Default Target
ぼかし作成
ブルーム合成
カラーコレク
ション加工

53. 描画を
減らせないか？

54. Temp
Temp
Temp
Default Target
ぼかし作成
ブルーム合成
カラーコレク
ション加工

55. Temp
Temp
Temp
Default Target
ぼかし作成
ブルーム合成
＆
カラーコレク
ション加工

56. 処理を統合する
スクリプト＆シェーダを
自作する！！

57. 処理の統合
複数のポストフィルタを掛け合わせると、無駄が生じやすい。
標準のものだとコンポーネントが分かれているため。
頑張っているとは思うが・・・。
とことん突き詰めると、ポストフィルタを自作するという選択肢も
考えなければならない。
用意されているものを使うよりもある意味、管理はしやすい。

58. もう少し
こだわってみる

59. Temp
（一時バッファ）
Default Target
（表示バッファ）
テクスチャとして利用！
1280×7201280×720
1280×720
3D部分は
解像度を減らしたい！

60. RenderTexture
（自前で用意）
Default Target
（表示バッファ）
テクスチャとして利用！
960x540960x540
1280×720
OnPostRenderで処理！！
（OnRenderImageはクセがある）

61. 更に突き詰める
OnRenderImageを利用すると手軽だが、内部でどう処理され
ているか把握しづらい。
弊社ブログを参照：http://logicalbeat.jp/blog/601/
RenderTextureを自前管理する必要があるが、
OnPostRenderで処理する方が柔軟性が高くなるので、個人的
に強くオススメします。

62. 第2部
ピクセルを突き詰める

63. バイリニア
（Bilinear）

64. キチンと
理解していますか？

65. ( x, y ) ( x+1, y )
( x+1, y+1 )( x, y+1 )
A B
C D
( a, b )

66. ( x, y ) ( x+1, y )
( x+1, y+1 )( x, y+1 )
A B
C D
( a, b )
R = lerp( lerp(A,B,a-x), lerp(C,D,a-x), b-y )
※lerp(a,b,c) ： c=0ならaになり、c=1ならbになる関数

67. ( x, y ) ( x+1, y )
( x+1, y+1 )( x, y+1 )
A B
C D

73. 各カラーから1/4ずつもらう
（4カラーの平均になる）

75. バイリニア（Bilinear）の復習
テクスチャを参照する時の、一番シンプルなカラーの補間方法。
参照するポイントの近接4ピクセルを探り、その距離から線形補
間でカラーを算出する。
参照点がピクセルの中央だった場合はそのカラーになる。
参照点が４ピクセルの中心だった場合は、各カラーから4等分した
カラーが与えられる。（平均になる）

76. バッファコピー

78. 絵を別のバッファに
描き移すことがある

79. 等倍コピー

80. Texture Render Target
そのままコピーされる！

81. 縦横が1/2のバッファにコピー

82. Texture Render Target
カラーの平均値としてコピー

83. 縦横が1/4のバッファにコピー

84. Texture Render Target
カラーの欠損が発生してしまう

85. 速いが画質にムラが出る
綺麗だが手間がかかる

86. バッファコピーとバイリニア
ポストフィルタではバッファをコピーするのが基本処理となる。
その際、同サイズのこともあれば縮小コピーなどもある。
コピーの際、どのピクセルを取ってきているかというのをきちん
と理解しておくと良い。
更にバイリニアがどう活きてくるか？
情報欠損を看過しても速度を取るか、それとも綺麗な絵を出す
か？

87. ガウシアンフィルタ

88. 縮小コピー ぼかし

89. ここをぼかしたい！

90. 1
16
1
16
1
16
1
16
2
16
2
16
2
16
2
16
4
16

91. 9点サンプリングすると重い！！

92. 1
4
1
4
1
4
1
4

93. 4点サンプリングして4で割ればOK！！

94. ガウシアンフィルタ
ぼかし画像を作成するのに手軽なフィルタ。
自分自身のピクセルの比重を高く、山型になるように周辺も加
えて平均をとる手法。
3×3で行うのが手軽でよく使われる。
とは言え、テクスチャを9点サンプリングすると重い！！
バイリニアの特性を活かし、4点で済むようにする。
この考え方は他でも活かせる。

95. ピクセルの距離

96. 1280×720の画像に対してブルームを掛けた様子

97. 320×180（縦横1/4ずつ）の画像に対してブルームを掛けた様子

98. Texture (1/1) Texture (1/4)
「1ピクセル」で考えると広がってしまう！！

99. Texture (1/1) Texture (1/4)
理想解像度を想定してサンプリング

100. ピクセルの距離の考慮
レンダーターゲットやテクスチャのサイズが異なると、「1ピクセ
ル」の距離も変わってくる。
端末差（スマホ）、動的解像度などが要因。
ブルームやDOFで影響が出てくる。
理想の解像度を設定した上で、それを考慮したサンプリングを
しておくと良い。
シェーダ内で係数を持って処理すると良い。
気にしない、気にならないならやらなくても良い。

101. まとめ

102. まとめ
Unityを使ったポストフィルタを眺めてみました。
ポストフィルタの大まかな流れを把握しておく。
3D描画した後の画像を加工するという考え。
一時バッファも活用される。
ポストフィルタは重いということを理解する。
理由は様々ある。
軽くするための工夫をひねり出す。

103. まとめ
ピクセル単位の処理も気にしてみましょう。
改めて、バイリニアについて理解を深める。
なぁなぁで作ってしまわない。（ズレたりする）
1ピクセルにまで神経を尖らせるつもりで！！

104. ありがとう
ございました