2019/09/23 Soichiro Sugimoto sotan (@sotanmochi) 画像処理から始めるコンピュートシェーダ

2 自己紹介 杉本　宗一郎（Soichiro Sugimoto） sotan (@sotanmochi) xR系Unityエンジニア xRに関する応用研究・プロトタイプ開発 ・DR（Diminished Reality：隠消現実感）の研究 ・VR/ARのアプリケーション開発

コンピュートシェーダで画像処理を実装した例 カメラ画像をイラスト風に変換するフィルター（試作開発中） 3 Before After 動画1：https://youtu.be/gxmsS83Uens 動画2：https://youtu.be/5ffZ56EAlXA

コンピュートシェーダ GPUをグラフィックス描画以外の汎用的な目的で活用できるようにする仕組み （GPGPUのための仕組み） 大量のデータを並列処理する汎用的なプロセッサとしてGPUを活用できる 通常のレンダリングパイプラインと切り離された独立したシェーダ （ラスタライザなどのグラフィックス処理が走らない） HDRPのポストエフェクトやVisual Effect Graphのパーティクルに使われている 4

コンピュートシェーダで画像処理を実装する ピクセル単位の並列化によって画像処理を高速化 5 逐次処理のイメージ 並列処理のイメージ

コンピュートシェーダで画像処理を実装する 基本的な考え方 ・全体の処理の流れはCPU側で実装 ・ピクセルごとの処理（データを並列処理する部分）はGPU側で実装 ・画像全体に対する処理の終了を待つ箇所はカーネルを分けて実装 6

実装例のコードを見ながら 基本的な考え方やポイントを確認していきます （※アルゴリズムの中身は気にしない） 7

コンピュートシェーダで画像処理を実装する カメラ画像をイラスト風に変換するフィルター処理の実装例 8 バイラテラルフィルタ エッジ検出 乗算（BF and エッジ） BF＋エッジ＋コントラスト調整 バイラテラルフィルタ エッジ検出（ソーベルフィルタ） 乗算（BF and エッジ） コントラスト調整（トーンカーブ）

コンピュートシェーダで画像処理を実装する 全体の処理の流れはCPU側（C#スクリプト）で実装 9 バイラテラルフィルタ エッジ検出（ソーベルフィルタ） 乗算（BF and エッジ） コントラスト調整（トーンカーブ） フィルタ処理を順番に呼び出している

コンピュートシェーダで画像処理を実装する 全体の処理の流れはCPU側（C#スクリプト）で実装 10 バイラテラルフィルタ エッジ検出（ソーベルフィルタ） 乗算（BF and エッジ） コントラスト調整（トーンカーブ） フィルタ処理を順番に呼び出している 処理の複雑さの都合により 詳細なコードは 実際の処理と逆順で見ていきます

コンピュートシェーダで画像処理を実装する 全体の処理の流れはCPU側（C#スクリプト）で実装 11 バイラテラルフィルタ エッジ検出（ソーベルフィルタ） 乗算（BF and エッジ） コントラスト調整（トーンカーブ） データをセットした後、コンピュートシェーダ（指定したカーネル）を実行する

コンピュートシェーダで画像処理を実装する ピクセルごとの処理（データを並列処理する部分）はGPU側で実装 12 バイラテラルフィルタ エッジ検出（ソーベルフィルタ） 乗算（BF and エッジ） コントラスト調整（トーンカーブ） 1つのグループにつき16x16=256並列で 実行される（並列数の上限はデバイスによる） 1つのピクセルに対する処理

コンピュートシェーダの並列処理のモデル 画像出典： Direct Compute – Bring GPU Computing to the Mainstream https://www.nvidia.com/content/GTC/documents/1015_GTC09.pdf 13

コンピュートシェーダの並列処理のモデル 画像出典： Direct Compute – Bring GPU Computing to the Mainstream https://www.nvidia.com/content/GTC/documents/1015_GTC09.pdf 14 1つのグループにつき THREADS_X × THREADS_Y の並列数で 実行される（並列数の上限はデバイスによる）

コンピュートシェーダで画像処理を実装する 全体の処理の流れはCPU側（C#スクリプト）で実装 15 バイラテラルフィルタ エッジ検出（ソーベルフィルタ） 乗算（BF and エッジ） コントラスト調整（トーンカーブ） Thread Groups X = 80 Thread Groups Y = 45 指定したスレッドグループ数でコンピュートシェーダ（カーネル）を実行する 1つのグループにつき16x16=256並列で実行される時 ・X方向のスレッド数：16 ・Y方向のスレッド数：16 　 1280x720の解像度の画像全体を処理するために必要な グループ数 ・X方向：1280 / 16 = 80 ・Y方向： 720 / 16 = 45

