diff --git a/ci/licenses_golden/licenses_flutter b/ci/licenses_golden/licenses_flutter
index b6d65ab5b9cd6..cb21491ac01d9 100755
--- a/ci/licenses_golden/licenses_flutter
+++ b/ci/licenses_golden/licenses_flutter
@@ -517,6 +517,7 @@ FILE: ../../../flutter/lib/web_ui/lib/src/engine/html/shader_mask.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/html/shaders/normalized_gradient.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/html/shaders/shader.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/html/shaders/shader_builder.dart
+FILE: ../../../flutter/lib/web_ui/lib/src/engine/html/shaders/vertex_shaders.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/html/surface.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/html/surface_stats.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/html/transform.dart
diff --git a/lib/web_ui/lib/src/engine.dart b/lib/web_ui/lib/src/engine.dart
index 3c06fc0dfc200..c2f69676f6789 100644
--- a/lib/web_ui/lib/src/engine.dart
+++ b/lib/web_ui/lib/src/engine.dart
@@ -38,6 +38,12 @@ export 'engine/alarm_clock.dart';
 import 'engine/browser_detection.dart';
 export 'engine/browser_detection.dart';
 
+import 'engine/html_image_codec.dart';
+export 'engine/html_image_codec.dart';
+
+import 'engine/html/painting.dart';
+export 'engine/html/painting.dart';
+
 import 'engine/html/path_to_svg_clip.dart';
 export 'engine/html/path_to_svg_clip.dart';
 
@@ -56,9 +62,27 @@ export 'engine/html/path/path_metrics.dart';
 import 'engine/html/path/path_ref.dart';
 export 'engine/html/path/path_ref.dart';
 
+import 'engine/html/path/path_to_svg.dart';
+export 'engine/html/path/path_to_svg.dart';
+
 import 'engine/html/path/path_utils.dart';
 export 'engine/html/path/path_utils.dart';
 
+import 'engine/html/path/path_windings.dart';
+export 'engine/html/path/path_windings.dart';
+
+import 'engine/html/path/tangent.dart';
+export 'engine/html/path/tangent.dart';
+
+import 'engine/html/shaders/normalized_gradient.dart';
+export 'engine/html/shaders/normalized_gradient.dart';
+
+import 'engine/html/shaders/shader_builder.dart';
+export 'engine/html/shaders/shader_builder.dart';
+
+import 'engine/html/shaders/vertex_shaders.dart';
+export 'engine/html/shaders/vertex_shaders.dart';
+
 import 'engine/mouse_cursor.dart';
 export 'engine/mouse_cursor.dart';
 
@@ -155,6 +179,7 @@ part 'engine/color_filter.dart';
 part 'engine/dom_canvas.dart';
 part 'engine/dom_renderer.dart';
 part 'engine/engine_canvas.dart';
+part 'engine/font_change_util.dart';
 part 'engine/frame_reference.dart';
 part 'engine/html/backdrop_filter.dart';
 part 'engine/html/canvas.dart';
@@ -164,11 +189,7 @@ part 'engine/html/debug_canvas_reuse_overlay.dart';
 part 'engine/html/image_filter.dart';
 part 'engine/html/offset.dart';
 part 'engine/html/opacity.dart';
-part 'engine/html/painting.dart';
 part 'engine/html/path/path.dart';
-part 'engine/html/path/path_to_svg.dart';
-part 'engine/html/path/path_windings.dart';
-part 'engine/html/path/tangent.dart';
 part 'engine/html/picture.dart';
 part 'engine/html/platform_view.dart';
 part 'engine/html/recording_canvas.dart';
@@ -176,13 +197,10 @@ part 'engine/html/render_vertices.dart';
 part 'engine/html/scene.dart';
 part 'engine/html/scene_builder.dart';
 part 'engine/html/shader_mask.dart';
-part 'engine/html/shaders/normalized_gradient.dart';
 part 'engine/html/shaders/shader.dart';
-part 'engine/html/shaders/shader_builder.dart';
 part 'engine/html/surface.dart';
 part 'engine/html/surface_stats.dart';
 part 'engine/html/transform.dart';
-part 'engine/html_image_codec.dart';
 part 'engine/keyboard_binding.dart';
 part 'engine/keyboard.dart';
 part 'engine/key_map.dart';
@@ -219,7 +237,6 @@ part 'engine/text_editing/autofill_hint.dart';
 part 'engine/text_editing/input_type.dart';
 part 'engine/text_editing/text_capitalization.dart';
 part 'engine/text_editing/text_editing.dart';
-part 'engine/font_change_util.dart';
 part 'engine/window.dart';
 
 // The mode the app is running in.
