Emission intensity for multiple transparent textures on different meshes?

A few questions:

Q1
In this playground, how do I get these multiple textures transparent and control their emission intensity for each individual texture?

While https://playground.babylonjs.com/#QXWQ99#16 answered the issue of transparency, I don’t wanna parse from other files, such as

const nodeMaterial = await BABYLON.NodeMaterial.ParseFromFileAsync(‘ttJson’, “https://raw.githubusercontent.com/FrancisMikeNathan/MovieApp/refs/heads/main/t.json”, scene)

Q2
How do I control the Emission intensity for each individual mesh or texture?

Q3
While this shader/procedural node works in Blender/Verge3d, why doesn’t it work in Babylon.js?

Blender/Verge3d Accepted

cc @PatrickRyan

@c4cc there is a simple thing you can do to enable your alpha bend, even if you are using emission for an unlit texture. This technically isn’t correct if you are trying to keep the texture out of the lighting and post process calculations entirely as unlit and emissive aren’t the same thing. Emission contributes to the glow layer where unlit ignores all lighting and post process effects. However, you can get your alpha channel back by assigning your emission texture to the opacity input as well.

To get this to render correctly, you need to make sure your material is set up to use alpha blend transparency mode as your materials are now set up as opaque materials:

For your second question, can you explain further what you are trying to achieve when you say emission intensity? If you mean you want them to glow, you need to add in the glow layer post process effect. If you are talking about wanting to dim the brightness of the texture, you can set the emissive color, which multiplies with the emission texture:

Or you can use alpha to make the whole mesh transparent:

It really depends on what you are going for.

For your third question, you are basically creating a custom shader in blender, which works because blender is set up to read the node graph feeding a material and walk the tree node by node to determine the final render, even if you are adding a simple graph to an existing material type. Blender knows how to extend the shader to take a custom input and still calculate everything correctly. However, you are exporting your mesh to glTF, and the glTF spec if very specific about what materials it accepts. Basically, you have the default PBR material definition plus a few PBR Next extensions that are accepted into core, which are things like sheen, clear coat, transmission, etc. But a custom shader in Blender does not directly translate as Blender bakes your materials down to core PBR as much as it can. If there’s no translation for what you did in the shader, it just passes default values as you see in your materials here. That said, you could create a custom extension for blender materials to parse and load as you have them in Blender, but that’s a far more taxing undertaking that an additional node material load. You could short circuit this by duplicating your blender shader in node material and then assigning your textures loaded with your glTF to the correct node material inputs and assign the node material to your meshes. This will replicate what you did in Blender.

But the core of the issue here isn’t that this doesn’t work in Babylon. What you are trying to do by exporting a custom Blender shader into glTF isn’t supported so no glTF loader will be able to display this as you see it in Blender. I hope this helps.

Thanks for your answer, sorry for my late reply, I was damn busy the past few days. For my second question, I mean emission intensity by color strength. For example, this HUD’s emission that influences its color:

Unfortunately, for your transparency example I tried your example and it didn’t work for me, anything I forgot?

Here, I set Alpha to 1, Alpha Blend for transparency and Combine for Alpha Mode, yet I can’t get that transparent effect as your screenshot did

For my third question,

While this makes sense, how do I open up node material in Playground? I tried to follow this example at 2:39, as per the following screenshot

Creating Procedural Node Materials Through Code

https://inv.nadeko.net/watch?v=GrmVObi6caQ

unfortunately, I could not find it here

@c4cc, this is the simplest way to load a node material, in this case one saved to the snippet server. whirlpool | Babylon.js Playground

I would caution against using the snippet server for anything outside of playgrounds to show as an example. You definitely don’t want to use our snippet server for production. In that case you will want to save the node material to a local json and load and parse to a node material. The instructions for loading a file can be found here in our documentation. Once you have it in your scene, you will see both an edit icon next to your node material name and an edit button in the inspector when you click on the material. The method for making the node material for the first time is either going to nme.babylonjs.com and making your node material and saving to json or snippet. Or you can use the inspector to create one in your scene and then save it from there. Open the inspector and choose the creation tools tab (if it’s not there, you may need to add it in extensions) and click on Node Material. This will create a new node material in your scene. It won’t be assigned to any meshes, but you can open the node material editor and save it to json or snippet from there. Then just add the code to load from file or snippet and you have your node material in your scene.

For your background transparency, in addition to setting the blend mode, you also need to make sure you assign the texture with your alpha channel to your opacity texture channel in the PBR material. This is the only thing you appear to be missing. It was in the image above:

Lastly, for your question about controlling the emissive color of your material, I would say that your other thread has a lot of good suggestions.