Babylon.js: MeshBuilder.CreatePolygon and PolygonMeshBuilder API is inconsistent

[kutomer]

Hello,
I'm migrating not from [email protected] to @babylonjs/[email protected] to try out the new and long waited tree shaking! (@sebavan 👑)

And getting the following error: ReferenceError: earcut is not defined at new PolygonMeshBuilder.

This is because MeshBuilder.CreatePolygon API doesn't support earcut injection:
Babylon.js/src/Meshes/meshBuilder.ts:

Help will be very much appreciated,
Tomer.

[sebavan]

If you are relying on webpack why not using provide plugin to inject earcut globally ? (asking as I am creating the documentation)

module.exports = {
    context: __dirname,
...
    plugins: [
        new webpack.ProvidePlugin({
            'earcut': 'earcut'
        })
    ]
}

At the same time I will allow earcut to be injected through those both methods as well.

[kutomer]

I'm using next.js and wouldn't want all my pages to include earcut for no reason.

Furthermore, I'm trying to ignore global dependencies as much as possible, I have only one call to MeshBuilder.CreatePolygon and if I will ever decide to remove it I think it will be much more obvious that earcut is no longer needed compering to global dependency.

Thanks again for your work!

[sebavan]

Sweet that is a nice reason for the doc. You ll have it in the next version.

[kutomer]

Thanks a lot.

If anyone struggling with the same issue here is a temporary solution you can use:

  const earcut = require('earcut');
  (window as any).earcut = earcut;
  const mesh = MeshBuilder.CreatePolygon(...);

[deltakosh]

Fixed!

[Fusseldieb]

  const earcut = require('earcut');
  window.earcut = earcut;

Not a nice solution, but I can say that it works...

Using Electron & Webpack & Vue. I've put it into main.js
Afaik, earcut will be injected globally (into window), which isn't nice considering that the principle of SFC's are broken this way.

... But it works

[kutomer]

  const earcut = require('earcut');
  window.earcut = earcut;

Not a nice solution, but I can say that it works...

Using Electron & Webpack & Vue. I've put it into main.js
Afaik, earcut will be injected globally (into window), which isn't nice considering that the principle of SFC's are broken this way.

... But it works

@Fusseldieb, This was a temporary solution I used until @deltakosh solution, you can inject earcut into CreatePolygon, so there is no real reason to manually referance the global scope:

const mesh = MeshBuilder.CreatePolygon("name", { // ... }, scene, require('earcut'));

I'm using @babylonjs/[email protected] and it's working.

[hiteshsahu]

Add Earcut as dependency in your index HTML

[kutomer]

I'm using next.js and wouldn't want all my pages to include earcut for no reason.

Furthermore, I'm trying to ignore global dependencies as much as possible, I have only one call to MeshBuilder.CreatePolygon and if I will ever decide to remove it I think it will be much more obvious that earcut is no longer needed compering to global dependency.

Thanks again for your work!

@hiteshsahu see this reply why I think injecting earcut it s better solution than add it as a global dependency. (your solution even bypass webpack which is even worse cause now earcut is not part of the bundle)
But do whatever works for you :)

[treedbox]

With Webpack , install earcut via npm:
npm i --save-dev earcut

Then in your .ts or .js file:

import earcut from "earcut";

const mesh = MeshBuilder.CreatePolygon(name, options, scene, earcut)

In the documentation you can see that after scene, the next optional parameter is earcutInjection, _this is the way._
https://doc.babylonjs.com/api/classes/babylon.meshbuilder#createpolygon