Performance: FPS Drops dramatically with 4k+ particles. (Desktop - Darwin)

Details

I have been testing Flutter to evaluate its rendering capabilities. Because I intend to create a Graph viewer That needs to deal with millions or billions of nodes, with colors, movements, arrows and so on. Browser applications using Canvas or OpenGL works well. But I believed Flutter would be even better because it claims to tend to be "native". My experience says otherwise. Or maybe I'm not doing it correctly.

I tested Flame engine, I did a test with Flutter-Particles which uses Flutter canvas painting (Almost all animations I found about flutter used it) and all the other tests I did were using the same painting canvas. The last one I've tested was the gskinnerTeam's "Guide To the Stars Particles". That one is perfect an easy one to reproduce. And beautiful.

All tests were similar. All of them worked well below 1k. They started to degrade from 3k and visibly bad from 4k above. 30k of particles is impossible to deal.

I used Perf Overlay to analyze it.

I thought of creating a practical example myself, but from the simple tests I found, I came across performance issues - So I could not do anything better than what is already done. And I have two Macs. A Macbook pro 18 and a MacMini 17. Both had similar performance and could not handle above 5k ~ 30k.

That's all I have. Maybe add support for API GPU for direct access by frameworks like Flame. Or even check if is true that this rendering uses a single thread and make it work with more. Dunno.

Cheers.

To reproduce it

UPDATE: Use this example https://dartpad.dartlang.org/40308e0a5f47acba46ba62f4d8be2bf4
increase the number of disks in child: VariousDiscs. Above 500 starts to decrease performance.

Clone flutter_vignettes repo and use this example https://github.com/gskinnerTeam/flutter_vignettes/tree/master/vignettes/constellations_list

In main.dart

import 'package:flutter/foundation.dart'
    show debugDefaultTargetPlatformOverride;

import 'demo.dart';

void main() {
  // See https://github.com/flutter/flutter/wiki/Desktop-shells#target-platform-override
  debugDefaultTargetPlatformOverride = TargetPlatform.fuchsia;

  runApp(new App());
}

and of course add the macos folder.

And done.

To add more particles, go to demo.dart and go to the line 70 and change it

    int starCount = 5000;

Let it run. Go increasing the amount of particle. And check the perf overlay. Also, you can use the XCode debug analyzer and see that it seems to be using a single thread. In there we can't see the GPU usage, but let's trust the Flutter overlay for this.

More context.
Conversation with the Flame guys flame-engine/flame#149
My first suspect was this #32569

Target Platform: MacOS Mojave.
Target OS version/browser: Mojave 10.14.6
Devices: Desktop

Running Flutter in the master channel.

Logs

[✓] Flutter (Channel master, v1.13.1-pre.76, on Mac OS X 10.14.6 18G95, locale pt-BR)
    • Flutter version 1.13.1-pre.76 at /Users/micheldiz/flutter
    • Framework revision d0526d3f92 (2 days ago), 2019-12-09 18:58:29 -0800
    • Engine revision b9080c92b9
    • Dart version 2.7.0 (build 2.7.0-dev.2.1 8b8894648f)

