Building skia libraries to WASM to be called by C++

[Bruno Nicoletti]

Perhaps someone has figured this out already. I have C++ project that I am putting an interface on. I’m currently experimenting with the elements https://github.com/cycfi/elements C++ GUI toolkit, which can be backended by Skia to do its drawing. However it only works with a native build of Skia. I’d like the same GUI to work in the browser as it does natively, which means linking the `elements` library to a Wasm version of Skia. I can see that there is the Canvas Kit build of Skia, but that is a Wasm module expose Skia to JS. Is there a way to build Skia libraries that are compiled to WASM which I can link my own compiled code against? I’ve dug around the `gn` documentation for a day or so and it’s not clear to me. Has anyone managed to do this? If so any hints/documentation welcome.

Thanks

Bruno

[kjlu...@google.com]

We've heard other people have looked at our CanvasKit BUILD.gn rules and forked them to build their C++ code against Skia's C++ code using emscripten (skipping things like canvaskit_bindings.cpp altogether). It's not an officially supported thing, but our GN and Bazel rules should be to be used with a WASM target in mind.

[Oliver Larkin]

Elements is a nice library. Since it's Artist drawing abstraction mirrors HTML5 canvas, you could also consider writing a backend for that alongside the existing skia and cairo backends (if you didn't manage to get skia wasm working)

FYI: If you want a shortcut to getting your C++  project running in the browser, you might like to check iPlug2 where the nanovg or  HTML5   canvas backends can be used: https://github.com/iPlug2. I'd like to get skia building to wasm too, but that would make the wasm payload even larger.

oli

[Bruno Nicoletti]

Thanks for all the replies. I think I've figured out how to make gn generate wasm builds of all the libraries. Tomorrow I'll have a go at seeing what I need to do to get a c++ 'hello world' app code linking to it and running in a browser and natively. Then I'll see what I need to do to get elements working with it.

@Oli, canvaskit.wasm builds to 7.1M uncompressed in release mode. I won't be using all of skia in my code, so the linker for my WASM app should only include some fraction of that 7.1M.

I have some code already written for Elements and I'm not keen on rewriting to another widget set if I can help it.

[Bruno Nicoletti]

I've only just gotten back onto this. Is there a simple 'hello world' skia C++ program available that does nothing more than open a window and issues a few simple draw commands? The "hello world" example in the docs references code that no longer exists. I did find the tools/fiddle code, but is there any profoundly basic code that exercise canvas creation so I can get basic linking working cross platform?

[Oliver Larkin]

Check out skia-builder, just released

https://github.com/olilarkin/skia-builder

It has an example CLI tool that writes a png file, and the build script will compile it for WASM, amongst other things

Oli

--
You received this message because you are subscribed to a topic in the Google Groups "skia-discuss" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/skia-discuss/tTHtui84VB4/unsubscribe.
To unsubscribe from this group and all its topics, send an email to skia-discuss...@googlegroups.com.
To view this discussion visit https://groups.google.com/d/msgid/skia-discuss/92fff4a5-1498-4caa-b4f0-4f5580d0b4can%40googlegroups.com.

[Bruno Nicoletti]

Thank you so much, I've got that building. I'll try to figure out how to get it drawing to an HTML canvas as opposed to a PNG by looking at the canvaskit code.

What would be nice is if I could set an external EMSDK to the build system.

[Bruno Nicoletti]

Thank you! That all builds and runs fine.

On Monday 4 November 2024 at 21:15:13 UTC olil...@googlemail.com wrote:

[Bruno Nicoletti]

Thank you so much. I'll work from this.

Being able to specify which EMSDK to use would be a lovely feature to add.

Bruno

On Monday 4 November 2024 at 21:15:13 UTC olil...@googlemail.com wrote: