artist icon indicating copy to clipboard operation
artist copied to clipboard

WASM/WebAssembly Support

Open davidkutas opened this issue 1 year ago • 12 comments

This is a wonderful project.

Are there any tutorials out there to use this with WASM/WebAssembly/esmjs?

davidkutas avatar Oct 14 '24 00:10 davidkutas

I'm sorry, but the project does not (yet) support WASM/WebAssembly/esmjs.

djowel avatar Oct 14 '24 10:10 djowel

I'd be very interested in a WASM/Web build as well. Skia does provide a Wasm build so you can call it from JS, which in theory means it should be possible to backend artist onto Wasm build of Skia so artist/elements based apps will run in the browser. I'm going to have a play with the skia Wasm build and see how much hair I lose in the process of making something work.

https://skia.org/docs/user/modules/canvaskit/

bruno-j-nicoletti avatar Oct 28 '24 13:10 bruno-j-nicoletti

I'd be happy if someone could take the lead on implementing this. Unfortunately, I'm swamped with other projects at the moment.

djowel avatar Oct 28 '24 14:10 djowel

I've spent a fruitless day just trying to figure out google's build system used for Skia. I've gone and asked their mailing list to see if anyone else has had success making a Wasm verions of the skia libs you can link against.

bruno-j-nicoletti avatar Oct 29 '24 12:10 bruno-j-nicoletti

I've spent a fruitless day just trying to figure out google's build system used for Skia. I've gone and asked their mailing list to see if anyone else has had success making a Wasm verions of the skia libs you can link against.

Skia's build system is a PITA! I'll tell you that.

djowel avatar Oct 29 '24 13:10 djowel

I'm currently working on a library that will return a C++ Skia::Surface which will draw onto an HTML canvas. I'll package this all up into a new repo. That will at least be the start of a WASM/Web port of elements.

Currently I've bodged something that does call into C++ compiled to WASM to do the drawing, but it's ugly and hacked out of a cut down version of their CanvasKit JS module, which gives JavaScript bindings to Skia. I've a screenshot of it in action.

FWIW, someone has just put together a repo that simplifies the building of skia on all platforms, see https://github.com/olilarkin/skia-builder.

Screenshot 2024-11-07 at 16 26 50

bruno-j-nicoletti avatar Nov 07 '24 16:11 bruno-j-nicoletti

That was a more surprisingly horrible task than I thought it would be, even though I knew it was going to horrible.

In my spare time I've put a C++ library together than packages up all the skia web binding code and let you run a C++ program that pipes skia calls to a browser canvas. Still a work in progress, but getting close. I need to incorporate skia into the build process as it currently relies on an external canvaskit wasm build of skia.

https://github.com/bruno-j-nicoletti/SkiaWebBind

bruno-j-nicoletti avatar Nov 21 '24 16:11 bruno-j-nicoletti

That was a more surprisingly horrible task than I thought it would be, even though I knew it was going to horrible.

In my spare time I've put a C++ library together than packages up all the skia web binding code and let you run a C++ program that pipes skia calls to a browser canvas. Still a work in progress, but getting close. I need to incorporate skia into the build process as it currently relies on an external canvaskit wasm build of skia.

https://github.com/bruno-j-nicoletti/SkiaWebBind

Wow, I can imagine what a horrible task that would be!

djowel avatar Nov 21 '24 21:11 djowel

I've just done another chunk of work to simplify my webbinding library and to stream line the build process. It necessarily downloads and builds all of skia to WASM. My working example draws the skia logo over an animating background colour.

What do you need for it to be usable with elements?

bruno-j-nicoletti avatar Feb 08 '25 13:02 bruno-j-nicoletti

I've just done another chunk of work to simplify my webbinding library and to stream line the build process. It necessarily downloads and builds all of skia to WASM. My working example draws the skia logo over an animating background colour.

What do you need for it to be usable with elements?

I'll get back to you ASAP.

djowel avatar Feb 10 '25 12:02 djowel

I've just done another chunk of work to simplify my webbinding library and to stream line the build process. It necessarily downloads and builds all of skia to WASM. My working example draws the skia logo over an animating background colour. What do you need for it to be usable with elements?

I'll get back to you ASAP.

Sorry. Been very busy. I'm not really sure what to say. I suppose the next step is to have the other dependencies also work w ith WASM. What's the current state of the Skia WASM port? Is there something I can try already?

djowel avatar Feb 11 '25 05:02 djowel

The SkiaWebBind project will handle downloading and building skia to wasm as well as building the binding library and an example. You'll need to install a few bits and pieces for it to work. Build instructions are in the README.

I've only built this on MacOS, I should boot up my linux box to test it, but it should work. No idea about building it on windows. If you have a Mac, I'd appreciate it if you could set a build running to make sure I haven't left something out.

Most other librarys should build fine to wasm if they don't touch the file system or graphics.

bruno-j-nicoletti avatar Feb 11 '25 10:02 bruno-j-nicoletti