[Impeller] Higher energy consumption observed vs Skia during frequent vector primitive rendering.

[LennoxGong]

Steps to reproduce

Redraw 100 circles every 1 second using flutter
Test the GPU Utilization / Power consumption.

Power Comsumption data:
Java Android skia+vulkan : 324mA
Flutter impeller+vulkan : 371mA (+15%)

Test Group:
Android Skia using Vulkan(Switching at the framework level)
Flutter Skia
Flutter Impeller+Vulkan
Flutter Impeller+OpenGLES

It is expected that the GPU usage of Impeller will increase when using Vulkan, but compared with the lower CPU usage, excessive GPU usage will lead to an increase in the overall power consumption of the application.
The result of the power consumption test is about 15% higher overall.

In Qualcomm Platform, we use SnapdragonProfiler to investigate the GPU Utilization.

Java Android with Skia (Vulkan)

Flutter with impeller (Vulkan)

Flutter with skia (OpenGLES)

Flutter with impeller (OpenGLES)

I created a issue last year about power consumption, but the data was for a relatively complex user interface.

see #156681

This test is only for simple graphics drawing, the data will be relatively more accurate.

Code sample

Code sample

      
import 'dart:async';

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(

        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Pure Flutter Memory'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: null,
      body: Padding(padding: EdgeInsets.only(top: 35),
      child: CircleWidget(),),
    );
  }
}

class CircleWidget extends StatefulWidget {
  const CircleWidget({Key? key}) : super(key: key);

  @override
  State<CircleWidget> createState() => _CircleWidgetState();
}

class _CircleWidgetState extends State<CircleWidget> {
    final _paint = Paint()
    ..color = Colors.blue
    ..style = PaintingStyle.fill;
    Timer? _timer;

  @override
  void initState() {
    super.initState();
    _timer = Timer.periodic(Duration(seconds: 1), (timer) {
      setState(() {});
    });
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 400,
      height: 400,
      child: CustomPaint(
        painter: CirclePainter(_paint),
      ),
    );
  }
}

class CirclePainter extends CustomPainter {

  final Paint _paint;

  CirclePainter(this._paint);

  @override
  void paint(Canvas canvas, Size size) {
    double radius = 1.45;
    double spacing = 0.3;
    double startX = spacing;
    double startY = spacing;
    double currentX = startX;
    double currentY = startY;
    for (int i = 0; i < 10; i++) {
      for (int j = 0; j < 10; j++) {
        canvas.drawCircle(Offset(currentX, currentY), radius, _paint);
        currentX += radius * 2 + spacing;
      }
      currentX = startX;
      currentY += radius * 2 + spacing;
    }
  }

  @override
  bool shouldRepaint(CirclePainter oldDelegate) {
    return true;
  }
}

    

What target platforms are you seeing this bug on?

Android

OS/Browser name and version | Device information

Redmi Note 14 Pro+ (Snapdragon 7s Gen3)(Android V)

Does the problem occur on emulator/simulator as well as on physical devices?

Unknown

Logs

Logs

[Paste your logs here]

Flutter Doctor output

Doctor output

[!] Flutter (Channel [user-branch], 3.29.0, on Ubuntu 24.04.2 LTS
    6.11.0-17-generic, locale zh_CN.UTF-8) [256ms]
    ! Flutter version 3.29.0 on channel [user-branch] at
      /home/mi/workspace/devkit/flutter
      Currently on an unknown channel. Run `flutter channel` to switch to an
      official channel.
      If that doesn't fix the issue, reinstall Flutter by following instructions
      at https://flutter.dev/setup.
    ! Upstream repository unknown source is not a standard remote.
      Set environment variable "FLUTTER_GIT_URL" to unknown source to dismiss
      this error.
    • Framework revision 35c388afb5 (3 周前), 2025-02-10 12:48:41 -0800
    • Engine revision 010c8a806b
    • Dart version 3.7.0 (build 3.7.0-323.0.dev)
    • DevTools version 2.42.0
    • If those were intentional, you can disregard the above warnings; however
      it is recommended to use "git" directly to perform update checks and
      upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.0)
    [2.3s]
    • Android SDK at /home/mi/Android/Sdk
    • Platform android-35, build-tools 35.0.0
    • ANDROID_HOME = /home/mi/Android/Sdk
    • Java binary at:
      /home/mi/.local/share/JetBrains/Toolbox/apps/android-studio/jbr/bin/java
      This is the JDK bundled with the latest Android Studio installation on
      this machine.
      To manually set the JDK path, use: `flutter config
      --jdk-dir="path/to/jdk"`.
    • Java version OpenJDK Runtime Environment (build
      17.0.11+0-17.0.11b1207.24-11852314)
    • All Android licenses accepted.

[✓] Chrome - develop for the web [104ms]
    • Chrome at google-chrome

