[canvaskit] Enable multiview rendering

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

@@ -17,18 +17,17 @@ import 'embedded_views_diff.dart';
 import 'path.dart';
 import 'picture.dart';
 import 'picture_recorder.dart';
+import 'rasterizer.dart';
 import 'render_canvas.dart';
 import 'render_canvas_factory.dart';
-import 'renderer.dart';
 
 /// This composites HTML views into the [ui.Scene].
 class HtmlViewEmbedder {
-  HtmlViewEmbedder._();
+  HtmlViewEmbedder(this.sceneHost, this.rasterizer, this.renderCanvasFactory);
 
-  /// The [HtmlViewEmbedder] singleton.
-  static HtmlViewEmbedder instance = HtmlViewEmbedder._();
-
-  DomElement get skiaSceneHost => CanvasKitRenderer.instance.sceneHost!;
+  final DomElement sceneHost;
+  final Rasterizer rasterizer;
+  final RenderCanvasFactory renderCanvasFactory;
 
   /// The context for the current frame.
   EmbedderFrameContext _context = EmbedderFrameContext();
@@ -219,7 +218,7 @@ class HtmlViewEmbedder {
 
     // If the chain was previously attached, attach it to the same position.
     if (headClipViewWasAttached) {
-      skiaSceneHost.insertBefore(head, headClipViewNextSibling);
+      sceneHost.insertBefore(head, headClipViewNextSibling);
     }
     return head;
   }
@@ -359,7 +358,7 @@ class HtmlViewEmbedder {
     }
     _svgPathDefs = kSvgResourceHeader.cloneNode(false) as SVGElement;
     _svgPathDefs!.append(createSVGDefsElement()..id = 'sk_path_defs');
-    skiaSceneHost.append(_svgPathDefs!);
+    sceneHost.append(_svgPathDefs!);
   }
 
   void submitFrame() {
@@ -386,8 +385,7 @@ class HtmlViewEmbedder {
             _context.pictureRecorders[pictureRecorderIndex].endRecording());
         pictureRecorderIndex++;
       }
-      CanvasKitRenderer.instance.rasterizer
-          .rasterizeToCanvas(overlay, pictures);
+      rasterizer.rasterizeToCanvas(overlay, pictures);
     }
     for (final CkPictureRecorder recorder
         in _context.pictureRecordersCreatedDuringPreroll) {
@@ -439,18 +437,18 @@ class HtmlViewEmbedder {
 
         if (diffResult.addToBeginning) {
           final DomElement platformViewRoot = _viewClipChains[viewId]!.root;
-          skiaSceneHost.insertBefore(platformViewRoot, elementToInsertBefore);
+          sceneHost.insertBefore(platformViewRoot, elementToInsertBefore);
           final RenderCanvas? overlay = _overlays[viewId];
           if (overlay != null) {
-            skiaSceneHost.insertBefore(
+            sceneHost.insertBefore(
                 overlay.htmlElement, elementToInsertBefore);
           }
         } else {
           final DomElement platformViewRoot = _viewClipChains[viewId]!.root;
-          skiaSceneHost.append(platformViewRoot);
+          sceneHost.append(platformViewRoot);
           final RenderCanvas? overlay = _overlays[viewId];
           if (overlay != null) {
-            skiaSceneHost.append(overlay.htmlElement);
+            sceneHost.append(overlay.htmlElement);
           }
         }
       }
@@ -463,17 +461,17 @@ class HtmlViewEmbedder {
           if (!overlayElement.isConnected!) {
             // This overlay wasn't added to the DOM.
             if (i == _compositionOrder.length - 1) {
-              skiaSceneHost.append(overlayElement);
+              sceneHost.append(overlayElement);
             } else {
               final int nextView = _compositionOrder[i + 1];
               final DomElement nextElement = _viewClipChains[nextView]!.root;
-              skiaSceneHost.insertBefore(overlayElement, nextElement);
+              sceneHost.insertBefore(overlayElement, nextElement);
             }
           }
         }
       }
     } else {
-      RenderCanvasFactory.instance.removeSurfacesFromDom();
+      renderCanvasFactory.removeSurfacesFromDom();
       for (int i = 0; i < _compositionOrder.length; i++) {
         final int viewId = _compositionOrder[i];
 
@@ -492,9 +490,9 @@ class HtmlViewEmbedder {
 
         final DomElement platformViewRoot = _viewClipChains[viewId]!.root;
         final RenderCanvas? overlay = _overlays[viewId];
-        skiaSceneHost.append(platformViewRoot);
+        sceneHost.append(platformViewRoot);
         if (overlay != null) {
-          skiaSceneHost.append(overlay.htmlElement);
+          sceneHost.append(overlay.htmlElement);
         }
         _activeCompositionOrder.add(viewId);
         unusedViews.remove(viewId);
@@ -528,7 +526,7 @@ class HtmlViewEmbedder {
   void _releaseOverlay(int viewId) {
     if (_overlays[viewId] != null) {
       final RenderCanvas overlay = _overlays[viewId]!;
-      RenderCanvasFactory.instance.releaseCanvas(overlay);
+      renderCanvasFactory.releaseCanvas(overlay);
       _overlays.remove(viewId);
     }
   }
@@ -568,7 +566,7 @@ class HtmlViewEmbedder {
     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.
-      RenderCanvasFactory.instance.releaseCanvases();
+      renderCanvasFactory.releaseCanvases();
       _overlays.clear();
       viewsNeedingOverlays.forEach(_initializeOverlay);
     } else {
@@ -638,7 +636,7 @@ class HtmlViewEmbedder {
     assert(!_overlays.containsKey(viewId));
 
     // Try reusing a cached overlay created for another platform view.
-    final RenderCanvas overlay = RenderCanvasFactory.instance.getCanvas();
+    final RenderCanvas overlay = renderCanvasFactory.getCanvas();
     _overlays[viewId] = overlay;
   }
 

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

@@ -11,7 +11,7 @@ import 'canvas.dart';
 import 'canvaskit_api.dart';
 import 'image.dart';
 import 'native_memory.dart';
-import 'render_canvas_factory.dart';
+import 'renderer.dart';
 import 'surface.dart';
 
 /// Implements [ui.Picture] on top of [SkPicture].
@@ -99,7 +99,7 @@ class CkPicture implements ScenePicture {
   CkImage toImageSync(int width, int height) {
     assert(debugCheckNotDisposed('Cannot convert picture to image.'));
 
-    final Surface surface = RenderCanvasFactory.instance.pictureToImageSurface;
+    final Surface surface = CanvasKitRenderer.instance.pictureToImageSurface;
     final CkSurface ckSurface = surface
         .createOrUpdateSurface(ui.Size(width.toDouble(), height.toDouble()));
     final CkCanvas ckCanvas = ckSurface.getCanvas();

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

@@ -2,80 +2,54 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import 'package:meta/meta.dart';
 import 'package:ui/src/engine.dart';
 import 'package:ui/ui.dart' as ui;
 
-/// A class that can rasterize [LayerTree]s into a given [Surface].
+/// A class that can rasterize [LayerTree]s into a given `sceneHost` element.
 class Rasterizer {
+  Rasterizer(this.sceneHost);
+
+  final DomElement sceneHost;
   final CompositorContext context = CompositorContext();
-  final List<ui.VoidCallback> _postFrameCallbacks = <ui.VoidCallback>[];
+  final RenderCanvasFactory renderCanvasFactory = RenderCanvasFactory();
+  late final HtmlViewEmbedder viewEmbedder =
+      HtmlViewEmbedder(sceneHost, this, renderCanvasFactory);
 
-  /// This is an SkSurface backed by an OffScreenCanvas. This single Surface is
-  /// used to render to many RenderCanvases to produce the rendered scene.
-  final Surface _offscreenSurface = Surface();
   ui.Size _currentFrameSize = ui.Size.zero;
 
   /// Render the given [pictures] so it is displayed by the given [canvas].
   Future<void> rasterizeToCanvas(
       RenderCanvas canvas, List<CkPicture> pictures) async {
-    await _offscreenSurface.rasterizeToCanvas(
-        _currentFrameSize, canvas, pictures);
+    await CanvasKitRenderer.instance.offscreenSurface.rasterizeToCanvas(
+      _currentFrameSize,
+      canvas,
+      pictures,
+    );
   }
 
-  /// Sets the maximum size of the Skia resource cache, in bytes.
-  void setSkiaResourceCacheMaxBytes(int bytes) =>
-      _offscreenSurface.setSkiaResourceCacheMaxBytes(bytes);
-
   /// Creates a new frame from this rasterizer's surface, draws the given
   /// [LayerTree] into it, and then submits the frame.
   void draw(LayerTree layerTree) {
-    try {
-      if (layerTree.frameSize.isEmpty) {
-        // Available drawing area is empty. Skip drawing.
-        return;
-      }
-
-      _currentFrameSize = layerTree.frameSize;
-      _offscreenSurface.acquireFrame(_currentFrameSize);
-      HtmlViewEmbedder.instance.frameSize = _currentFrameSize;
-      final CkPictureRecorder pictureRecorder = CkPictureRecorder();
-      pictureRecorder.beginRecording(ui.Offset.zero & _currentFrameSize);
-      pictureRecorder.recordingCanvas!.clear(const ui.Color(0x00000000));
-      final Frame compositorFrame = context.acquireFrame(
-          pictureRecorder.recordingCanvas!, HtmlViewEmbedder.instance);
-
-      compositorFrame.raster(layerTree, ignoreRasterCache: true);
-
-      CanvasKitRenderer.instance.sceneHost!
-          .prepend(RenderCanvasFactory.instance.baseCanvas.htmlElement);
-      rasterizeToCanvas(RenderCanvasFactory.instance.baseCanvas,
-          <CkPicture>[pictureRecorder.endRecording()]);
-
-      HtmlViewEmbedder.instance.submitFrame();
-    } finally {
-      _runPostFrameCallbacks();
+    if (layerTree.frameSize.isEmpty) {
+      // Available drawing area is empty. Skip drawing.
+      return;
     }
-  }
 
-  void addPostFrameCallback(ui.VoidCallback callback) {
-    _postFrameCallbacks.add(callback);
-  }
+    _currentFrameSize = layerTree.frameSize;
+    CanvasKitRenderer.instance.offscreenSurface.acquireFrame(_currentFrameSize);
+    viewEmbedder.frameSize = _currentFrameSize;
+    final CkPictureRecorder pictureRecorder = CkPictureRecorder();
+    pictureRecorder.beginRecording(ui.Offset.zero & _currentFrameSize);
+    pictureRecorder.recordingCanvas!.clear(const ui.Color(0x00000000));
+    final Frame compositorFrame = context.acquireFrame(
+        pictureRecorder.recordingCanvas!, viewEmbedder);
 
-  void _runPostFrameCallbacks() {
-    for (int i = 0; i < _postFrameCallbacks.length; i++) {
-      final ui.VoidCallback callback = _postFrameCallbacks[i];
-      callback();
-    }
-    for (int i = 0; i < frameReferences.length; i++) {
-      frameReferences[i].value = null;
-    }
-    frameReferences.clear();
-  }
+    compositorFrame.raster(layerTree, ignoreRasterCache: true);
+
+    sceneHost.prepend(renderCanvasFactory.baseCanvas.htmlElement);
+    rasterizeToCanvas(renderCanvasFactory.baseCanvas,
+        <CkPicture>[pictureRecorder.endRecording()]);
 
-  /// Forces the post-frame callbacks to run. Useful in tests.
-  @visibleForTesting
-  void debugRunPostFrameCallbacks() {
-    _runPostFrameCallbacks();
+    viewEmbedder.submitFrame();
   }
 }

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

@@ -14,35 +14,11 @@ class RenderCanvasFactory {
     }());
   }
 
-  /// The lazy-initialized singleton surface factory.
-  ///
-  /// [debugClear] causes this singleton to be reinitialized.
-  static RenderCanvasFactory get instance =>
-      _instance ??= RenderCanvasFactory();
-
-  /// Returns the raw (potentially uninitialized) value of the singleton.
-  ///
-  /// Useful in tests for checking the lifecycle of this class.
-  static RenderCanvasFactory? get debugUninitializedInstance => _instance;
-
-  // Override the current instance with a new one.
-  //
-  // This should only be used in tests.
-  static void debugSetInstance(RenderCanvasFactory newInstance) {
-    _instance = newInstance;
-  }
-
-  static RenderCanvasFactory? _instance;
-
   /// The base canvas to paint on. This is the default canvas which will be
   /// painted to. If there are no platform views, then this canvas will render
   /// the entire scene.
   final RenderCanvas baseCanvas = RenderCanvas();
 
-  /// A surface used specifically for `Picture.toImage` when software rendering
-  /// is supported.
-  late final Surface pictureToImageSurface = Surface();
-
   /// Canvases created by this factory which are currently in use.
   final List<RenderCanvas> _liveCanvases = <RenderCanvas>[];
 
@@ -137,6 +113,5 @@ class RenderCanvasFactory {
     baseCanvas.dispose();
     _liveCanvases.clear();
     _cache.clear();
-    _instance = null;
   }
 }

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

@@ -44,9 +44,16 @@ class CanvasKitRenderer implements Renderer {
   DomElement? _sceneHost;
   DomElement? get sceneHost => _sceneHost;
 
-  late Rasterizer rasterizer = Rasterizer();
+  /// This is an SkSurface backed by an OffScreenCanvas. This single Surface is
+  /// used to render to many RenderCanvases to produce the rendered scene.
+  final Surface offscreenSurface = Surface();
 
-  set resourceCacheMaxBytes(int bytes) => rasterizer.setSkiaResourceCacheMaxBytes(bytes);
+  set resourceCacheMaxBytes(int bytes) =>
+      offscreenSurface.setSkiaResourceCacheMaxBytes(bytes);
+
+  /// A surface used specifically for `Picture.toImage` when software rendering
+  /// is supported.
+  final Surface pictureToImageSurface = Surface();
 
   @override
   Future<void> initialize() async {
@@ -64,13 +71,7 @@ class CanvasKitRenderer implements Renderer {
 
   @override
   void reset(FlutterViewEmbedder embedder) {
-    // CanvasKit uses a static scene element that never gets replaced, so it's
-    // added eagerly during initialization here and never touched, unless the
-    // system is reset due to hot restart or in a test.
-    _sceneHost = createDomElement('flt-scene');
-    // TODO(harryterkelsen): Do this operation on the appropriate Flutter View.
-    final EngineFlutterView implicitView = EnginePlatformDispatcher.instance.implicitView!;
-    implicitView.dom.setScene(_sceneHost!);
+    // No work required.
   }
 
   @override
@@ -373,7 +374,7 @@ class CanvasKitRenderer implements Renderer {
     CkParagraphBuilder(style);
 
   @override
-  void renderScene(ui.Scene scene) {
+  void renderScene(ui.Scene scene, ui.FlutterView view) {
     // "Build finish" and "raster start" happen back-to-back because we
     // render on the same thread, so there's no overhead from hopping to
     // another thread.
@@ -384,10 +385,39 @@ class CanvasKitRenderer implements Renderer {
     frameTimingsOnBuildFinish();
     frameTimingsOnRasterStart();
 
+    // TODO(harryterkelsen): Use `FlutterViewManager.onViewsChanged` to manage
+    // the lifecycle of Rasterizers,
+    // https://github.com/flutter/flutter/issues/137073.
+    final Rasterizer rasterizer =
+        _getRasterizerForView(view as EngineFlutterView);
+
     rasterizer.draw((scene as LayerScene).layerTree);
     frameTimingsOnRasterFinish();
   }
 
+  final Map<EngineFlutterView, Rasterizer> _rasterizers =
+      <EngineFlutterView, Rasterizer>{};
+
+  Rasterizer _getRasterizerForView(EngineFlutterView view) {
+    return _rasterizers.putIfAbsent(view, () {
+      return Rasterizer(view.dom.sceneHost);
+    });
+  }
+
+  /// Returns the [Rasterizer] that has been created for the given [view].
+  /// Used in tests.
+  Rasterizer debugGetRasterizerForView(EngineFlutterView view) {
+    return _getRasterizerForView(view);
+  }
+
+  /// Resets the state of the renderer. Used in tests.
+  void debugClear() {
+    for (final Rasterizer rasterizer in _rasterizers.values) {
+      rasterizer.renderCanvasFactory.debugClear();
+      rasterizer.viewEmbedder.debugClear();
+    }
+  }
+
   @override
   void clearFragmentProgramCache() {
     _programs.clear();

lib/web_ui/lib/src/engine/html/renderer.dart

@@ -323,7 +323,7 @@ class HtmlRenderer implements Renderer {
     CanvasParagraphBuilder(style as EngineParagraphStyle);
 
   @override
-  void renderScene(ui.Scene scene) {
+  void renderScene(ui.Scene scene, ui.FlutterView view) {
     final EngineFlutterView implicitView = EnginePlatformDispatcher.instance.implicitView!;
     implicitView.dom.setScene((scene as SurfaceScene).webOnlyRootElement!);
     frameTimingsOnRasterFinish();