[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/setup/#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, set ANDROID_HOME to
      that location.
      You may also want to add it to your PATH environment variable.


[✓] Xcode - develop for iOS and macOS (Xcode 11.2.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.2.1, Build version 11B500
    • CocoaPods version 1.8.4

[!] Android Studio (not installed)
    • Android Studio not found; download from
      https://developer.android.com/studio/index.html
      (or visit https://flutter.dev/setup/#android-setup for detailed instructions).

[✓] VS Code (version 1.40.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.7.1

[✓] Connected device (1 available)
    • macOS • macOS • darwin-x64 • Mac OS X 10.14.6 18G95

One add to the context http://www.falstad.com/gas/

Multiple particle support, each with distinct variables, is ideal for applications that make scientific simulations. Like molecules, visual patterns from equations and so on.

The Falstad link example is a representation of gas theory visually. It uses Java Applet. It has a maximum particle count of 1k, but even with all variables at most, it can hold 94 frames per second. Using the GPU.

Simple simulations like that aren't possible in Flutter applications. Desktop or mobile.

More examples:
http://www.falstad.com/mathphysics.html

UPDATE (2020): Run something like this https://threejs.org/examples/#webgl_buffergeometry_points_interleaved in Flutter would be great.

https://threejs.org/examples/#webgl_buffergeometry
https://threejs.org/examples/#webgl_buffergeometry_custom_attributes_particles
https://threejs.org/examples/#webgl_buffergeometry_instancing

Triage: No specific ask for the Skia team yet. Removing the skia tag. Requires further traige.

Any news about the triage?

I can reproduce it on mac but also windows app, very low fps

code sample

import 'package:flutter/material.dart';
import 'dart:math';

class DiscData {
  static final _rng = Random();

  double size;
  Color color;
  Alignment alignment;

  DiscData() {
    color = Color.fromARGB(
      _rng.nextInt(200),
      _rng.nextInt(255),
      _rng.nextInt(255),
      _rng.nextInt(255),
    );
    size = _rng.nextDouble() * 40 + 10;
    alignment = Alignment(
      _rng.nextDouble() * 2 - 1,
      _rng.nextDouble() * 2 - 1,
    );
  }
}

void main() async {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Container(
          color: Color(0xFF15202D),
          child: SizedBox.expand(
            child: VariousDiscs(5000),
          ),
        ),
      ),
    ),
  );
}

class VariousDiscs extends StatefulWidget {
  final numberOfDiscs;

  VariousDiscs(this.numberOfDiscs);

  @override
  _VariousDiscsState createState() => _VariousDiscsState();
}

class _VariousDiscsState extends State<VariousDiscs> {
  final _discs = <DiscData>[];

  @override
  void initState() {
    super.initState();
    _makeDiscs();
  }

  void _makeDiscs() {
    _discs.clear();
    for (int i = 0; i < widget.numberOfDiscs; i++) {
      _discs.add(DiscData());
    }
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => setState(() {
        _makeDiscs();
      }),
      child: Stack(
        children: [
          Center(
            child: Text(
              'Click a disc!',
              style: TextStyle(color: Colors.white, fontSize: 50),
            ),
          ),
          for (final disc in _discs)
            Positioned.fill(
              child: AnimatedAlign(
                duration: Duration(milliseconds: 500),
                curve: Curves.easeInOut,
                alignment: disc.alignment,
                child: AnimatedContainer(
                  duration: Duration(milliseconds: 500),
                  decoration: BoxDecoration(
                    color: disc.color,
                    shape: BoxShape.circle,
                  ),
                  height: disc.size,
                  width: disc.size,
                ),
              ),
            ),
        ],
      ),
    );
  }
}

flutter doctor -v

[✓] Flutter (Channel master, 1.25.0-5.0.pre.108, on macOS 11.0.1 20B29
    darwin-x64, locale en-GB)
    • Flutter version 1.25.0-5.0.pre.108 at
      /Users/tahatesser/Code/flutter_master
    • Framework revision 995aa138cd (8 hours ago), 2020-12-08 09:18:02 +0530
    • Engine revision b0d31ae166
    • Dart version 2.12.0 (build 2.12.0-125.0.dev)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    • Android SDK at /Users/tahatesser/Code/sdk
    • Platform android-30, build-tools 30.0.2
    • ANDROID_HOME = /Users/tahatesser/Code/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 12.2)
    • Xcode at /Volumes/Extreme/Xcode.app/Contents/Developer
    • Xcode 12.2, Build version 12B45b
    • CocoaPods version 1.10.0

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • 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
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)

