Introducing Impeller - Flutter's new rendering engine

Flutter’s new rendering engine was developed with the goal of eliminating shader compilation jank and providing predictable performance. This talk will discuss the design of Impeller and how it fits into the broader architecture for Flutter. This includes a tour of Impeller’s sub frameworks, and a demonstration of how lower level APIs are used in Flutter applications. The session will also discuss how Impeller enables new experiences, like 3D support.
Speakers: Leigha Jarett, Brandon DeRosier
Watch more:
Watch all Flutter Sessions → goo.gle/IO23_flutter
Watch all the Technical Sessions from Google I/O 2023 → goo.gle/IO23_sessions
Watch more Mobile Sessions → goo.gle/IO23_mobile
Watch more Web Sessions → goo.gle/IO23_web
All Google I/O 2023 Sessions → goo.gle/IO23_all
Subscribe to Flutter! → goo.gle/FlutterYT
#GoogleIO

[@flutterdev]

Have a burning question? Leave it in the comments below for a chance to get it answered by the Flutter team. 👇👇🏻👇🏿👇🏽 👇🏾👇🏼

[@malcomgreen4747]

We really need a machine reading zone MRZ to read from mrz scanner it will be great for desktop apps. Please update us. Thank you

[@himanshuranjansingh6134]

Why isn't there an option to manually provide duration to periodic local notifications?

[@VitorFThome]

Does impeller affects performance of normal applications? Or does it works only with shader objects and specific widgets?

[@DarioCavada]

It will be possible to use in the future Scene with ARCore ? Would be very interesting having this 3D render system in AR

[@haroonrehman8156]

Please Make Flutter Web Competitive and Fast.

[@maxhuk]

The Flutter team is just stocked full of amazing human beings ❤️ It's so inspiring to watch these talks! Impeller looks amazing 🤩

[@mikopiko]

1:06 that was a very smooth jumpcut

[@NoamGonen]

Great intro video - clear , concise, easy digest - thank you

[@buracadorin]

Amazing news guys, keep up the good work!

[@Jordan-9595]

It was the steam deck in the background for me ❤

[@odas0r]

Amazing work guys. Pretty new to flutter, and this looks awesome. Great solutions.

[@softwarebjt4362]

Just impressive, congratulations!!

[@clementcardonnel3219]

The presentation was great. I know completely understand how Flutter works, and it was also a great explanation of multiple GPU related concepts. Thanks!

[@a.alg0hary549]

Awesome Job

[@AdityaThakurXD]

This is amazing 🚀

[@erlangparasu7524]

10:44 Great!

[@navirobayo]

Amazing

[@cravecode1742]

Is audio strange to anyone else? I keep turning it up… while it’s loud, it’s still tough to hear the ups and downs of the spoken words. Idk, I’m not a sound person. ❤ these videos though. Keep ‘em coming!

[@d1cn]

The same issue - sound is not ok: girl’s mic is bad.

[@SaiyanJin85]

+1 for having the steam deck

[@haotianyang740]

We were using Skia and this new clipping feature seems interesting, may have great performance gains

[@arpitpatel5814]

Waiting for Android release. Thank You 🙏🏻

[@antoniokomangyudistira4150]

Flutterrr ❤❤❤

[@DaniIhzaFarrosi]

08:06 Wow I didn't know Flutter directly transpiles to the GPU, and not constrained by the UI toolkits of each platform. I always thought Flutter have to compile to Kotlin or SwiftUI first and then build it from there, but no, Flutter directly uses its own engine and talks directly to the GPU to render pixels on the screen. That's neat

[@Futball_Life]

Extraordinary

[@charliesmotherman3383]

Impellerc fails on arm64 devices. Impellerc keeps me from being able to compile my flutter projects (on my raspberry pi) for over 4 months now due to the impellerc update. Please fix 116703 [flutter_tools] ShaderCompilerException running impellerc on arm64 platforms. Thanks

[@anlumo1]

Can Impeller also be used outside of Flutter in a standalone project?

[@andrewbrogdon558]

Flutter's completely open source, so you could certainly use the code in another project (subject to its OSS license). Impeller is designed to work specifically with Flutter, though, so you'd likely need to do some work to adapt your standalone project to implement the same interfaces.

[@edenassos]

@@andrewbrogdon558 Will Impeller be platform-agnostic or possibly replace Skia for browsers in the future?

[@andrewbrogdon558]

@@edenassos Parts of impeller are common across platforms, but some have to be platform-specific because different devices use different low-level graphics APIs (Vulkan vs Metal vs DirectX, that kind of thing). Impeller is also designed specifically for Flutter, so I don't know that you'd see browser vendors swapping it in for their existing rendering libraries.

[@edenassos]

@@andrewbrogdon558 Interesting. Thank you for the information. I'm wondering if there is/was discussion internally at Google about overhauling Chrome's Skia with this.(A modified version for Chrome) Perhaps you could do the honors. 😅😅😂😂

[@bdero_google]

Building Impeller as a standalone library is possible, but at the time of writing quite experimental. We've been slowly iterating on a cmake build for doing so; the GH repo is "impeller-cmake-example" under the "bdero" profile.

[@SecondFlight]

