Skip to content

[web] add FragmentProgram support to CanvasKit #114121

@jonahwilliams

Description

@jonahwilliams

The fragment program API allows users to define GLSL shader variants as assets, load these on demand into their app, and provide them to the Paint.shader property. To date, this has not ever been implemented for the Canvaskit backend.

There are a number of changes that need to be made to both the engine and tooling.

impellerc

The shader compiler can target either a platform specific shader (for impeller) or SkSL source for a Skia backend. This shader is bundled with metadata that describes the uniform layout in a flatbuffer format. For the web implementation, we'll want to use the SkSL output. For the metadata, we have a few choices:

  • Bundle a generated flat buffer decoder from dart (https://google.github.io/flatbuffers/flatbuffers_guide_use_dart.html ) Ideally this would not need additional dependencies
  • Drop the flatbuffer format for the web and use something like JSON for which there is already a parser. If we use a different output format, this will need to be specified with a new option flag the tool will pass.

Flutter tool

Currently the flutter tool disables shader compilation and bundling when targeting web. We'll need to re-enable this, as well as pass any additional flags required for impellerc to ensure they are compiled correctly. Additionally, we may need to do more work to ensure that shader hot restart works properly in both modes.

Web Engine

The FragmentProgram API requires the usage of a SkRuntimeEffect object. Currently, this interface is only available on the locally-built CanvasKit, and not the bundled canvaskit. We have a few options here:

  • complete the transiton to locally built canvaskit
  • Use a runtime check to see if the RuntimeEffect construct is available
  • switch the upkg version to a canvaskit version with RuntimeEffect

Separately, the canvaskit version of the RuntimeEffect API does not seem to accept sampler arguments. We need to follow up with the Skia team to see if this is possible to add. If not, we may decide not to implement this API to avoid leaving it in a half-working state

Web Local Engine Builds

The addition of an impellerc dependency means that the wasm_release engine build will not have all of the artifacts required to run locally. We could temporarily work around this by letting the flutter tool fall back to a local impellerc. Long term, we may move to a more mobile like setup where there is a separate host build that may or may not be specified directly.

Metadata

Metadata

Assignees

Labels

P3Issues that are less important to the Flutter projectc: new featureNothing broken; request for a new capabilitye: web_canvaskitCanvasKit (a.k.a. Skia-on-WebGL) rendering backend for Webengineflutter/engine related. See also e: labels.platform-webWeb applications specificallytoolAffects the "flutter" command-line tool. See also t: labels.

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions