tinted Glass ?

is it somehow possible to make a tinted glass with refraction ?
I have seen the colored shadow tutorial where they use the emissive color to get glass colored, well in a certain way.
But it still does not look like tinted glass. I´ve tried now a lot and the final bit is always missing. The closest I could get was using
a scene color node in the diffuse slot wich i broke up in 3 floats and multiplied each with a broken up rgb node.
The problem in this case starts when I use refraction. I attached 3 images. One of a clear glass material with refraction
one of a colored glass without refraction and one of problem with the colored glass as soon as I apply refraction.
Any further ideas are much appreciated.

Easiest solution with most control is to manually calculate refraction. Refraction math in engine is really simple. It’s basically calculate uv like this:


refractedUV = ScreenPosition + (refractionIndex - 1) * ViewSpaceNormal.xy

Then just plug this to scene color and you have refraction. When you do this manually you can tint color just like you want. You can also make edge pixels fade towards non refractedUV just like you want. You can also sample sceneDepth from refractedUV and discard refracted sample if its closer than current pixel or if it’s wrong side of the pixel. You can also calculate chromatic aberration easily when doing refraction manually.

It looks like in the 3rd image you are using your manual refraction plus the built in shader refraction and that is why you are getting that weird outer layer that shows no color. I think you need to do one or the other. But your general approach is sound, although obviously it will be un shadowed if that matters.

@:
Yes, that was my first intention, just add the shader based refraction, but well it doesn´t work that way.
Would be great to have an easier way to get tinted glas in the future.

@Kalle_H:
Thank You for this solution. I´m currently trying to set it up but I´m stuck at ViewSpaceNormal.xy. I don´t know what node
or calculation this is. Attached is a screenshot of the current shader setup as you suggested. Could you please take a look to see if the basic setup is correct
and please tell me what you mean with ViewSpaceNormal.xy ?

So just get PixelNormalWs and transfrom that from WorldSpace to ViewSpace then use componentMask to get r and g. Also fresnel should be taken account when you get that IOR for refraction.

Thanks, this works. Meanwhile I was experimenting with fresnel blended black and white values instead of the view normals.
The refraction looks a bit different but so does the refraction when using view normals compared to the refraction of a basic shader.
I guess it doesn´t really mater as we´re not raytracing anyway and a refraction will never look completly real unless raytracing is involved.
At least it somehow looks like a refraction :slight_smile:
So these are the results of my experiments. I´m pretty happy.

  1. view normals.
  2. My approach with fresnel blended black and white values.
  3. My approach with a normal map blended into the refraction as well as in the standard normal map slot.
  4. Chromatic Abberation.

Thank You guys for the help !

It’s really a nice look, Could you please post the full shader to show me how to do that effect? I’m trying to get that effect too.

By the way. You need to flip viewNormal.x sign. UE4 has bug with refraction horizontal direction which causes distortion to be outwards instead of inwards. Not sure if it’s intentional or not.

thank you once again Kalle_H I would not have been able to make this shader without you.
So I finalized this shader and added some bits and pieces. The shader file is attached.
The tip with the flipped x-coordinate brought me to another little thing I included. By multiplying
the coordinate negative in the x-axis and positive in the y axis I was able to adjust the scale after I applied
two diffferent IORs by a fresnel node. This resulted in a much more realistic look. Also I observed how
a refraction behaves in a raytracer when you get further away from a sphere.
With a raytracer the look of the refraction is well somehow “constant”, while it is heavily distorting in UE4.
I was able to mimic this behaviour by blending two IOR values with a distance_blend node. This also added some further realism.
See attached image.
It´s not perfect but I think comes much closer to a physical refraction compared to UE4´s standard refraction.

Some notes to understand this shader.

s_cg_filter_color = color of the glass
s_cg_dif_fuzzy_power = add some contrast to the refraction
the “lerp” node left of the “scene color” node blends two different iors with a fresnel falloff.
The fresnel falloff itself has a scurve node applied to fine adjust the falloff distribution beyond
what is possible with the exponent.
Input A and B of this “lerp” are basically the same. they generate the refraction according to Kalle_H´s formula.
One thing that is different. Input A uses an IOR that blends two values over distance as described above. Those values
I use were found by trial and error and they are not perfect.
In each of the two refraction functions you will find two multiply nodes “s_cg_dif_refr2_X_flip_scale” for example.
I use them for the following reasons. First as Kalle said to flip the x-axis. Second to scale the refracted image image back to the object boundaries
It´s a handy further control over where and how the refraction is happening. Just play with those values (best with the values from the B input)
and you´ll see what I mean. (If you set those muliplier to 1 you´ll see how it would look without them and compare these to the attached raytraced images)

I´m still not really happy with the reflections. The shader itself is a surface transluceny volume with screen space reflections. But I´ll probabely
add an image from a scene capture cube in the emissive slot on top. Btw. You can experiment with the metallic and specular values for the moment.

The advantage of this shader is in my eye a more realistic looking refraction as well as beeing able to really make tinted glass.
The drawback is visible in the last attached image. Objects that are more complex like the statue and the torus knot have some z problems.
The feet of the statue are gone for example. Don´t know if there is a way around. Also it makes some weird things when an objects that has this shader
applied comes to the edge of the screen. This is especially visible on a sphere and not that notable on more complex objects.

http://sorceress.netfrag.org/UE4/s_glas_colored4.uasset

Put refraction color to emissive. Refraction shouln’t affect to base color in anyway. You also need to multiply refraction color with transmission. You also need to use fresnel node to make material fully opaque in glancing angles.(and this need to fade out refraction.)
IOR should be updated with fresnel calculation before calculating distortion amount. I made some of these changes and simplified material a bit. https://dl.dropboxusercontent.com/u/10960490/s_glas_colored4Updated.uasset

Thanks you. I see there is a lot to optimize and simplify. I know a lot about shading but I´m not very good with the math behind it :slight_smile:

Hi netfraf-sam,
Thanks to share Sir!, I just hijacked your material, and I created a modified version for my dragon ball sphere:p

here my result:

Hi Kalle-H,
This post is a little bit old, but can you please share again your modified material? Your link is broken…
Many thanks

2 Likes