diff --git a/diagrams/resources/web-framework-diagram.drawio b/diagrams/resources/web-framework-diagram.drawio index 12fea46729..2bf5fc03a7 100644 --- a/diagrams/resources/web-framework-diagram.drawio +++ b/diagrams/resources/web-framework-diagram.drawio @@ -1,4 +1,4 @@ - + @@ -19,7 +19,7 @@ - + @@ -71,16 +71,16 @@ - + - + - + - - + + @@ -112,6 +112,12 @@ + + + + + + diff --git a/src/content/assets/images/docs/arch-overview/web-framework-diagram.drawio.png b/src/content/assets/images/docs/arch-overview/web-framework-diagram.drawio.png index fe314d61a8..ac0616d0a0 100644 Binary files a/src/content/assets/images/docs/arch-overview/web-framework-diagram.drawio.png and b/src/content/assets/images/docs/arch-overview/web-framework-diagram.drawio.png differ diff --git a/src/content/perf/impeller.md b/src/content/perf/impeller.md index 008b6f7487..83092030fd 100644 --- a/src/content/perf/impeller.md +++ b/src/content/perf/impeller.md @@ -16,7 +16,7 @@ check out the [Can I use Impeller?][] page. Impeller provides a new rendering runtime for Flutter. Impeller precompiles a [smaller, simpler set of shaders][] -at Engine-build time so they don't compile at runtime. +at engine-build time so they don't compile at runtime. [smaller, simpler set of shaders]: {{site.repo.flutter}}/issues/77412 @@ -76,7 +76,7 @@ Flutter **enables Impeller by default** on iOS. Flutter **enables Impeller by default** on Android. On devices that don't support Vulkan, -Impeller will fallback to the the legacy OpenGL renderer. +Impeller falls back to the the legacy OpenGL renderer. No action on your part is necessary for this fallback behavior. * To _disable_ Impeller when debugging, @@ -96,6 +96,15 @@ No action on your part is necessary for this fallback behavior. android:value="false" /> ``` +### web + +Impeller on the web offers two renderers and +two build modes. For more information, visit +[Flutter web support][] in the Flutter +architectural guide. + +[Flutter web support]: /resources/arch-overview#flutter-web-support + ### macOS You can try out Impeller for macOS behind a flag. diff --git a/src/content/resources/architectural-overview.md b/src/content/resources/architectural-overview.md index 252c3cb808..cfe4da7ae3 100644 --- a/src/content/resources/architectural-overview.md +++ b/src/content/resources/architectural-overview.md @@ -1056,16 +1056,64 @@ is designed to interface with the underlying operating system rather than a web browser. A different approach is therefore required. -On the web, Flutter offers two build modes and two renderers. -Flutter has a canvas-based renderer with two compile modes: -JS and Wasm. - -Flutter chooses the build mode when building the app, -and determines which renderers are available at runtime. -For a default build, Flutter chooses the `canvaskit` -renderer at runtime. For a WebAssembly build, -Flutter chooses the Web/Assembly renderer at runtime, -and falls back to canvaskit if the browser doesn't support WebAssembly. +On the web, Flutter offers two renderers: + + + + + + + + + + + + + + + + + + + +
EngineRendererCompilation target
Engine 1 +CanvasKit + +JavaScript +
Engine 2 +Skwasm + +WebAssembly +
+ +_Build modes_ are command-line options that dictate +which runtimes are available when you run the app. + +Flutter offers two _build_ modes: + + + + + + + + + + + + + + + + + + +The default mode makes only "engine 1" available. +The `--wasm` option makes both "engine 1" and +"engine 2" available, and chooses the engine +based on browser capabilities: +preferring "engine 2" if the browser is capable of running it, +and falls back to "engine 1" otherwise. {% comment %} The draw.io source for the following image is in /diagrams/resources
Build modeAvailable renderer(s)
defaultCanvasKit
`--wasm`Skwasm (preferred), CanvasKit (fallback)