Rendering issues with Impeller and canvas.drawVertices #145707
Description
Steps to reproduce
- Run the
sparkle_partyvignette in both Impeller and Legacy modes. The code is open-source and you can check it out here: https://github.com/gskinnerTeam/flutter_vignettes/tree/master/vignettes/sparkle_party
Expected results
All particles should be sparkles
Actual results
Some of the particles are rendering as squares.
Note: It seems to be a layering/overlap issue, when you get too many particles stacked on top of each other, squares begin appearing. So we can reproduce with a relatively low number of particles (100) that are large in size, or a high number of small particles.
Code sample
The underlying rendering API used in this demo is an ImageShader + drawVertices API:
Code sample
class ParticleFXPainter extends CustomPainter {
ParticleFX fx;
// ParticleFX is a ChangeNotifier, so we can use it as the repaint notifier.
ParticleFXPainter({required this.fx}) : super(repaint: fx);
@override
void paint(Canvas canvas, Size size) {
if (fx.vertices == null || fx.spriteSheet.image == null) {
return;
}
Paint paint = Paint()
..shader = ImageShader(fx.spriteSheet.image!, TileMode.clamp, TileMode.clamp, Matrix4.identity().storage);
canvas.drawVertices(fx.vertices!, BlendMode.dstIn, paint);
}
@override
bool shouldRepaint(_) => true;
}Screenshots or Video
Screenshots / Video demonstration
Legacy
RPReplay_Final1710963453.mp4
Impeller
RPReplay_Final1710963595.mp4
Flutter Doctor output
Doctor output
[√] Flutter (Channel stable, 3.19.3, on Microsoft Windows [Version 10.0.19045.3693], locale en-US)
• Flutter version 3.19.3 on channel stable at C:\_dev\sdks\flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision ba39319843 (), 2024-03-07 15:22:21 -0600
• Engine revision 2e4ba9c6fb
• Dart version 3.3.1
• DevTools version 2.31.1
[√] Windows Version (Installed version of Windows is version 10 or higher)
[√] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
• Android SDK at C:\Users\Shawn\AppData\Local\Android\sdk
• Platform android-34, build-tools 34.0.0
• Java binary at: C:\Program Files\Android\Android Studio3\jbr\bin\java
• Java version OpenJDK Runtime Environment (build 17.0.6+0-b2043.56-10027231)
• All Android licenses accepted.
[√] Chrome - develop for the web
• Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe
[√] Visual Studio - develop Windows apps (Visual Studio Community 2019 16.9.2)
• Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\Community
• Visual Studio Community 2019 version 16.9.31112.23
• Windows 10 SDK version 10.0.19041.0
[!] Android Studio (version 2021.3)
• Android Studio at C:\Program Files\Android\Android Studio2
• 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
X Unable to determine bundled Java version.
• Try updating or re-installing Android Studio.
[√] Android Studio (version 2022.3)
• Android Studio at C:\Program Files\Android\Android Studio3
• 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 = C:\Program Files\Android\Android Studio3
• Java version OpenJDK Runtime Environment (build 17.0.6+0-b2043.56-10027231)
[√] VS Code (version 1.87.2)
• VS Code at C:\Users\Shawn\AppData\Local\Programs\Microsoft VS Code
• Flutter extension version 3.25.0
[√] Connected device (3 available)
• Windows (desktop) • windows • windows-x64 • Microsoft Windows [Version 10.0.19045.3693]
• Chrome (web) • chrome • web-javascript • Google Chrome 122.0.6261.131
• Edge (web) • edge • web-javascript • Microsoft Edge 122.0.2365.92
[√] Network resources
• All expected network resources are available.
! Doctor found issues in 1 category.