[Windows] Compositor rendering regresses apps with faded backgrounds

[loic-sharma]

Background

flutter/engine#49262 updated Flutter Windows to render to an offscreen framebuffer instead of directly onto the window's surface. This will allow us to support platform views and multiple views.

Unfortunately, this change regresses package:material_floating_search_bar_2's animation and causes weird artifacts.

`package:material_floating_search_bar_2` example...

(FYI there's a more minimal repro below)

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

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // This seems to be necessary to repro:
      debugShowCheckedModeBanner: false, 
      home: Scaffold(
        resizeToAvoidBottomInset: false,
        body: FloatingSearchBar(
          // This seems to be necessary to repro:
          transition: CircularFloatingSearchBarTransition(spacing: 16),
          // This isn't necessary but it makes the artifacts more obvious: 
          transitionDuration: const Duration(seconds: 5),
          builder: (BuildContext context, _) {
            return Material(
             // This seems to be necessary to repro:
              borderRadius: BorderRadius.circular(8), 
              child: const Text('Hello world'),
            );
          },
          body: Container(),
        ),
      ),
    );
  }
}

Minimal repro

Download Windows app.zip

Commit	Scenario	Works?
9c2a756	Windows OpenGL	✅
b417fb8	Windows OpenGL	❌
b417fb8	Windows software rendering	✅
b417fb8	Linux OpenGL	✅
b417fb8	Web	✅

Source code...

import 'package:flutter/material.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();

  // Pump frames non-stop. This isn't necessary to repro.
  WidgetsBinding.instance.addPersistentFrameCallback((_) {
    WidgetsBinding.instance.scheduleFrame();
  });

  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    // This is necessary to reproduce:
    return Container(
      color: Colors.white,
      child: const Directionality(
        textDirection: TextDirection.ltr,
        child: BlueCircle(),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        const Opacity(
          opacity: 0.3,
          child: SizedBox.expand(
            child: DecoratedBox(
              decoration: BoxDecoration(color: Colors.black),
            ),
          ),
        ),

        SizedBox.expand(
          child: ClipOval(
            clipper: const _CircularRevealClipper(),
            child: DecoratedBox(
              decoration: BoxDecoration(
                color: Colors.blue,
                // Removing this line fixes the app.
                borderRadius: BorderRadius.circular(16.0),
              ),
              child: const SizedBox(height: 256.0),
            ),
          ),
        ),
      ],
    );
  }
}

class _CircularRevealClipper extends CustomClipper<Rect> {
  const _CircularRevealClipper();

  @override
  Rect getClip(Size size) {
    return Rect.fromCircle(
      center: Offset.zero,
      radius: 500,
    );
  }

  @override
  bool shouldReclip(CustomClipper<Rect> oldClipper) => true;
}

Screenshot of the expected output...

Screenshot of the actual output...

TODO

• The engine has a dirty region feature that can be disabled. Check if disabling this fixes the issue. RenderDoc showed that the framebuffer contains the expected texture. It appears that the compositor's glFramebufferBlit is the issue.
• Enable Skia canvas trace commands to verify "good" and "bad" commits are drawing the same things
• Use a GPU frame debugger (like RenderDoc) to look at GL calls

[loic-sharma]

Skia tracing

Here are timeline traces with Skia enabled:

Platform	Flutter commit	Engine commit	Animation works?	Trace download link
Windows	9c2a756	flutter/engine@2e55306	✅	Trace
Windows	9c2a756	flutter/engine@00d7d23	❌	Trace
Linux	9c2a756	flutter/engine@00d7d23	✅	Trace

You can open these using chrome://tracing in your browser.

Engine commits:

1. flutter/engine@2e55306 - Windows renders to the root surface
2. flutter/engine@00d7d23 - Both Windows and Linux render to an OpenGL framebuffer (Windows implementation, Linux implementation)

Comparison of Linux and Windows traces

