过度绘制（Overdraw）检测：利用 SaveLayer 与 ClipRect 优化 GPU 填充率

大家好，今天我们来深入探讨一个在图形渲染中非常重要的性能问题：过度绘制（Overdraw）。我们将重点分析过度绘制对 GPU 填充率的影响，并学习如何利用 SaveLayer 和 ClipRect 这两个强大的工具来检测和优化它。

1. 什么是过度绘制？

过度绘制是指在屏幕的同一个像素上，绘制了多次颜色。想象一下，你在纸上画一个红色圆圈，然后在同一个位置画一个蓝色圆圈。最终你看到的颜色是蓝色，但实际上你画了两次。在图形渲染中，每次绘制都需要消耗 GPU 资源，而过度绘制意味着这些资源被浪费了，因为只有最后一次绘制的颜色才是可见的。

过度绘制会导致以下问题：

GPU 填充率瓶颈： GPU 的填充率是指 GPU 每秒能够绘制的像素数量。过度绘制会消耗大量的填充率，导致帧率下降，尤其是在移动设备上，GPU 资源有限，这个问题更加严重。
功耗增加： 绘制更多的像素意味着 GPU 需要进行更多的计算，从而增加功耗，缩短电池续航时间。
性能下降： 除了填充率，过度绘制还会影响其他性能指标，例如顶点处理和着色器执行。

2. 如何检测过度绘制？

检测过度绘制的方法有很多种，包括：

Android GPU Overdraw Debug： Android 系统自带的开发者选项中有一个 "GPU 呈现模式分析" 工具，可以显示屏幕上的过度绘制情况。颜色越深，过度绘制越严重。
RenderDoc 等 GPU 分析工具： 这些工具可以捕获渲染过程中的每一帧，并提供详细的性能分析数据，包括过度绘制情况。
自定义代码检测： 我们可以通过在代码中添加一些逻辑来检测过度绘制。

今天，我们将重点介绍使用 SaveLayer 和 ClipRect 进行自定义代码检测的方法。

3. SaveLayer 和 ClipRect 的作用

SaveLayer: SaveLayer 是 Canvas 类的一个方法，它可以将当前 Canvas 的状态保存到一个新的 Layer 中。这个 Layer 实际上是一个离屏缓冲区，所有后续的绘制操作都会在这个离屏缓冲区中进行。然后，你可以将这个离屏缓冲区绘制到原始 Canvas 上。

SaveLayer 有很多用途，例如：
- 离屏渲染： 将复杂的绘制操作在离屏缓冲区中完成，然后再一次性绘制到屏幕上，可以提高渲染效率。
- 实现特殊效果： 例如，可以使用 SaveLayer 和 PorterDuff 混合模式来实现各种图像混合效果。
- 检测过度绘制： 我们今天将重点介绍这种用法。
ClipRect: ClipRect 也是 Canvas 类的一个方法，它可以设置一个裁剪区域。只有在这个裁剪区域内的像素才会被绘制，超出裁剪区域的像素会被忽略。

ClipRect 的用途包括：
- 优化性能： 如果你知道某个区域不会被绘制，可以使用 ClipRect 将其排除，从而减少 GPU 的绘制工作。
- 实现遮罩效果： 可以使用 ClipRect 来创建一个遮罩，只显示遮罩内的内容。
- 检测过度绘制： 我们也可以用它来辅助检测过度绘制。

4. 使用 SaveLayer 检测过度绘制

基本思路是：

创建 Paint 对象并设置混合模式： 创建一个 Paint 对象，并将其 Xfermode 设置为 PorterDuff.Mode.DST_OVER。这个混合模式会将目标像素覆盖到源像素之上。这意味着，如果一个像素已经被绘制过，那么再次绘制它不会改变其颜色。
使用 SaveLayer 创建离屏缓冲区： 调用 Canvas.saveLayer() 方法创建一个离屏缓冲区。
在离屏缓冲区中绘制： 在离屏缓冲区中执行你的绘制操作。
将离屏缓冲区绘制到原始 Canvas 上： 调用 Canvas.restore() 方法将离屏缓冲区绘制到原始 Canvas 上。

如果屏幕上某个像素被过度绘制，那么使用 DST_OVER 混合模式绘制离屏缓冲区时，这个像素的颜色不会改变。因此，我们可以通过比较绘制前后的像素颜色来判断是否存在过度绘制。

以下是一个简单的示例代码：

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.util.AttributeSet;
import android.view.View;

public class OverdrawDetectView extends View {

    private Paint mPaint;
    private boolean mDetectOverdraw = false;

    public OverdrawDetectView(Context context) {
        super(context);
        init();
    }

    public OverdrawDetectView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public OverdrawDetectView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setColor(Color.RED);
    }

    public void setDetectOverdraw(boolean detect) {
        mDetectOverdraw = detect;
        invalidate(); // 重新绘制
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        if (mDetectOverdraw) {
            // 创建一个 Paint 对象并设置混合模式
            Paint overdrawPaint = new Paint();
            overdrawPaint.setAntiAlias(true);
            overdrawPaint.setColor(Color.RED);
            overdrawPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OVER));

            // 使用 SaveLayer 创建离屏缓冲区
            int saveCount = canvas.saveLayer(0, 0, getWidth(), getHeight(), null, Canvas.ALL_SAVE_FLAG);

            // 在离屏缓冲区中绘制
            drawContent(canvas);  // 调用绘制内容的函数

            // 将离屏缓冲区绘制到原始 Canvas 上，使用 DST_OVER 混合模式
            canvas.drawPaint(overdrawPaint);  // 绘制整个离屏缓冲区

            // 恢复 Canvas 状态
            canvas.restoreToCount(saveCount);

        } else {
            drawContent(canvas); // 正常绘制内容
        }
    }

    private void drawContent(Canvas canvas) {
        // 绘制一些示例内容，例如多个重叠的圆
        canvas.drawCircle(getWidth() / 2f, getHeight() / 2f, 100, mPaint);
        mPaint.setColor(Color.BLUE);
        canvas.drawCircle(getWidth() / 2f + 50, getHeight() / 2f + 50, 80, mPaint);
        mPaint.setColor(Color.GREEN);
        canvas.drawCircle(getWidth() / 2f - 50, getHeight() / 2f - 50, 60, mPaint);
    }
}

在这个例子中，我们创建了一个 OverdrawDetectView，它继承自 View。setDetectOverdraw(boolean detect) 方法用于控制是否启用过度绘制检测。当 mDetectOverdraw 为 true 时，onDraw() 方法会使用 SaveLayer 和 DST_OVER 混合模式来绘制内容。绘制的内容在 drawContent() 方法中，这里我们绘制了三个重叠的圆。

如果启用了过度绘制检测，那么在绘制完内容后，整个离屏缓冲区会被绘制到原始 Canvas 上，使用 DST_OVER 混合模式。这意味着，如果一个像素被过度绘制，它的颜色不会改变。因此，你会看到重叠区域的颜色与原始颜色不同，表明存在过度绘制。

注意：

这种方法只能检测到是否存在过度绘制，但不能精确地计算出过度绘制的次数。
使用 SaveLayer 会增加 GPU 的内存消耗，所以不要在生产环境中使用这种方法。

5. 使用 ClipRect 优化过度绘制

ClipRect 可以用来裁剪 Canvas，只绘制指定区域的内容。通过合理地使用 ClipRect，我们可以避免绘制那些不可见的像素，从而减少过度绘制。

例如，假设我们有一个列表，列表中的每一项都有一个背景颜色。如果列表项之间存在重叠，那么就会发生过度绘制。我们可以使用 ClipRect 来裁剪每个列表项的绘制区域，只绘制可见的部分。

以下是一个示例代码：

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.view.View;

import java.util.ArrayList;
import java.util.List;

public class ClipRectOptimizeView extends View {

