[Impeller] Blur image filter differences. #149431
Description
Impeller blur image filters are slightly different compared to Skias. For most scenes I've seen the differences are imperceptible. Neither the Skia or Impeller blurs are analytically clean for performance reasons so some amount of variance is to be expected. But a user-reported case in #148493 is instructive. I've further tried to simplify their test case to make a side by side comparison more useful.
Skia seems to be expanding the bounds of the texture but introducing stretching (?) towards the edges. Not sure I agree with this behavior but it is certainly a choice. Within the textured region, I was able to get similar results at a higher sigma. So perhaps our tuning is off.
This behavior was also easier to observe in noisier images which is exactly what this test case does.
Noise texture used
Code for the reduced test case
import 'package:flutter/material.dart';
import 'dart:ui';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Text(widget.title),
),
body: Center(
child: ImageFiltered(
imageFilter: ImageFilter.blur(sigmaX: 6, sigmaY: 6),
child: Image.asset('assets/noise.png'),
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}
}