Is impeller coming to desktop and web? This seems like a given, but I haven't seen it mentioned anywhere. If not, does the promise of greater rendering control extend to non mobile platforms as well?

[@bdero_google]

The plan is for Impeller to eventually target all platforms that Flutter supports. Next up is Android. Impeller will enable us to deliver more control over rendering everywhere. :)

[@parito5523]

@@bdero_google Any rough ETA on the arrival of impeller on Android? More specifically, can we expect it to arrive to production before the end of this year?

[@cekroz]

Is Impeller an improvement on all aspects over Skia or is Skia still better in some specific cases?

[@jonathanvannier9797]

Impeller is built with modern graphics APIs in mind (e.g. Vulkan, Metal, etc.) and gives more access to low level features (one could do 3D rendering with it) whereas Skia is focused on 2D rendering and was built around OpenGL for the most part, where you can somewhat compile shaders on the fly in non-blocking fashion. Compiling shaders on Metal (iOS/MacOS) however is a blocking operation, hence the jank with Skia and its Metal backend.

[@cekroz]

@@jonathanvannier9797 If I understand correctly, Impeller has no drawbacks and it will eventually become Flutter's default render engine.

[@jonathanvannier9797]

@@cekroz That's pretty much the stated goal in this video, a rendering engine tailored for flutter will always be superior to what is originally a rendering engine primarly used for Android material apps.

[@JulianLasso]

Hi @@jonathanvannier9797, so... Impeller was born out of issues with iOS more than with Android, right?

[@Samuel227722]

😍

[@achintya-7]

Looks cool. Just wondering when the impeller engine will be supported on Android as well.

[@bdero_google]

We're hard at work getting Android ready! There's no set date yet, but we'll be asking devs to try it out on the master channel in the coming months.

[@mohamedsalahelrayes6799]

💙💙💙💙

[@migueloliveira259]

With impeller do i still need to run the "--cache-sksl" to generate the shaders? Or can I drop that flow entirely?

[@bdero_google]

There's no need to capture and bundle a shader cache when using Impeller. Since Impeller doesn't dynamically generate shaders at runtime, there's no shader compilation jank!

[@md.rahamatullah4808]

😍😍

[@assardeveloper8739]

flutter is future

[@user-hd1ut1yl9n]

If you are experiencing a blank page or issues with rendering content when using the Impeller rendering engine in the InAppWebView how to fix it?

[@cekroz]

Are all widgets compatible with Impeller out of the box? I tried lottie animations with Impeller a couple of months ago and it didn't go well :/

[@bdero_google]

Yes, all widgets should work with Impeller enabled out of the box. If you run into any performance or fidelity issues, definitely send us an issue on the flutter/flutter repository! We've been working on stamping out fidelity and performance issues as we come across them. In particular, we've landed some major performance improvements around path rendering over the past couple of weeks, and have a bunch more planned in the pipeline. So be sure to give Impeller a try on the master channel as well.

[@cekroz]

@@bdero_google sure will 💙

[@armansoudi1370]

Amazing work! However, there is poor audio quality in the recording of Brandon

[@bdero_google]

I think the next time I do one of these, I'm definitely going to record in-studio like Leigha did. I was completely blown away by the studio recording when I saw it. :)

[@yaminnather521]

I thought all ui rendering frameworks already did rendering similar to game engines? Or is it only impeller that does it that way?

[@angelamidev]

How about the web platform?

[@alexoveto]

in which flutter version SceneBox is available?

[@alexoveto]

found in package flutter_scene

[@keithbacalso9433]

I tried typing SceneBox but I cant get an intellisense of it. I only saw Scene widget.

[@alexoveto]

found in package flutter_scene

[@bobby9568]

Will impeller make it easier to deploy to other embedded architectures?

[@geenews6207]

Is impellor available for android now?

[@hyungtaecf]

no

[@juanmacias5922]

Source code to that 3D dash game? Github repo?

[@bdero_google]

The GH repo for the 3D demo is "flutter-scene-example" under the "bdero" profile. The demo is difficult to run at the moment as it requires a custom build of Flutter Engine with a special flag to enable the feature. I'm working on replacing the underlying Dart API with a more suitable longterm design. Stay tuned for updates!

[@juanmacias5922]

@@bdero_google Thanks,that's exciting!

[@mahidulislamzihan7760]

@@bdero_google hi any rough estimate when we can get to try this? like weeks or months ?

[@AbdulSamad-w7i]

There is no method as SceneBox()

[@devs_nazmul]

i don’t like flutter syntax, can you add alternative coding style, instead of child, and deep nesting.

[@HenryIkoh]

You get used to it

[@channyeintun6411]

It's not flutter syntax. It's dart programming.

[@d1cn]

MSAA is cheap? 😂 That’s not true, because multisample requires a lot of computations.

[@bdero_google]

MSAA is low overhead on TBDR GPUs.

[@ArchitecturalAesthetics2046]

namig is getting out of hand here. "aiks is just skia spelled backwards."

[@deepakdaa789]

Haha seems like video sponsored by acer

[@johnodonoghue651]

Does Google require you to have pronouns?

[@CRiley-zx1ws]

The English language requires you to have pronouns... We've both used them.