[Impeller] : Opacity widget not working on a CustomPaint with a shader on iOS

[GiacomoPignoni]

Steps to reproduce

Put a CustomPaint widget, that paint a shader, into an Opacity widget

Expected results

The Opacity should be applied on the painted shader

Actual results

The Opacity is not applied

Code sample

Code sample

import 'dart:ui' as ui;

import 'package:flutter/services.dart';
import 'package:flutter/material.dart';

class MyApp extends StatelessWidget {
  const MyApp({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: FutureBuilder(
          future: () async {
            final imageBytes = await rootBundle.load('lib/assets/img.jpeg');
            final image = await decodeImageFromList(imageBytes.buffer.asUint8List());
            final program = await ui.FragmentProgram.fromAsset('lib/assets/simple.frag');

            return (image, program);
          }(),
          builder: (context, snapshot) {
            if (snapshot.hasData == false) {
              return const Center(child: CircularProgressIndicator());
            }

            final image = snapshot.data!.$1;
            final program = snapshot.data!.$2;
            return Opacity(
              opacity: 0.5,
              child: Center(
                child: FittedBox(
                  child: SizedBox(
                    width: image.width.toDouble(),
                    height: image.height.toDouble(),
                    child: CustomPaint(
                      painter: MyCustomPainter(
                        image: image,
                        program: program,
                      ),
                    ),
                  ),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

class MyCustomPainter extends CustomPainter {
  const MyCustomPainter({
    required this.image,
    required this.program,
  });

  final ui.Image image;
  final ui.FragmentProgram program;

  @override
  void paint(Canvas canvas, Size size) {
    final shader = program.fragmentShader();
    shader.setFloat(0, image.width.toDouble());
    shader.setFloat(1, image.height.toDouble());
    shader.setImageSampler(0, image);

    final paint = Paint()..shader = shader;
    canvas.drawRect(Offset.zero & size, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}

Shader

#include <flutter/runtime_effect.glsl>

uniform vec2 uSize;

uniform sampler2D uTexture;

out vec4 fragColor;

void main() {
    vec2 uv = FlutterFragCoord() / uSize;
   
    fragColor = texture(uTexture, uv);
}

Screenshots or Video

Screenshots

Expected

Actual

Logs

No response

Flutter Doctor output

Doctor output

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.24.3, on macOS 14.5 23F79 darwin-arm64, locale en-IT)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 16.0)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2023.3)
[✓] IntelliJ IDEA Community Edition (version 2024.2.1)
[✓] VS Code (version 1.95.2)
[✓] Connected device (5 available)
    ! Error: Browsing on the local area network for Giacomo’s iPhone. Ensure the device is unlocked and attached with a cable or associated with the same local area network as this Mac.
      The device must be opted into Developer Mode to connect wirelessly. (code -27)
[✓] Network resources

• No issues found!

[GiacomoPignoni]

If I can give a suggestion, I think the problem has been caused on the changed condition for the opacity peephole in this PR #52707

The method CanApplyOpacityPeephole is not also looking if the paint object has a shader
If this condition is invalided changing for example the blend mode, the opacity return to work correctly

[darshankawar]

@GiacomoPignoni
Can you provide the current vs expected result with this code ?
Also, please check if this could be related to your case or not.

[GiacomoPignoni]

@darshankawar
I've added the screenshots

About the other issue, it is related, it's something similar but not the same use case.
Is this case I'm trying to apply an opacity on a CustomPaint with a shader that is drawing an ui.Image/texture
I can also say that this problem was not present in Flutter 3.22 or before

[sroddy]

@darshankawar it could actually be that the issue you have linked is strictly related to this issue, because I've verified that the behaviour that is described in that issue (to multiply the alpha value of the Paint color to the shader output) is no longer occurring, and the shader output is not taking anymore into consideration the alpha value of the color.

It can be that because of this new (unwanted?) behavior, the peephole optimizations of the Opacity layer, which are most likely affecting the color value of the Paint, are no longer able to effectively apply opacity on the shader's output.

[darshankawar]

Thanks for the update @GiacomoPignoni and @sroddy
I tried the code sample using latest stable and observed that the opacity is applied, as shown below:

Original image I used:

I see that you verified on 3.24.3. Can you upgrade to 3.24.4 and re-run to confirm ?

[GiacomoPignoni]

@darshankawar
I've tried it on Flutter 3.24.4 and the problem still present.
But I've tried it on iOS, and I've noticed you have tried it on Android.
So I've tried also other platforms (I wasn't able to try Windows) and I can say that this problem is present only on iOS and macOS also on Flutter 3.24.4

[darshankawar]

Thanks for the update. I tried on web, desktop (macOS) and iOS with latest stable and master and below is observation:

1. iOS (occurs with impeller, not without impeller):

2. web (chrome) : doesn't occur.
3. macOS : doesn't occur on latest master:

stable : 3.24.4
master : 3.27.0-1.0.pre.471

[sroddy]

@darshankawar I think that on macOS it's not happening because you didn't test it with the flag that enables impeller, as it's still not enabled by default

[jonahwilliams]

FYI @flar , I think this needs to be fixed by marking runtime effect as not accepting opacity peephole

[flutter-triage-bot]

Issue is assigned to multiple teams (engine, ios). Please ensure the issue has only one team-* label at a time. Use fyi-* labels to have another team look at the issue without reassigning it.

[flar]

FYI @flar , I think this needs to be fixed by marking runtime effect as not accepting opacity peephole

This would give up an opportunity. Skia is able to apply opacity on top of a Custom Shader. We can impose a restriction on the ability to peephole opacity as a "workaround bug fix", but it will move performance back compared to finding a way to implement opacity on top of a custom shader.

[jonahwilliams]

We're not going to codegen new shaders to make opacity peephole work. please just add the opt out for runtime effect.

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.