UI開発シリーズ、最後は最適化です。CanvasのBatch処理、Overdrawを例に上げた後、Profilerによる確認方法をまとめてます。
Canvas
全てのUIはCanvas配下になります。何も考えず大量にUIを配置するとパフォーマンスを低下させます。
Batch処理
最も効果的なのはBatch処理です。これはザックリ言うとCPUがGPUに描画の命令を出す時に、必要な情報(Material, Texture)をまとめる事で命令数を減らしCPUの負荷を軽減するというものです。
という訳で、以下にBatch処理を有効にする条件・注意点をまとめました。
同じTextureを参照
Batch処理を有効にするために、個別TextureをAtlas化して一つのTextureにまとめてにます。
kan-kikuchi.hatenablog.com同じMaterialを参照
Textureと同様にまとめれるものは同じMaterialを参照します。 UIのレイヤー表示に注意
MaterialA, MaterialB を参照するImageを下図のように交互に重ねて表示する場合、Batch処理が効かないです。
この場合はMaterialをまとめるか、重ねない表示にするかです。
同じCanvasに配置
uGUIのBatch処理はCanvas単位で実行されます。前述でまとめたTexture,Materialが他のCanvasを跨がないよう調整します。
Canvas単位の表示制御に注意
UIをCanvas単位で表示・非表示する時はCanvasを無効にしてください。Canvas を無効化すると頂点データを維持するため、次回有効時に頂点バッファの更新せずにすむためです。
Canvasの親子関係に注意
ただし、Canvasに親子関係を設定している場合、子Canvasの無効化時に親Canvasは更新されてしまいます。動かさない
各UIを更新すると都度Batch処理が実行されます。これは中々に重たい処理でUI生成時など限定的なタイミングならまだ良いですが毎フレーム走る場合は問題になります。
Canvas単位でBatch処理を実行するため、動かしていない他UIも含めて影響します。
Canvasを分割する
とはいえ毎フレーム更新するUIは出てきます。対処法の1つは更新用Canvasに分割します。
こうすれば更新用CanvasのみBatch処理が走り、影響範囲を最小限に抑えれます。
ただし、Canvasを分割し過ぎると今度はBatch処理の意味がなくなるので、負荷を計測して分割数を決めていきます。
Shaderで動かす
もう1つの対処法は周期性(左右・上下振動)のある表現をシェーダで実装します。GPU側で処理するためCanvasのBatch処理は走らないです。
baba-s.hatenablog.com
Overdraw
半透明のUIを大量に重ねると余計な描画処理が発生するため、なるべく半透明UIを重ねないよう気をつける必要があります。Overdrawは下図のようにSceneビューで確認できます。明るい所ほどポリゴンが重なっており負荷が高いです。
Profiler
最後にUnityのProfilerを使い、ここまでの最適化の効果を確認する方法です。
Window > Analysis > Profiler で開きます。
CPU Usage
Batch処理の発生回数・負荷を確認できます。下図の検索フォームに "Canvas.BuildBatch" と入力すると確認できます。
UI/UI Details
Batch処理失敗の原因をBatch Break Reasonで確認できます。
UISystemPreviewWindow
UI/UI Details の右下に表示されるウインドウです。Batch範囲とOverdrawを確認できます。
composite overdraw を選択すると対象UIの overdraw を確認できます。
まとめ
Canvasを中心に最適化方法をまとめました。Batch処理・OverdrawはUIに限らず3Dでも注意すべき内容です。UnityのProfilerはすぐに起動できて詳細情報も確認しやすく優秀です。
これらを活用して普段からパフォーマンスを意識して開発をしたいですね。終盤でバタバタしながら対応するのは大変ですし・・^_^;
参考
https://unity3d.com/jp/how-to/unity-ui-optimization-tips
Unityでパフォーマンスの良いUIを作る為のTips | PPT