Matter-js: Concave polygons not working even after I installed poly-decomp (node server)

[gmoyer]

I've installed poly-decomp with npm install poly-decomp. I then put decomp = require('poly-decomp') above matter = require('matter-js'), when I run my code, it still says poly-decomp.js required. I dug in matter.js code and changed line 6541 to decomp = require('poly-decomp'). It doesn't give the same message anymore, but my shape is still just convex.

I ran console.log(decomp) after line 6541, and it returned

{ decomp: [Function: polygonDecomp],
quickDecomp: [Function: polygonQuickDecomp],
isSimple: [Function: polygonIsSimple],
removeCollinearPoints: [Function: polygonRemoveCollinearPoints],
makeCCW: [Function: polygonMakeCCW] }

which I think is what it should return. I dug even farther and made sure that line 6763 was being run, and it is. Although, when I console.log(decomp.makeCCW(concave)); on line 6769, it returns undefined. What should I do to make it work? Right now it isn't giving me the error message, but it isn't making the shape concave.

[bryantwells]

Did you ever get this working? I am in the same boat, running a regular linux + apache server.

Also, I see that the SVG demo no longer works.

[bryantwells]

It looks like there is an issue with compiled JS renaming the decomp, causing Bodies.fromVertices() to complain. Adding decomp.js as a separate file within the html page (loaded before the compiled scripts) seems to solve the problem.

[adapap]

Hi @bryantwells, I'm still having what seems to the same issue. Could you provide me with the versions of poly-decomp and matter that you are using? In my setup I am keeping the current version on github for both programs and using them in my html file as well as requiring the static file for poly decompress in node, which is how I interpreted your response. Perhaps I am still doing something wrong, but it seems to run but then returns as undefined when I create the body from vertices.

[rykerrumsey]

I am having the same issue.
Currently tried to use the import in my index.js file

import decomp from 'poly-decomp'
window.decomp = decomp

that did not solve the issue.

Then tried to include it in the HTML

<script src="./src/decomp.js"></script>
<script src="./src/index.js"></script>

Here are package versions.

"matter-js": "^0.14.1",
"poly-decomp": "^0.2.1"

[jobtalle]

Same problem here while trying to compile a project using webpack. Is there any workaround for this issue?

I'm currently forced to abandon matter-js because of this.

[rykerrumsey]

Hey @jobtalle,
If your using webpack I managed to get poly-decomp detected by including a couple lines to my webpack.config.js file.

At the top of your webpack file include...

const webpack = require('webpack')

... and in the plugins array insert

new webpack.ProvidePlugin({ 'window.decomp': 'poly-decomp' })

Hope this helps.

[fiskhandlarn]

@rykerrumsey Thank you, this solved it for me!

[FredyC]

I have been fighting with this for 2 hours now and nothing seems to be helping. The ProvidePlugin doesn't work like that, check out the docs. It would work in case there would be a window.decomp present in the code, not with dynamic require like that.

Essentially, the way it was before commit https://github.com/liabru/matter-js/commit/0cf97f5c3c06c2622c37469428deecb206221c47 would be working just fine if you would have simply included "browser": "src/module/main.js" in the package.json. Webpack (and even the Browserify) respects that field and bundle matter-js by itself instead of grabbing the prebuilt file. That allows it to find that module just fine without any hacks.

@liabru Any chance you would be willing to change it like that or is there some other tool/environment that you are aware of not supporting such an approach?

[liabru]

Are you using the latest build? It's supposed to work everywhere unless there's a bug. The idea is it will look for a global first (e.g. when in a browser) otherwise it will fall back to require implementation provided by browserify and since it is a UMD build it will first check the the bundled dependencies (which do not include poly-decomp) then it should fall back to the environment require.

Can you provide a stack trace and tell me more about your setup? What environment and build tools are you using?

[FredyC]

Yes, I have the latest version. I am using create-react-app (not ejected) so pretty straightforward configuration for bundling (with Webpack). I haven't used Browserify for years, it would probably work like that since you have the shim there. However, Webpack is a different beast and doesn't care about those shims.

First of all, when Webpack is using your UMD bundle version, it won't bother parsing it (by default), so the require call will never reach outside to node_modules, only to those modules that are included in the bundle. That's how these things work. That's why I've suggested using browser field so matter-js can be built from source (added benefit is tree-shaking). Sadly that's not enough as dynamic require call is like it doesn't exist to Webpack. In case it would see require('poly-decomp') directly, it would be working flawlessly.

I have tested this approach and it does make much more sense than some hacks with webpack.ProvidePlugin or whatnot which probably work in some very specific setup.

[jobtalle]

The fix provided by @rykerrumsey did not work for me, unfortunately. Is there currently a way to circumvent this problem without modifying matter.js? As it stands, polygon decomposition is not working for webpack environments.

[liabru]

Thanks for the info guys, sorry that this is still an issue. While I look into it more, I think this temporary fix should work with the latest version. Make sure you put it somewhere early on, before you use Bodies.fromVertices:

window.decomp = require('poly-decomp');

[jordancaudill]

No solutions for me thus far...

[linux019]

all solutions above doesn't work
Webpack replaces
window.decomp = require('poly-decomp');
by
__webpack_provided_window_dot_decomp = __WEBPACK_IMPORTED_MODULE_0_poly_decomp___default.a;

so global window is remains untouched

[Dibble]

all solutions above doesn't work
Webpack replaces
window.decomp = require('poly-decomp');
by
__webpack_provided_window_dot_decomp = __WEBPACK_IMPORTED_MODULE_0_poly_decomp___default.a;

so global window is remains untouched

Using global.decomp = require('poly-decomp') is working for me with Webpack

[linux019]

Finally I switched to box2d-js and it's working like a charm. Matter js is very buggy engine

[marcelschiering]

Same problem here. Switched to box2d-js.

[david-crespo]

This worked for me (using Parcel as the bundler):

import decomp from 'poly-decomp';
window.decomp = decomp;

[marcelschiering]

This worked for me (using Parcel as the bundler):

import decomp from 'poly-decomp';
window.decomp = decomp;

thx for your answer.
box2d is working, but i like matter-js more :-) so i tested something.
my game needs hexagons. first i used "Matter.Bodies.fromVertices" - ended up in this poly-decom-error-hell.
i solved the problem with "Matter.Bodies.polygon", using 6 sides and Matter.Body.rotate(30degrees), because i need the hexagon in flat-top design.
now it works. hopefully i can go on with basic geometries :-)

[liabru]

Apologies for the problems here, it seems that every approach I had tried when originally using browserify for the build ended up having some edge cases depending on the environment.

The newly released version 0.15.0 is now built with webpack and has a more robust approach for handling the poly-decomp require.

I'd encourage those interested to try out the new version and let me know if this require problem is finally resolved.

That said it is still recommended to eventually implement your own decomposition approaches suitable for your use case, using the built in function as a reference of how set up compound bodies.