Revert "Revert "Use a single OffscreenCanvas for rendering in CanvasKit" (flutter#45744)"

This reverts commit 153edff.

Author: harryterkelsen

ci/licenses_golden/licenses_flutter

@@ -2619,10 +2619,11 @@ ORIGIN: ../../../flutter/lib/web_ui/lib/src/engine/canvaskit/picture_recorder.da
 ORIGIN: ../../../flutter/lib/web_ui/lib/src/engine/canvaskit/platform_message.dart + ../../../flutter/LICENSE
 ORIGIN: ../../../flutter/lib/web_ui/lib/src/engine/canvaskit/raster_cache.dart + ../../../flutter/LICENSE
 ORIGIN: ../../../flutter/lib/web_ui/lib/src/engine/canvaskit/rasterizer.dart + ../../../flutter/LICENSE
+ORIGIN: ../../../flutter/lib/web_ui/lib/src/engine/canvaskit/render_canvas.dart + ../../../flutter/LICENSE
+ORIGIN: ../../../flutter/lib/web_ui/lib/src/engine/canvaskit/render_canvas_factory.dart + ../../../flutter/LICENSE
 ORIGIN: ../../../flutter/lib/web_ui/lib/src/engine/canvaskit/renderer.dart + ../../../flutter/LICENSE
 ORIGIN: ../../../flutter/lib/web_ui/lib/src/engine/canvaskit/shader.dart + ../../../flutter/LICENSE
 ORIGIN: ../../../flutter/lib/web_ui/lib/src/engine/canvaskit/surface.dart + ../../../flutter/LICENSE
-ORIGIN: ../../../flutter/lib/web_ui/lib/src/engine/canvaskit/surface_factory.dart + ../../../flutter/LICENSE
 ORIGIN: ../../../flutter/lib/web_ui/lib/src/engine/canvaskit/text.dart + ../../../flutter/LICENSE
 ORIGIN: ../../../flutter/lib/web_ui/lib/src/engine/canvaskit/text_fragmenter.dart + ../../../flutter/LICENSE
 ORIGIN: ../../../flutter/lib/web_ui/lib/src/engine/canvaskit/util.dart + ../../../flutter/LICENSE
@@ -5396,10 +5397,11 @@ FILE: ../../../flutter/lib/web_ui/lib/src/engine/canvaskit/picture_recorder.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/canvaskit/platform_message.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/canvaskit/raster_cache.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/canvaskit/rasterizer.dart
+FILE: ../../../flutter/lib/web_ui/lib/src/engine/canvaskit/render_canvas.dart
+FILE: ../../../flutter/lib/web_ui/lib/src/engine/canvaskit/render_canvas_factory.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/canvaskit/renderer.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/canvaskit/shader.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/canvaskit/surface.dart
-FILE: ../../../flutter/lib/web_ui/lib/src/engine/canvaskit/surface_factory.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/canvaskit/text.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/canvaskit/text_fragmenter.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/canvaskit/util.dart

lib/web_ui/lib/src/engine.dart

@@ -43,10 +43,11 @@ export 'engine/canvaskit/picture.dart';
 export 'engine/canvaskit/picture_recorder.dart';
 export 'engine/canvaskit/raster_cache.dart';
 export 'engine/canvaskit/rasterizer.dart';
+export 'engine/canvaskit/render_canvas.dart';
+export 'engine/canvaskit/render_canvas_factory.dart';
 export 'engine/canvaskit/renderer.dart';
 export 'engine/canvaskit/shader.dart';
 export 'engine/canvaskit/surface.dart';
-export 'engine/canvaskit/surface_factory.dart';
 export 'engine/canvaskit/text.dart';
 export 'engine/canvaskit/text_fragmenter.dart';
 export 'engine/canvaskit/util.dart';

lib/web_ui/lib/src/engine/canvaskit/canvaskit_api.dart

@@ -161,6 +161,13 @@ extension CanvasKitExtension on CanvasKit {
       DomCanvasElement canvas, SkWebGLContextOptions options) =>
         _GetWebGLContext(canvas, options).toDartDouble;
 