Here's a comparison of the traces for a single frame of the animation on Linux and Windows while on flutter/engine@00d7d23.

Traces...

Notable differences are bolded.

Traces inside OpsTask::onPrepare:

Linux	Windows
FillRectOp FillRectOp CircularRRectOp	FillRectOp FillRectOp CircularRRectOp

Traces between OpsTask::onPrepare and OpsTask::onExecute

Linux

Windows

Disable(0x0B71) DepthMask(0) FrontFace(0x0901) Disable(0x8037) Enable(0x8642) LineWidth(1) Enable(0x809D) PixelStorei(0x0CF2, 0) BindBuffer(bufferState->fGLTarget, glBuffer->bufferID()) InvalidateBufferData(bufferID) BufferSubData(target, offset, size, src) BindVertexArray(arrayID) InvalidateBufferData(bufferID) BufferSubData(target, offset, size, src)

Disable(0x0B71) DepthMask(0) Disable(0x0B44) FrontFace(0x0901) LineWidth(1) Disable(0x0BD0) PixelStorei(0x0CF2, 0) PixelStorei(0x0D02, 0) PixelStorei(0x93A4, 0) BindBuffer(bufferState->fGLTarget, glBuffer->bufferID()) BufferData(target, bufferSize, nullptr, usage) BufferSubData(target, offset, size, src) BindVertexArray(arrayID) BindBuffer(bufferState->fGLTarget, glBuffer->bufferID()) BufferData(target, bufferSize, nullptr, usage) BufferSubData(target, offset, size, src)

Traces inside OpsTask::onExecute:

Linux	Windows
BindFramebuffer(target, fboid) CheckFramebufferStatus(0x8D40) Viewport(nativeViewport.fX, nativeViewport.fY, nativeViewport.fWidth, nativeViewport.fHeight) Disable(0x8DB9) ClearColor(r, g, b, a) ColorMask(1, 1, 1, 1) Clear(clearMask)	BindFramebuffer(target, fboid) CheckFramebufferStatus(0x8D40) Viewport(nativeViewport.fX, nativeViewport.fY, nativeViewport.fWidth, nativeViewport.fHeight)
FillRectOp DrawRangeElements(glPrimType, minIndexValue, maxIndexValue, indexCount, 0x1403, this->offsetForBaseIndex(baseIndex))	FillRectOp UseProgram(id) Enable(0x0BE2) BlendEquation(gXfermodeEquation2Blend[(int)equation]) BlendFunc(gXfermodeCoeff2Blend[(int)srcCoeff], gXfermodeCoeff2Blend[(int)dstCoeff]) ColorMask(1, 1, 1, 1) Disable(0x0B90) Disable(0x0C11) EnableVertexAttribArray(i) EnableVertexAttribArray(i) DisableVertexAttribArray(i) DisableVertexAttribArray(i) ... Repeat DisableVertexAttribArray(i) several times... DisableVertexAttribArray(i) VertexAttribPointer(index, layout.fCount, layout.fType, layout.fNormalized, stride, offsetAsPtr) VertexAttribDivisor(index, divisor) VertexAttribPointer(index, layout.fCount, layout.fType, layout.fNormalized, stride, offsetAsPtr) VertexAttribDivisor(index, divisor) DrawArrays(glPrimType, baseVertex, vertexCount)
CircularRRectOp UseProgram(id) Uniform4fv(uni.fLocation, arrayCount, v) Enable(0x0C11) Scissor(nativeScissor.fX, nativeScissor.fY, nativeScissor.fWidth, nativeScissor.fHeight) BindBuffer(0x8893, glBuffer->bufferID()) EnableVertexAttribArray(i) VertexAttribPointer(index, layout.fCount, layout.fType, layout.fNormalized, stride, offsetAsPtr) VertexAttribDivisor(index, divisor) DrawRangeElements(glPrimType, minIndexValue, maxIndexValue, indexCount, 0x1403, this->offsetForBaseIndex(baseIndex))	CircularRRectOp UseProgram(id) Uniform4fv(uni.fLocation, arrayCount, v) Enable(0x0C11) Scissor(nativeScissor.fX, nativeScissor.fY, nativeScissor.fWidth, nativeScissor.fHeight) BindBuffer(bufferState->fGLTarget, glBuffer->bufferID()) EnableVertexAttribArray(i) VertexAttribPointer(index, layout.fCount, layout.fType, layout.fNormalized, stride, offsetAsPtr) VertexAttribPointer(index, layout.fCount, layout.fType, layout.fNormalized, stride, offsetAsPtr) VertexAttribPointer(index, layout.fCount, layout.fType, layout.fNormalized, stride, offsetAsPtr) VertexAttribDivisor(index, divisor) DrawRangeElements(glPrimType, minIndexValue, maxIndexValue, indexCount, 0x1403, this->offsetForBaseIndex(baseIndex))

