Hosting Avalonia in WebAssembly #6831
Replies: 84 comments 4 replies
-
|
It would be possible and we are currently considering our options. The major blocker is that HTML5 doesn't have a proper 2D drawing API, so Skia needs to be compiled to wasm and somehow linked to resulting application. The problem with linking is that Mono doesn't currently provide P/Invoke support for wasm target. Another problem is that P/Invoke means indirect calls (i. e. calls via pointer), while WebAssembly doesn't support indirect calls between modules. That means that Skia needs to be linked statically, so we'll need a custom Mono build. It would be easier with CoreRT, since it supports static linking out of the box, but they are still implementing MSIL instructions for wasm target, so it's not ready even for an experimental port. |
Beta Was this translation helpful? Give feedback.
-
|
Sorry if this is an obviously terrible idea, but why wouldn't you use WebGL? |
Beta Was this translation helpful? Give feedback.
-
|
Maybe this helps? https://github.com/aspnet/Blazor/blob/dev/README.md |
Beta Was this translation helpful? Give feedback.
-
|
@pmoorelegistek We will be using WebGL at some point. The problem is that WebGL by itself doesn't support drawing 2D vector graphics. So we need Skia anyway. |
Beta Was this translation helpful? Give feedback.
-
|
Oh I see what you're saying. I didn't realize it lacked basic 2D drawing. I take it the plain HTML5 canvas doesn't have good enough performance either?
I've been watching this project for awhile and would love to help how I can. Getting this on the web would be the Holy Grail. (Befitting the name Avalon(ia))
Get Outlook for Android<https://aka.ms/ghei36>
From: Nikita Tsukanov
Sent: Friday, March 9, 12:30 AM
Subject: Re: [AvaloniaUI/Avalonia] Hosting Avalonia in WebAssembly (#1387)
To: AvaloniaUI/Avalonia
Cc: Peter N. Moore, Mention
@pmoorelegistek<https://github.com/pmoorelegistek> We will be using WebGL at some point. The problem is that WebGL by itself doesn't support drawing 2D vector graphics. So we need Skia anyway.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub<#1387 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AMw7S1GOycAJX3aLJnlzy5xM6yq_KrTiks5tciGKgaJpZM4SR4pe>.
|
Beta Was this translation helpful? Give feedback.
-
|
Hmm. The problem with compiling Skia to WASM is you'll lose any benefits of hardware graphics acceleration on the device. Browser will be doing all the math, painting pixels, etc. I don't know that you'd ever get anything close to 60fps with a complex UI. Have you tried just using the HTML5 Canvas or SVG? |
Beta Was this translation helpful? Give feedback.
-
|
Skia can use OpenGL ES profile for hardware-accelerated rendering. Which is basically what is provided by WebGL. |
Beta Was this translation helpful? Give feedback.
-
|
You're saying Skia / OpenGL will be able to access hardware acceleration (i.e. the GPU) after compiled to WASM? Are you certain about that? Everything I understand about WASM would lead me to think not. I would think you'd be better off using three.js - or better yet porting it to C# - wrapped around WebGL. I'd be happy to look into it some more and experiment. Do you have a working prototype using Mono-to-WASM at the moment with any rendering at all? |
Beta Was this translation helpful? Give feedback.
-
Emscripten toolchain has complete support for WebGL. It might be a bit difficult to make it work with Mono since it has it's own js glue code, but other than that I don't see any issues. |
Beta Was this translation helpful? Give feedback.
-
|
https://github.com/praeclarum/Ooui/wiki/Xamarin.Forms-with-Web-Assembly No need for Skia now, |
Beta Was this translation helpful? Give feedback.
-
|
@danwalmsley it uses HTML. Avalonia can't be rendered with HTML. |
Beta Was this translation helpful? Give feedback.
-
|
I wonder why Avalonia never could use HTML to render UI. Uno manages to do that for their web target. Could you please elaborate for me? Thanks a lot. |
Beta Was this translation helpful? Give feedback.
-
|
This thread is filled with answers to this. The bottom line is that Avalonia is committed to being pixel perfect. |
Beta Was this translation helpful? Give feedback.
-
|
Is there are any try to use Skia/WebGL? Any branch for this experiment? |
Beta Was this translation helpful? Give feedback.
-
|
if I understand right, what @kekekeks is saying is that it's not feasible at the moment because Mono can't use P/invoke to call the Skia functions. So while they can compile Skia to WASM, there would be no way for the .NET code to access it. What I don't understand fully, though, is why it has to be Skia. There are Javascript libraries that provide 2D drawing function wrappers over WebGL (e.g., https://threejs.org/). I'd think it at least worth an experiment to make a DrawingContext that wraps three.js and go from there. If that works, porting threejs to C# and simply including it in the Avalonia build would not be too bad of a project and would probably get you performance on par with Skia. |
Beta Was this translation helpful? Give feedback.
-
|
@pmoorelegistek The main problem is the complete lack of a proper text measurement API. We can't get our TextBox to work if we don't have an accurate position of each individual symbol. Even for our TextBlock we need to be able to measure and lay out text lines properly. There is no way we can do that with the APIs available to JavaScript. |
Beta Was this translation helpful? Give feedback.
-
|
I added an issue for pinvoke support on mono so this can be tracked. mono/mono#8007 |
Beta Was this translation helpful? Give feedback.
-
|
Uno Platform (https://platform.uno/) is rendering the WPF from Microsoft to WebAssembly. There should not that difficult to port the code to render Avalonia too ... Maybe, there could be a way to join efforts ... |
Beta Was this translation helpful? Give feedback.
-
|
Uno does not render anything as Avalonia does. They use HTML elements. |
Beta Was this translation helpful? Give feedback.
-
|
They also have a Skia backend, not sure it's generally available for Wasm yet, but it is the plan. |
Beta Was this translation helpful? Give feedback.
-
|
related comment:
https://developercommunity.visualstudio.com/idea/378455/net-ui-standard.html also:
|
Beta Was this translation helpful? Give feedback.
-
|
What about Ubuntu (Linux environment)? |
Beta Was this translation helpful? Give feedback.
-
|
regarding Uno and Linux see here: https://platform.uno/uno-platform-for-linux/ |
Beta Was this translation helpful? Give feedback.
-
I was referring Avalonia in Linux environment compiling into WebAssembly |
Beta Was this translation helpful? Give feedback.
-
|
guess Avalonia could also get ideas from Uno, or maybe even use it as a backend or something? |
Beta Was this translation helpful? Give feedback.
-
|
Just to be clear. Text rendering is no longer an issue. The "only" thing we need is a platform implementation for WASM that is setting up WebGL and exposes all input events. The threading implementation might also be tricky. |
Beta Was this translation helpful? Give feedback.
-
|
May be we can learn from google flutter, skia should not be a problem! |
Beta Was this translation helpful? Give feedback.
-
|
I don't know if it is of any help, but there is this: lume/glas: WebGL in WebAssembly with AssemblyScript |
Beta Was this translation helpful? Give feedback.
-
|
Seems skia with p/invoke is possible now: |
Beta Was this translation helpful? Give feedback.
-
|
This, to be exact. |
Beta Was this translation helpful? Give feedback.
-
|
Another idea is a server-side rendering and displaying as |
Beta Was this translation helpful? Give feedback.
-
|
We have support for running a VNC server in Avalonia app that is compatible with noVNC. |
Beta Was this translation helpful? Give feedback.
-
|
We have an application where we drawing a LOT of controls and it works fine on desktop, but when we run it in browser, using webasm, it works significantly slowly. |
Beta Was this translation helpful? Give feedback.
-
|
Hardware acceleration should be available but the application is only single-threaded. So you don't have the separation of UI vs. render thread. |
Beta Was this translation helpful? Give feedback.
and others
-
Would it be possible to host Avalonia with WebAssembly and .NET in a browser?
Then we could write the same C# code and run it native in all browser and on all desktops.
Beta Was this translation helpful? Give feedback.
All reactions