画像処理から始めるコンピュートシェーダ / Introduction to Image Processing using Compute Shader

UniteEve2のLT登壇資料

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

15. コンピュートシェーダで画像処理を実装する
    全体の処理の流れは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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

22. Appendix
    

    View Slide

23. コンピュートシェーダを始めるための参考資料
    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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

30. END
    

    View Slide