Two materials with the exact same settings show different behaviours

[ecksdeeeee]

I have made a material recently with a red “A” on top of a glass shader. I had a bunch of problems ensuring that the “A” decal was unaffected by the transparency so that only the glass shader would be transparent, but I somehow figured it out:

Why does TextureSample map transparency to black?

I am trying to reapply one of my blender materials to a mesh in UE5. I made a glass vial with some text on the outside and I want to create a material which uses a glass shader onto which I can map my texture, which has a transparent background. For some reason, when I use the RGBA output of TextureSample and plug that into the BaseColor for a translucent material with Surface TranslucentVolume lighting model, my texture doesn’t remain transparent where it is transparent, but turns black… I di…

But now I simply copy and pasted my material and exchanged the image texture for an equivalent green “B” and somehow it doesn’t work anymore. Now the decal is, again, being affected by the opacity of the glass shader and I don’t know what is supposedly different. It should be exactly the same since all I did was to changes the source of the TextureSample node.

What am I missing?

PS: When I first imported the “B” texture (with transparent background, obviously) it showed a star in the content drawer and said the Source Compression was “zlib”. I thought that might be the problem. However, after I saved my game and relaunched the editor, it was PNG compressed and didn’t have a star, so that wasn’t the issue, apparently.

Here’s the images of the node setup of the materials:
The working “A” letter

The “B” one where the letter is almost invisible:

[Supremative]

Because you connected RGB to Opacity, the Opacity slot only gets a red channel.
You get a zero value from the red channel, and the letter becomes transparent.

My Products

[ecksdeeeee]

I’m sorry, but could you please be more specific? You are talking as if what you’re saying should be trivially apparent, yet I do not know the basics of what I am working on since I am in the process of learning those basics. What do I need to change to make the B appear in the same way as the A?

[Supremative]

The opacity slot is a single channel. You are trying to pass an RGB value there, but Opacity gets only the first red channel. When you send the red letter A, the Opacity is close to 1. When you send the green letter B, the red channel is zero, and the letter becomes transparent.
Create a separate variable Opacity:

[ecksdeeeee]

That is just the setup I already used before:

“…I had a bunch of problems ensuring that the “A” decal was unaffected by the transparency so that only the glass shader would be transparent…”
“Now the decal is, again, being affected by the opacity of the glass shader and I don’t know what is supposedly different.”

I already knew how to do that. What I wanted was to toggle the opacity of the glass shader while leaving the opacity of the decal unaffected.

[Supremative]

I’m trying to explain to you that in the case of the green letter, you are sending 0 to the Opacity slot.
The slot gets only the red channel.

[Supremative]

You could resolve it in the following way:

[xcritu]

It’s very interesting, but why does it only get the red channel???
He selected RGB so shouldn’t it output whatever color it has???

Why doesn’t it work?

[Supremative]

The opacity is a scalar channel. The slot gets only the first channel if you send RGB to it.

[xcritu]

Thanks! That explains so much (especially if this applies to blender as well… )

[ecksdeeeee]

The problem with Unreal and it’s node setups is that they are too implicit, or rather not explicit enough, imo. To understand what is happening here (and because I don’t know what your background knowledge is, I’ll just make a very pedantic explanantion.

basically, the input you give to the Opacity of the shader node is an array of single values (scalars). An image with color is an array of pixels, which have three different values of Red, Green and Blue for every pixel.

The “alpha channel” extends the RGB values of a pixel by another value, which controls it’s opacity. That is how you get an RGBA-tuple for a pixel, which can have transparency.

Imagine an image as an array of numbers. If you have a square image of 3x3 pixels then the array looks like this:

The opacity input of the shader node (where everything gets combined to the complete shader) has separate inputs for opacity and for base colour. That means that for the example of our 3x3 pixel input, the RGB gets put into “Base Color” and the A (alpha) must be provided separately, otherwise your transparency will not be applied to your material.

(they took away my ability to upload transparent PNGs for some reason midway, so I’m making jpeg sceenshots now…)

Now, if you want to fix this, you need to split up your RGBA array into an RGB and an A array. You provide the RGB information to “Base Color” and the A to “Opacity”. So you basically have a NxNx3 array of colour pixels you pass to “Base Color” and a NxNx1 array of alpha values you provide to “Opacity”. That is why Supremative was talking about “Scalar Values” since every pixel in your 2D-array is one-dimensional (NxNx1) in the case of the alpha array (or A-array, as I called it). Keep in mind: Nowhere is there an explicit mention of the fact that “Base Color” defaults to using RGB when RGBA is provided. And the nodes do not have information that display what format their input and output data have. You have to guess and deduce that all by yourself.

So what we do is in addition to providing the RGB array to “Base Color” is to provide the “A” output of our VectorParameter to opacity. Now both the RGB and the A information can be mapped onto our material and we get a transparent object.

Now that we understand that the RGB and the Alpha-Array need to be provided separately, we should be able to understand how to map our decal onto the existing material and only change the opacity of the base material and not of our decal. What we need to do is to ensure that in all the pixels of our alpha array that contain our decal the opacity is 1 (full opacity) and in all the other ones the opacity can be something different. So how do we do that?

Let’s first work on mapping our decal onto our existing, pink colour and work from there. What would be nice is if we could just layer the pink colour from the VectorParameter node and the colour of our decal on top of each other, so that the colour of the decal replaces the pink in all spots where it shows up. This is what is commonly referred to as the “normal blend mode” in pretty much any image manipulation software (Photoshop, GIMP, even Inkscape). You put the pink colour layer first and then you put the decal layer on top: Presto, your decal sits on top of your pink colour.

HOWEVER!
UE-5 DOESN’T HAVE A NORMAL BLEND MODE! IT HAS ALL THE OTHER ONES THAT EXIST BUT NOT THE MOST BASIC ONE!

So what can we do instead? We use a Lerp (LinearInterpolate) node…

…If we provide the TextureSample and the VectorParameter as a linear interpolation between the two to the Base Color of the shader and we ensure that the alpha information of our decal is taken into account during the interpolation, we can get something that produced the same result but is needlessly more convoluted…

So now that we have our decal on top of our pink colour, how do we make the pink transparent, but the decal fully opaque? What we would need to do is to make sure our alpha array (which is the direct inverse of opacity) would have values of 0 for every position that belongs to a pixel where our decal is supposed to show up (so that the decal is unaffected by the transparency) and some other number in all other places, so that only the pink is affected by the transparency. How do we do that?

…lerp time…yet again…

The Lerp node basically allows us to merge the alpha values from the VectorParameter node and the TextureSample node and to change them separately. To change the opacity of the pink colour, change the alpha in the VectorParameter. To change the opacity of the decal, change the Value B of the Opacity lerp.

There you go…