Allow Tile mode for blur filter and add new decal TileMode #22982

flar · 2020-12-10T03:42:22Z

Currently Skia supports a "decal" tile mode which defines "out of bounds" values of a gradient or image as transparency. Skia supports this in both Gradients and Blur filters, but we don't have the value in our TileMode enum. This PR adds that new value.

We also have no parameter on ImageFilter.blur() that allows the developer to specify a tile mode. The implementation currently defaults to clamp which is appropriate for opaque images, but it causes frustrating rendering anomalies for other uses (see flutter/flutter#57180). This PR adds a new TileMode parameter to ImageFilter.blur to enable developers to control this aspect of the blur operation. The default value is clamp for backwards compatibility.

I've updated the tests to include the new values and implemented this on web, with a few caveats:

Flutter web on HTML/CSS only supports a single radius and decal mode so the implementation of blur on this platform used to be "always wrong" and now it is "wrong unless a developer asks for decal mode and uses the same sigma for X and Y". Improvement, but this platform will likely never support all of the capabilities of the Flutter blur filter.
Flutter with CanvasKit supports all of the new decal modes for Gradients, and it should support all of the modes for blur filters, but for some reason the values supplied in the MakeBlur() constructor don't seem to have any effect. Is there a missing link in getting that value to the underlying implementation that I missed?

Finally, I took the name decal from the Skia enum. Is that a good name for Flutter developers?

flar · 2020-12-10T03:43:10Z

@Hixie Is decal a good name for the new TileMode enum value? Would that name be recognizable or familiar to Flutter developers?

LongCatIsLooong · 2020-12-10T06:52:11Z

lib/ui/painting.dart

  /// ![](https://flutter.github.io/assets-for-api-docs/assets/dart-ui/tile_mode_mirror_radial.png)
  mirror,
+
+  /// Edge is transparent black.


nit: maybe "Extrapolates the source image with transparent black (0x00000000) pixels, when the image filter samples outside of the bounds of the source image"?

The rest of the entries are documented as "Edge is ...". I agree that I don't like the way that is all phrased. I'll look for some better wording for all of them.

Updates pushed...

LongCatIsLooong · 2020-12-10T07:15:35Z

lib/ui/painting.dart

  /// 4.0 to 3.0, and so forth (and for linear gradients, similarly from in the
  /// negative direction).
  ///
+  /// An image filter will treat the image as tiled in an alternating forwards and


nit: "An image filter will treat the image ..." makes me think TileMode is a property of the image, not the filter.

"An image filter will treat its source as ..."?

Updates pushed...

Hixie · 2020-12-11T03:47:51Z

lib/ui/painting.dart

+  ///
+  /// An image filter will substitute transparent black for any sample it must read from
+  /// outside its source image.
+  decal,


I guess decal is as good a name for this as any, and has the advantage of matching Skia.

Hixie · 2020-12-11T03:54:10Z

lib/ui/painting.dart

+  /// gradient.
+  ///
+  /// An image filter will substitute transparent black for any sample it must read from
+  /// outside its source image.


don't forget to add the new image, too. :-)

The plan was to add that as soon as it propagates to the framework and I can modify the built assets. I also plan to add equivalent ImageFilter.blur example images to all of the TileMode values.

I landed new assets today which included the assets for decal. (I forgot about ImageFilter.blur examples, sorry, so if they haven't been added yet they're still missing.)

Was that just for the gradient? I have been waiting to update these assets until Skia fixes bugs in the tile mode handling for the ImageFilter.blur(). It was supposed to go in a few days after this PR, but the fix has been re-un-re-verted since then and still hasn't landed and rolled.

Tracking the blur/TileMode doc image issue in flutter/flutter#74367

…lutter/engine#22982)

* 3a30ae3 Fix ios voiceover (for safari >13.4) (flutter/engine#22965) * 4338849 Replace g_object_weak_ref with g_object_add_weak_pointer * 3b9937a Load macOS dart bundle by URL fallback (flutter/engine#22979) * 96927bb add ffi_struct_patch.dart to libraries.yaml (flutter/engine#23000) * 2efc7c1 Set SkPath::setIsVolatile based on whether the path survives at least two frames (flutter/engine#22620) * bb81b95 Allow Tile mode for blur filter and add new decal TileMode (flutter/engine#22982) * 9df2157 Load iOS dart bundle by URL fallback (flutter/engine#22997) * 7647fdb Roll Skia from 22f80a60b17f to 6b07e0eb497c (26 revisions) (flutter/engine#23005) * 062cbd8 Freiling warmup memory (flutter/engine#22984) * 1646966 Revert "Freiling warmup memory (#22984)" (flutter/engine#23007) * 50d830a [web] Do not reset 'cursor' in PersistedPlatformView. (flutter/engine#22977) * 6ebf5c3 Roll Dart SDK from e4c9b06267d3 to a4e6fe145bf7 (2 revisions) (flutter/engine#23006) * 14c8c24 [web] Fix regression in foreground style (flutter/engine#22999) * 6678efa Implement SystemSound.play * fb769a4 Roll Fuchsia Linux SDK from rnN_X2o75... to ESzmO-yOF... (flutter/engine#23010) * b424356 Roll Skia from 6b07e0eb497c to f7cce2b243b2 (6 revisions) (flutter/engine#23018) * 56035c7 Roll Fuchsia Linux SDK from ESzmO-yOF... to K4cPd0-Xd... (flutter/engine#23020) * cb4a2ef Roll Skia from f7cce2b243b2 to b0cb8372c1ef (3 revisions) (flutter/engine#23021) * cc8c9d4 Roll Skia from b0cb8372c1ef to 5284e96599a8 (2 revisions) (flutter/engine#23023) * 8e9a943 Roll Dart SDK from a4e6fe145bf7 to c287db6bf232 (2 revisions) (flutter/engine#23024) * 714b543 Roll Fuchsia Mac SDK from OUQEzH1oE... to a9yuHfriB... (flutter/engine#23025) * d50cdda Roll Dart SDK from c287db6bf232 to 2553a84fe438 (1 revision) (flutter/engine#23026) * 4794d04 Roll Skia from 5284e96599a8 to f7fdf1aa2911 (1 revision) (flutter/engine#23027)

…lutter/engine#22982)

flar added 2 commits December 8, 2020 22:04

Add a new TileMode.decal value and accept it in ImagerFilter.blur()

9601934

fix tests, analyze, format, and implement on web as best can

4af022b

flar requested review from LongCatIsLooong and yjbanov December 10, 2020 03:42

googlebot added the cla: yes label Dec 10, 2020

fix web_ui filter tests

0f4c9f3

LongCatIsLooong approved these changes Dec 10, 2020

View reviewed changes

update doc comments per review feedback

c017b76

chinmaygarde added the waiting for tree to go green This PR is approved and tested, but waiting for the tree to be green to land. label Dec 10, 2020

flar merged commit bb81b95 into flutter:master Dec 10, 2020

flar mentioned this pull request Dec 10, 2020

Render glitch when Paint uses ImageFilter on all platforms except web flutter/flutter#57180

Closed

Hixie reviewed Dec 11, 2020

View reviewed changes

engine-flutter-autoroll mentioned this pull request Dec 11, 2020

Roll Engine from 4797b0665242 to 4794d0448f8f (23 revisions) flutter/flutter#72147

Merged

engine-flutter-autoroll added a commit to engine-flutter-autoroll/flutter that referenced this pull request Dec 11, 2020

bb81b95 Allow Tile mode for blur filter and add new decal TileMode (f…

a44be21

…lutter/engine#22982)

engine-flutter-autoroll mentioned this pull request Dec 14, 2020

Roll Engine from 4797b0665242 to 3ef9b93657cb (34 revisions) flutter/flutter#72283

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/flutter that referenced this pull request Dec 14, 2020

bb81b95 Allow Tile mode for blur filter and add new decal TileMode (f…

5f1d5c6

…lutter/engine#22982)

engine-flutter-autoroll mentioned this pull request Dec 14, 2020

Roll Engine from 4797b0665242 to 46d7bf9d5aff (39 revisions) flutter/flutter#72296

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/flutter that referenced this pull request Dec 14, 2020

bb81b95 Allow Tile mode for blur filter and add new decal TileMode (f…

efe6d3b

…lutter/engine#22982)

engine-flutter-autoroll mentioned this pull request Dec 14, 2020

Roll Engine from 4797b0665242 to 360a16ad7542 (40 revisions) flutter/flutter#72304

Merged

engine-flutter-autoroll added a commit to engine-flutter-autoroll/flutter that referenced this pull request Dec 14, 2020

bb81b95 Allow Tile mode for blur filter and add new decal TileMode (f…

c16e7d8

…lutter/engine#22982)

engine-flutter-autoroll mentioned this pull request Dec 15, 2020

Roll Engine from 4797b0665242 to 1749dbcc1b09 (49 revisions) flutter/flutter#72318

Merged

engine-flutter-autoroll added a commit to engine-flutter-autoroll/flutter that referenced this pull request Dec 15, 2020

bb81b95 Allow Tile mode for blur filter and add new decal TileMode (f…

67c0e6a

…lutter/engine#22982)

Hixie mentioned this pull request May 28, 2021

Add the images for TileMode.decal #26482

Merged

9 tasks

Allow Tile mode for blur filter and add new decal TileMode #22982

Allow Tile mode for blur filter and add new decal TileMode #22982

Uh oh!

Conversation

flar commented Dec 10, 2020

Uh oh!

flar commented Dec 10, 2020

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants