如何优化DrawingVisual中的GIF绘制性能并解决拖影问题

问题现象 #

在DrawingVisual中实现GIF绘制逻辑时出现严重性能与显示问题：

• 绘制分辨率为1924*934、434fps的GIF时，AMD Ryzen 7 5800H CPU最高占用22%，RTX 3060 GPU占用达50%，内存占用达4GB
• 渲染结果存在异常拖影，异常效果如下图：
  

现有实现代码 #

初始化与帧循环核心逻辑 #

public void InitImage(string path)
{
    isAnima = false;
    uriBitmap = BitmapDecoder.Create(
     new Uri(path, UriKind.Relative),
     BitmapCreateOptions.None,
     BitmapCacheOption.Default);
    if (uriBitmap.Frames.Count > 1)
    {
        isAnima = true;
        // 读取GIF每帧信息
        frameInfos = new List<FrameInfo>();
        for (int i = 0; i < uriBitmap.Frames.Count; i++)
        {
            frameInfos.Add(GetFrameInfo(uriBitmap.Frames[i]));
        }

        frameIndex = 0;
        try
        {
            if (animationThread == null)
            {

                animationThread = new Thread(ChangeGifFrame);
                animationThread.Start();
            }
        }
        catch (Exception)
        {

            Debug.WriteLine("线程关闭");
        }
    }
}
private void DrawImage(Point location, Size size)
{
    var drawing = this.dvc.drawingVisual.RenderOpen();
    drawing.PushTransform(rotate);
    if (!isAnima)
    {
        drawing.DrawImage(baseSource, new Rect(location, size));
    }
    else
    {
        // 因FrameDisposalMethod为Combine，逐帧绘制当前帧之前的所有帧
        for (int i = 0; i < frameIndex; i++)
        {
            var frame = uriBitmap.Frames[i];
            var info = frameInfos[i];
            drawing.DrawImage(frame, new Rect(new Point(location.X + info.Left * zoom, location.Y + info.Top * zoom), new Size(info.Width * zoom, info.Height * zoom)));
        }
    }
    drawing.Close();
}
public void ChangeGifFrame()
{
    while (true)
    {
        if (isAnima)
        {
            this.Dispatcher.Invoke(new Action(() =>
            {
                frameIndex++;
                if (frameIndex >= uriBitmap.Frames.Count)
                {
                    frameIndex = 0;
                }
                DrawImage(drawPoint, drawSize);
            }));
           
        }
        Thread.Sleep(30);
    }
}

已尝试的BitmapSource合成方案 #

尝试通过逐帧合成BitmapSource的方式优化，但实际性能比直接绘制更差：

public BitmapSource MixBitmapSource(BitmapSource bs1, BitmapSource bs2)
{
    DrawingVisual dv = new DrawingVisual();
    RenderTargetBitmap render = new RenderTargetBitmap(bs1.PixelWidth, bs2.PixelHeight, bs1.DpiX, bs2.DpiY, PixelFormats.Default);
    DrawingContext dc = dv.RenderOpen();
    dc.DrawImage(bs1, new Rect(0, 0, bs1.PixelWidth, bs1.PixelHeight));
    dc.DrawImage(bs2, new Rect(0, 0, bs1.PixelWidth, bs1.PixelHeight));
    dc.Close();
    render.Render(dv);
    return render;
}

问题根因 #

• 冗余绘制开销线性增长：当前处理组合帧时，每帧都从第0帧循环绘制到当前帧，随帧序号递增，单次渲染的DrawImage调用次数线性上涨，高帧数场景下GPU Draw Call开销极高；同时未按GIF帧处置规则清理脏区，直接导致拖影问题。
• 缓存策略错误：BitmapDecoder初始化时使用BitmapCacheOption.Default，不会预加载解码所有帧，每次绘制时才触发实时解码，重复解码带来大量CPU、内存开销。
• 调度逻辑不合理：独立线程固定30ms休眠触发UI线程调度，既不匹配GIF实际帧间隔产生无效渲染，跨线程Dispatcher.Invoke也会带来额外的线程同步开销，且无线程退出逻辑易造成资源泄漏。
• 合成方案开销过高：手动合成BitmapSource的方案每次都新建RenderTargetBitmap、重复绘制全量帧，GPU纹理重复创建销毁的开销远大于直接绘制。

优化方案 #

• 预加载解码所有帧：初始化BitmapDecoder时改用BitmapCacheOption.OnLoad，一次性解码所有GIF帧，提前读取每帧的处置规则、帧延迟、绘制偏移、尺寸元数据，避免运行时重复解码。
• 维护离屏合成缓存：创建一个与GIF输出尺寸一致的RenderTargetBitmap作为帧合成缓存，不需要每帧重绘所有历史帧：
  • 处置规则为RestoreToBackground：绘制新帧前，用透明色清空当前帧对应区域
  • 处置规则为DoNotDispose（组合帧）：直接在现有缓存上叠加绘制当前帧即可
  • 处置规则为RestoreToPrevious：提前缓存上一帧的缓存快照，绘制前恢复快照再绘制新帧
• 优化渲染调度：废弃独立线程+固定Sleep的逻辑，改用DispatcherTimer，按每帧实际延迟（GIF帧延迟单位为10ms，延迟为0时默认设为100ms避免播放过快）触发渲染，减少跨线程开销。
• 降低Draw Call次数：DrawingVisual中每帧仅需绘制一次最终合成好的RenderTargetBitmap即可，将每帧绘制调用次数降到1次。

内容的提问来源于stack exchange，提问作者absurd