I may be encountering a pass-by-reference issue with CreateBox

So in an NPM package babylon-helper-lib I have a function, twodgrid. Long story short, it makes a box with the help of MeshBuilder.CreateBox(name, opts, scene).

export let twodgrid = function(scene: Scene, width=20, height=20, name="box") {
    const box = MeshBuilder.CreateBox(name, {width:width,height:height,depth:.2}, scene);
    const boxmat = new GridMaterial(`${name}_mat`, scene);
    boxmat.majorUnitFrequency = 2;
    boxmat.useMaxLine = false;
    box.material = boxmat;

    return {box, boxmat};

In an ObservableJS project, I can successfully place a canvas element, get it with JavaScript, and put a BabylonJS app in it, just using BJS. I’m now trying to basically reproduce it, using my library functions above, like twodgrid.

I can successfully import babylon-helper-lib and use some of its functions.

However, for this function twodgrid, when I call it I don’t get any errors. However, it also doesn’t draw the box on the scene. Although I doubt it’s very important, you can see here the code that I use to do this:

    const LIB = await import("https://esm.sh/babylon-helper-lib@0.0.17");

    const bag = LIB.init("#lib"); // library function to make an engine, scene, camera, light, and canvas
    const scene = bag.scene; 
    const planebag = LIB.twodgrid(scene); // Make the box.
    // const box = BABYLON.MeshBuilder.CreateBox("box", {}, scene);

    bag.engine.runRenderLoop( () => {

If I comment out my library function and un-comment the direct call to CreateBox it now draws a box.

So this all seems to tell me that when I pass scene into twodgrid, somehow it’s not the one getting updated. I know JavaScript is pass-by-copy-of-reference. But since I don’t know exactly how CreateBox works then I’m unsure of exactly what it does. I know if you leave out the scene then it just uses the currently active scene, but I figured by passing it in explicitly I could override that behavior.

Anyway, hopefully that was a clear enough description of the problem, and I’m asking the question to the right people (apologies if not!). Does anyone have a suggestion about whether I’m right about the issue, and either way, what might be doable here?

Is it possible you have two different versions of Babylon.js somehow? I’ve seen this happen with two different versions. Or maybe @sebavan or @RaananW has some ideas.

1 Like

Oooh! That might be it – I should check the NPM module’s package.json to make sure I’m referencing the intended BJS version. Will report back when I’ve checked this out.


Eh, turns out no that wasn’t it. This app makes no import of BabylonJS directly at all. It only imports the helper library, which imports BJS. So I don’t think there’s any possibility of a version conflict.

Could you share a repro as I do not have an idea besides what @bghgary already mentionned.

Did you find the solution?

We can not without a repro.

Sorry, today I’m unable to get away from work at all, to work on this. I plan to find some time in the next couple days to try to organize my project into some kind of shareable demonstration, as @sebavan asked, and I’ll post a link here when I do.

No rush @addem, just mentioning it to answer @Gustafson132

1 Like

So I tried to simplify the code a bit, and put it in this notebook – hopefully it shows the issue, but let me know if not.

The use of twodgrid is supposed to make a box that basically shows a 2D grid (basically just painted onto a box), but it doesn’t show. I added a call to CreateBox to demonstrate that a direct call to BabylonJS will draw a box on the canvas.

Clearly the library is getting imported and used somewhat successfully, because I am using its init function to produce the scene and engine, and both are working.

You are using a lot of different version for babylon core gui materials and such:

You need to ensure only one version of @babylonjs/core is used without the babylonjs one at all