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

3.6K Views

September 30, 19

スライド概要

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

profile-image

リアルタイム3Dコンテンツを制作・運用するための世界的にリードするプラットフォームである「Unity」の日本国内における販売、サポート、コミュニティ活動、研究開発、教育支援を行っています。ゲーム開発者からアーティスト、建築家、自動車デザイナー、映画製作者など、さまざまなクリエイターがUnityを使い想像力を発揮しています。

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
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.

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

6.

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

7.

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

8.

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

9.

1. GPUとCPUの違い

10.

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

11.

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

12.

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

13.

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

14.

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

15.

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

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) 2つの、⼿手前にピクセルがあるかどうかを 判断するための⾼高速な専⾨門機能を持っている 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と話す¹ CPU ドライバー GPU モバイルGPUのドライバーはOpenGLかVulkanかMetal ¹返事があったら、それもドライバーを通して聞く 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.

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

46.

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

47.

Draw Call アドバイス

48.

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

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.

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

57.

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

58.

作業デスクトップ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

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