Download

What am I missing in my blurred glass material?

Hi,

Here is my setup for blurred glass material but it does not work. Could you check if I am missing something?

cfa66aeab1a9658373f22dcf4749860327e23e34.png

Custom Material Expression I used:
float3 CurColor;
float2 BaseUV = MaterialFloat2(ScreenAlignedPosition(Parameters.ScreenPosition).xy);
float2 NewUV = BaseUV;
float StepSize = Distance / (int) DistanceSteps;
float CurDistance;
float2 CurOffset;
float TwoPi = 6.283185;
float Substep;
float2 ScenePixels=View.RenderTargetSizeBaseUV;
ScenePixels+=View.TemporalAAParams.r;
float2 RandomSamp = ((uint)(ScenePixels.x) + 2 * (uint)(ScenePixels.y)) % 5;
RandomSamp+=TempAARandom+Texture2DSample(Tex,TexSampler,ScenePixels);
RandomSamp/=6;
RandomSamp-=0.5;
RandomSamp
=TempAARandom;

int i;
if (DistanceSteps<1)
{
return DecodeSceneColorForMaterialNode(NewUV);
}
else
{
while ( i < (int) DistanceSteps)
{

CurDistance += StepSize;
for (int j = 0; j < (int) RadialSteps; j++)
{
Substep++;
CurOffset.x = cos(TwoPi*((RandomSamp+Substep) / RadialSteps));
CurOffset.y = sin(TwoPi*((RandomSamp+Substep) / RadialSteps));
CurOffset =DistanceMask;
NewUV.x = BaseUV.x + (CurOffset.x * (CurDistance));
NewUV.y = BaseUV.y + (CurOffset.y * (CurDistance));
CurColor += DecodeSceneColorForMaterialNode(NewUV);
}
Substep+=0.618;
i++;
}
CurColor = CurColor / ((int)DistanceSteps
(int)RadialSteps);
return CurColor;
}

What does the compiler complain about? The only thing I see right away is that you used additive blend mode but I only tested this using translucent.

Also distance steps should never be 0, it needs to be at least 1 to show anything, and it needs to be at least 2 to get any blur. otherwise you just sample the center pixel over and over.

Also this was more meant to be just a quick test to show people how to get started. I realized much later that this is over-weighting samples near the center since it does not attempt to equally space the sampling points. This is fixed by weighting each sample by the distance from the center.

Thanks for immediate response!

This is my setup now:
Distance = 10
DistanceSteps = 3
RadialSteps = 2
TempAARandom = 0

Compiler does not complain. The problem is my material looks more like white/semi-translucent glass than blurred glass. It this a matter of tweaking parameters only? I’ve tried lots of configurations.

Here is a screenshot:

distance should be like 0.001 or something like that. A value of 1 means the entire screen. So you told each step to jump 10 monitors over and then rotate, which returns a clamped value somewhere at the edge of your screen.

And this will not blur other translucency or fog.

I would keep the material unlit until you get the blur working how you want.

Yeah, setting distance to 0.005 was the key here. Thanks. Now, the problem is blur is rather light. What can I do to make it harder?

Unlit material does not look good.

I mentioned that issue 2 posts back. The fix is to weight each sample by CurDistance, and to accumulate “CurDistance” into another float and then divide by that float in the end. This will weight the samples closer to the center less to account for the fact that they will over sample. This issue is why gaussian blur exists, to give a more natural distribution. but there is a reason I didn’t try to implement it, the custom node isn’t the ideal place for true gaussian blur, too slow.

Try this. First add this near the top
float accumdist=0;

Then the line:

CurColor += DecodeSceneColorForMaterialNode(NewUV);

replace with:

CurColor += DecodeSceneColorForMaterialNode(NewUV)*CurDistance;
accumdist +=CurDistance;

Then the 2nd to last line:
CurColor = CurColor / ((int)DistanceSteps*(int)RadialSteps);

change to:

CurColor = CurColor / ((int)DistanceSteps*(int)RadialSteps*accumdist);

Unfortunately, after applying changes, material became darker (near black) and does not look natural anymore.

Can you show the latest code. That change shouldn’t darken the result.

Sure:

float accumdist=0;
float3 CurColor;
float2 BaseUV = MaterialFloat2(ScreenAlignedPosition(Parameters.ScreenPosition).xy);
float2 NewUV = BaseUV;
float StepSize = Distance / (int) DistanceSteps;
float CurDistance;
float2 CurOffset;
float TwoPi = 6.283185;
float Substep;
float2 ScenePixels=View.RenderTargetSizeBaseUV;
ScenePixels+=View.TemporalAAParams.r;
float2 RandomSamp = ((uint)(ScenePixels.x) + 2 * (uint)(ScenePixels.y)) % 5;
RandomSamp+=TempAARandom+Texture2DSample(Tex,TexSampler,ScenePixels);
RandomSamp/=6;
RandomSamp-=0.5;
RandomSamp
=TempAARandom;

