nodeMaterial nodeEditor

When I am developing a project, I will use the iframe to open the node material editor. When I click save, I don’t need to save it as a json file, but get Json for subsequent development.
I try to get json = contentWindow.BABYLON.Engine.LastCreatedScene.getMaterialById(‘node’).serialize(); The serialized texture loses the value as null.
I tried to write the code in the red area of the reference box again, but I couldn’t get the globalState.
Neither of the above two methods work for me.
I hope to provide this method to mount on the node material and return a json object for my use, thank you!

nodeMaterial.json in the zip fileflow.zip (575.0 KB)


Sorry, but I’m not clear on exactly what is your question here?

I need to modify node material
1、Serialize Node Materials
serialize The serialized texture loses the value as null.
seriaNodeMat = BABYLON.Engine.LastCreatedScene.getMaterialByID(‘node’).serialize();

2、Serialized Material Transformation
let nodeMat = scene.getMaterialByID(“node”);
let seriaMatStr = JSON.stringify(seriaNodeMat);
let seializationObject = JSON.parse(seriaMatStr);
nodeMat.loadFromSerialization(seializationObject);
nodeMat.build(false);
The loaded material is already lost, and the effect of the node material is wrong

I saw that there is a function save on the node material editor. The saved texture is not lost. I want to refer to save function. Can you provide an API?
image

Are you able to provide a playground/code reproduction of your problem? It’s easier to tell what’s going on

1 Like

I need to modify node material
1、Serialize Node Materials
serialize The serialized texture loses the value as null.
seriaNodeMat = BABYLON.Engine.LastCreatedScene.getMaterialByID(‘node’).serialize();

2、Serialized Material Transformation
let nodeMat = scene.getMaterialByID(“node”);
let seriaMatStr = JSON.stringify(seriaNodeMat);
let seializationObject = JSON.parse(seriaMatStr);
nodeMat.loadFromSerialization(seializationObject);
nodeMat.build(false);
The loaded material is already lost, and the effect of the node material is wrong

I saw that there is a function save on the node material editor. The saved texture is not lost. I want to refer to save function. Can you provide an API?
image

Your example is throwing errors:

What you’re trying to do is to open the Node Material Editor through code without using the Inspector? You want to modify the node material and save it, is that right?

Yes!
Thank you for understanding my problem. After opening the editor and updating the material in the scene through serialization, the serialized texture will lose the image when saving. How can I overcome this problem?

You should try to serialize a direct reference to it, I tested this and it worked fine, it keeps the value of the texture: Babylon.js Playground (babylonjs.com)

An example I made is a test of the serialize method.

at https://nme.babylonjs.com/

  1. There is a node material flow.json
  2. You can modify the value of any InputBlock or add a block to alpha on FragmentOutput
  3. Execute the code below
    containerNodeMat = BABYLON.Engine.LastCreatedScene.getMaterialById(‘node’)
    seriaNodeMat = containerNodeMat. serialize();

On PG (Babylon.js Playground)

  1. Execute the following code:
    scene = BABYLON.Engine.LastCreatedScene;
    nodeMat = scene. getMaterialById(“node”);
    seriaNodeMat = Object; (copied from nme.babylon.com)

nodeMat. parseSerializedObject(seriaNodeMat);
nodeMat.build(false);
2. The effect in PG is different from that in the node material designer

nme.babylonjs.com material effect
image

PG mesh after material build
image

I’ve tried the same steps as yours and the texture was saved. Do you want to share your actual project here? It will be probably be easier to see what’s going on.

The problem I raised has been screen-recorded, please follow the screen-recording steps to reproduce this problem, and the nodeMaterial.json file has been attached, thanks!

part001 is step1 video
part002 is step2 video
nodeMaterialEVPart001.zip (5.9 MB)
nodeMaterialEVPart002.zip (5.9 MB)

nodeMaterial.json file
flow.zip (575.0 KB)

It seems the Node Material Editor has a custom method to save materials with embedded textures: Babylon.js/packages/tools/nodeEditor/src/serializationTools.ts at master · BabylonJS/Babylon.js · GitHub, so using serialize directly is not supported.