[js] Possible improvement?: draw svg shapes on a canvas instead of rasterizing using scanlines

Tw1ddle / geometrize-haxe

:triangular_ruler: Geometrize is a Haxe port of primitive that geometrizes images into geometric primitives

https://www.geometrize.co.uk/

Other

348 stars 31 forks source link

[js] Possible improvement?: draw svg shapes on a canvas instead of rasterizing using scanlines #1

Closed azrafe7 closed 6 years ago

azrafe7 commented 7 years ago

I was thinking: what if in shape.rasterize() you draw the svg onto an offscreen canvas and use that?

This would only apply to js - and I'm not even sure it would have better performance, probably not -, but maybe it's worth trying out. What you think?

Anyway thanks for this lib, I'm already using it. ;D

Tw1ddle commented 7 years ago

The ad hoc rasterization code in the lib is probably the slowest bit, especially for larger target images. I haven't profiled it though, and would like to minimize platform-specific code. I will look into that when I change the web demo to use web worker(s), which I'll do in the near future.

I'm also writing a version of this library in C++ which is a lot faster. I'll be open sourcing that soon. Depends on what you are currently using this for, but you might find that useful :smile:

azrafe7 commented 7 years ago

Haven't yet turned out to try the svg rasterizer I proposed, but still toying with the lib to understand it better.

Indeed the chrome devtools point out that most of the time is spent in rasterize-related methods:

Do you mind a couple of questions?:

I'm getting around 13s to complete the seagull sample (web demo, with triangles) to reach a score threshold of 0.03, how does the c++ version you're working on compare to it?
How are you planning to add webworkers? I mean, what you intend to parallelize? (it seems that all the steps require the entire image to make their computations and read/write access)

Yes, I could sure use the c++ version - though a haxe one would be easier to fiddle with -. Looking forward to it! :+1:

Tw1ddle commented 7 years ago

I don't have a build for profiling at the moment but the C++ version looks 15-20 times faster running side by side. Rasterization is still the slowest bit.

For parallelism, I was thinking to just make copies of the images each time the model is stepped - collect the results from each worker and choose the shape that improves the current image the best. Here's how I'm doing that in C++: https://gist.github.com/Tw1ddle/d1db88a7fe0f777e31937cc9bdb0a5b7

Tw1ddle commented 6 years ago

FYI I updated the code in this repo to use a single webworker, so the page/UI shouldn't become laggy anymore. That didn't really address the performance question though.

I think this C++ desktop app I made should be a bit faster. For comparison run it using 1 thread, and hide the SVG/pixmap views as these can update slowly - there's an installer here: https://github.com/Tw1ddle/geometrize/releases

To really step up the performance I'd use the GPU for rasterization and comparison/measuring differences between images. Not easy to adapt the existing code for that though - it would be a separate project.

azrafe7 commented 6 years ago

Thanks for the update heads-up.

I'll retest both versions soon.