int i;
if (DistanceSteps<1)
{
return DecodeSceneColorForMaterialNode(NewUV);
}
else
{
while ( i < (int) DistanceSteps)
{

CurDistance += StepSize;
for (int j = 0; j < (int) RadialSteps; j++)
{
Substep++;
CurOffset.x = cos(TwoPi*((RandomSamp+Substep) / RadialSteps));
CurOffset.y = sin(TwoPi*((RandomSamp+Substep) / RadialSteps));
CurOffset =DistanceMask;
NewUV.x = BaseUV.x + (CurOffset.x * (CurDistance));
NewUV.y = BaseUV.y + (CurOffset.y * (CurDistance));
CurColor += DecodeSceneColorForMaterialNode(NewUV)CurDistance;
accumdist +=CurDistance;
}
Substep+=0.618;
i++;
}
CurColor = CurColor / ((int)DistanceSteps
(int)RadialSteps
accumdist);
return CurColor;
}

Ok I am silly, the 2nd to last line needs to be simplified to:

CurColor = CurColor / accumdist;

reason being that the way its set up, accumdist will count all of the steps. It was dividing by steps twice basically.

Hi Ryan,
Sorry for reviving the thread, but I found a obvious problem with this node, when viewport clips the glass mesh, there will be a white border on mesh like Fresnel effect.
Here is a screenshot that shows the problem: http://i.imgur.com/mVm2UIq.png
I am not a experienced programmer so I don’t know how to fix it with code, all I know is that the white border changes along with distance settings.
Other than that, the node works almost perfect with translucent material and even forward lighting mode.
So, please take a look and see if you can adjust the code to get rid of that effect. Thanks in advance.

Hi netseeker,

Thanks for checking this out and writing back your feedback.

The issue you are see should only occur in the editor but not inside of a standalone game. I have seen this issue with the material since day one as well and asked around to make sure there was nothing I could do. Turns out that when in the editor, the scene texture target is oversized a bit and some reason it clamps to white on the edges. But when you are running the standalone game, the render targets should match the specified resolution exactly so there won’t be any extra white space around the bottom and right edges.

That said, it probably is possible to fix the editor in the material with some custom clamping operation. I thought about doing that but such methods can be difficult to get right and easy to cause bugs that can be hard to reproduce and it would add some extra rendering cost to an already slow feature, for a reason that isn’t necessary for most finished products (except maybe archvis, where you intend to stay in the editor even when showing a client maybe?). If you wanted to try it, the fix would probably involve checking if either screen UV x or screen UV y went over 1 and if so either don’t accumulate or break or something (need to try it out to see what works).

Thank you so much Ryan for such a quick reply. I didn’t know that since my project is at starting point, so I am still using viewport simulation instead of full standalone game.
Then I try standalone game, it worked perfectly just as you said above. Also, thanks for explaining the reason behind this. For my project, it doesn’t matter whether the white edge happens in editor as long as it correctly shows in standalone game.
Another question related to blur node is that if I remember correctly, on 4.8 engine feature preview thread, it was shown that a new blur material node has been made in 4.8. Unfortunately, I checked from 4.8 to 4.10, that little cute node didn’t make it in currently engine, so my question is will this node be made into next version or in the near future? The reason for demanding this is that with experimental forward lighting, translucent material becomes nearly perfect for ArchViz projects, if a simple blur node can be achieved in material editor, that will produce even higher quality of glass material and will save a lot of time that artists like me spend on to figure out how to get it right.

Hi,
congrats for your nice mat and setup !
I’m actually trying to use your setup in my scene but I can’t reach the same result as in your screenshot (http://i.imgur.com/mVm2UIq.png).
For now, the best I can do looks like this : 25c6889683c25066643bc50c24c1122d77618def.jpeg

View is not really blurred through the glass, only the objects borders look like “diffracted”.

I’ve got Distance et up to 0.005, DistanceSteps 3, RadialSteps 2, TempAARandom 1.
For a TextureObject I’ve taken a 512*512 map made of a photoshop gaussian monochromatic noise.

I followed the steps for the material setup and used the last modifications RyanB has given for the custom node. Could you please give me the final parameters you used as Distance, DistanceSteps and so ?
Thanks a lot !