When viewing a node material in the Scene Explorer, I get a blank popup. Ie, if I select the node material and open the Configuration tab in the Inspector, I get a button to open the Node Material Editor. This opens a window and I get a javascript error in the console: TypeError: s.Observable is not a constructor.
I am importing the following npm packages:
“@babylonjs/core”: “^4.2.0”,
“@babylonjs/gui”: “^4.2.0”,
“@babylonjs/inspector”: “^4.2.0”,
“@babylonjs/loaders”: “^4.2.0”,
“@babylonjs/materials”: “^4.2.0”,
“@babylonjs/serializers”: “^4.2.0”
I have honestly no idea why Observable wouldn’t be there. Looking into s object, it only contains Inspector and NodeEditor, I could assume it’s the BABYLON object, which is still pretty empty, but I can’t find the place where Observable is assigned to BABYLON.
The exception happens in globalState.ts, while initializing onSelectionChangedObservable, which again makes little sense, since Observable is imported in that file and also
It seems I can make it work by adding import('@babylonjs/core/Legacy/legacy') to the list in Promise.all, however I’d assume that’d be loading quite a lot of code. My current suspicion is that babylon.nodeEditor.js which is fetched from the CDN expects BABYLON namespace to exist, which in case of ES6 modules doesn’t. Therefore I’d need a method to invoke nodeEditor loaded from modules, which also might mean I’d have to monkey-patch the inspector…
Ohhhhhhh sounds more than possible would you mind creating a tiny github repro ???
We could then all look into it but your analysis about the node editor makes a lot of sense as it should normally be using the ex6 version of the editor but I am not sure we can do that easily so far.
Can’t give you a repo yet, but I’ve had another successful workaround with the following:
import {
NodeMaterial,
INodeMaterialEditorOptions,
} from '@babylonjs/core';
import { NodeEditor } from '@babylonjs/node-editor';
export class MyNodeMaterial extends NodeMaterial {
public edit(config?: INodeMaterialEditorOptions): Promise<void> {
return new Promise((resolve, reject) => {
NodeEditor.Show({
nodeMaterial: this
});
resolve();
});
}
Basically, I’ve removed everything about BJSNODEMATERIALEDITOR and NODEEDITOR and BABYLON from the original, only leaving direct initialization in place. No idea where to go from here, but it’s time for bed for me anyway
I’m trying to create a repro, but it seems there is some funny project structure in my project which triggers the problems and which I cannot replicate in a sandbox so far. Just to keep you posted.
@sebavan I think I might have succeeded: GitHub - rassie/babylonjs-empty-nme-repro. Please see if you can reproduce the problem. I had to add some RxJS to the mix, since this is what the original repository has and I could not reproduce the asynchronicity of my code any other way.
How to use: clone, yarn && yarn run start, then click on Open inspector button, in the inspector navigate to the single available material, click on edit button. You should see an empty popup. After that, look for CHANGEME in src/App.tsx and swap the assignments. After a reload (do not trust fast refresh here) you should be able to trigger proper NME GUI from the material edit button.