コンピュートシェーダで画像処理を実装する ピクセルごとの処理（データを並列処理する部分）はGPU側で実装 16 バイラテラルフィルタ エッジ検出（ソーベルフィルタ） 乗算（BF and エッジ） コントラスト調整（トーンカーブ） 全てのスレッドの中から 実行中のスレッドを識別できるID （画像のピクセル位置に相当） 1つのピクセルに対する処理

コンピュートシェーダで画像処理を実装する 画像全体に対する処理の終了を待つ箇所はカーネルを分けて実装 （グローバル同期（異なるスレッドグループ間の同期）が必要なため） 17 バイラテラルフィルタ エッジ検出（ソーベルフィルタ） 乗算（BF and エッジ） コントラスト調整（トーンカーブ） エッジ検出処理では、グレースケールに変換後、フィルタ処理を実行している

コンピュートシェーダで画像処理を実装する 画像全体に対する処理の終了を待つ箇所はカーネルを分けて実装 （グローバル同期（異なるスレッドグループ間の同期）が必要なため） 18 バイラテラルフィルタ エッジ検出（ソーベルフィルタ） 乗算（BF and エッジ） コントラスト調整（トーンカーブ） BFの反復はCPU側で制御 データをセットして実行 × N回

コンピュートシェーダで画像処理を実装する カメラ画像をイラスト風に変換するフィルター処理の実装例 19 バイラテラルフィルタ エッジ検出 乗算（BF and エッジ） BF＋エッジ＋コントラスト調整 バイラテラルフィルタ エッジ検出（ソーベルフィルタ） 乗算（BF and エッジ） コントラスト調整（トーンカーブ）

まとめ コンピュートシェーダはGPUを汎用的な並列処理に活用できる仕組み ピクセル単位の並列化によって画像処理を高速化できる 基本的な考え方 ・全体の処理の流れはCPU側で実装 ・ピクセルごとの処理（データを並列処理する部分）はGPU側で実装 ・画像全体に対する処理の終了を待つ箇所はカーネルを分けて実装 20

ありがとうございました

Appendix

コンピュートシェーダを始めるための参考資料 Unity Graphics Programming vol.1 第2章 ComputeShader入門 https://indievisuallab.stores.jp/items/59edf11ac8f22c0152002588 Hello, DirectCompute https://www.slideshare.net/dasyprocta/hello-direct-compute Direct Compute – Bring GPU Computing to the Mainstream https://www.nvidia.com/content/GTC/documents/1015_GTC09.pdf Compute Shader Magic ～あなたの描画エンジンでコンピュートシェーダを活用するアイデア（CEDEC 2013） https://cedil.cesa.or.jp/cedil_sessions/view/1002 23

コンピュートシェーダで画像処理を実装？ なぜコンピュートシェーダを使う？ 画像処理ならピクセルシェーダ（フラグメントシェーダ）で実装できるのでは？ 24

コンピュートシェーダの利点 コンピュートシェーダを使った演算にはピクセルシェーダに比べて 以下のような利点がある ・出力先リソースの任意の位置に書き込み可能 ・データ共有やスレッド間同期のメカニズム ・指定した数のスレッドを明示的に起動でき、パフォーマンスを最適化できる ・描画パイプラインと無関係なので、コードの保守が簡単 （参考：「DirectX11 3Dプログラミング [改訂版] 第2部21章（p.332）」） 25

コンピュートシェーダで画像処理を実装する 画像全体に対する処理の終了を待つ箇所はカーネルを分けて実装 （グローバル同期（異なるスレッドグループ間の同期）が必要なため） 26 バイラテラルフィルタ エッジ検出（ソーベルフィルタ） 乗算（BF and エッジ） コントラスト調整（トーンカーブ） エッジ検出処理では、グレースケールに変換後、フィルタ処理を実行している

コンピュートシェーダで画像処理を実装する ピクセルごとの処理（データを並列処理する部分）はGPU側で実装 27 バイラテラルフィルタ エッジ検出（ソーベルフィルタ） 乗算（BF and エッジ） コントラスト調整（トーンカーブ） 周囲のピクセル値を使って計算

コンピュートシェーダで画像処理を実装する 画像全体に対する処理の終了を待つ箇所はカーネルを分けて実装 （グローバル同期（異なるスレッドグループ間の同期）が必要なため） 28 バイラテラルフィルタ エッジ検出（ソーベルフィルタ） 乗算（BF and エッジ） コントラスト調整（トーンカーブ） BFの反復はCPU側で制御 データをセットして実行 × N回

コンピュートシェーダで画像処理を実装する ピクセルごとの処理（データを並列処理する部分）はGPU側で実装 29 周囲のピクセル値を使って計算

END