Introduce FlattenedPointBuilder and rendering optimizations

Author: JimBobSquarePants

samples/WebGPUWindowDemo/Program.cs

@@ -43,6 +43,8 @@ private sealed class DemoApp
     {
         private const int BallCount = 1000;
         private static readonly TimeSpan FpsUpdateInterval = TimeSpan.FromSeconds(1);
+        private static readonly Brush BackgroundBrush = Brushes.Solid(Color.FromPixel(new Bgra32(30, 30, 40, 255)));
+        private static readonly Brush TextBrush = Brushes.Solid(Color.FromPixel(new Bgra32(70, 70, 100, 255)));
 
         private readonly WebGPUWindow<Bgra32> window;
         private readonly Random rng = new(42);
@@ -151,13 +153,12 @@ private void OnRender(WebGPUSurfaceFrame<Bgra32> frame)
         {
             DrawingCanvas canvas = frame.Canvas;
             Rectangle bounds = canvas.Bounds;
-            canvas.Fill(Brushes.Solid(Color.FromPixel(new Bgra32(30, 30, 40, 255))));
+            canvas.Fill(BackgroundBrush);
 
             for (int i = 0; i < this.balls.Length; i++)
             {
                 ref Ball ball = ref this.balls[i];
-                EllipsePolygon ellipse = new(ball.X, ball.Y, ball.Radius);
-                canvas.Fill(Brushes.Solid(ball.Color), ellipse);
+                ball.Draw(canvas);
             }
 
             this.DrawScrollingText(canvas, bounds.Width, bounds.Height);
@@ -193,7 +194,6 @@ private void DrawScrollingText(DrawingCanvas canvas, int width, int height)
 
             Matrix3x2 translation = Matrix3x2.CreateTranslation(0, y);
             RectangleF viewport = new(0, 0, width, height);
-            Brush textBrush = Brushes.Solid(Color.FromPixel(new Bgra32(70, 70, 100, 255)));
             DrawingOptions translatedOptions = new()
             {
                 Transform = new Matrix4x4(translation),
@@ -215,7 +215,7 @@ private void DrawScrollingText(DrawingCanvas canvas, int width, int height)
                     continue;
                 }
 
-                canvas.Fill(textBrush, path);
+                canvas.Fill(TextBrush, path);
             }
 
             canvas.Restore();
@@ -232,7 +232,27 @@ private struct Ball
         public float VelocityX;
         public float VelocityY;
         public float Radius;
-        public Color Color;
+        private readonly Brush brush;
+        private readonly EllipsePolygon shape;
+        private readonly DrawingOptions drawingOptions;
+
+        private Ball(
+            float x,
+            float y,
+            float velocityX,
+            float velocityY,
+            float radius,
+            Brush brush)
+        {
+            this.X = x;
+            this.Y = y;
+            this.VelocityX = velocityX;
+            this.VelocityY = velocityY;
+            this.Radius = radius;
+            this.brush = brush;
+            this.shape = new EllipsePolygon(0, 0, radius);
+            this.drawingOptions = new DrawingOptions();
+        }
 
         /// <summary>
         /// Creates a random ball that fits within the current framebuffer bounds.
@@ -244,19 +264,36 @@ private struct Ball
         public static Ball CreateRandom(Random rng, int width, int height)
         {
             float radius = 20F + (rng.NextSingle() * 40F);
-            return new Ball
-            {
-                X = radius + (rng.NextSingle() * (width - (2 * radius))),
-                Y = radius + (rng.NextSingle() * (height - (2 * radius))),
-                VelocityX = (100F + (rng.NextSingle() * 200F)) * (rng.Next(2) == 0 ? -1 : 1),
-                VelocityY = (100F + (rng.NextSingle() * 200F)) * (rng.Next(2) == 0 ? -1 : 1),
-                Radius = radius,
-                Color = Color.FromPixel(new Bgra32(
-                    (byte)(80 + rng.Next(176)),
-                    (byte)(80 + rng.Next(176)),
-                    (byte)(80 + rng.Next(176)),
-                    200)),
-            };
+            Color color = Color.FromPixel(new Bgra32(
+                (byte)(80 + rng.Next(176)),
+                (byte)(80 + rng.Next(176)),
+                (byte)(80 + rng.Next(176)),
+                200));
+
+            return new Ball(
+                radius + (rng.NextSingle() * (width - (2 * radius))),
+                radius + (rng.NextSingle() * (height - (2 * radius))),
+                (100F + (rng.NextSingle() * 200F)) * (rng.Next(2) == 0 ? -1 : 1),
+                (100F + (rng.NextSingle() * 200F)) * (rng.Next(2) == 0 ? -1 : 1),
+                radius,
+                Brushes.Solid(color));
+        }
+
+        /// <summary>
+        /// Draws the retained ball shape at its current animated location.
+        /// </summary>
+        /// <remarks>
+        /// The ellipse is centered at the origin and moved through per-ball drawing options so the path geometry
+        /// remains cached across frames without allocating a new shape each render.
+        /// </remarks>
+        /// <param name="canvas">The destination canvas for the current frame.</param>
+        public void Draw(DrawingCanvas canvas)
+        {
+            this.drawingOptions.Transform = Matrix4x4.CreateTranslation(this.X, this.Y, 0);
+
+            canvas.Save(this.drawingOptions);
+            canvas.Fill(this.brush, this.shape);
+            canvas.Restore();
         }
 
         /// <summary>

src/ImageSharp.Drawing.WebGPU/WebGPUSceneEncoder.cs

@@ -163,8 +163,10 @@ internal SupportedSubsetSceneEncoding(
             this.DrawData = new OwnedStream<uint>(allocator, Math.Max(commandCount, 16));
             this.Transforms = new OwnedStream<uint>(allocator, 8);
             this.Styles = new OwnedStream<uint>(allocator, Math.Max(commandCount * StyleWordCount, 16));
-            this.GradientPixels = new OwnedStream<uint>(allocator, Math.Max(commandCount * GradientWidth, GradientWidth));
-            this.PathGradientData = new OwnedStream<uint>(allocator, Math.Max(commandCount * PathGradientHeaderWordCount, 16));
+
+            // Gradient payloads are sparse in common scenes, so grow these only when a gradient brush is encoded.
+            this.GradientPixels = new OwnedStream<uint>(allocator, 16);
+            this.PathGradientData = new OwnedStream<uint>(allocator, 16);
             this.Images = [];
             this.FillCount = 0;
             this.PathCount = 0;

src/ImageSharp.Drawing/ArcLineSegment.cs

@@ -3,7 +3,6 @@
 
 using System.Numerics;
 using System.Runtime.CompilerServices;
-using System.Runtime.InteropServices;
 
 namespace SixLabors.ImageSharp.Drawing;
 
@@ -219,13 +218,16 @@ private static Vector2 EllipticArcPoint(Vector2 c, Vector2 r, float xAngle, floa
 
     private static PointF[] EllipticArcToBezierCurve(Vector2 from, Vector2 center, Vector2 radius, float xAngle, float startAngle, float sweepAngle)
     {
-        List<PointF> points = [];
-
         float s = startAngle;
         float e = s + sweepAngle;
         bool neg = e < s;
         float sign = neg ? -1 : 1;
         float remain = Math.Abs(e - s);
+        int curveCount = Math.Max((int)MathF.Ceiling(remain / (MathF.PI / 4F)), 1);
+
+        // Arc flattening retains the final point array, so use the builder to avoid the
+        // intermediate collection and copy a list would generate.
+        FlattenedPointBuilder points = new(curveCount * 4);
 
         Vector2 prev = EllipticArcPoint(center, radius, xAngle, s);
 
@@ -244,10 +246,9 @@ private static PointF[] EllipticArcToBezierCurve(Vector2 from, Vector2 center, V
 
             CubicBezierLineSegment bezier = new(from, q1, q2, p2);
             int bezierCount = bezier.LinearVertexCount(Vector2.One);
-            int startIndex = points.Count;
-            CollectionsMarshal.SetCount(points, startIndex + bezierCount);
-            Span<PointF> destination = CollectionsMarshal.AsSpan(points).Slice(startIndex, bezierCount);
+            Span<PointF> destination = points.GetAppendSpan(bezierCount);
             bezier.CopyTo(destination, skipFirstPoint: false, Vector2.One);
+            points.Advance(bezierCount);
 
             from = p2;
 
@@ -256,7 +257,7 @@ private static PointF[] EllipticArcToBezierCurve(Vector2 from, Vector2 center, V
             prev = p2;
         }
 
-        return [.. points];
+        return points.Detach();
     }
 
     private static void EndpointToCenterArcParams(

src/ImageSharp.Drawing/CubicBezierLineSegment.cs

@@ -136,7 +136,10 @@ public CubicBezierLineSegment Transform(Matrix4x4 matrix)
     private static PointF[] FlattenCurve(PointF[] controlPoints, Vector2 scale)
     {
         int curveCount = (controlPoints.Length - 1) / 3;
-        List<PointF> output = new(curveCount * 4);
+
+        // Flattened points are cached as a retained array, so use the builder to avoid
+        // the intermediate collection and copy a list would generate.
+        FlattenedPointBuilder output = new(curveCount * 4);
 
         for (int curveIndex = 0; curveIndex < curveCount; curveIndex++)
         {
@@ -148,14 +151,14 @@ private static PointF[] FlattenCurve(PointF[] controlPoints, Vector2 scale)
 
             if (curveIndex == 0)
             {
-                output.Add(p0);
+                output.Add((PointF)p0);
             }
 
-            SubdivideAndAppend(0F, 1F, p0, p1, p2, p3, output, 0);
-            output.Add(p3);
+            SubdivideAndAppend(0F, 1F, p0, p1, p2, p3, ref output, 0);
+            output.Add((PointF)p3);
         }
 
-        return [.. output];
+        return output.Detach();
     }
 
     /// <summary>
@@ -168,7 +171,7 @@ private static void SubdivideAndAppend(
         Vector2 p1,
         Vector2 p2,
         Vector2 p3,
-        List<PointF> output,
+        ref FlattenedPointBuilder output,
         int depth)
     {
         if (depth > 999)
@@ -192,9 +195,9 @@ private static void SubdivideAndAppend(
 
         if (Vector2.Dot(leftDirection, rightDirection) > DivisionThreshold || Math.Abs(midT - 0.5f) < 0.0001f)
         {
-            SubdivideAndAppend(t0, midT, p0, p1, p2, p3, output, depth + 1);
-            output.Add(mid);
-            SubdivideAndAppend(midT, t1, p0, p1, p2, p3, output, depth + 1);
+            SubdivideAndAppend(t0, midT, p0, p1, p2, p3, ref output, depth + 1);
+            output.Add((PointF)mid);
+            SubdivideAndAppend(midT, t1, p0, p1, p2, p3, ref output, depth + 1);
         }
     }
 

src/ImageSharp.Drawing/FlattenedPointBuilder.cs

@@ -0,0 +1,82 @@
+// Copyright (c) Six Labors.
+// Licensed under the Six Labors Split License.
+
+namespace SixLabors.ImageSharp.Drawing;
+
+/// <summary>
+/// Builds the retained <see cref="PointF"/> array used by flattened segment caches without an intermediate collection copy.
+/// </summary>
+/// <remarks>
+/// Segment flatteners ultimately need to return a tightly-sized array that can be cached by the segment instance.
+/// This builder owns that array while points are appended.
+/// </remarks>
+internal struct FlattenedPointBuilder
+{
+    private PointF[] points;
+    private int count;
+
+    /// <summary>
+    /// Initializes a new instance of the <see cref="FlattenedPointBuilder"/> struct.
+    /// </summary>
+    /// <param name="capacity">The estimated number of points that will be appended.</param>
+    public FlattenedPointBuilder(int capacity)
+    {
+        this.points = new PointF[Math.Max(capacity, 4)];
+        this.count = 0;
+    }
+
+    /// <summary>
+    /// Appends one point to the retained point array.
+    /// </summary>
+    /// <param name="point">The point to append.</param>
+    public void Add(PointF point)
+    {
+        this.EnsureCapacity(this.count + 1);
+        this.points[this.count++] = point;
+    }
+
+    /// <summary>
+    /// Reserves a writable append window for callers that populate multiple points directly.
+    /// </summary>
+    /// <param name="length">The number of points to reserve.</param>
+    /// <returns>A span covering the reserved append window.</returns>
+    public Span<PointF> GetAppendSpan(int length)
+    {
+        this.EnsureCapacity(this.count + length);
+        return this.points.AsSpan(this.count, length);
+    }
+
+    /// <summary>
+    /// Commits points previously written through <see cref="GetAppendSpan"/>.
+    /// </summary>
+    /// <param name="length">The number of points written to the reserved append window.</param>
+    public void Advance(int length) => this.count += length;
+
+    /// <summary>
+    /// Returns the owned point array.
+    /// </summary>
+    /// <returns>The tightly-sized retained point array.</returns>
+    public PointF[] Detach()
+    {
+        if (this.count != this.points.Length)
+        {
+            Array.Resize(ref this.points, this.count);
+        }
+
+        return this.points;
+    }
+
+    /// <summary>
+    /// Ensures the owned array can store the requested total point count.
+    /// </summary>
+    /// <param name="capacity">The total number of points that must fit.</param>
+    private void EnsureCapacity(int capacity)
+    {
+        if (capacity <= this.points.Length)
+        {
+            return;
+        }
+
+        Array.Resize(ref this.points, Math.Max(capacity, this.points.Length * 2));
+    }
+}