Add Boolean Operations as WASM Modules to Two.js

[jonobr1]

Is your feature request related to a problem? Please describe. Boolean operations are a common, but computationally expensive and mathematically complicated operations in vector drawing suites.

Describe the solution you'd like For the types of projects Two.js aspires to help make possible, it's important to have these features:

• Union: Combine two paths into one.
• Subtraction: Remove one path's form from another's.
• Intersection: Get the overlapping area of two paths as a new path.
• Exclusion: Get the non-overlapping area of two paths as a new path.

Essentially these (taken from Adobe Illustrator):

Additional context Paper.js has great examples of these running in JavaScript: http://paperjs.org/examples/boolean-operations/ • It would be prudent to port these to Rust as a separate library and compile them to WASM into Two.js as extras.

[jonobr1]

With Boolean Operations implemented it would be possible to resolve issue https://github.com/jonobr1/two.js/issues/585

[jonobr1]

This issue would be the first explorations of larger scale WASM use described in issue https://github.com/jonobr1/two.js/issues/552

[jonobr1]

This grant seems like a good opportunity to get some resources to achieve this feature: https://developer.chrome.com/blog/advanced-web-apps-fund/

[catapop84]

Hello. Just found your library. Regarding boolean operations, you should look at lib2geom: https://gitlab.com/inkscape/lib2geom/ . It's written in c++ and is used by Inkspace. Wasm port will be great I suppose.

I think is one of the few libraries that support bezier curves. Most libraries convert them in tiny line segments then apply the boolean operations. Hope this helps you.

From their description:

Exact boolean ops (elliptic arcs remain elliptic arcs)

[jonobr1]

This is epic, thanks for sharing. I should explore Two.js simply being the rendering output for all this functionality. Would trim down and speed up quite a few operations.

[catapop84]

@jonobr1 That's the idea. This library just does the geometry processing, leaving the user to do the rendering part. Building this as wasm and keeping separate from twojs is the way to go.

If you're only interested in boolean operations: https://gitlab.com/inkscape/lib2geom/-/blob/7a0d8698d6eb4f33a93c4f7fa895771d34170d54/src/2geom/intersection-graph.cpp

PathVector p1= parse_svg_path("M 0,0 L 5,0 5,8 0,8 Z");
PathVector p2= ...
auto graph = PathIntersectionGraph(p1, p2);

PathVector union = graph.getUnion(); 
PathVector intersection = graph.getIntersection(); 
PathVector aMinB= graph.getAminusB(); 
PathVector bMinA= graph.getBminusA(); 
PathVector xor = graph.getXOR();