search

dotnet / aspnetcore

ASP.NET Core is a cross-platform .NET framework for building modern cloud-based web applications on Windows, Mac, or Linux.
https://asp.net
MIT License
35.19k stars 9.93k forks source link

Support custom graphics from Blazor components across all hosting models #42216

Open danroth27 opened 2 years ago

danroth27 commented 2 years ago

We've seen user requests to support custom graphics in Blazor components that can be reused across all Blazor hosting models: Server, WebAssembly, Hybrid. For example: https://github.com/mono/SkiaSharp/issues/1834

SkiaSharp provides some level of custom graphics support for Blazor WebAssembly apps, but additional work is required to support Server and Hybrid scenarios where the canvas memory is not directly accessible.

Microsoft.Maui.Graphics provides a common graphics abstraction for .NET MAUI apps. It supports using a skia-based backend when can also work in Blazor WebAssembly apps: https://github.com/jonlipsky/MauiGraphics.Sample.Blazor.WebAssembly. But again, no support for Server or Hybrid.

Various community projects existing for interacting with the HTML canvas API: https://github.com/excubo-ag/Blazor.Canvas, https://github.com/BlazorExtensions/Canvas.

To support Blazor Server and Blazor Hybrid we need to decide on a mechanism to transfer the graphics commands to the browser and then handle them. See https://github.com/mono/SkiaSharp/issues/1834#issuecomment-1155725897 for some options.

RChrisCoble commented 2 years ago

Thanks for this nice writeup @danroth27. I know @jonlipsky mentioned in an email conversation he already had code to serialize and deserialize drawing commands with a binary format for MAUI.Graphics which might be helpful if that behavior is ever committed.

danroth27 commented 2 years ago

Related Microsoft.Maui.Graphics issues:

RChrisCoble commented 1 year ago

@danroth27 has communicated this will not reach the priority level for .NET 8. The P3 tag aligns against that decision. Thanks for the update.

ghost commented 1 year ago

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

sulivanganter commented 6 months ago

Many great projects require this to function in a Server or Hybrid environment. I hope that one day this will be moved out of the backlog

xcaptain commented 3 months ago

Any progress? I found an awesome project(https://github.com/DominikNITA/Blazor3D-Playground) using canvas to draw 3D graphics, hope one day we can use canvas directly in blazor app without adding https://github.com/BlazorExtensions/Canvas.

RChrisCoble commented 3 months ago

We ended up using SkiaSharp to do our 2D rendering on WASM and this has been extremely successful for us, and fast.

The only gotcha is this rendering bypasses the JS/Interop layer so it will not work in "Blazor Hybrid" scenarios.

sulivanganter commented 3 months ago

Indeed, rendering in WASM is fast. Libraries for generating charts such as ScottPlot5 and LiveCharts2 use SkiaSharp and are available for Blazor only in WASM. I know with .NET 8, I can keep some components on client-side. The problem is that you need to send all the data to the client to perform the rendering, instead of just sending the rendered output and events. When dealing with a larger amount of data, this makes everything slow. Additionally, it is not possible to reuse the code in Blazor Hybrid because there is no option to run a component on the "client" side.