Recommended approach for drawing 2d graphics?

[Jeru Sanders]

I'm trying to get 2d vector rendering working in my custom C++/opengl engine, I have vector data that I'm parsing from an SWF file.

I'm currently drawing it using Skia, but I can't get GPU mode working on HTML5, publicly available binaries aren't built with gpu mode enabled, and when I try to build it I get weird artifacts, even in CPU mode.

I figured since Canvas was "native" I should just do two render paths, one Skia on Windows and Canvas in HTML5.

The plan was to use EM_ASM to call ctx.lineTo() and such. Then at the end of each frame call canvas.getImageData() and copy it into HEAP8[ptr], right now I just get black image data.

But it's also extremely slow, it makes me wonder if this is really gonna work.

Does anyone have advice about fast 2d path renderers? Doesn't necessarily have to be GPU based, but I'm looking to transfer ~1600x900 at 30fps with MSAA, or some other high quality AA.

[Corey Lucier]

Hi Jeru,

I'd leverage the pre-build CanvasKit WASM package if you can. (https://skia.org/docs/user/modules/canvaskit/) Performance outweights SVG and even native Canvas 2D oddly enough. Especially when you can use the instanced rendering as well.

Best,

Corey 

--
You received this message because you are subscribed to the Google Groups "emscripten-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to emscripten-disc...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/emscripten-discuss/6457d279-b004-43f8-aad6-ee4aa4d9b8een%40googlegroups.com.

[Jeru Sanders]

Ah, I didn't know you could you interact with the .wasm file canvas kit contains, it doesn't seem to contain any .a files.

Do I link it by using "<script src=..." in the hosting .html file and interact using EM_ASM? Or is there some way to compile the .wasm file into my build?

[Floh]

For simple "immediate-mode GL"-like stuff (color or textured lines and triangles) you could check out my sokol_gl.h header, this sits on top of sokol_gfx.h, which in turn sits on top of WebGL, and it implements an API that's "heavily inspired" by OpenGL 1.x. Some examples (source code is under the "src" link):

https://floooh.github.io/sokol-html5/sgl-sapp.html

https://floooh.github.io/sokol-html5/sgl-lines-sapp.html

...and this microui backend is also entirely implemented with sokol_gl.h:

https://floooh.github.io/sokol-html5/sgl-microui-sapp.html

Cheers,

-Andre.

[Corey Lucier]

I see... you are wanting to leverage Skia from your C++ code.  Apologies (but for those inquiring this is the best start for JS/TS usage https://skia.org/docs/user/modules/quickstart/).

With regards to building Skia yourself, this is what we do as well. Our custom build is based on https://skia.googlesource.com/skia.git/+/refs/heads/main/modules/canvaskit/compile.sh so look that over carefully and make sure you are using the same flags to enable GPU mode. Also make sure you leverage one of the known stable releases , I would say M92.  https://skia.googlesource.com/skia/+/chrome/m92.

But yes you'll want to ensure you are using a WebGL2 canvas and the GPU enabled build for maximum fidelity and performance.

You can also ask for an assist in the Skia group, https://groups.google.com/g/skia-discuss.

Best,

C 

To view this discussion on the web visit https://groups.google.com/d/msgid/emscripten-discuss/d6593c73-6c58-40a0-b3ef-8dff0cc1ff0bn%40googlegroups.com.