Download

How to make colored refraction/transparency

Hi,

I’ve spent several hours trying to achieve a simple colored glass material, without any luck. I have been googling and searching a lot, but it seems like no one has managed to create any sort of simple colored refractive material. Every tutorial or example I saw was just material with low opacity that had little bit of surface color, but that’s wrong, because such lit color gets shaded by lights and it does not look like a glass or liquid at all.

The closest thing to a tinted refractive material I found was this: https://forums.unrealengine.com/showthread.php?106698-tinted-Glass
but the shading tree in the attached example is ridiculously complex. I struggle to believe such a complex solution would be the only way to achieve something as essential as material with colored transparency.

Thanks in advance.

The easiest way is to not use the opacity of the material, but to use the Scene Color node and the emissive channel instead. This allows you to do whatever you want with the colors. Here’s a super simple tint example:

ColoredTransparency.png

Hey thanks!

This helps a little bit, but unfortunately, two new issues have arisen:

1, It does not seem to play well with the refraction:
refr.jpg

2, When creating simple, thin walled style glass, opacity masking masks out emission as well, so even if I have 100% red color in there, opacity masks it out and result is very faint:
thin.jpg

EDIT:

Actually nevermind #2. Scene color takes whatever is behind the material, so it completely negates use of opacity. Thin walled glass material use case is therefore covered, and just refractive colored glass use case remains. Thanks!

Yeah, the disadvantage of that approach is that you basically shouldn’t use the regular opacity and refraction inputs anymore. Luckily all they do can easily be recreated in your own solution.

For example, to recreate the refraction effect you take the screen UVs and offset them based on the local normal (and optionally the depth) and then use those UVs to sample the scene colors.

Here is a function i did the other day http://prntscr.com/f7rh7a and in the material http://prntscr.com/f7rhga
You just plug it into your Emissive and what it does is what Arnage described above.

You do lose your emissive channel now after using this somewhat however somehow i was able to compensate by using the “base color” as a multiplier sort of speak.

Hope it helps.

This is a little of topic from the original question, but considering emissive is additively blended anyway, you should be able to simply add any other emissive effects right before you plug the transparency results into the emissive channel.

It only multiplies to objects behind it, If the background is black it doesnt emit. So if you got a sphere and half of it is in black bg and the rest on a value >0 then your emissive will only be visible on the >1 areas, The ==0 areas will be whatever you have plugged in your base color.

Here is an example. http://prntscr.com/f7s019 I boosted the green emissive so its even more obvious http://prntscr.com/f7s0we and here is the material http://prntscr.com/f7s1io (Last multiply is plugged into emissive)

ps its not really offtopic, It might save people some headaches trying to figure those out.

edit: To cheat my emissive not really working what i did was http://prntscr.com/f7s28i and to get that i just multiplied my masks and plugged it in the base color (Yes base color takes values >1 and creates emissiveness).
edit2: forgot to mention it works well with AlphaComposite, In the other modes it looks a bit different and its emissive from base color isnt that powerful or detailed i should say.

You can actually fix that look on first image (more like a “tweak”), There is a refraction offset, Inside your material there is a Refraction section with a Refraction mode and a depth bias, Tweak those to get something close to what you’re looking for. Personally i had to use huge values or huge negative values to be precise but you lose some refraction by tweaking those so be careful.

Hey, thanks very much to everyone! You’ve helped me to successfully shade my first thing in UE4.
a7d59433e0c54835d8d003c8703b58029f8a7b57.jpeg

I’ll take a look at the other suggestions for the refractive material, and will let you know how it goes.

Thanks again.

Its looking Great. :slight_smile:

That looks great indeed. For completeness sake I also made a more complete example that correctly handles refraction as well as the fresnel effect, which is quite essential in a glass material.

Here’s the full material:
MoreComplete.png

and here’s the result on some primitives: (Sorry I didn’t have a car lying around :P)
d353f2839d29b010ad29399c3d5216d63f9f6ec9.jpeg
@DieByZero: Notice that the emmisive is handled correctly, in your example you are multiplying instead of adding, which caused you emissive to disappear on a dark background.

I was breaking my head because I tested it, It was lighting up my whole material which wasn’t what i wanted.

See what I was trying to do was Chromatic Abberation and it was working fine until you started doing math with adding or multiplying values. I think my brain was lagging and i wasn’t thinking of the most simple sollution http://prntscr.com/f7y5zv to do all the math before adding to the chromatic Abberation, This way i only Multiply with colors the masked areas that i wanted and then add those to the chromatic abberation :slight_smile:

http://prntscr.com/f7y6rq final look
@Arnage thanks you reset my brain! :smiley: