【Unite Tokyo 2019】2DアーティストのためのGPU入門

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

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

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

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

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

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

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

1. GPUとCPUの違い

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

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

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

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

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

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

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

2. GPUは画家ではない

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

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

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

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

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

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

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

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

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

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

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

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

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

Overdraw アドバイス

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

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

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

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

3．CPUとGPUのやりとり

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

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

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

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

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

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

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

ドローコール結合 44

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

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

Draw Call アドバイス

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

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

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

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

Final First アドバイス

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

We're hiring! 68