在Flutter中渲染大量简单图形的最有效方法是什么?

3
我正在我的Flutter应用程序中实现一个粒子系统渲染器。
目前我正在使用CustomPainter,它使用canvas.drawRect()将每个粒子渲染成一个矩形。但是我需要绘制成千上万个这样的矩形,而且虽然它们很简单,但Flutter似乎难以处理,性能从稳定的60fps下降到不到30fps。
由于我需要渲染的形状只是没有纹理的四边形,并且全部都是相同大小的,只是颜色不同,因此我想知道使用自定义绘图工具是否是正确的选择。
我了解一些OpenGL,我知道对于小网格(由少量顶点组成)例如矩形,最好将它们加载到单个缓冲区中并在一个单一调用中绘制它们,甚至更好的方法是使用实例来绘制它们,因为它们除了颜色外都是相同的。
我尝试使用此软件包中的OpenGL https://github.com/mogol/opengl_texture_widget_example,因为它说它适用于Android和iOS,但我无法使其正常工作,因为它是一个非常旧的软件包。
在Flutter中使用canvas.drawRect()是绘制大量简单形状的最佳方法,还是有更快的方法在Flutter本身或使用第三方包中实现呢?

你找到一个令人满意的解决方案了吗? - Dalmas
1个回答

0
根据我的经验,canvas.drawVertices() 是最快的绘图方式。如果你可以使用 vertices.raw() 创建顶点,这可以提高绘图性能。drawVertices() 基本上是通过绘制三角形来实现,所以你可以通过绘制两个三角形来绘制每个矩形。我有一个移动应用程序,以60帧每秒绘制大约260,000个(510x510)矩形。最快的绘图方式是使用 片段着色器,但这可能难以实现并且不切实际。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接