2019/9/25-6に開催されたUnite Tokyo 2019の講演スライドです。 Florian Andreas Gantzert（KLab株式会社） Clemens Berger（KLab株式会社） こんな人におすすめ ・2Dアーティスト ・GPUの知識に興味のある3Dアーティスト ・GPUの知識に興味のある方々 受講者が得られる知見 ・リアルタイム2D表現に役立つGPU知識 ・リアルタイム2D表現に役立つ具体的な手法 Unityのイベント資料はこちらから： https://www.slideshare.net/UnityTechnologiesJapan/clipboards

2. 2DアーティストのためのGPU⼊入
⾨門
KLab株式会社 - Real-Time Rendering Research (RRR)
Florian Andreas Gantzert - Technical Lead
Clemens Berger - Senior Character Artist

3. 2D/UIのUniteセッションでは
— GPUよりCPUがカバーされがち
— それはそれでいいこと
— 基礎知識よりベストプラクティスがカバーされがち
— それもそれで全然いいこと
— Ian DundoreさんによるUnite 2017の
「Squeezing Unity: Tips for raising performance」
（後半）などはおすすめ
3

4. とはいえ
2D描画がGPU側で軽いというわけではない
4

5. それに
5
— ShaderGraphがUnity 2019.2から
2Dにも対応（Experimental）していて
— 2Dアーティストがワクワクしながら
— 求めている表現が出しやすくなる

6. 6
「⼤大いなる⼒力力には、⼤大いなる責任が伴う」
— ベンおじさん
しかし

7. そのため
7
— 2DグラフィックスとはいえGPUプロファイリングが必要
— プロファイリングすることによって、制約のなか、
より良い表現ができるようになる
— その時に、GPUの知識は役⽴立つ
— なので、早速⾏行行きましょう！

8. ⽬目次
1. GPUとCPUの違い
2. GPUは画家ではない
3. CPUとGPUのやり取り

9. 1. GPUとCPUの違い

10. CPU GPU
Central Processing Unit Graphics Processing Unit
● コア数が少ない
● 各コアが強い
● 幅広く様々な計算が得意
● いろいろとスマートで速い
● コアが数が多い
● 各コアが弱い
● 絞った範囲の計算が得意
● 同時計算を活かすと速い
VS
10

11. 11
ピクセルの⾊色を計算する2
ピクセルの画⾯面上の位置を計算する1
x1 → x120
y3 → y650
# FF0000
0 1920
1080
2Dグラフィックスにおいては GPUは主に

12. 正確に⾔言うと、
ピクセルの位置と⾊色を計算するのにGPUは
という描画データを使う
マテリアル（Material）2
メッシュ（Mesh）1
コンスタント（Constants）3
12

13. 頂点ID 3
位置 2,-1
UV 1, 0
頂点ID 4
頂点ID 1 頂点ID 2
1
2 インデックス2 頂点 2,3,4
インデックス1 頂点 1,2,3
メッシュ
1. メッシュ（Mesh）
頂点(Vertex)とインデックス(Index)
13

14. 14
2. マテリアル（Material）
メッシュの⾒見見た⽬目を決めるもの
テクスチャやティントカラーなど

15. 3. コンスタント（Constants）
位置 1, 2, 0
回転 0, 0, 0
スケール 1, 1, 1
y
x0
z 位置 5, 2, 1
回転 25,0, 0
スケール 0.7,0.7, 1
オブジェクトの画⾯面上のポジションなど
15

16. メッシュとマテリアルとコンスタントで描画が可能になる
「そのデータで描画してください」
とGPUにお願いするのを⼀一般的に
ドローコール
UnityではBatch
と呼ぶ
16

17. 2. GPUは画家ではない

18. 絵を遠景から順に描いていき、近いものを描く際に
以前描いた遠景の⼀一部を画家は塗りつぶしていく
18

19. コンピュータグラフィックスでは
遠景順の描き⽅方を
画家のアルゴリズム
またはBack To Frontと呼ぶ
19

20. Back to Front
Photoshopなどは画家⽅方式である
20

21. Front to Back
GPUは近景順の描画を好む
21

22. GPUは計算が速いが
「しない計算」より速い計算はない
22
なぜかと⾔言うと

23. そして
GPUは計算しないことに特化している
23

24. ¹位置すらGPUで計算しないでことを済ますことができるが
CPUも絡んでくるのでここでは⼀一旦説明を省ける
ピクセルの画⾯面上の位置を計算したあと
ピクセルの⾊色を計算する
ことをもう⼀一度思い出してみよう
位置を計算したあとに
より⼿手前のピクセルが重なると
分かっていれば
⾊色の計算はしなくてすむ¹
24

25. GPUは
1. ピクセルの奥⾏行行（Depth）
2. ピクセルのマスク（Stencil）
２つの、⼿手前にピクセルがあるかどうかを
判断するための⾼高速な専⾨門機能を持っている
25

26. ¹不不透明ではなくともいけなくはないが、
いろいろ注意しなきゃいけないところがあるため、
ここでは⼀一旦説明を省く
奥⾏行行(Depth)とマスク(Stencil)の⼆二つを
⽐比較した上で正しく描画するためには
近景順で描画する必要がある
そして
近景順描画が正しく描画されるには
ピクセルが不不透明ではなければならない¹
26

27. 3Dでは
不不透明な場合が多いため
近景順描画が実現しやすい
27

28. 2Dでは
半透明な場合が多いため、
近景順描画がうまくいかない
28

29. 遠景順にすれば、
期待通りの⾒見見た⽬目になるが…
29

30. …重なるピクセルを計算することになる
それは
Overdraw（オーバードロー）
とよぶ
オーバードローは
パフォーマンス的に避けるべき！
30

31. Overdraw
アドバイス

32. 1. レイヤーをまとめよう¹
描画負担
容量量 低
⾼高 描画負担
容量量 中
低
¹レイヤーをまとめると、再利利⽤用できなくなったりして
メモリーが増える場合があるので、「プロファイリングしながら」がベスト
32

33. 1. レイヤーをまとめよう：Overdrawビュー
33

34. 2. 映らないものは⼊入れないでおこう
デザイン レイヤー構造
直接書き出し
最適化して書き出し
無駄な描画コスト
34

35. 3. メッシュをフィットさせよう!
描画負担¹
アルファ抜き
頂点数 超低
超⾼高
⾼高 描画負担
アルファ抜き
頂点数
描画負担
アルファ抜き
頂点数
超低
⾼高
低
低
低中
¹⾒見見えない透明なピクセルを沢⼭山計算するため、描画負担が⾼高い
35

36. 3．CPUとGPUのやりとり

37. ¹返事があったら、それもドライバーを通して聞く
CPU GPUドライバー
モバイルGPUのドライバーはOpenGLかVulkanかMetal
CPUはドライバーを通してGPUと話す¹
37

38. このコンスタントで…
ドライバー
このマテリアルで…
このメッシュを描画して～
未読
ドローコール
CPUとGPUの会話
38

39. おい！
・・・
あれ、CPUが話しているのに、
GPUが寝ている！？
そう、CPUとGPUはシンクロしていないのだ！
39

40. スマホ開発で使わざるを得ないドライバー
OpenGLは特に親切で
CPUとGPUがまるでシンクロしているように
本来の複雑さを隠蔽して
⾊色々と使いやすくしてくれている
但し、その親切さには罠がある
40

41. OpenGLの使いやすくなった分は
CPUがGPUにメッセージを送る度に
CPU側に処理理負担がかかる
41

42. そのため、
沢⼭山の短いメッセージを送るより
数少のない、⻑⾧長めなメッセージを送った⽅方が早い
42

43. 特にドローコールのメッセージが多いので
そのメッセージだけでも少なくすることに意味がある
NG!
43

44. ドローコール結合
44

