3

I'm implementing a particle system renderer in my Flutter application.

Currently I'm using a CustomPainter which renders each particle as a rectangle using canvas.drawRect(). But I need to draw thousands of such rectangles and doing and while being very simple shapes, flutter seems to have difficulties handling it as the performance drops t less than 30 fps from the steadily 60 I am targetting.

Since the shapes I need to render are just quads with no textures, all of the same size differing just by their color, I was wondering if using a versatile tool such as a custom painter was the right choice for this application.

I know a bit of OpenGL and I know that for small meshes (made up of a small number of vertices) such as a rectangle it's better to load them into a single buffer and draw them in one single call, or even better to draw them using as instances as they are identical except for the color.

I tried using OpenGL via this package https://github.com/mogol/opengl_texture_widget_example as it said that it worked both for Android and iOS but I couldn't get it to work as it's a very old package.

Is canvas.drawRect() the best way to draw a large number of simple shapes in flutter, or are there faster ways to do so either in flutter itself or using third party packages?

Fabrizio
  • 1,138
  • 4
  • 18
  • 41

1 Answers1

0

In my experience, canvas.drawVertices() is the fastest way to draw. If you are able to create vertices with the vertices.raw(), this can increase the drawing performance. drawVertices() basically draws triangles so you can draw every rectangle by drawing two triangles. I have a mobile app which draws about 260 000 (510x510) rectangles 60 fps. The absolute fastest way to draw is by using fragment shaders but this can be hard and impractical to implement.

MaLa
  • 582
  • 2
  • 16