    private Paint mPaint;
    private List<Rect> mItems;

    public ClipRectOptimizeView(Context context) {
        super(context);
        init();
    }

    public ClipRectOptimizeView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public ClipRectOptimizeView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        mPaint = new Paint();
        mPaint.setAntiAlias(true);

        // 创建一些示例列表项
        mItems = new ArrayList<>();
        mItems.add(new Rect(50, 50, 200, 150));
        mItems.add(new Rect(150, 100, 300, 200));
        mItems.add(new Rect(250, 150, 400, 250));
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        // 绘制列表项
        for (Rect item : mItems) {
            // 设置裁剪区域
            canvas.save(); // 保存 Canvas 状态
            canvas.clipRect(item);

            // 绘制背景颜色
            mPaint.setColor(Color.LTGRAY);
            canvas.drawRect(item, mPaint);

            // 绘制一些文本内容
            mPaint.setColor(Color.BLACK);
            mPaint.setTextSize(30);
            canvas.drawText("Item", item.left + 10, item.top + 30, mPaint);

            canvas.restore(); // 恢复 Canvas 状态，移除裁剪区域
        }
    }
}

在这个例子中，我们创建了一个 ClipRectOptimizeView，它继承自 View。onDraw() 方法会绘制一个列表，列表中的每一项都是一个 Rect 对象。在绘制每个列表项之前，我们会使用 canvas.clipRect(item) 方法设置一个裁剪区域，只允许绘制 item 区域内的像素。绘制完成后，我们使用 canvas.restore() 方法恢复 Canvas 的状态，移除裁剪区域。

通过使用 ClipRect，我们可以避免绘制那些被其他列表项覆盖的像素，从而减少过度绘制。

6. SaveLayer 与 ClipRect 结合使用

SaveLayer 和 ClipRect 可以结合使用，以实现更复杂的优化策略。例如，我们可以使用 SaveLayer 创建一个离屏缓冲区，然后在离屏缓冲区中使用 ClipRect 对绘制区域进行裁剪。这样可以避免在原始 Canvas 上进行不必要的绘制操作。

7. 优化过度绘制的通用策略

除了 SaveLayer 和 ClipRect，还有其他一些通用的策略可以用来优化过度绘制：

减少透明度： 透明度是导致过度绘制的常见原因。尽量避免使用过多的透明图层。如果必须使用透明度，可以考虑使用更高效的混合模式，例如 SRC_OVER。
合并图层： 如果多个图层叠加在一起，可以考虑将它们合并成一个图层，从而减少绘制次数。
优化布局： 优化布局可以减少视图的重叠，从而减少过度绘制。例如，可以使用 ConstraintLayout 来创建更扁平的布局结构。
使用硬件加速： 硬件加速可以利用 GPU 来加速绘制操作，从而提高渲染效率。

8. 总结

过度绘制会导致 GPU 填充率瓶颈、功耗增加和性能下降。
SaveLayer 和 ClipRect 可以用来检测和优化过度绘制。
SaveLayer 可以用来创建一个离屏缓冲区，然后在离屏缓冲区中进行绘制操作。
ClipRect 可以用来裁剪 Canvas，只绘制指定区域的内容。
还可以通过减少透明度、合并图层和优化布局等通用策略来优化过度绘制。

9. 性能优化是一个持续的过程

图形性能优化是一个复杂而持续的过程，需要不断地分析和调整。使用 SaveLayer 和 ClipRect 只是其中的一部分。希望通过今天的讲解，大家能够对过度绘制有一个更深入的了解，并能够在实际开发中有效地优化图形性能。

10. 了解原理，才能更好地应用

理解过度绘制的原理和 SaveLayer、ClipRect 的作用，才能在实际开发中灵活运用，减少不必要的 GPU 消耗，提升应用性能。

过度绘制（Overdraw）检测：利用 SaveLayer 与 ClipRect 优化 GPU 填充率

发表回复 取消回复

发表回复取消回复