diff --git a/lib/web_ui/lib/src/engine/bitmap_canvas.dart b/lib/web_ui/lib/src/engine/bitmap_canvas.dart
index 860cc1fb7bc07..b5af3350d356e 100644
--- a/lib/web_ui/lib/src/engine/bitmap_canvas.dart
+++ b/lib/web_ui/lib/src/engine/bitmap_canvas.dart
@@ -963,7 +963,7 @@ class BitmapCanvas extends EngineCanvas {
     // blendMode. https://github.com/flutter/flutter/issues/40096
     // Move rendering to OffscreenCanvas so that transform is preserved
     // as well.
-    assert(paint.shader == null || paint.shader is ImageShader,
+    assert(paint.shader == null || paint.shader is EngineImageShader,
         'Linear/Radial/SweepGradient not supported yet');
     final Int32List? colors = vertices._colors;
     final ui.VertexMode mode = vertices._mode;
diff --git a/lib/web_ui/lib/src/engine/dom_canvas.dart b/lib/web_ui/lib/src/engine/dom_canvas.dart
index 2b6fa31028ffd..d72a5d9fafe55 100644
--- a/lib/web_ui/lib/src/engine/dom_canvas.dart
+++ b/lib/web_ui/lib/src/engine/dom_canvas.dart
@@ -267,7 +267,7 @@ html.Element _pathToSvgElement(SurfacePath path, SurfacePaintData paint,
     sb.write('fill-rule="evenodd" ');
   }
   sb.write('d="');
-  pathToSvg(path, sb);
+  pathToSvg(path.pathRef, sb);
   sb.write('"></path>');
   sb.write('</svg>');
   return html.Element.html(sb.toString(), treeSanitizer: _NullTreeSanitizer());
diff --git a/lib/web_ui/lib/src/engine/html/painting.dart b/lib/web_ui/lib/src/engine/html/painting.dart
index 683579a49132e..09acfbe0c9713 100644
--- a/lib/web_ui/lib/src/engine/html/painting.dart
+++ b/lib/web_ui/lib/src/engine/html/painting.dart
@@ -2,7 +2,9 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-part of engine;
+import 'package:ui/ui.dart' as ui;
+
+import '../util.dart';
 
 /// Implementation of [ui.Paint] used by the HTML rendering backend.
 class SurfacePaint implements ui.Paint {
diff --git a/lib/web_ui/lib/src/engine/html/path/path_to_svg.dart b/lib/web_ui/lib/src/engine/html/path/path_to_svg.dart
index 71968c9334a7e..6bcbff9a5978d 100644
--- a/lib/web_ui/lib/src/engine/html/path/path_to_svg.dart
+++ b/lib/web_ui/lib/src/engine/html/path/path_to_svg.dart
@@ -2,13 +2,19 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-part of engine;
+import 'dart:typed_data';
+
+import 'package:ui/ui.dart' as ui;
+
+import 'conic.dart';
+import 'path_ref.dart';
+import 'path_utils.dart';
 
 /// Converts [path] to SVG path syntax to be used as "d" attribute in path
 /// element.
-void pathToSvg(SurfacePath path, StringBuffer sb,
+void pathToSvg(PathRef pathRef, StringBuffer sb,
     {double offsetX = 0, double offsetY = 0}) {
-  final PathRefIterator iter = PathRefIterator(path.pathRef);
+  final PathRefIterator iter = PathRefIterator(pathRef);
   int verb = 0;
   final Float32List outPts = Float32List(PathRefIterator.kMaxBufferSize);
   while ((verb = iter.next(outPts)) != SPath.kDoneVerb) {
diff --git a/lib/web_ui/lib/src/engine/html/path/path_windings.dart b/lib/web_ui/lib/src/engine/html/path/path_windings.dart
index 9b2b4689ea740..380110d8ac0fa 100644
--- a/lib/web_ui/lib/src/engine/html/path/path_windings.dart
+++ b/lib/web_ui/lib/src/engine/html/path/path_windings.dart
@@ -2,7 +2,14 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-part of engine;
+import 'dart:math' as math;
+import 'dart:typed_data';
+
+import 'conic.dart';
+import 'cubic.dart';
+import 'path_iterator.dart';
+import 'path_ref.dart';
+import 'path_utils.dart';
 
 /// Computes winding number and onCurveCount for a path and point.
 class PathWinding {
diff --git a/lib/web_ui/lib/src/engine/html/path/tangent.dart b/lib/web_ui/lib/src/engine/html/path/tangent.dart
index a9780e8d2c0a8..44c009b68ca50 100644
--- a/lib/web_ui/lib/src/engine/html/path/tangent.dart
+++ b/lib/web_ui/lib/src/engine/html/path/tangent.dart
@@ -2,7 +2,13 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-part of engine;
+import 'dart:typed_data';
+
+import 'package:ui/ui.dart' as ui;
+
+import 'conic.dart';
+import 'cubic.dart';
+import 'path_utils.dart';
 
 /// Computes tangent at point x,y on a line.
 void tangentLine(
diff --git a/lib/web_ui/lib/src/engine/html/path_to_svg_clip.dart b/lib/web_ui/lib/src/engine/html/path_to_svg_clip.dart
index b8e7523a61892..878ba758957da 100644
--- a/lib/web_ui/lib/src/engine/html/path_to_svg_clip.dart
+++ b/lib/web_ui/lib/src/engine/html/path_to_svg_clip.dart
@@ -43,7 +43,7 @@ String pathToSvgClipPath(ui.Path path,
     sb.write('<path transform="scale($scaleX, $scaleY)" fill="#FFFFFF" d="');
   }
 
-  pathToSvg(path as SurfacePath, sb, offsetX: offsetX, offsetY: offsetY);
+  pathToSvg((path as SurfacePath).pathRef, sb, offsetX: offsetX, offsetY: offsetY);
   sb.write('"></path></clipPath></defs></svg');
   return sb.toString();
 }
diff --git a/lib/web_ui/lib/src/engine/html/recording_canvas.dart b/lib/web_ui/lib/src/engine/html/recording_canvas.dart
index 170345266b750..861fd0c966630 100644
--- a/lib/web_ui/lib/src/engine/html/recording_canvas.dart
+++ b/lib/web_ui/lib/src/engine/html/recording_canvas.dart
@@ -321,7 +321,7 @@ class RecordingCanvas {
 
   void drawLine(ui.Offset p1, ui.Offset p2, SurfacePaint paint) {
     assert(!_recordingEnded);
-    assert(paint.shader == null || paint.shader is! ImageShader, 'ImageShader not supported yet');
+    assert(paint.shader == null || paint.shader is! EngineImageShader, 'ImageShader not supported yet');
     final double paintSpread = math.max(_getPaintSpread(paint), 1.0);
     final PaintDrawLine command = PaintDrawLine(p1, p2, paint.paintData);
     // TODO(yjbanov): This can be optimized. Currently we create a box around
@@ -345,7 +345,7 @@ class RecordingCanvas {
 
   void drawPaint(SurfacePaint paint) {
     assert(!_recordingEnded);
-    assert(paint.shader == null || paint.shader is! ImageShader, 'ImageShader not supported yet');
+    assert(paint.shader == null || paint.shader is! EngineImageShader, 'ImageShader not supported yet');
     renderStrategy.hasArbitraryPaint = true;
     _didDraw = true;
     final PaintDrawPaint command = PaintDrawPaint(paint.paintData);
@@ -355,7 +355,7 @@ class RecordingCanvas {
 
   void drawRect(ui.Rect rect, SurfacePaint paint) {
     assert(!_recordingEnded);
-    assert(paint.shader == null || paint.shader is! ImageShader, 'ImageShader not supported yet');
+    assert(paint.shader == null || paint.shader is! EngineImageShader, 'ImageShader not supported yet');
     if (paint.shader != null) {
       renderStrategy.hasArbitraryPaint = true;
     }
@@ -372,7 +372,7 @@ class RecordingCanvas {
 
   void drawRRect(ui.RRect rrect, SurfacePaint paint) {
     assert(!_recordingEnded);
-    assert(paint.shader == null || paint.shader is! ImageShader, 'ImageShader not supported yet');
+    assert(paint.shader == null || paint.shader is! EngineImageShader, 'ImageShader not supported yet');
     if (paint.shader != null || !rrect.webOnlyUniformRadii) {
       renderStrategy.hasArbitraryPaint = true;
     }
@@ -389,7 +389,7 @@ class RecordingCanvas {
 
   void drawDRRect(ui.RRect outer, ui.RRect inner, SurfacePaint paint) {
     assert(!_recordingEnded);
-    assert(paint.shader == null || paint.shader is! ImageShader, 'ImageShader not supported yet');
+    assert(paint.shader == null || paint.shader is! EngineImageShader, 'ImageShader not supported yet');
     // Check the inner bounds are contained within the outer bounds
     // see: https://cs.chromium.org/chromium/src/third_party/skia/src/core/SkCanvas.cpp?l=1787-1789
     ui.Rect innerRect = inner.outerRect;
@@ -448,7 +448,7 @@ class RecordingCanvas {
 
   void drawOval(ui.Rect rect, SurfacePaint paint) {
     assert(!_recordingEnded);
-    assert(paint.shader == null || paint.shader is! ImageShader, 'ImageShader not supported yet');
+    assert(paint.shader == null || paint.shader is! EngineImageShader, 'ImageShader not supported yet');
     renderStrategy.hasArbitraryPaint = true;
     _didDraw = true;
     final double paintSpread = _getPaintSpread(paint);
@@ -463,7 +463,7 @@ class RecordingCanvas {
 
   void drawCircle(ui.Offset c, double radius, SurfacePaint paint) {
     assert(!_recordingEnded);
-    assert(paint.shader == null || paint.shader is! ImageShader, 'ImageShader not supported yet');
+    assert(paint.shader == null || paint.shader is! EngineImageShader, 'ImageShader not supported yet');
     renderStrategy.hasArbitraryPaint = true;
     _didDraw = true;
     final double paintSpread = _getPaintSpread(paint);
@@ -481,7 +481,7 @@ class RecordingCanvas {
 
   void drawPath(ui.Path path, SurfacePaint paint) {
     assert(!_recordingEnded);
-    assert(paint.shader == null || paint.shader is! ImageShader, 'ImageShader not supported yet');
+    assert(paint.shader == null || paint.shader is! EngineImageShader, 'ImageShader not supported yet');
     if (paint.shader == null) {
       // For Rect/RoundedRect paths use drawRect/drawRRect code paths for
       // DomCanvas optimization.
@@ -518,7 +518,7 @@ class RecordingCanvas {
 
   void drawImage(ui.Image image, ui.Offset offset, SurfacePaint paint) {
     assert(!_recordingEnded);
-    assert(paint.shader == null || paint.shader is! ImageShader, 'ImageShader not supported yet');
+    assert(paint.shader == null || paint.shader is! EngineImageShader, 'ImageShader not supported yet');
     renderStrategy.hasArbitraryPaint = true;
     renderStrategy.hasImageElements = true;
     _didDraw = true;
@@ -556,7 +556,7 @@ class RecordingCanvas {
   void drawImageRect(
       ui.Image image, ui.Rect src, ui.Rect dst, SurfacePaint paint) {
     assert(!_recordingEnded);
-    assert(paint.shader == null || paint.shader is! ImageShader, 'ImageShader not supported yet');
+    assert(paint.shader == null || paint.shader is! EngineImageShader, 'ImageShader not supported yet');
     renderStrategy.hasArbitraryPaint = true;
     renderStrategy.hasImageElements = true;
     _didDraw = true;
diff --git a/lib/web_ui/lib/src/engine/html/render_vertices.dart b/lib/web_ui/lib/src/engine/html/render_vertices.dart
index 0965b43cd67bf..7e4acb35643d1 100644
--- a/lib/web_ui/lib/src/engine/html/render_vertices.dart
+++ b/lib/web_ui/lib/src/engine/html/render_vertices.dart
@@ -72,10 +72,10 @@ abstract class _GlRenderer {
       ui.BlendMode blendMode,
       SurfacePaintData paint);
 
-  Object? drawRect(ui.Rect targetRect, _GlContext gl, _GlProgram glProgram,
+  Object? drawRect(ui.Rect targetRect, GlContext gl, GlProgram glProgram,
       NormalizedGradient gradient, int widthInPixels, int heightInPixels);
 
-  String drawRectToImageUrl(ui.Rect targetRect, _GlContext gl, _GlProgram glProgram,
+  String drawRectToImageUrl(ui.Rect targetRect, GlContext gl, GlProgram glProgram,
       NormalizedGradient gradient, int widthInPixels, int heightInPixels);
 
   void drawHairline(html.CanvasRenderingContext2D? _ctx, Float32List positions);
@@ -88,10 +88,9 @@ abstract class _GlRenderer {
 class _WebGlRenderer implements _GlRenderer {
 
   /// Cached vertex shader reused by [drawVertices] and gradients.
-  static String? _baseVertexShader;
   static String? _textureVertexShader;
 
-  static void _setupVertexTransforms(_GlContext gl, _GlProgram glProgram,
+  static void _setupVertexTransforms(GlContext gl, GlProgram glProgram,
       double offsetX, double offsetY, double widthInPixels,
       double heightInPixels, Matrix4 transform) {
     Object transformUniform = gl.getUniformLocation(glProgram.program,
@@ -109,13 +108,13 @@ class _WebGlRenderer implements _GlRenderer {
     gl.setUniform4f(shift, -1, 1, 0, 0);
   }
 
-  static void _setupTextureScalar(_GlContext gl, _GlProgram glProgram,
+  static void _setupTextureScalar(GlContext gl, GlProgram glProgram,
       double sx, double sy) {
     Object scalar = gl.getUniformLocation(glProgram.program, 'u_texscale');
     gl.setUniform2f(scalar, sx, sy);
   }
 
-  static dynamic _tileModeToGlWrapping(_GlContext gl, ui.TileMode tileMode) {
+  static dynamic _tileModeToGlWrapping(GlContext gl, ui.TileMode tileMode) {
     switch(tileMode) {
       case ui.TileMode.clamp:
         return gl.kClampToEdge;
@@ -171,19 +170,19 @@ class _WebGlRenderer implements _GlRenderer {
 
     final bool isWebGl2 = webGLVersion == WebGLVersion.webgl2;
 
-    final ImageShader? imageShader = paint.shader == null ? null
-        : paint.shader as ImageShader;
+    final EngineImageShader? imageShader = paint.shader == null ? null
+        : paint.shader as EngineImageShader;
 
     final String vertexShader = imageShader == null
-        ? writeBaseVertexShader() : writeTextureVertexShader();
+        ? VertexShaders.writeBaseVertexShader() : writeTextureVertexShader();
     final String fragmentShader = imageShader == null
         ? _writeVerticesFragmentShader()
         : _writeVerticesTextureFragmentShader(isWebGl2,
         imageShader.tileModeX, imageShader.tileModeY);
 
-    _GlContext gl = _GlContextCache.createGlContext(widthInPixels, heightInPixels)!;
+    GlContext gl = _GlContextCache.createGlContext(widthInPixels, heightInPixels)!;
 
-    _GlProgram glProgram = gl.cacheProgram(vertexShader, fragmentShader);
+    GlProgram glProgram = gl.cacheProgram(vertexShader, fragmentShader);
     gl.useProgram(glProgram);
 
     Object? positionAttributeLocation =
@@ -332,7 +331,7 @@ class _WebGlRenderer implements _GlRenderer {
   ///
   /// Browsers that support OffscreenCanvas and the transferToImageBitmap api
   /// will return ImageBitmap, otherwise will return CanvasElement.
-  Object? drawRect(ui.Rect targetRect, _GlContext gl, _GlProgram glProgram,
+  Object? drawRect(ui.Rect targetRect, GlContext gl, GlProgram glProgram,
       NormalizedGradient gradient, int widthInPixels, int heightInPixels) {
     drawRectToGl(targetRect, gl, glProgram, gradient, widthInPixels, heightInPixels);
     Object? image = gl.readPatternData();
@@ -343,7 +342,7 @@ class _WebGlRenderer implements _GlRenderer {
 
   /// Renders a rectangle using given program into an image resource and returns
   /// url.
-  String drawRectToImageUrl(ui.Rect targetRect, _GlContext gl, _GlProgram glProgram,
+  String drawRectToImageUrl(ui.Rect targetRect, GlContext gl, GlProgram glProgram,
       NormalizedGradient gradient, int widthInPixels, int heightInPixels) {
     drawRectToGl(targetRect, gl, glProgram, gradient, widthInPixels, heightInPixels);
     final String imageUrl = gl.toImageUrl();
@@ -353,10 +352,10 @@ class _WebGlRenderer implements _GlRenderer {
     return imageUrl;
   }
 
-  /// Renders a rectangle using given program into [_GlContext].
+  /// Renders a rectangle using given program into [GlContext].
   ///
   /// Caller has to cleanup gl array and element array buffers.
-  void drawRectToGl(ui.Rect targetRect, _GlContext gl, _GlProgram glProgram,
+  void drawRectToGl(ui.Rect targetRect, GlContext gl, GlProgram glProgram,
       NormalizedGradient gradient, int widthInPixels, int heightInPixels) {
     // Setup rectangle coordinates.
     final double left = targetRect.left;
@@ -425,38 +424,7 @@ class _WebGlRenderer implements _GlRenderer {
     gl.drawElements(gl.kTriangles, _vertexIndicesForRect.length, gl.kUnsignedShort);
   }
 
-  /// Creates a vertex shader transforms pixel space [Vertices.positions] to
-  /// final clipSpace -1..1 coordinates with inverted Y Axis.
-  ///     #version 300 es
-  ///     layout (location=0) in vec4 position;
-  ///     layout (location=1) in vec4 color;
-  ///     uniform mat4 u_ctransform;
-  ///     uniform vec4 u_scale;
-  ///     uniform vec4 u_shift;
-  ///     out vec4 vColor;
-  ///     void main() {
-  ///       gl_Position = ((u_ctransform * position) * u_scale) + u_shift;
-  ///       v_color = color.zyxw;
-  ///     }
-  static String writeBaseVertexShader() {
-    if (_baseVertexShader == null) {
-      ShaderBuilder builder = ShaderBuilder(webGLVersion);
-      builder.addIn(ShaderType.kVec4, name: 'position');
-      builder.addIn(ShaderType.kVec4, name: 'color');
-      builder.addUniform(ShaderType.kMat4, name: 'u_ctransform');
-      builder.addUniform(ShaderType.kVec4, name: 'u_scale');
-      builder.addUniform(ShaderType.kVec4, name: 'u_shift');
-      builder.addOut(ShaderType.kVec4, name: 'v_color');
-      ShaderMethod method = builder.addMethod('main');
-      method.addStatement(
-          'gl_Position = ((u_ctransform * position) * u_scale) + u_shift;');
-      method.addStatement('v_color = color.zyxw;');
-      _baseVertexShader = builder.build();
-    }
-    return _baseVertexShader!;
-  }
-
-  static String writeTextureVertexShader() {
+   static String writeTextureVertexShader() {
     if (_textureVertexShader == null) {
       ShaderBuilder builder = ShaderBuilder(webGLVersion);
       builder.addIn(ShaderType.kVec4, name: 'position');
@@ -647,13 +615,13 @@ Float32List _convertVertexPositions(ui.VertexMode mode, Float32List positions) {
 }
 
 /// Compiled and cached gl program.
-class _GlProgram {
+class GlProgram {
   final Object program;
-  _GlProgram(this.program);
+  GlProgram(this.program);
 }
 
 /// JS Interop helper for webgl apis.
-class _GlContext {
+class GlContext {
   final Object glContext;
   final bool isOffscreen;
   dynamic _kCompileStatus;
@@ -680,20 +648,20 @@ class _GlContext {
   Object? _canvas;
   int? _widthInPixels;
   int? _heightInPixels;
-  static late Map<String, _GlProgram?> _programCache;
+  static late Map<String, GlProgram?> _programCache;
 
-  _GlContext.fromOffscreenCanvas(html.OffscreenCanvas canvas)
+  GlContext.fromOffscreenCanvas(html.OffscreenCanvas canvas)
       : glContext = canvas.getContext('webgl2', <String, dynamic>{'premultipliedAlpha': false})!,
         isOffscreen = true {
-    _programCache = <String, _GlProgram?>{};
+    _programCache = <String, GlProgram?>{};
     _canvas = canvas;
   }
 
-  _GlContext.fromCanvas(html.CanvasElement canvas, bool useWebGl1)
+  GlContext.fromCanvas(html.CanvasElement canvas, bool useWebGl1)
       : glContext = canvas.getContext(useWebGl1 ? 'webgl' : 'webgl2',
       <String, dynamic>{'premultipliedAlpha': false})!,
         isOffscreen = false {
-    _programCache = <String, _GlProgram?>{};
+    _programCache = <String, GlProgram?>{};
     _canvas = canvas;
   }
 
@@ -712,10 +680,10 @@ class _GlContext {
           left, top, _widthInPixels, _heightInPixels]);
   }
 
-  _GlProgram cacheProgram(
+  GlProgram cacheProgram(
       String vertexShaderSource, String fragmentShaderSource) {
     String cacheKey = '$vertexShaderSource||$fragmentShaderSource';
-    _GlProgram? cachedProgram = _programCache[cacheKey];
+    GlProgram? cachedProgram = _programCache[cacheKey];
     if (cachedProgram == null) {
       // Create and compile shaders.
       Object vertexShader = compileShader('VERTEX_SHADER', vertexShaderSource);
@@ -726,7 +694,7 @@ class _GlContext {
       attachShader(program, vertexShader);
       attachShader(program, fragmentShader);
       linkProgram(program);
-      cachedProgram = _GlProgram(program);
+      cachedProgram = GlProgram(program);
       _programCache[cacheKey] = cachedProgram;
     }
     return cachedProgram;
@@ -762,7 +730,7 @@ class _GlContext {
     }
   }
 
-  void useProgram(_GlProgram program) {
+  void useProgram(GlProgram program) {
     js_util.callMethod(glContext, 'useProgram', <dynamic>[program.program]);
   }
 
@@ -1124,7 +1092,7 @@ class _OffScreenCanvas {
 class _GlContextCache {
   static int _maxPixelWidth = 0;
   static int _maxPixelHeight = 0;
-  static _GlContext? _cachedContext;
+  static GlContext? _cachedContext;
   static _OffScreenCanvas? _offScreenCanvas;
 
   static void dispose() {
@@ -1134,7 +1102,7 @@ class _GlContextCache {
     _offScreenCanvas?.dispose();
   }
 
-  static _GlContext? createGlContext(int widthInPixels, int heightInPixels) {
+  static GlContext? createGlContext(int widthInPixels, int heightInPixels) {
     if (widthInPixels > _maxPixelWidth || heightInPixels > _maxPixelHeight) {
       _cachedContext?.dispose();
       _cachedContext = null;
@@ -1145,9 +1113,9 @@ class _GlContextCache {
     _offScreenCanvas ??= _OffScreenCanvas(widthInPixels, heightInPixels);
     if (_OffScreenCanvas.supported) {
       _cachedContext ??=
-          _GlContext.fromOffscreenCanvas(_offScreenCanvas!._canvas!);
+          GlContext.fromOffscreenCanvas(_offScreenCanvas!._canvas!);
     } else {
-      _cachedContext ??= _GlContext.fromCanvas(_offScreenCanvas!._glCanvas!,
+      _cachedContext ??= GlContext.fromCanvas(_offScreenCanvas!._glCanvas!,
           webGLVersion == WebGLVersion.webgl1);
     }
     _cachedContext!.setViewportSize(widthInPixels, heightInPixels);
diff --git a/lib/web_ui/lib/src/engine/html/shaders/normalized_gradient.dart b/lib/web_ui/lib/src/engine/html/shaders/normalized_gradient.dart
index f11c1f5652bcd..5afe9fe0dade9 100644
--- a/lib/web_ui/lib/src/engine/html/shaders/normalized_gradient.dart
+++ b/lib/web_ui/lib/src/engine/html/shaders/normalized_gradient.dart
@@ -2,7 +2,12 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-part of engine;
+import 'dart:typed_data';
+
+import 'package:ui/src/engine.dart';
+
+import 'package:ui/ui.dart' as ui;
+import 'shader_builder.dart';
 
 /// Converts colors and stops to typed array of bias, scale and threshold to use
 /// in shaders.
@@ -95,7 +100,7 @@ class NormalizedGradient {
   }
 
   /// Sets uniforms for threshold, bias and scale for program.
-  void setupUniforms(_GlContext gl, _GlProgram glProgram) {
+  void setupUniforms(GlContext gl, GlProgram glProgram) {
     for (int i = 0; i < thresholdCount; i++) {
       Object biasId = gl.getUniformLocation(glProgram.program, 'bias_$i');
       gl.setUniform4f(biasId, _bias[i * 4], _bias[i * 4 + 1], _bias[i * 4 + 2], _bias[i * 4 + 3]);
@@ -125,7 +130,7 @@ class NormalizedGradient {
 /// uniforms.
 ///
 /// Bias and scale data are vec4 uniforms that hold color data.
-void _writeUnrolledBinarySearch(ShaderMethod method, int start, int end,
+void writeUnrolledBinarySearch(ShaderMethod method, int start, int end,
     {required String probe,
       required String sourcePrefix, required String biasName,
       required String scaleName}) {
@@ -141,13 +146,13 @@ void _writeUnrolledBinarySearch(ShaderMethod method, int start, int end,
     thresholdAtMid += '.${_vectorComponentIndexToName((mid + 1) % 4)}';
     method.addStatement('if ($probe < $thresholdAtMid) {');
     method.indent();
-    _writeUnrolledBinarySearch(method, start, mid,
+    writeUnrolledBinarySearch(method, start, mid,
         probe: probe, sourcePrefix: sourcePrefix, biasName: biasName,
         scaleName: scaleName);
     method.unindent();
     method.addStatement('} else {');
     method.indent();
-    _writeUnrolledBinarySearch(method, mid + 1, end,
+    writeUnrolledBinarySearch(method, mid + 1, end,
         probe: probe, sourcePrefix: sourcePrefix, biasName: biasName,
         scaleName: scaleName);
     method.unindent();
diff --git a/lib/web_ui/lib/src/engine/html/shaders/shader.dart b/lib/web_ui/lib/src/engine/html/shaders/shader.dart
index 1a75e1cdfc855..a8e929776f76c 100644
--- a/lib/web_ui/lib/src/engine/html/shaders/shader.dart
+++ b/lib/web_ui/lib/src/engine/html/shaders/shader.dart
@@ -42,17 +42,17 @@ class GradientSweep extends EngineGradient {
     // Render gradient into a bitmap and create a canvas pattern.
     _OffScreenCanvas offScreenCanvas =
         _OffScreenCanvas(widthInPixels, heightInPixels);
-    _GlContext gl = _OffScreenCanvas.supported
-        ? _GlContext.fromOffscreenCanvas(offScreenCanvas._canvas!)
-        : _GlContext.fromCanvas(
+    GlContext gl = _OffScreenCanvas.supported
+        ? GlContext.fromOffscreenCanvas(offScreenCanvas._canvas!)
+        : GlContext.fromCanvas(
             offScreenCanvas._glCanvas!, webGLVersion == WebGLVersion.webgl1);
     gl.setViewportSize(widthInPixels, heightInPixels);
 
     NormalizedGradient normalizedGradient =
         NormalizedGradient(colors, stops: colorStops);
 
-    _GlProgram glProgram = gl.cacheProgram(
-        _WebGlRenderer.writeBaseVertexShader(),
+    GlProgram glProgram = gl.cacheProgram(
+        VertexShaders.writeBaseVertexShader(),
         _createSweepFragmentShader(normalizedGradient, tileMode));
     gl.useProgram(glProgram);
 
@@ -135,8 +135,8 @@ class GradientSweep extends EngineGradient {
   final Float32List? matrix4;
 }
 
-class ImageShader implements ui.ImageShader {
-  ImageShader(ui.Image image, this.tileModeX, this.tileModeY, this.matrix4, this.filterQuality)
+class EngineImageShader implements ui.ImageShader {
+  EngineImageShader(ui.Image image, this.tileModeX, this.tileModeY, this.matrix4, this.filterQuality)
       : _image = image as HtmlImage;
 
   final ui.TileMode tileModeX;
@@ -225,17 +225,17 @@ class GradientLinear extends EngineGradient {
     // Render gradient into a bitmap and create a canvas pattern.
     _OffScreenCanvas offScreenCanvas =
         _OffScreenCanvas(widthInPixels, heightInPixels);
-    _GlContext gl = _OffScreenCanvas.supported
-        ? _GlContext.fromOffscreenCanvas(offScreenCanvas._canvas!)
-        : _GlContext.fromCanvas(
+    GlContext gl = _OffScreenCanvas.supported
+        ? GlContext.fromOffscreenCanvas(offScreenCanvas._canvas!)
+        : GlContext.fromCanvas(
             offScreenCanvas._glCanvas!, webGLVersion == WebGLVersion.webgl1);
     gl.setViewportSize(widthInPixels, heightInPixels);
 
     NormalizedGradient normalizedGradient =
         NormalizedGradient(colors, stops: colorStops);
 
-    _GlProgram glProgram = gl.cacheProgram(
-        _WebGlRenderer.writeBaseVertexShader(),
+    GlProgram glProgram = gl.cacheProgram(
+        VertexShaders.writeBaseVertexShader(),
         _createLinearFragmentShader(normalizedGradient, tileMode));
     gl.useProgram(glProgram);
 
@@ -438,7 +438,7 @@ String _writeSharedGradientShader(ShaderBuilder builder, ShaderMethod method,
       probeName = 'tiled_st';
       break;
   }
-  _writeUnrolledBinarySearch(method, 0, gradient.thresholdCount - 1,
+  writeUnrolledBinarySearch(method, 0, gradient.thresholdCount - 1,
       probe: probeName,
       sourcePrefix: 'threshold',
       biasName: 'bias',
@@ -496,17 +496,17 @@ class GradientRadial extends EngineGradient {
     // Render gradient into a bitmap and create a canvas pattern.
     _OffScreenCanvas offScreenCanvas =
         _OffScreenCanvas(widthInPixels, heightInPixels);
-    _GlContext gl = _OffScreenCanvas.supported
-        ? _GlContext.fromOffscreenCanvas(offScreenCanvas._canvas!)
-        : _GlContext.fromCanvas(
+    GlContext gl = _OffScreenCanvas.supported
+        ? GlContext.fromOffscreenCanvas(offScreenCanvas._canvas!)
+        : GlContext.fromCanvas(
             offScreenCanvas._glCanvas!, webGLVersion == WebGLVersion.webgl1);
     gl.setViewportSize(widthInPixels, heightInPixels);
 
     NormalizedGradient normalizedGradient =
         NormalizedGradient(colors, stops: colorStops);
 
-    _GlProgram glProgram = gl.cacheProgram(
-        _WebGlRenderer.writeBaseVertexShader(),
+    GlProgram glProgram = gl.cacheProgram(
+        VertexShaders.writeBaseVertexShader(),
         _createRadialFragmentShader(
             normalizedGradient, shaderBounds, tileMode));
     gl.useProgram(glProgram);
diff --git a/lib/web_ui/lib/src/engine/html/shaders/shader_builder.dart b/lib/web_ui/lib/src/engine/html/shaders/shader_builder.dart
index 41b1695c04f4a..ce584dab49d34 100644
--- a/lib/web_ui/lib/src/engine/html/shaders/shader_builder.dart
+++ b/lib/web_ui/lib/src/engine/html/shaders/shader_builder.dart
@@ -2,7 +2,10 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-part of engine;
+import 'package:ui/ui.dart' as ui;
+
+import '../../browser_detection.dart';
+import '../../util.dart';
 
 /// Creates shader program for target webgl version.
 ///
diff --git a/lib/web_ui/lib/src/engine/html/shaders/vertex_shaders.dart b/lib/web_ui/lib/src/engine/html/shaders/vertex_shaders.dart
new file mode 100644
index 0000000000000..84bd37f786d99
--- /dev/null
+++ b/lib/web_ui/lib/src/engine/html/shaders/vertex_shaders.dart
@@ -0,0 +1,42 @@
+// Copyright 2013 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'shader_builder.dart';
+import '../../browser_detection.dart';
+
+/// Provides common shaders used for gradients and drawVertices APIs.
+class VertexShaders {
+  static String? _baseVertexShader;
+
+  /// Creates a vertex shader transforms pixel space [Vertices.positions] to
+  /// final clipSpace -1..1 coordinates with inverted Y Axis.
+  ///     #version 300 es
+  ///     layout (location=0) in vec4 position;
+  ///     layout (location=1) in vec4 color;
+  ///     uniform mat4 u_ctransform;
+  ///     uniform vec4 u_scale;
+  ///     uniform vec4 u_shift;
+  ///     out vec4 vColor;
+  ///     void main() {
+  ///       gl_Position = ((u_ctransform * position) * u_scale) + u_shift;
+  ///       v_color = color.zyxw;
+  ///     }
+  static String writeBaseVertexShader() {
+    if (_baseVertexShader == null) {
+      ShaderBuilder builder = ShaderBuilder(webGLVersion);
+      builder.addIn(ShaderType.kVec4, name: 'position');
+      builder.addIn(ShaderType.kVec4, name: 'color');
+      builder.addUniform(ShaderType.kMat4, name: 'u_ctransform');
+      builder.addUniform(ShaderType.kVec4, name: 'u_scale');
+      builder.addUniform(ShaderType.kVec4, name: 'u_shift');
+      builder.addOut(ShaderType.kVec4, name: 'v_color');
+      ShaderMethod method = builder.addMethod('main');
+      method.addStatement(
+          'gl_Position = ((u_ctransform * position) * u_scale) + u_shift;');
+      method.addStatement('v_color = color.zyxw;');
+      _baseVertexShader = builder.build();
+    }
+    return _baseVertexShader!;
+  }
+}
diff --git a/lib/web_ui/lib/src/engine/html_image_codec.dart b/lib/web_ui/lib/src/engine/html_image_codec.dart
index a691f52c6e4d5..8dfe8fb75f956 100644
--- a/lib/web_ui/lib/src/engine/html_image_codec.dart
+++ b/lib/web_ui/lib/src/engine/html_image_codec.dart
@@ -2,7 +2,15 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-part of engine;
+import 'dart:async';
+import 'dart:html' as html;
+import 'dart:typed_data';
+import 'dart:js_util' as js_util;
+
+import 'package:ui/ui.dart' as ui;
+
+import 'browser_detection.dart';
+import 'util.dart';
 
 final bool _supportsDecode = js_util.getProperty(
         js_util.getProperty(
diff --git a/lib/web_ui/lib/src/ui/painting.dart b/lib/web_ui/lib/src/ui/painting.dart
index 87201667e2ff6..94a1214156e31 100644
--- a/lib/web_ui/lib/src/ui/painting.dart
+++ b/lib/web_ui/lib/src/ui/painting.dart
@@ -695,7 +695,7 @@ class ImageShader extends Shader {
     FilterQuality? filterQuality,
   }) => engine.useCanvasKit
       ? engine.CkImageShader(image, tmx, tmy, matrix4, filterQuality)
-      : engine.ImageShader(image, tmx, tmy, matrix4, filterQuality);
+      : engine.EngineImageShader(image, tmx, tmy, matrix4, filterQuality);
 }
 
 class ImmutableBuffer {
diff --git a/lib/web_ui/test/engine/image/html_image_codec_test.dart b/lib/web_ui/test/engine/image/html_image_codec_test.dart
index 8723bb00d7552..6c50233c9f72e 100644
--- a/lib/web_ui/test/engine/image/html_image_codec_test.dart
+++ b/lib/web_ui/test/engine/image/html_image_codec_test.dart
@@ -9,7 +9,7 @@ import 'dart:typed_data';
 import 'package:test/bootstrap/browser.dart';
 import 'package:test/test.dart';
 import 'package:ui/ui.dart' as ui;
-import 'package:ui/src/engine.dart';
+import 'package:ui/src/engine/html_image_codec.dart';
 
 void main() {
   internalBootstrapBrowserTest(() => testMain);
diff --git a/lib/web_ui/test/engine/surface/scene_builder_test.dart b/lib/web_ui/test/engine/surface/scene_builder_test.dart
index c964d4b22d627..04d692c4765ec 100644
--- a/lib/web_ui/test/engine/surface/scene_builder_test.dart
+++ b/lib/web_ui/test/engine/surface/scene_builder_test.dart
@@ -12,6 +12,7 @@ import 'dart:js_util' as js_util;
 import 'package:test/bootstrap/browser.dart';
 import 'package:test/test.dart';
 import 'package:ui/src/engine.dart';
+import 'package:ui/src/engine/html_image_codec.dart';
 import 'package:ui/ui.dart' hide window;
 
 
diff --git a/lib/web_ui/test/engine/surface/shaders/normalized_gradient_test.dart b/lib/web_ui/test/engine/surface/shaders/normalized_gradient_test.dart
index b413bb65a220f..dfe0c620de90c 100644
--- a/lib/web_ui/test/engine/surface/shaders/normalized_gradient_test.dart
+++ b/lib/web_ui/test/engine/surface/shaders/normalized_gradient_test.dart
@@ -5,7 +5,7 @@
 // @dart = 2.6
 import 'package:test/bootstrap/browser.dart';
 import 'package:test/test.dart';
-import 'package:ui/src/engine.dart';
+import 'package:ui/src/engine/html/shaders/normalized_gradient.dart';
 import 'package:ui/ui.dart' as ui hide window;
 
 void main() {
diff --git a/lib/web_ui/test/engine/surface/shaders/shader_builder_test.dart b/lib/web_ui/test/engine/surface/shaders/shader_builder_test.dart
index 336cf4f8d8890..df67ce9e7962f 100644
--- a/lib/web_ui/test/engine/surface/shaders/shader_builder_test.dart
+++ b/lib/web_ui/test/engine/surface/shaders/shader_builder_test.dart
@@ -6,6 +6,7 @@
 import 'package:test/bootstrap/browser.dart';
 import 'package:test/test.dart';
 import 'package:ui/src/engine.dart';
+import 'package:ui/src/engine/html/shaders/shader_builder.dart';
 import 'package:ui/ui.dart' hide window;
 
 void main() {
diff --git a/lib/web_ui/test/golden_tests/engine/draw_vertices_golden_test.dart b/lib/web_ui/test/golden_tests/engine/draw_vertices_golden_test.dart
index acd6584a86004..273d068ed1489 100644
--- a/lib/web_ui/test/golden_tests/engine/draw_vertices_golden_test.dart
+++ b/lib/web_ui/test/golden_tests/engine/draw_vertices_golden_test.dart
@@ -366,7 +366,7 @@ void testMain() async {
     final HtmlImage img = await createTestImage();
     final SurfacePaint paint = SurfacePaint();
 
-    final ImageShader imgShader = ImageShader(img, tileMode, tileMode,
+    final EngineImageShader imgShader = EngineImageShader(img, tileMode, tileMode,
         Float64List.fromList(matrix4), FilterQuality.high);
 
     paint.shader = imgShader;
diff --git a/lib/web_ui/test/golden_tests/engine/path_to_svg_golden_test.dart b/lib/web_ui/test/golden_tests/engine/path_to_svg_golden_test.dart
index c405c0289c10c..ba3537618231d 100644
--- a/lib/web_ui/test/golden_tests/engine/path_to_svg_golden_test.dart
+++ b/lib/web_ui/test/golden_tests/engine/path_to_svg_golden_test.dart
@@ -205,7 +205,7 @@ html.Element pathToSvgElement(Path path, Paint paint,
     sb.write('fill="${colorToCssString(paint.color)}" ');
   }
   sb.write('d="');
-  pathToSvg(path, sb); // This is what we're testing!
+  pathToSvg((path as SurfacePath).pathRef, sb); // This is what we're testing!
   sb.write('"></path>');
   sb.write('</svg>');
   final html.Element svgElement =