Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Boolean Operations as WASM Modules to Two.js #596

Open
jonobr1 opened this issue Jan 13, 2022 · 6 comments
Open

Add Boolean Operations as WASM Modules to Two.js #596

jonobr1 opened this issue Jan 13, 2022 · 6 comments
Milestone

Comments

@jonobr1
Copy link
Owner

jonobr1 commented Jan 13, 2022

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):
Screen Shot 2022-01-12 at 5 53 25 PM

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 jonobr1 added this to the v0.8.x milestone Jan 13, 2022
@jonobr1
Copy link
Owner Author

jonobr1 commented Jan 28, 2022

With Boolean Operations implemented it would be possible to resolve issue #585

@jonobr1
Copy link
Owner Author

jonobr1 commented Jan 28, 2022

This issue would be the first explorations of larger scale WASM use described in issue #552

@jonobr1
Copy link
Owner Author

jonobr1 commented May 9, 2022

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
Copy link

catapop84 commented May 27, 2022

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
Copy link
Owner Author

jonobr1 commented May 29, 2022

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
Copy link

catapop84 commented May 29, 2022

@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(); 

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants