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