+  @JS('GetWebGLContext')
+  external JSNumber _GetOffscreenWebGLContext(
+      DomOffscreenCanvas canvas, SkWebGLContextOptions options);
+  double GetOffscreenWebGLContext(
+          DomOffscreenCanvas canvas, SkWebGLContextOptions options) =>
+      _GetOffscreenWebGLContext(canvas, options).toDartDouble;
+
   @JS('MakeGrContext')
   external SkGrContext _MakeGrContext(JSNumber glContext);
   SkGrContext MakeGrContext(double glContext) =>
@@ -199,6 +206,9 @@ extension CanvasKitExtension on CanvasKit {
 
   external SkSurface MakeSWCanvasSurface(DomCanvasElement canvas);
 
+  @JS('MakeSWCanvasSurface')
+  external SkSurface MakeOffscreenSWCanvasSurface(DomOffscreenCanvas canvas);
+
   /// Creates an image from decoded pixels represented as a list of bytes.
   ///
   /// The pixel data must be encoded according to the image info in [info].

lib/web_ui/lib/src/engine/canvaskit/embedded_views.dart

@@ -18,9 +18,9 @@ import 'embedded_views_diff.dart';
 import 'path.dart';
 import 'picture.dart';
 import 'picture_recorder.dart';
+import 'render_canvas.dart';
+import 'render_canvas_factory.dart';
 import 'renderer.dart';
-import 'surface.dart';
-import 'surface_factory.dart';
 
 /// This composites HTML views into the [ui.Scene].
 class HtmlViewEmbedder {
@@ -31,42 +31,6 @@ class HtmlViewEmbedder {
 
   DomElement get skiaSceneHost => CanvasKitRenderer.instance.sceneHost!;
 
-  /// Force the view embedder to disable overlays.
-  ///
-  /// This should never be used outside of tests.
-  static set debugDisableOverlays(bool disable) {
-    // Short circuit if the value is the same as what we already have.
-    if (disable == _debugOverlaysDisabled) {
-      return;
-    }
-    _debugOverlaysDisabled = disable;
-    final SurfaceFactory? instance = SurfaceFactory.debugUninitializedInstance;
-    if (instance != null) {
-      instance.releaseSurfaces();
-      instance.removeSurfacesFromDom();
-      instance.debugClear();
-    }
-    if (disable) {
-      // If we are disabling overlays then get the current [SurfaceFactory]
-      // instance, clear it, and overwrite it with a new instance with only
-      // one surface for the base surface.
-      SurfaceFactory.debugSetInstance(SurfaceFactory(1));
-    } else {
-      // If we are re-enabling overlays then replace the current
-      // [SurfaceFactory]instance with one with
-      // [configuration.canvasKitMaximumSurfaces] overlays.
-      SurfaceFactory.debugSetInstance(
-          SurfaceFactory(configuration.canvasKitMaximumSurfaces));
-    }
-  }
-
-  static bool _debugOverlaysDisabled = false;
-
-  /// Whether or not we have issues a warning to the user about having too many
-  /// surfaces on screen at once. This is so we only warn once, instead of every
-  /// frame.
-  bool _warnedAboutTooManySurfaces = false;
-
   /// The context for the current frame.
   EmbedderFrameContext _context = EmbedderFrameContext();
 
@@ -86,10 +50,12 @@ class HtmlViewEmbedder {
   /// * The number of clipping elements used last time the view was composited.
   final Map<int, ViewClipChain> _viewClipChains = <int, ViewClipChain>{};
 
-  /// Surfaces used to draw on top of platform views, keyed by platform view ID.
-  ///
-  /// These surfaces are cached in the [OverlayCache] and reused.
-  final Map<int, Surface> _overlays = <int, Surface>{};
+  /// The maximum number of overlays to create. Too many overlays can cause a
+  /// performance burden.
+  static const int maximumOverlays = 7;
+
+  /// Canvases used to draw on top of platform views, keyed by platform view ID.
+  final Map<int, RenderCanvas> _overlays = <int, RenderCanvas>{};
 
   /// The views that need to be recomposited into the scene on the next frame.
   final Set<int> _viewsToRecomposite = <int>{};
@@ -100,6 +66,9 @@ class HtmlViewEmbedder {
   /// The most recent composition order.
   final List<int> _activeCompositionOrder = <int>[];
 
+  /// The most recent overlay groups.
+  List<OverlayGroup> _activeOverlayGroups = <OverlayGroup>[];
+
   /// The size of the frame, in physical pixels.
   ui.Size _frameSize = ui.window.physicalSize;
 
@@ -124,20 +93,10 @@ class HtmlViewEmbedder {
   }
 
   void prerollCompositeEmbeddedView(int viewId, EmbeddedViewParams params) {
-    final bool hasAvailableOverlay =
-        _context.pictureRecordersCreatedDuringPreroll.length <
-            SurfaceFactory.instance.maximumOverlays;
-    if (!hasAvailableOverlay && !_warnedAboutTooManySurfaces) {
-      _warnedAboutTooManySurfaces = true;
-      printWarning('Flutter was unable to create enough overlay surfaces. '
-          'This is usually caused by too many platform views being '
-          'displayed at once. '
-          'You may experience incorrect rendering.');
-    }
     // We need an overlay for each visible platform view. Invisible platform
     // views will be grouped with (at most) one visible platform view later.
     final bool needNewOverlay = PlatformViewManager.instance.isVisible(viewId);
-    if (needNewOverlay && hasAvailableOverlay) {
+    if (needNewOverlay) {
       final CkPictureRecorder pictureRecorder = CkPictureRecorder();
       pictureRecorder.beginRecording(ui.Offset.zero & _frameSize);
       _context.pictureRecordersCreatedDuringPreroll.add(pictureRecorder);
@@ -409,26 +368,27 @@ class HtmlViewEmbedder {
         (_activeCompositionOrder.isEmpty || _compositionOrder.isEmpty)
             ? null
             : diffViewList(_activeCompositionOrder, _compositionOrder);
-    _updateOverlays(diffResult);
+    final List<OverlayGroup>? overlayGroups = _updateOverlays(diffResult);
+    if (overlayGroups != null) {
+      _activeOverlayGroups = overlayGroups;
+    }
     assert(
-      _context.pictureRecorders.length == _overlays.length,
-      'There should be the same number of picture recorders '
+      _context.pictureRecorders.length >= _overlays.length,
+      'There should be at least as many picture recorders '
       '(${_context.pictureRecorders.length}) as overlays (${_overlays.length}).',
     );
-    int pictureRecorderIndex = 0;
 
-    for (int i = 0; i < _compositionOrder.length; i++) {
-      final int viewId = _compositionOrder[i];
-      if (_overlays[viewId] != null) {
-        final SurfaceFrame frame = _overlays[viewId]!.acquireFrame(_frameSize);
-        final CkCanvas canvas = frame.skiaCanvas;
-        final CkPicture ckPicture =
-            _context.pictureRecorders[pictureRecorderIndex].endRecording();
-        canvas.clear(const ui.Color(0x00000000));
-        canvas.drawPicture(ckPicture);
+    int pictureRecorderIndex = 0;
+    for (final OverlayGroup overlayGroup in _activeOverlayGroups) {
+      final RenderCanvas overlay = _overlays[overlayGroup.last]!;
+      final List<CkPicture> pictures = <CkPicture>[];
+      for (int i = 0; i < overlayGroup.visibleCount; i++) {
+        pictures.add(
+            _context.pictureRecorders[pictureRecorderIndex].endRecording());
         pictureRecorderIndex++;
-        frame.submit();
       }
+      CanvasKitRenderer.instance.rasterizer
+          .rasterizeToCanvas(overlay, pictures);
     }
     for (final CkPictureRecorder recorder
         in _context.pictureRecordersCreatedDuringPreroll) {
@@ -481,15 +441,15 @@ class HtmlViewEmbedder {
         if (diffResult.addToBeginning) {
           final DomElement platformViewRoot = _viewClipChains[viewId]!.root;
           skiaSceneHost.insertBefore(platformViewRoot, elementToInsertBefore);
-          final Surface? overlay = _overlays[viewId];
+          final RenderCanvas? overlay = _overlays[viewId];
           if (overlay != null) {
             skiaSceneHost.insertBefore(
                 overlay.htmlElement, elementToInsertBefore);
           }
         } else {
           final DomElement platformViewRoot = _viewClipChains[viewId]!.root;
           skiaSceneHost.append(platformViewRoot);
-          final Surface? overlay = _overlays[viewId];
+          final RenderCanvas? overlay = _overlays[viewId];
           if (overlay != null) {
             skiaSceneHost.append(overlay.htmlElement);
           }
@@ -514,7 +474,7 @@ class HtmlViewEmbedder {
         }
       }
     } else {
-      SurfaceFactory.instance.removeSurfacesFromDom();
+      RenderCanvasFactory.instance.removeSurfacesFromDom();
       for (int i = 0; i < _compositionOrder.length; i++) {
         final int viewId = _compositionOrder[i];
 
@@ -532,7 +492,7 @@ class HtmlViewEmbedder {
         }
 
         final DomElement platformViewRoot = _viewClipChains[viewId]!.root;
-        final Surface? overlay = _overlays[viewId];
+        final RenderCanvas? overlay = _overlays[viewId];
         skiaSceneHost.append(platformViewRoot);
         if (overlay != null) {
           skiaSceneHost.append(overlay.htmlElement);
@@ -568,8 +528,8 @@ class HtmlViewEmbedder {
 
   void _releaseOverlay(int viewId) {
     if (_overlays[viewId] != null) {
-      final Surface overlay = _overlays[viewId]!;
-      SurfaceFactory.instance.releaseSurface(overlay);
+      final RenderCanvas overlay = _overlays[viewId]!;
+      RenderCanvasFactory.instance.releaseCanvas(overlay);
       _overlays.remove(viewId);
     }
   }
@@ -591,13 +551,13 @@ class HtmlViewEmbedder {
   // composition order of the current and previous frame, respectively.
   //
   // TODO(hterkelsen): Test this more thoroughly.
-  void _updateOverlays(ViewListDiffResult? diffResult) {
+  List<OverlayGroup>? _updateOverlays(ViewListDiffResult? diffResult) {
     if (diffResult != null &&
         diffResult.viewsToAdd.isEmpty &&
         diffResult.viewsToRemove.isEmpty) {
       // The composition order has not changed, continue using the assigned
       // overlays.
-      return;
+      return null;
     }
     // Group platform views from their composition order.
     // Each group contains one visible view, and any number of invisible views
@@ -606,17 +566,10 @@ class HtmlViewEmbedder {
         getOverlayGroups(_compositionOrder);
     final List<int> viewsNeedingOverlays =
         overlayGroups.map((OverlayGroup group) => group.last).toList();
-    // If there were more visible views than overlays, then the last group
-    // doesn't have an overlay.
-    if (viewsNeedingOverlays.length > SurfaceFactory.instance.maximumOverlays) {
-      assert(viewsNeedingOverlays.length ==
-          SurfaceFactory.instance.maximumOverlays + 1);
-      viewsNeedingOverlays.removeLast();
-    }
     if (diffResult == null) {
       // Everything is going to be explicitly recomposited anyway. Release all
       // the surfaces and assign an overlay to all the surfaces needing one.
-      SurfaceFactory.instance.releaseSurfaces();
+      RenderCanvasFactory.instance.releaseCanvases();
       _overlays.clear();
       viewsNeedingOverlays.forEach(_initializeOverlay);
     } else {
@@ -635,6 +588,7 @@ class HtmlViewEmbedder {
           .forEach(_initializeOverlay);
     }
     assert(_overlays.length == viewsNeedingOverlays.length);
+    return overlayGroups;
   }
 
   // Group the platform views into "overlay groups". These are sublists
@@ -646,12 +600,8 @@ class HtmlViewEmbedder {
   // be assigned an overlay are grouped together and will be rendered on top of
   // the rest of the scene.
   List<OverlayGroup> getOverlayGroups(List<int> views) {
-    final int maxOverlays = SurfaceFactory.instance.maximumOverlays;
-    if (maxOverlays == 0) {
-      return const <OverlayGroup>[];
-    }
     final List<OverlayGroup> result = <OverlayGroup>[];
-    OverlayGroup currentGroup = OverlayGroup(<int>[]);
+    OverlayGroup currentGroup = OverlayGroup();
 
     for (int i = 0; i < views.length; i++) {
       final int view = views[i];
@@ -660,8 +610,10 @@ class HtmlViewEmbedder {
         currentGroup.add(view);
       } else {
         // `view` is visible.
-        if (!currentGroup.hasVisibleView) {
-          // If `view` is the first visible one of the group, add it.
+        if (!currentGroup.hasVisibleView ||
+            result.length + 1 >= HtmlViewEmbedder.maximumOverlays) {
+          // If `view` is the first visible one of the group or we've reached
+          // the maximum number of overlays, add it.
           currentGroup.add(view, visible: true);
         } else {
           // There's already a visible `view` in `currentGroup`, so a new
@@ -671,17 +623,8 @@ class HtmlViewEmbedder {
             // We only care about groups that have one visible view.
             result.add(currentGroup);
           }
-          // If there are overlays still available.
-          if (result.length < maxOverlays) {
-            // Create a new group, starting with `view`.
-            currentGroup = OverlayGroup(<int>[view], visible: true);
-          } else {
-            // Add the rest of the views to a final group that will be rendered
-            // on top of the scene.
-            currentGroup = OverlayGroup(views.sublist(i), visible: true);
-            // And break out of the loop!
-            break;
-          }
+          currentGroup = OverlayGroup();
+          currentGroup.add(view, visible: true);
         }
       }
     }
@@ -696,8 +639,7 @@ class HtmlViewEmbedder {
     assert(!_overlays.containsKey(viewId));
 
     // Try reusing a cached overlay created for another platform view.
-    final Surface overlay = SurfaceFactory.instance.getSurface()!;
-    overlay.createOrUpdateSurface(_frameSize);
+    final RenderCanvas overlay = RenderCanvasFactory.instance.getCanvas();
     _overlays[viewId] = overlay;
   }
 
@@ -742,29 +684,30 @@ class HtmlViewEmbedder {
 /// Every overlay group is a list containing a visible view preceded or followed
 /// by zero or more invisible views.
 class OverlayGroup {
-  /// Constructor
-  OverlayGroup(
-    List<int> viewGroup, {
-    bool visible = false,
-  })  : _group = viewGroup,
-        _containsVisibleView = visible;
+  OverlayGroup() : _group = <int>[];
 
   // The internal list of ints.
   final List<int> _group;
-  // A boolean flag to mark if any visible view has been added to the list.
-  bool _containsVisibleView;
+
+  /// The number of visible views in this group.
+  int _visibleCount = 0;
 
   /// Add a [view] (maybe [visible]) to this group.
   void add(int view, {bool visible = false}) {
     _group.add(view);
-    _containsVisibleView |= visible;
+    if (visible) {
+      _visibleCount++;
+    }
   }
 
   /// Get the "last" view added to this group.
   int get last => _group.last;
 
   /// Returns true if this group contains any visible view.
-  bool get hasVisibleView => _group.isNotEmpty && _containsVisibleView;
+  bool get hasVisibleView => _visibleCount > 0;
+
+  /// Returns the number of visible views in this overlay group.
+  int get visibleCount => _visibleCount;
 }
 
 /// Represents a Clip Chain (for a view).