skia-wasm-port
skia-wasm-port copied to clipboard
Zubnix
Dart & flutter
There is some interest in using this to run Flutter.
https://skia.org/dev/flutter
But as far as I know dart does not compile to WASM. It's possible that Dart WASM is not needed. I know there is a flutter for web project somewhere on the githubs and I think it just uses webgl without any skis. I should try to find it.
Currently flutter runs on mobiles and desktops.
https://github.com/google/flutter-desktop-embedding
Web is the final frontier :)
No problem.
I would :heart: to wire skia-wasm to a widget toolkit. Be it Flutter, be it React or even something else. Thing is that currently my most productive time goes to my professional (read paying) clients :wink:, while everything else (including skia-wasm) is done in my spare time.
Unfortunately skia-wasm is currently not at the top of my spare time priority projects (let's say just below that), so once those other projects stabilize a bit, I will probably pick skia-wasm back up (or quicker if other incentives pop up).
It might probably also interest some that the Skia team did reach out to me and we had a nice chat. In the meanwhile they are conducting their own experiments it seems: https://github.com/google/skia/tree/master/experimental/wasm
Thanks for responding and the link.
Sounds hopeful considering the the skis team are trying it out. I always thought it make sense compared to the dart / angular for web approach. It's actually the similar approach that QT took with rendering on web browsers.
Have you tried to get the code working at all ? I might be able to also help..
This is a great effort. I also am interested in Flutter for web. I could easily use this on the day job, I'd think all that is left is to have Dart able to "webassemble" and then the pieces are in place? Maybe Go/Kotlin could be used instead (already compiles to webassembly), but would have to port the dart/flutter part to Kotlin?
Anyway this is a nice step in the right direction to killer web (and any platform) development.
Looking a bit more at the google Skia experiments, I believe google is actually trying to tie skia-wasm to Flutter. It seems Flutter uses Flow: https://github.com/flutter/engine/tree/master/flow to do it's rendering using paint commands + the fact the the google skia-wasm experiments are all about queuing and dispatching paint commands...
https://github.com/google/skia/tree/master/experimental/wasm The link is now dead. Hmm.
The WASM stuff is all here now it seems ready for Flutter to tap into https://github.com/google/skia/tree/master/experimental/pathkit
Since we're talking about widget toolkits here.... we're currently working on our vNext of Aurelia, for which we'll target multiple renderers. I've been watching this project closely as I did have plans to build a WebGL renderer. I'd love to build it on top of skia-wasm.
Any chance for a status update on this project? It looks like there's little activity in the last few months. If there's anything blocking that we can gather community around to help address, please let us know.
The main bulk of work is "simply" mapping the Skia API to Javascript using the bindings file. However since the Skia API is rather big, a better approach would probably be to see what you need in your widget toolkit from the Skia API, and define the bindings as you progress.
Be warned though, sometimes defining the bindings is straighforward, sometimes you're banging your head against the wall. However most binding corner cases already have been worked around in the current bindings file, so if something isn't straighforward, there's a very good chance it's just a variation on something already defined.
Anyway the reason I haven't done it myself so far is, well because the Skia API is big, and I don't have an incentive for the moment to do so. See also https://github.com/Zubnix/skia-wasm-port/issues/5#issuecomment-406709390
I am ofcourse very open to pull requests, or to help out anyone that needs it. :wink:
@Zubnix
The code now moved to here: https://github.com/google/skia/blob/master/modules/pathkit/README.md
and also public demo here: https://skia.org/user/modules/pathkit
For now i am trying out running Flutter desktop with an RDP using webrtc to run it in the browser. Its just a video stream with the mouse, touch and keyboard events going back to the Flutter Desktop, rerendering there and a new frame getting pumped up to the client. Pumping the mouse events into the flutter desktop is easy due to the nice API flutter offers. https://flutter.io/testing/#widget-testing
with a bit of massaging: https://pub.dartlang.org/packages/event_bus
Its only an experiment for now.
I am trying to work out how to run flutter desktop headless still..
@gedw99 Am I correct that it's currently not using WebGL, but a Canvas2D context or SVG only? Do you know if there is a plan to get it working with WebGL and expand the API to the rest of Skia?
I had a look a flutter/dart a bit to see what road could be taken to port it to the web.
The first major hurdle seems to be simply porting flutter to javascript. Flutter dart is targeted for the dart-vm which has some constructs that are unsupported in dart2js. A major one being the native keyword.
Flutter uses native calls to interop with the actual underlying native system, so we definitely need to implement those. So unless I'm missing something, this means forking flutter and changing all required native functions to 'external' functions with a @JS annotation. That or patch dart2js to be able to work with native functions as one would expect.
@EisenbergEffect Yes it's Canvas2D. Changes in Skia are needed to have proper WebGL support, currently it looks like they don't have the capacity for that: https://bugs.chromium.org/p/skia/issues/detail?id=8378#c1
@Zubnix thanks for all the work on this that is way out of my pay grade. I wonder why Google are doing it. I ask because then you can better predict your approach to work with what they will do with it going forward. Know what i mean..
Looks like Google added hw acceleration and specifically targets html5 canvas now: https://skia.org/user/modules/canvaskit
Google is actively porting flutter to the web: https://medium.com/flutter-io/hummingbird-building-flutter-for-the-web-e687c2a023a8
if anyone interested in SKIA based GUI in browser - that project can be useful https://github.com/blockspacer/skia-opengl-emscripten/issues/2 , ported some parts of chromium ui to WASM with and without threads support + HTML/CSS support from cobalt.
@blockspacer It's a bit unclear what the final goal of that project is. Is it a framework to run application written in html+js+css in say, a dedicated webworker?
@blockspacer It's a bit unclear what the final goal of that project is. Is it a framework to run application written in html+js+css in say, a dedicated webworker?
That project is similar to skia-wasm-port, but also allows to render HTML/CSS with some controls (small browser inside browser or CoherentGT running inside browser). It uses webgl and whole SKIA (ported with opengl acceleration), so it may be useful as 3D UI solution for apps like web games, web VR, e.t.c. It can render SKIA UI both without threads and with (webworkers).
final goal - allow HTML/CSS UI in 3D web games (and other platforms). Many games can't capture html from web page because of performance reasons - so embedding custom HTML/CSS renderer into game is single existent solution for that problem as i know (possible alternatives - like litehtml - can't support CSS animations, don't render HTML properly e.t.c.).