[Impeller] Potentially poor performance with Vulkan on Motorola Edge 30.

[chinmaygarde]

Working title as I'm still investigating. This is based on this report on Reddit.

The user reports poor performance ("less fluid on simple scrolls") and loss of fidelity ("quality of backdrop blurs and gradients").

The device is a Motorola Edge 30. The GPU Info report says it is an Adreno 645L and it has a 144Hz screen. GPU Info had listings for a Motorola Edge 30 Pro, Fusion, and Ultra and I need to verify which one the user has.

I've tried to reproduce this observation on the high refresh rate device I have on me right now (Pixel 7 Pro) and was unsuccessful (also with the macrobenchmarks app). Though, I also think we only have devices that go up to 120Hz in the lab. Though I don't see how, perhaps the 144Hz is relevant to swapchain setup? Just a guess.

The loss of fidelity is also difficult to explain since the implementations are identical between the backends for stuff like blurs (theres only so many ways to blur stuff and we did do the dithering fixes as well). My guess here is again something to do with the swapchain setup as we don't do that in the OpenGL backend for Skia and perhaps we messed up the surface format.

I'll try to get more information from the original poster but the action item for the team is to get our hands on a Motorola Edge 30 with a 144Hz panel.

Questions for the original poster:

• Is the device a Motorola Edge 30 Regular, Pro, Fusion, or Ultra?
• Are you able to reproduce this is issue in any app? Say, for instance, the macrobenchmarks app (just flutter run in that directory)?
• Can you post screenshots of the loss of fidelity (s after flutter run)? Both the before and after?

I'll followup on getting our hands on the device of this kind as it seems like a good configuration to have on hand. Its a high refresh-rate device at a non-standard rate with a great screen and an upper-mid tier GPU.

[voxelbee]

Seems like this could be related to my issue #148496 too with IOS jank in impeller on ListView scrolling. This doesn't happen when running with Skia.

[ercantomac]

• Is the device a Motorola Edge 30 Regular, Pro, Fusion, or Ultra?

Motorola Edge 30 Regular

• Are you able to reproduce this is issue in any app? Say, for instance, the macrobenchmarks app (just flutter run in that directory)?

I wasn't able to compile the project for Android, I got this error:

• Can you post screenshots of the loss of fidelity (s after flutter run)? Both the before and after?

Blur-1 Impeller



Blur-1 Skia




Blur-2 Impeller



Blur-2 Skia

[chinmaygarde]

Motorola Edge 30 Regular

Thanks for confirming. I'm trying to get my hands on this device now and will try to reproduce the performance observations.

Thanks for the comparison of the blurs. You also mentioned gradients. Do you have screenshots of those too. Or is it all gradients? If so, we can setup a reduced test case for those on our own.

[jonahwilliams]

@ercantomac can you create a minimal test case that shows how you're using blurs?

[jonahwilliams]

Also I don't think flutter/engine#51761 is in 3.22, so since blurs use mipmaps for the downsample I'd expect lower fidelity. Will confirm next week, otherwise you could try on master channel

[chinmaygarde]

Assigning to myself to track getting our hands on this specific device.

[ercantomac]

You also mentioned gradients. Do you have screenshots of those too. Or is it all gradients? If so, we can setup a reduced test case for those on our own.

After comparing the screenshots closely, I realized that they are nearly identical after all, so I guess I was wrong about the gradients.

Gradient Impeller




Gradient Skia

[ercantomac]

@ercantomac can you create a minimal test case that shows how you're using blurs?

I wrap my widgets with this widget:

class BlurryNoisyContainer extends ConsumerWidget {
  const BlurryNoisyContainer({
    super.key,
    required this.child,
    this.borderRadius = 32.0,
    this.fullScreen = false,
    this.transparent = false,
  });

  final Widget child;
  final double borderRadius;
  final bool fullScreen, transparent;

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final ThemeMode currentTheme = ref.watch(themeStateProvider);

    final Color backgroundColor =
        (currentTheme == ThemeMode.light) ? const Color(0xFFBFBFBF).withOpacity(0.55) : const Color(0xFF252525).withOpacity(0.55);

    final double sigmaDark = fullScreen ? 20.0 : 24.0;
    final double sigmaWhite = fullScreen ? 15.0 : 18.0;

    return ClipRRect(
      borderRadius: BorderRadius.circular(fullScreen ? 0.0 : borderRadius),
      child: BackdropFilter(
        filter: ImageFilter.blur(
          tileMode: TileMode.mirror,
          sigmaX: currentTheme == ThemeMode.dark ? sigmaDark : sigmaWhite,
          sigmaY: currentTheme == ThemeMode.dark ? sigmaDark : sigmaWhite,
        ),
        child: Stack(
          children: <Widget>[
            if (!transparent)
              Positioned.fill(
                child: Image.asset(
                  'assets/noise.png',
                  repeat: ImageRepeat.repeat,
                  excludeFromSemantics: true,
                  opacity: const AlwaysStoppedAnimation<double>(0.04),
                ),
              ),
            Container(
              decoration: BoxDecoration(
                color: transparent ? Colors.transparent : backgroundColor,
                borderRadius: BorderRadius.circular(fullScreen ? 0.0 : borderRadius),
                border: fullScreen
                    ? null
                    : Border.all(
                        color: currentTheme == ThemeMode.light ? Colors.black.withOpacity(0.08) : Colors.white.withOpacity(0.08),
                        width: 0.5,
                      ),
              ),
              child: child,
            ),
          ],
        ),
      ),
    );
  }
}

And here is the noise.png file:

[chinmaygarde]

Thanks for clarifying the gradients and the reduced test case on the blurs (will take a look). I've placed an Edge 30 on order and should have it in hand ~ May 24-29.

[chinmaygarde]

On Performance

I have the Edge 30 on hand. I locked the screen refresh rate to 144Hz (from the default "Auto") and cycled thorough the macrobenchmarks and didn't notice any performance degradation. On simple scrolls, frame times are 2-3 ms which is well within the ~7ms frame budget.

I was able to observe dropped frames on a couple of benchmarks like "Animated complex opacity perf." The stalls are in next drawable acquisition which means its the GPU workload that is too high for a sustained 144Hz frame rate. Unfortunately, my Edge 30 can't receive updates past Android 12 so the GPU frame capture tools aren't suitable. But, the same scene renders in ~10ms on the GPU on the Pixel 7 and is barely within the 90Hz budget on that device. But that scene isn't faster with the old renderer either.

There isn't a reduced test case for the "simple scrolls" performance issue in the original post but we have been able to reproduce @voxelbee s report and are working on improving that case. So my takeaway for the team is to make progress on that actionable issue (and they are).

If you have more information on what you are rendering in the "simple scrolls", that'd be super helpful.

On Blur Fidelity

I was able to observe a difference in the blur fidelity like you reported. I've filed #149431 to track closing that gap.

On Gradient Fidelity

Like your update, I wasn't able to reproduce any differences.

Conclusion

We have a couple of actionable issues to work on that I've cross-referenced. I'll keep an eye out for reduced test cases of the buggy simple scrolls. Closing this issue as I am concluding my investigation. Thanks for previewing the renderer. You are helping more than you think you are.