Fast method of drawing round points

[bforlgreen]

I'm working on a custom WPF control that displays a scatter point chart, showing upwards of 200k points. This chart is interactive, meaning the user can pan, scroll, zoom etc and the rendering will update.

However, the performance when trying to render such a large number of points is pretty poor, and the interactive element is ... less interactive than I would like (as its so laggy)

I am currently using SKCanvas.DrawPoints, and the documentation specifically mentions that points are rendered "one at a time". I was wondering if there is some other method I could be using? perhaps something that uses some kind of geometry instancing? (i.e one draw call, multiple data)

Some information about my use case

• The list of points is static, but when panning/scrolling/zooming, their relative position on screen changes, so whilst the data is static, the position on screen is dynamic.
• the size of each point is the same
• colours are all the same
• needs to support opacity

Some things I have noticed :

• rendering as a square instead of a circle is MUCH faster (but would prefer round)
• IsAntialias makes little to no difference

One option would be to dynamically to switch from round to square depending on the number of points.

Here is some example code for what I am doing.

NOTE : The memory allocation of creating the points each time is not the bottleneck, it is the render call that takes all the time. But I have written it like this as it keeps the example code simple.

private void OnPaintSurface(object sender, SKPaintSurfaceEventArgs e)
{
    var canvas = e.Surface.Canvas;
    canvas.Clear(SKColors.White);

    using var paint = new SKPaint
    {
        Color = SKColors.Black.WithAlpha(50),
        IsAntialias = false,
        Style = SKPaintStyle.Fill,
        StrokeCap = SKStrokeCap.Round,
        StrokeWidth = 6,
    };

    var points = new List<SKPoint>();
    var r = new Random(0);

    for (int i = 0; i < 200_000; ++i)
    {
        points.Add(new SKPoint((float)(r.NextSingle() * ActualWidth), (float)(r.NextSingle() * ActualHeight)));
    }

    canvas.DrawPoints(SKPointMode.Points, points.ToArray(), paint);
}

[bforlgreen]

Any suggestions? :)

[bforlgreen]

Thanks, I'll try the 2nd option and see how I go. Do you have any example code to get me started?

In regards to the first option, that turned out to be a lot slower.

[taublast]

You can check out how a shader is created/consumed in skiasharp3 here, you can just grab the code from those wrappers and use in your app directly. If you decide to compile both projects for skia3 (demo and engine) both must have for both inside .csproj <UseSkiaSharp3>true</UseSkiaSharp3> as by default its false.
https://github.com/taublast/DrawnUi.Maui/blob/f81d4ece68dc23c8188a55af0c100edb96232007/src/samples/Sandbox/Views/Controls/ContentFolder.cs#L180

For more details about skia SKSL syntax shaders:
https://skia.org/docs/user/sksl/
https://shaders.skia.org/

At the same time I'm sure you could find already existing SKGL shader for drawing such points and convert it to SKSL.

[bforlgreen]

Just to clarify, are you talking about generating the point data on the fly? (like the examples you show where they're using screen space effects)

Or do you mean I could still pass in the 200k points for the shader to render? Which is what I need as the points are statistical data that I need to plot. I can't procedurally create the data as the shaders you link to are doing.

[taublast]

A. If you compute points coords yourself, it might be better better to initially send to shader some lookup table/other data used in computation and compute everything on GPU then render the shader result.
B. If you have some realtime data, like other said, there are points that are [not visible]/[can be combined into one visible for that pixel] so you will not want to pass 200k for everyframe, usually graphics engines render visible area only.
C. In case of never changing 200k points coords you might send that lookup table just once then render visible/aggregated area using shader code.

[bforlgreen]

A : As mentioned in the original question, its a scatter plot of statistical data, I am not computing it on the fly.
B : I really do want to render all the points. It's a plot with transparency.

Do you have an example that does somthing like C where its dealing with an array of data? The shader examples I have found are only for dealing with small amounts of data and only send a few floats as params.

[mattleibow]

I think I may be seeing some potential issues:

• the .ToArray() is far more expensive than it looks because each call is allocating a new array instance, consuming memory and then causing the GC to collect.
• there are GPU views that may result in a faster render time - in SkiaSharp 3.x there is a new SKGLElement that we just added
• there may be unnecessary points

For the first option, I know there is no alternative API and we need to add one that uses a span. However, even with the nice fast span, the backing/source collection also needs to be accessible via an array - this may help: https://learn.microsoft.com/dotnet/api/system.runtime.interopservices.collectionsmarshal.asspan

If you try the new GPU-backed view in 3.x, is it faster?

Besides all this, trying to draw 200k points is also sometimes less useful if the points are off the screen. It may be worth breaking the points up into regions. For example, if the total chart is holding points in a visible region of 500x300px, then it may be useful to break the points into boxes of 100x100px and just drawing those. This does not solve the case where all the points are visible, but it may help with panning.

You may also want to look at merging points at very zoomed out levels. Instead of drawing 7 points in a single pixel or even a 3x3px area, just draw one. This will involve processing the point data, but drawing less is always faster.

I know some of this does not help you now, but the GPU accelerated view may help. If the point collection is fixed, then it may be worth creating the array one time to pass to the points method, then it does not matter about array vs span vs anything, there is a single, long-lived array instance.

EDIT: I also just realized the .ToArray() may just be for example purposes - but also may not. So still valid.

[bforlgreen]

Thanks

I did specifically mention the array allocations in the original question (I tested with a static array and it made no noticeable difference).

And yep, I recently tried SKGLElement, but sadly, made no noticeable difference.

I agree with all your other points about approaching the problem from another angle by simplifying the point collection, and that is something I will probably do, but it was more a question to see if there was anything lower level I could use. 200k might sound like a lot, .. but by todays hardware really isn't that much work (even if the points are polygons).

Im guessing that each point is tessellated on the CPU? as opposed to it being tessellated on the GPU?

And of course, I appreciate that I am probably expecting too much from this library, (trying to use it for something it wasn't intended for) which of course is fair enough :)

[mattleibow]

This may be a question for the skia-discuss group as there may be a totally different way to do something like this: https://groups.google.com/g/skia-discuss