[✓] VS Code (version 1.51.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.17.0

[✓] Connected device (4 available)
    • Taha’s iPad (mobile) • 00008020-000255113EE8402E            • ios            • iOS 14.2
    • iPhone 12 (mobile)   • C303B5A5-D598-4CAC-8ACC-09BF07A191DC • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-14-2 (simulator)
    • macOS (desktop)      • macos                                • darwin-x64     • macOS 11.0.1
      20B29 darwin-x64
    • Chrome (web)         • chrome                               • web-javascript • Google Chrome
      87.0.4280.88

• No issues found!

Checking this issue with Taha's sample code above, on the latest stable/master channels, I can observe low FPS (~20) through DevTools performance view when running macOS app in profile mode:

Demo

Screen.Recording.2024-03-05.at.18.38.05.mov

Attaching Timeline trace json file: dart_devtools_2024-03-05_18_38_20.593.json

flutter doctor -v (stable and master)

[✓] Flutter (Channel stable, 3.19.2, on macOS 14.1 23B74 darwin-x64, locale en-VN)
    • Flutter version 3.19.2 on channel stable at /Users/huynq/Documents/GitHub/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 7482962148 (5 days ago), 2024-02-27 16:51:22 -0500
    • Engine revision 04817c99c9
    • Dart version 3.3.0
    • DevTools version 2.31.1

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15C500b
    • CocoaPods version 1.15.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2023.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • 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
    • android-studio-dir = /Applications/Android Studio.app/
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)

[✓] VS Code (version 1.87.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.84.0

[✓] Connected device (3 available)
    • RMX2001 (mobile) • EUYTFEUSQSRGDA6D • android-arm64  • Android 11 (API 30)
    • macOS (desktop)  • macos            • darwin-x64     • macOS 14.1 23B74 darwin-x64
    • Chrome (web)     • chrome           • web-javascript • Google Chrome 122.0.6261.94

[✓] Network resources
    • All expected network resources are available.

• No issues found!

[!] Flutter (Channel master, 3.20.0-17.0.pre.77, on macOS 14.1 23B74 darwin-x64, locale en-VN)
    • Flutter version 3.20.0-17.0.pre.77 on channel master at /Users/huynq/Documents/GitHub/flutter_master
    ! Warning: `flutter` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision e73e7e2e56 (22 minutes ago), 2024-03-04 19:01:40 -0800
    • Engine revision d514a302cd
    • Dart version 3.4.0 (build 3.4.0-190.0.dev)
    • DevTools version 2.33.1
    • 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 34.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15C500b
    • CocoaPods version 1.15.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2023.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • 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
    • android-studio-dir = /Applications/Android Studio.app/
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)

[✓] VS Code (version 1.87.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.84.0

[✓] Connected device (4 available)
    • RMX2001 (mobile) • EUYTFEUSQSRGDA6D                         • android-arm64  • Android 11 (API 30)
    • iPhone (mobile)  • d9a94afe2b649fef56ba0bfeb052f0f2a7dae95e • ios            • iOS 15.8 19H370
    • macOS (desktop)  • macos                                    • darwin-x64     • macOS 14.1 23B74 darwin-x64
    • Chrome (web)     • chrome                                   • web-javascript • Google Chrome 122.0.6261.94

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.

The fyi-macos label is redundant with the team-macos label.
The triaged-desktop label is irrelevant if there is no team-desktop label or fyi-desktop label.

Navigation Menu

Repository navigation

Performance: FPS Drops dramatically with 4k+ particles. (Desktop - Darwin) #46841

Details

To reproduce it

Logs

8 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Performance: FPS Drops dramatically with 4k+ particles. (Desktop - Darwin) #46841

Description

Details

To reproduce it

Logs

Activity

MichelDiz commented on Dec 22, 2019

chinmaygarde commented on Feb 10, 2020

MichelDiz commented on Mar 10, 2020

TahaTesser commented on Dec 8, 2020

8 remaining items

huycozy commented on Mar 5, 2024

flutter-triage-bot commented on Jun 7, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions