CSG2 : Can create mesh in one playground and not another

Questions
,
1

Hello,
I’m having issues using CSG2 to create an object from a Mesh. So I went to a demo PG (https://playground.babylonjs.com/#PJQHYV#1), stripped out all the stuff I didn’t need and was able to recreate and solve my issue (which, incidentally, was that my source mesh was not manifold because one face was facing “inwards” and all others were facing “outwards”).

Integrating what I discovered from the PG back into my application…. and it still didn’t work in my app (getting an error saying “Uncaught TypeError: ManifoldMesh is not a constructor”).

Next step: I dumbed down my test case a lot, planning to ask about the problem in this forum with a demo PG, only to find that the new PG I created with content exactly the same as my locally-modified existing PG (referenced above) does not work. There’s a new error printed : “PR is not a constructor”. I’ve no idea what “PR” is. My PG is here: Babylon.js Playground

In other words, I loaded PG #PJQHYV#1, modified its content and it generates a CSG2 object without issue. I then copy and paste the content exactly from PG #PJQHYV#1 into PG #E0QTEF and the CSG2 fails to run. Both PGs indicate they are running version 8.36.0 (WebGL2).

Why is the behaviour of the two PGs different when they have exactly the same content?
What does “PR is not a constructor” mean?

Before discovering this difference in behaviour between two PGs, I copied the way the mesh is constructed in the working PG (my local copy of #PJQHYV#1) back into my application assuming it would work in the application, only to find the CSG2.FromMesh() call still fails with the “Manifold Mesh is not a constructor” error. Why would it work in the PG and not in my application? Could it be a similar issue to why it works in my modifed version of PG #PJQHYV#1 and not in the PG I created to ask these questions (#E0QTEF)? My app is using npm @babylonjs/core 8.36.0.

Hopefully this makes sense? Any help appreciated.

2

Hi, before using CSG2 you need to initialize it first. In the playground before calling it, just put this line await BABYLON.InitializeCSG2Async() . If you want to use it locally in your app you can initialize it like so for example:

Edit: (for future reference) first you need to import:

import { InitializeCSG2Async } from '@babylonjs/core'

import Module from 'manifold-3d'

then you can call

const initCSG = async () => {

    try {

        const wasm = await Module({ locateFile: () => '/manifold.wasm' }) // path to manifold.wasm

        wasm.setup()

        const { Manifold, Mesh } = wasm




        InitializeCSG2Async({

            manifoldInstance: Manifold,

            manifoldMeshInstance: Mesh,

        }).then(() => {

            console.log('CSG2 initialized')

        })

    } catch (error) {

        console.warn('Failed to initialize CSG2')

    }

}

P.S. Here is also the link to the related docs: Babylon.js docs

2 Likes
3

Thank you for the helpful advice. Maybe I inadvertantly removed the InitializeCSG2Async() call from my local copy of the reference playground but it had already done its job after loading the page the first time (and subsequent runs didn’t need it).

For anyone else who is as new to this as me stumbling across this solution, it took me a while to figure out the “Module” referenced above comes from the ‘manifold-3d’ module (and thus one should import Module from 'manifold-3d' before being able to use it).

1 Like