[✗] Linux toolchain - develop for Linux desktop [361ms]
    • Ubuntu clang version 18.1.3 (1ubuntu1)
    • cmake version 3.31.6
    ✗ ninja is required for Linux development.
      It is likely available from your distribution (e.g.: apt install
      ninja-build), or can be downloaded from
      https://github.com/ninja-build/ninja/releases
    • pkg-config version 1.8.1
    ✗ GTK 3.0 development libraries are required for Linux development.
      They are likely available from your distribution (e.g.: apt install
      libgtk-3-dev)

[✓] Android Studio (version 2024.2) [102ms]
    • Android Studio at
      /home/mi/.local/share/JetBrains/Toolbox/apps/android-studio
    • Flutter plugin version 81.1.3
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build
      17.0.11+0-17.0.11b1207.24-11852314)

[✓] IntelliJ IDEA Ultimate Edition (version 2024.3) [19ms]
    • IntelliJ at
      /home/mi/.local/share/JetBrains/Toolbox/apps/intellij-idea-ultimate
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart

[✓] VS Code (version 1.97.2) [18ms]
    • VS Code at /usr/share/code
    • Flutter extension version 3.106.0

[!] Proxy Configuration [47ms]
    • HTTP_PROXY is set
    • NO_PROXY is localhost,127.0.0.0/8,::1
    • NO_PROXY contains localhost
    ! NO_PROXY does not contain 127.0.0.1
    • NO_PROXY contains ::1

[✓] Connected device (2 available) [160ms]
    • Linux (desktop) • linux  • linux-x64      • Ubuntu 24.04.2 LTS
      6.11.0-17-generic
    • Chrome (web)    • chrome • web-javascript • Google Chrome 133.0.6943.141

[✓] Network resources [1,050ms]
    • All expected network resources are available.

[darshankawar]

@FridayAutum
Did you still use this device to monitor the power consumption ? Also, I am wondering how is this issue different that the linked one ?

[LennoxGong]

Yes. However, in the test data this time, we also tested the GPU usage. The main difference is that this test is based on the most basic graphics drawing test benchmark, without complex component construction. At the same time, we found that the number of instruction events generated by using Impeller Vulkan is much higher than that of using Skia Vulkan, which was not included in last year's test.

[jonahwilliams]

I suspect what is happening here is fairly simple:

Flutter w/ Skia: Nothing is changing so the picture is raster cached.
Flutter w/ Impeller: We don't detect that the path is multiple circle contours, so we use the more expensive rendering technique rather than the simple vector fill technique. IMO easy fix for this case.

Andoird w/ Skia: not familiar with test code, but Skia caches masks so potentially related to 1.

We should track paths that are all constructed from convext contour types so we can use a simpler rendering technique.

[jonahwilliams]

You will probably see less of a difference (through probably still too much of a difference) if the path itself isn't stable, that is if the size/shape varied per frame. That would defeat path/mask caching and show the path rasterization overhead. Which with circles I'd expect to be higher until we fix the bug I mentioned above.

[jonahwilliams]

oh wait no, I've misunderstood - these are separate paths. Its slightly the opposite problem - we don't make any attempt to batch up discrete calls. :)

I'm not sure if we should, batching can be counter productive when it fails

[jonahwilliams]

So we can file this into problems we can more easily solve once display list is impeller only, though my personal thoughts are applications like this are kind of "benchmark bait" and I don't optimizations for them generalize very well.

[jonahwilliams]

Because this is a very simple example, you can get better performance just by switching to drawPoints.

import 'dart:async';
import 'dart:ui';

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(

        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Pure Flutter Memory'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: null,
      body: Padding(padding: EdgeInsets.only(top: 35),
      child: CircleWidget(),),
    );
  }
}

class CircleWidget extends StatefulWidget {
  const CircleWidget({Key? key}) : super(key: key);

  @override
  State<CircleWidget> createState() => _CircleWidgetState();
}

class _CircleWidgetState extends State<CircleWidget> {
    final _paint = Paint()
    ..color = Colors.blue
    ..style = PaintingStyle.fill;
    Timer? _timer;

  @override
  void initState() {
    super.initState();
    _timer = Timer.periodic(Duration(milliseconds: 16), (timer) {
      setState(() {});
    });
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 400,
      height: 400,
      child: CustomPaint(
        painter: CirclePainter(_paint),
      ),
    );
  }
}

class CirclePainter extends CustomPainter {

  final Paint _paint;

  CirclePainter(this._paint);

  @override
  void paint(Canvas canvas, Size size) {
    final double radius = 1.45;
    double spacing = 0.3;
    double startX = spacing;
    double startY = spacing;
    double currentX = startX;
    double currentY = startY;
    var offsets = <Offset>[];
    for (int i = 0; i < 100; i++) {
      for (int j = 0; j < 100; j++) {
        offsets.add(Offset(currentX, currentY));
        //canvas.drawCircle(Offset(currentX, currentY), radius, _paint);
        currentX += radius * 2 + spacing;
      }
      currentX = startX;
      currentY += radius * 2 + spacing;
    }
    Paint paint = Paint.from(_paint);
    canvas.drawPoints(PointMode.points, offsets, paint..strokeWidth = radius);
  }

  @override
  bool shouldRepaint(CirclePainter oldDelegate) {
    return true;
  }
}