Notable differences between the traces:

1. Traces inside OpsTask::onPrepare: no notable differences!
2. Traces between OpsTask::onPrepare and OpsTask::onExecute:
   1. Linux calls InvalidateBufferData
3. Traces inside OpsTask::onExecute:
   1. Linux calls ClearColor(...), ColorMask(...), Clear(...) before it executes ops
   2. Windows's FillRectOp execution calls BlendEquation(...) and BlendFunc(...)

[loic-sharma]

I have a smaller minimal repro: a clipped circle stacked on top of a faded background:

Minimal source code...

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    // This is necessary to reproduce:
    return Container(
      color: Colors.white,
      child: const Directionality(
        textDirection: TextDirection.ltr,
        child: BlueCircle(),
      ),
    );

    // Switching to this fixes the issue:
    // return const MaterialApp(
    //   home: Scaffold(
    //     body: BlueCircle(),
    //   ),
    // );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        const Opacity(
          opacity: 0.3,
          child: SizedBox.expand(
            child: DecoratedBox(
              decoration: BoxDecoration(color: Colors.black),
            ),
          ),
        ),

        SizedBox.expand(
          child: ClipOval(
            clipper: const _CircularRevealClipper(),
            child: DecoratedBox(
              decoration: BoxDecoration(
                color: Colors.blue,
                // Removing this line fixes the app.
                borderRadius: BorderRadius.circular(16.0),
              ),
              child: const SizedBox(height: 256.0),
            ),
          ),
        ),
      ],
    );
  }
}

class _CircularRevealClipper extends CustomClipper<Rect> {
  const _CircularRevealClipper();

  @override
  Rect getClip(Size size) {
    return Rect.fromCircle(
      center: Offset.zero,
      radius: 500,
    );
  }

  @override
  bool shouldReclip(CustomClipper<Rect> oldClipper) => true;
}

I verified the framebuffer's texture is properly rendered using RenderDoc. The blit appears to be broken somehow.

I updated the Windows compositor to clear the window surface to red before blitting the backing store's framebuffer. If blitting works as expected, the red should not be visible as the entire surface should have been blitted over. However, red color remains:

Patch to clear the window surface to red before blitting...

Apply this patch on flutter/engine@00d7d23:

diff --git a/shell/platform/windows/compositor_opengl.cc b/shell/platform/windows/compositor_opengl.cc
index 6da274b993..c19cab4af1 100644
--- a/shell/platform/windows/compositor_opengl.cc
+++ b/shell/platform/windows/compositor_opengl.cc
@@ -132,6 +132,10 @@ bool CompositorOpenGL::Present(const FlutterLayer** layers,
     return false;
   }

