モバイルアプリにおけるOverdraw: 原因と最適化

モバイルグラフィックスにおけるOverdrawとは？

Overdrawとは、同じ画面ピクセルが1つのレンダリングフレーム内で複数回再描画される状況です。理想的なシナリオでは、各ピクセルは正確に1回だけ書き込まれるべきですが、実際のインターフェースでは、ネストされたView、背景画像、透明レイヤーのために、GPUは繰り返し書き込みを行います。

追加の再描画ごとにフレームのレンダリング時間が増加します。標準の60 FPSレートでは、各フレームに約16.6 msが割り当てられます。Overdrawによってこの制限を超えると、フレームレートは30 FPS以下に低下し、インターフェースの滑らかさが著しく低下します。

GoogleのAndroid Performance Patternsによると、overdrawファクターが3xのアプリは、1xのアプリよりもフラグメントシェーダーに3倍の時間を費やします。低パフォーマンスのGPUデバイスでは、スクロールやアニメーション中に顕著なラグが発生します。

モバイル開発者にとって、overdrawを理解することは非常に重要です。この要因は、多数のネストされた要素を持つ一見シンプルな画面で、カクつきのあるスクロールや低フレームレートを引き起こす最も一般的な原因です。

OverdrawがGPUパフォーマンスに与える影響

GPUパイプラインは、頂点シェーダー、ラスタライゼーション、フラグメントシェーダーのいくつかの段階で構成されています。フラグメントシェーダーは、すべてのプリミティブのすべてのピクセルに対して実行されるため、最もコストのかかる部分です。2xのoverdrawでは、フラグメントシェーダーは2倍のピクセルを処理し、フレーム時間が直接増加します。

Qualcomm AdrenoやApple GPUなどの最新のモバイルGPUには、overdrawを部分的に補償するEarly-ZテストとHidden Surface Removalメカニズムがあります。ただし、これらの最適化は特定の条件下でのみ機能し、ハードウェアアクセラレーションだけに頼るべきではありません。

たとえば、半透明要素をレンダリングする場合、ハードウェアEarly-Zは効果がなく、各ピクセルが完全に処理されます — このようなシナリオでは、overdrawが5x以上に達する可能性があります。

過剰な再描画の主な原因

多層背景は、モバイルアプリにおけるoverdrawの主な原因の1つです。ActivityやViewControllerが背景色を設定すると、各ネストされたViewが独自の背景を追加でき、ピクセルは階層の各レベルで再描画されます。

Uber Engineeringの調査では、Androidアプリで過剰な背景を削除すると、overdrawが32%、画面レンダリング時間が25%削減されました。iOSでも同様の状況です。不透明なViewにopaque = trueを設定すると、アルファブレンディングが排除され、複数回のピクセル書き込みが防止されます。

• 透明オーバーレイ — 他の要素の上にあるアルファチャンネルを持つ要素は常にoverdrawを引き起こします。
• ClipChildren=false — 子要素のクリッピングを無効にすると、非表示領域のレンダリングが発生します。
• ShapeDrawableの使用 — 単純な色の代わりにShapeDrawableを使用すると、フラグメントシェーダーの負荷が増加します。
• 過剰なネスト — View階層の各レベルが、潜在的な再描画レイヤーを追加します。

iOSプラットフォームでは、透明なUIStackView、shouldRasterizeを使用したCALayer、重なり合うUIBlurEffectの使用によってoverdrawが頻繁に発生します。AppleはXCodeのCore Animationツールでoverdrawを確認することを推奨しています — 再描画ゾーンが赤いオーバーレイとして表示されます。

Overdrawの診断方法: ツールと手法

Debug GPU Overdrawは、overdrawファクターに応じて画面を異なる色で着色するAndroidの組み込みツールです。紫は1x、青は2x、緑は3x、ピンクは4x、赤は5x以上を意味します。理想的な画面はほとんどが紫色であるべきです。

iOSでは、XCode InstrumentsのCore Animationツールによって同様の診断が実行されます。再描画ゾーンを可視化し、Color Blended Layersモードでピクセル書き込みの正確な数を表示します。緑色のレイヤーは不透明（最適）で、赤色のレイヤーは透明度を含みoverdrawを引き起こします。

• Profile GPU RenderingはAndroidでレンダリング時間のヒストグラムを表示します。高い緑色のバーはoverdrawの問題を示しています。
• Renderscriptは、Android 10+デバイスのレンダリングパイプラインを分析するためのより高度なツールです。
• Metal DebuggerはXCodeで各レンダーパスを分析し、フラグメントシェーダー呼び出しの正確な数を確認できます。

診断後、最適化の前後でFPSを測定することが重要です。Overdrawを修正した際の10–15 FPSの差は、リストやアニメーションを含む複雑な画面では正常な結果です。

モバイルアプリにおけるOverdraw最適化テクニック

過剰な背景の削除は最も簡単で効果的な方法です。Androidでは、各Viewではなく、Activityまたはテーマにのみandroid:windowBackgroundを設定します。iOSでは、すべての不透明なUIViewにopaque = trueを設定すると、それらの要素のoverdrawがほぼゼロになります。

Google I/O 2019によると、Googleマップでのoverdraw最適化により、レイヤーの統合とClipRectを使用した描画領域の制限を通じて、フレームレンダリング時間が40%削減されました。Android開発者向けに、Googleは以下のプラクティスを推奨しています:

• ClipRect — Canvasの描画領域を制限します。可視領域の外側に何もなければ、GPUはリソースを浪費しません。
• ViewStub — めったに使用されない、または初期ロード時に非表示の要素に使用します。コンポーネントはinflateが呼び出されたときのみレンダリングされます。
• mergeとinclude — View階層の深さを減らし、レンダーパスの数を減らします。
• フラットバッファ — ネストされたLayoutを単一のConstraintLayoutまたはRelativeLayoutに置き換えます。

iOSでは、CALayerの設定によって最適化が実現されます: masksToBounds = trueを設定するとレイヤー境界を超えたコンテンツがクリップされ、shouldRasterizeは静的レイヤーのビットマップキャッシュを有効にします。

コード例: AndroidとiOSでのOverdraw除去

KotlinとSwiftの実践的な例を見てみましょう。典型的なoverdraw除去シナリオを示します。最初の例は、AndroidでのClipRectによる最適化を示しています:

class OptimizedView@JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null
) : View(context, attrs) {

    override fun onDraw(canvas: Canvas) {
        canvas.clipRect(
            paddingLeft.toFloat(), paddingTop.toFloat(),
            width - paddingRight.toFloat(), height - paddingBottom.toFloat()
        )
        // Draw content only within clipped area
        super.onDraw(canvas)
    }
}

2番目のSwiftの例は、要素が半透明であるべきでない場合にレイヤーの透明度を無効にする方法を示しています:

class OpaqueLabel: UILabel {
    override var isOpaque: Bool {
        get { true }
        set { }
    }

    override func draw(_ rect: CGRect) {
        backgroundColor?.setFill()
        UIRectFill(rect)
        super.draw(rect)
    }
}

3番目の例は、Androidでの遅延マップ読み込みのためのViewStubの使用を示しています。ViewStubは可視になるまでレンダリングされず、画面初期化段階でのoverdrawを排除します:

<!-- layout/activity_main.xml -->
<ViewStub
    android:id="@+id/map_stub"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:inflatedId="@+id/map_container"
    android:layout="@layout/map_fragment" />

// Inflate on demand
ViewStub stub = findViewById(R.id.map_stub)
stub?.inflate()