45. Unityは、コンスタントを⾃自動的にコンスタントを設定次第⼀一緒にしてくれるが、
マテリアルは、ユーザが⼀一緒にしなければならない
Unityがメッシュとコンスタントをまとめるのに、CPU負担がかかるため、諸刃の剣
だ！
マテリアルとコンスタントが⼀一緒じゃないと使えない¹－
どんなモバイル端末でもできる＋
CPU側でメッシュをまとめることによって
ドローコールを結合する⼿手法
45
ドローコール結合：CPUメッシュバッチング

46. 同じメッシュを多少異異なる
マテリアルとコンスタントでまとめて
描画する⼿手法
低スペック端末で使えないうえ
（OpenGL ES 3.0+、Metal、Vulkanが必須）
複雑なメッシュじゃないと⼒力力を発揮しない
46
ドローコール結合：GPUインスタンシング

47. Draw Call
アドバイス

48. アトラスはもちろん！
テクスチャ数 ２ テクスチャ数 1
A B
テクスチャ
A
テクスチャ
B
A B
アトラス
A B
48

49. マテリアルを意識してCPUバッチングを可能に！
テクスチャアトラスを使っても，
他のマテリアル設定も⼀一緒じゃないとバッチングができない！
49

50. マテリアル情報をメッシュに持たせよう：例例
頂点カラー FF,00,FFティントカラー FF,00,FF
意外に合理理的な⽅方法！
Unityもスプライトのカラーでそうしている
50

51. 描画順を意識してバッチングを可能に！
バッチング 不不可 バッチング 可
全く同じマテリアルのメッシュで
オーバーラップしていなくても、
間に別マテリアルのメッシュが⼊入ったらダメ！
51

52. Final
First
アドバイス

53. ビッグウィンを狙おう！
最適化ではデザインと違って均等に進まなくても⼤大丈夫！
部分的でも良いから、
まず⼀一番影響あるものだけでも治そう！
A B C D E A B C D E
描
画
負
荷
53

54. 今⽇日のおさらい
- GPUは近景順を好む
- 2D/UIでは、オーバードローが発⽣生しがち
- GPUとCPUが同期で動いていない
- OpenGLは⾮非同期さを背負ってくれる
- ドローコールが⾼高くつきがち
- パフォーマンスを意識しながら、GPU知識を活かせましょう！
54

55. ボーナススライド
ドローコール (Batch) の確認⽅方法

56. 56
- Unityエディタの「Game」タブの
「Stats」ですぐに確認できる
- 「Batches」はドローコールの数
- 「Saved by batching」はバッチングで
削減できたドローコールの数
- 「SetPass calls」はマテリアルの設定
を変えた数）

57. ボーナススライド
デスクトップとモバイルの違い

58. 作業デスクトップGPUとモバイルGPUの違い
GPUは設計レベルで異異なる
58
Vertex
Shader
FIFO
Fragment
Shader
Textures
Frame buffer
Working Set
Attributes
GPU
DDR
Vertex
Shader
Tiler
Fragment
Shader
Textures
Compressed
Frame buffer
Attributes
GPU
DDR
Local Tile
Memory
Geometry
Working Set
デ
ス
ク
ト
プ
モ
バ
イ
ル

59. - デスクトップGPUでパフォーマンス上問題ないプラクティスはモバイルGPUで
問題になったり
- 例例えば、ステンシルを使ったマスキングはモバイルで悲劇的にコストがかかる
- その逆のパターンもあったり…
NG!
59

60. デスクトップとモバイルの違い
アドバイス

61. 作業デスクトップGPUとモバイルGPUの違い
ステンシルマスキングの使われていない
マテリアルをできるだけ使おう
61

62. ボーナススライド
シェーダの複雑さ

63. シェーダの複雑さ
- シェーダで使うテクスチャの数と計算の分だけ
シェーダが重くなる
- 使える計算式はプラットフォームによって違ったりする
63

64. シェーダの複雑さ
アドバイス

65. 特にローエンド・プラットフォームで
パフォーマンスと挙動の確認をしよう！
65

66. 66
シェーダ情報を参考にしよう！

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

68. We're hiring!
68