+  gl_->BindFramebuffer(GL_DRAW_FRAMEBUFFER, kWindowFrameBufferId);
+  gl_->ClearColor(1.0f, 0.0f, 0.0f, 0.0f);
+  gl_->Clear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT | GL_STENCIL_BUFFER_BIT);
+
   auto source_id = layers[0]->backing_store->open_gl.framebuffer.name;
   gl_->BindFramebuffer(GL_READ_FRAMEBUFFER, source_id);
   gl_->BindFramebuffer(GL_DRAW_FRAMEBUFFER, kWindowFrameBufferId);

This appears to be ANGLE's blit implementation on D3D11: https://github.com/google/angle/blob/95fe7e470418cd5ac18d203eb29a25101c650f14/src/libANGLE/renderer/d3d/d3d11/Blit11.cpp#L576

[loic-sharma]

ANGLE bug report

https://chromium.slack.com/archives/CGHH6049K/p1704925434965249

I believe Flutter Windows is affected by what appears to be a bug in ANGLE's glBlitFramebuffer implementation on D3D11.

Example app

Here is a Flutter app that draws a rounded rectangle with a circular clip on top of a faded background:

app.zip

Source code...

This is broken on Flutter commit b417fb828b332b0a4b0c80b742d86aa922de2649.
This works on Flutter commit 9c2a7560096223090d38bbd5b4c46760be396bc1.

import 'package:flutter/material.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();

  // Pump frames non-stop. This isn't necessary to repro.
  WidgetsBinding.instance.addPersistentFrameCallback((_) {
    WidgetsBinding.instance.scheduleFrame();
  });

  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    // This is necessary to reproduce:
    return Container(
      color: Colors.white,
      child: const Directionality(
        textDirection: TextDirection.ltr,
        child: BlueCircle(),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        const Opacity(
          opacity: 0.3,
          child: SizedBox.expand(
            child: DecoratedBox(
              decoration: BoxDecoration(color: Colors.black),
            ),
          ),
        ),

        SizedBox.expand(
          child: ClipOval(
            clipper: const _CircularRevealClipper(),
            child: DecoratedBox(
              decoration: BoxDecoration(
                color: Colors.blue,
                // Removing this line fixes the app.
                borderRadius: BorderRadius.circular(16.0),
              ),
              child: const SizedBox(height: 256.0),
            ),
          ),
        ),
      ],
    );
  }
}

class _CircularRevealClipper extends CustomClipper<Rect> {
  const _CircularRevealClipper();

  @override
  Rect getClip(Size size) {
    return Rect.fromCircle(
      center: Offset.zero,
      radius: 500,
    );
  }

  @override
  bool shouldReclip(CustomClipper<Rect> oldClipper) => true;
}

Screenshot of the expected output...

Screenshot of the actual output...

Analysis

Flutter Windows uses Skia and ANGLE to render to an OpenGL framebuffer. Flutter Windows then blits this framebuffer to the window's surface. The blit updates the entire window surface (the framebuffer and window surface have the same size).

Using RenderDoc's texture viewer, we can inspect the blit (event ID 57): renderdoc.zip

1. ✅ The input texture ANGLE_TexStorage2D contains the expected content
2. ❌ The output texture ANGLE_BackBufferTexture is unexpected

Clear test

It appears that the blit is not updating the entire window surface. To test this hypothesis, I added a step to clear the window's surface to a red color immediately before blitting the framebuffer. Since the blit should update the entire window surface, no red color should be visible. However, the red color is visible:

Screenshot of test app...

Notice how red color is visible. This indicates the blit did not update the entire window surface.

Here is the RenderDoc capture: red_test_capture.zip

Debugging information

Affected Flutter version: b417fb8
ANGLE version for affected Flutter version: google/angle@6a09e41

Perfetto trace of Skia and its OpenGL calls...

Inspect this in Chrome by navigating to chrome://tracing:

perfetto_trace.json

The OpenGL calls are in the io.flutter.raster swim lane. Use W to zoom in and a/d to pan left/right. This does not include the glFramebufferBlit GL call.

[loic-sharma]

Fixed by flutter/engine#49726

[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.