Material with transparent image on color

Hi there. I’m dipping a toe in BJS and trying to make a simple, two-sided coin. I’m trying to put a transparent image on each side of a disc using diffuseTexture, but I also want the material to have a diffuseColor that shows through the transparent areas. I can’t get this to work. I can have the color, or the transparent images, but not both.

This seems like something that should be trivial to do. Am I using the wrong tools? Is a decal the way to go, instead?

https://playground.babylonjs.com/#YDO1F#489

The diffuse color is used to tint the texture, but if the texel is fully transparent it can’t be tinted.

You can use a custom material or a node material to do what you want:

Thank you. The custom material has the result I was looking for. I’ll read up on it to understand why.

The node material playground, however, does not show a yellow coin. It’s a bit of a moot point, but if you have the time to debug, I’d like to see it working.

My bad, forgot to remove a link in the nme:

https://playground.babylonjs.com/#YDO1F#496

That fixed it. Thanks again.

I put both in one playground for comparison.
https://playground.babylonjs.com/#YDO1F#498

The node takes a noticeable amount of time to render. Is there any advantage to using Node over Custom for this simple use case?

It takes more time because the node material has a number of textures that are not used but which are still in the material: you can clean the material a bit if you want it to load faster.

There’s no particular advantages for one method over the other, except the node material will be easier to update if you don’t know glsl.