Native JavaScript implementation of Clipper2 for Union, Intersection and Difference operations on threejs shapes

Clipper2 provides Union, Intersection and Difference clipping operations for shapes. Threejs shape points can be passed to Clipper2 and the resulting clipped shape can be added back into threejs. See the following example

Source code on Github clipper2-js

5 Likes

It’s good. It works with shapes with curves. I doubted at first, so I had to try:

1 Like

Awesome stuff! Great to have something like this available in JS now.

A couple comments on the package and repo -

  • It would be great to link to the npm package page from the Github README so it’s easier to find.
  • It would also be good to include the license in the npm package.json so it shows up on the package page. Right now it just displays “no license” making it unclear that it’s the permissive BSL.
  • The image in the README is broken because it’s not included in the package files.
  • It would be nice to include a small snippet of code necessary to create a simple union or intersect shape or something. It’s not super clear from the existing c# documentation at the moment. Here’s what I gleaned as a minimal example when trying the package out:
// multiple points array by 1e6 since clipper
// requires integers for clipping

const path1 = new Path64();
path1.push( Clipper.makePath( [ ... ] ) );

const path2 = new Path64();
path2.push( Clipper.makePath( [ ... ] ) );

const finalPath = Clipper.Union( overallPath, path, FillRule.NonZero );

// divide final path by 1e6 to transform
// back to original scale after clipping

Again, great work!

3 Likes

I read on the GitHub site that ChatGPT was used for much of the code conversion. Am most curious and intrigued by this. Please share whatever you can on this experience. Thanks much

OLDMAN

I had seen others say that code conversion was possible. It had worked well enough for small code snippets, so I thought, why not try with something more substantial. While working on three-svg-js, I was looking for something to support clipping and came across the clipper2. At the time, there was only a port of clipper1 to JavaScript. I figured, this would be a perfect opportunity to at least give it a try. If it didn’t work, at least I would learn something.

I was not familiar with the clipper2 code base at first, but the examples made sense to me. I figured all the C# code would need converting.

I started by asking Chat GPT to convert the whole file, 1000+ lines long. But its lazy, due to buffer sizes, so would only convert the first 100 lines. I then proceeded to convert one function at a time. It was reasonably accurate. In the end, it took well over 100 prompts over 3 days to convert all the code.

Some advanced syntax like nullability it did not understand at all and always got wrong. I had to clean the C# code of attributes and #ifdefs before prompting.

The original C# includes a lot of ref and out parameters. Sometimes Chat GPT would return an object, but sometimes it incorrectly convert this concept and I’d have to hand fix the code.

The original C# includes a lot of functions with the same name, but different parameters. There isn’t supported in JavaScript. After looking at the code base as a whole, it turns out by dropping support for ClipperD, the duplicate functions would mostly go away.

The original C# includes classes with multiple constructors. Again, not supported by JavaScript. The best solution was to turn arguments into object with optional parameters, but Chat GPT wouldn’t do this part for me. Instead it mangled the code, so I stopped using it for constructors, just the code inside them.

The original C# had read only structures. Chat GPT converted to classes which is reasonable.

When encountering .NET interfaces like IComparer or Iterator, Chat GTP would do its best, but the code was unusable. This part I had to find a solution myself.

The original C# code had custom operators (== and !=). Chat GTP converted to static methods which is reasonable, but required code cleanup later

It was more challenging for longer functions. The second and subsequent code snippets wouldn’t convert well since it was missing the beginning of the function.

In total, 5300 lines for the library and 400 lines of test code were converted to TypeScript with about 2 weeks of effort.

After all the converted code started to compile, it took about another week of effect to get it working. This was mostly because I didn’t understand the original C# code and all the capabilities of clipper2 or how they worked.

For someone familiar with the original code base and how it works, this effect would be much smoother. Since clipper2 had been ported from C++, the author had limited their use of C# advanced syntax. If you’re using modern advanced C# syntax features or have lots of long functions, it might not go so well.

In summary, using Chat GPT definitely helped saved time. It was also good at suggesting how a language feature can be represented in the target language, although not always. It was also frustrating at times.

Had the original code base been 20,000 lines, I probably would not have attempted or given up before finishing.

1 Like

Thanks for those details on your experience with ChatGPT. And I am very glad to know it worked out well for you!

I, admittedly, belong to the old school of programming (very conservative) and still don’t fully understand the excitement. We don’t need help with often needed functions (sorting, searching, etc.) for which there are sufficient proven code listings all over the Internet. It would help most in cases where something novel and definitely non-trivial has to be coded up - but most people would find it very difficult to verbalize these needs in English robustly, correctly, completely. That task might often end up looking like detailed pseudo-code and would be very tedious/error-prone. So then, why not go one additional step and write the actual code? And often, my task is sufficiently complex that I can’t even think through everything in my mind upfront (forget verbalizing). The human-driven “code-compile-run-debug” loop is tedious, but, in my past experience, a worthwhile exercise. The clarity and insights that arise in the human mind through this loop are invaluable.

Your experiment of code language conversion is somewhere in between. I recall, decades ago, using something called F2C - a Fortran to C source code converter. No AI, no LLMs, no training. Just good old computer science fundamentals. I used F2C successfully on production code! It was fully automatic. I haven’t kept track of how such technology has progressed over the years. I intuitively feel there has been ample scope for improvement, speed, optimization, etc. So then, why bother painfully coaxing ChatGPT to do the same thing?

And on the subject of code correctness: One prevailing attitude is do-it-fast, ship-it-out, let-users-do-the-debugging. :grinning:. There is much formal analysis on code correctness. Formal proofs have been attempted. I don’t think any of this scales very well. And so, we are still reliant on test cases…in the belief that if all test cases pass, all is well. Entire essays can be written on that last statement!! The idea of letting ChatGPT create my code and then running some test cases to ascertain correctness is very disturbing to me. There could be so many bugs lurking around, still patiently waiting to be discovered. And here’s my important point: I feel the risk of that is less if I did the coding myself. ChatGPT’s “intelligence” comes from how well it can use what it has seen before. Has it seen enough variety in the vast world of computer programming? I have confronted more than a few programming situations for which I am unable find guidance/examples on the Internet.

You could argue that my situation is somewhat unique and that most programming chores are not as challenging or unique…for which ChatGPT is just fine. But in that case, why not just search the Internet for identical/similar listings? And that way, one would also get to know if it came from a reliable source.

But…

Maybe all this is only because LLMs are still relatively new and the situation will be much better in time.

OLDMAN

I’m probably older than you are. I’ve been a developer since the mid 80’s. I’ve used F2C too. Never too old to learn how to use master a new tool.

Over these years, I have ported a lot of code from language to language or between platforms. Some by tools, but most by hand. The worst being VB6 to C#. I’ve never had good experience with full-automatic tools.

I always wanted a tool that would just take care of the syntax part, so I could focus on the logic part. Any tool that makes that faster with a reasonable amount of accuracy is a blessing.

What was nice about Chat GPT was that I was doing it in small chunks and was able to watch as each conversion took place. Each time there was something different in the code, I watched how it solved that problem (or didn’t). With a reasonable test suite (which clipper2 has), the most important stuff can be verified to work.

As I mentioned, there was a week of cleanup, so I got pretty familiar with the final code and re-wrote some bits based on my better understanding.

Sometimes a hammer is just a hammer. You don’t need to know how its made, just its good for solving problems when something needs hitting. Not every hit is perfect, but with practice, it becomes a useful enough tool.

1 Like

Right now, Chat GPT is like a know-it-all college graduate.

What I think that’s missing is when you prime it with a problem, it doesn’t attempt to ask some questions or clarifications before given an answer. Any experienced developer starts with a few questions before jumping in.

Once it improves by first clarifying its understand of the requirements, it will start acting like an experienced developer and will become truly invaluable.