Flutter iOS animations are janky on first run
Asked Answered
B

1

28

Since Flutter 1.12 (when Flutter switched to Metal rendering from OpenGL), first runs of an application appear to jank (skip frames more often).

The Flutter team is working on this, but in the mean time what can I do?

Basilio answered 29/12, 2020 at 0:10 Comment(0)
B
26

Before anything: make sure the jank you are seeing is truly related to this issue. If your application was already janky on the OpenGL backend in iOS, or is janky on Android (where shader caching is implemented), you likely have some other performance related problem. Try working through performance profiling in Flutter - i.e. record some timelines and analyze what's going on in frame workloads.

EDIT 2/23/2021

Metal binary archive work turned out to be a dead end. See https://github.com/flutter/engine/pull/23914 for more details. This is still a high priority item for the Flutter team, but the timeline for a fix is unknown right now.

end edit

Otherwise:

  • See if you can use simpler shaders. For example, avoid alpha blending, avoid gradient calculations, avoid expensive clips, etc.
  • Downgrade to Flutter 1.12.
    • This may require cherry picking in other fixes you need.
    • This may require downgrading certain packages, or backporting ones that are not available for 1.12.
  • Use a custom built engine with OpenGL.
    • See instructions here.
    • This will almost definitely introduce regressions for some applications and/or devices. These may or may not be acceptable for you. OpenGL on iOS is no longer supported by the Flutter team, and requests for bug fixes on it will be closed as won't fix.
  • Wait for Metal binary archives to be implemented. Once that happens, Shader Warmup will be supported on Metal/iOS. The Flutter and Skia teams are actively working on this (basic support for it is already in place but not quite ready for general use). We're targetting availability in early 2021.

A little background:

Shaders are small programs that Skia creates from various drawing commands to create a program that the GPU can execute to actually draw pixels on the screen. Compiling them can take non-trivial amounts of time, and different scenes may require different shader programs. Flutter's architecture is designed to cache and reuse compiled shader programs so that they can be reused once they are compiled. Support for this exists in the OpenGL based backend in Skia, but is still being worked on for the Metal based backend (see https://skbug.com/10804).

There were a lot of good reasons to migrate to Metal.

  • Apple is deprecating OpenGL
  • Memory and frame rate related issues were observed in the OpenGL backend that were rapidly becoming dead ends. Apple's profiling and debugging tooling is all geared towards Metal now due to deprecation. Many issues were observed to be completely resolved by shifting to Metal.
  • Core support for Metal was believed to be achieved. This included basic rendering, cross context images, and platform view support. This did not include support for shader caching, unfortunately.

We did briefly consider supporting both OpenGL and Metal, but decided not to. There are limited resources to address bugs in that layer of the stack, we were already aware of a number of perofrmance related issues that Metal solved.

Basilio answered 29/12, 2020 at 0:10 Comment(6)
Thanks for this! For myself I went down the OpenGL route for a while but couldn't accept the trade-off, which was that I would get extremely long rebuilds about once every 3 minutes, seemingly at random. Profiling indicated something taking too long in the OpenGL code. Went back to Metal and released the app; I know it's janky first run but am confident future updates to Flutter will fix this.Angeli
Hey Dan - its now Feb 2021. Looks like most github issues on this topic were closed or haven't had any activity for several weeks. Should we still expect a fix in early 2021 (i.e late March or so)?Brickle
I hope the Flutter team is working on a solution as soon as possible. We are to start building an IOS app using flutter and it will have many animationsTergum
Has this been fixed?Foppish
@LatheeshVMVilla No it has not been fixed, information can be found in the linked Github issue.Dorcus
2023 update, for anyone coming across this thread now: the Flutter team's current plan for this issue is a new rendering engine, Impeller. github.com/flutter/flutter/wiki/ImpellerCrouch

© 2022 - 2024 — McMap. All rights reserved.