Advanced Glass Material WIP

Development Rendering
1

Hello, i had to make a glassmaterial for a project. This is what i came up with. Any feedback is welcome. Its a modified / expanded version from the water material inside the Nvidia Flex demos.
Youtube Video is on the way.

Edit: Here it is - YouTube

Refraction.jpg
Refraction.jpg1928×1044 242 KB

2

Pretty cool! I am not familiar with exactly how the flex demo material you mentioned worked, but did you change the reflection code to have some chromatic abberation to achieve that? Or is raytracing the cubemaps as well as the scene texture? kind of looks like less artifacts than you’d get with standard scene texture refraction.

3

Thanks RyanB ! Yes i added an chromatic abberation effect fairly simple with that node modification :

252dacc4b364d32188df77e66a1f6db0f6030b3e.jpeg

Here is the work in progess material (copy paste to a translucent material)

http://www.pasteall.org/66641

I had no time to set up useful values for now. I also used Tom loomans inner translucent culling. There is one error message though, the material instance preview says [ES2] (Node not supported in feature level ES2) and so on. No idea what that means. Im not a professional at that topic.

4

You need specular highlights on it. You can try turning on forward shading and using per-pixel lighting, but a cheaper way to do it is with phong shading and a light vector. Add the specular result from Phong to the opacity, and multiply that by your strength (preferably the strength of the lights in your scene, in linear space).

5

Haven´t worked on that yet. I used baked CubeMaps for that for now . Here is a comparison between the standart refraction and “my” method

RefractionCompare.jpg
RefractionCompare.jpg758×1019 145 KB

6

DUDE that is extrem :slight_smile:

7

Hey guys,

This material was pretty cool so I wanted to see how easy it would be to do in code so that it will work automatically in any material. Turns out it is pretty easy to modify this code to do it.

You can add this code after line 57 in DistortApplyScreenPS.usf. Replace from there up to OutColor=DistColor;


	float2 NewTexCoord2 = TexCoord.xy + DistOffset * 1.05;
	FLATTEN if ( NewTexCoord2.x < SceneColorRect.x || NewTexCoord2.x > SceneColorRect.z ||
				 NewTexCoord2.y < SceneColorRect.y || NewTexCoord2.y > SceneColorRect.w )
	{
		NewTexCoord2 = TexCoord.xy;
	}
	float2 NewTexCoord3 = TexCoord.xy + DistOffset * 1.1;
	FLATTEN if ( NewTexCoord3.x < SceneColorRect.x || NewTexCoord3.x > SceneColorRect.z ||
				 NewTexCoord3.y < SceneColorRect.y || NewTexCoord3.y > SceneColorRect.w )
	{
		NewTexCoord3 = TexCoord.xy;
	}


	half4 DistColorR = Texture2DSample(SceneColorTexture, SceneColorTextureSampler, NewTexCoord);
	half4 DistColorG = Texture2DSample(SceneColorTexture, SceneColorTextureSampler, NewTexCoord2);
	half4 DistColorB = Texture2DSample(SceneColorTexture, SceneColorTextureSampler, NewTexCoord3);

	half4 DistColor = float4(DistColorR.x, DistColorG.y, DistColorB.z, DistColorR.w);

This will actually be more performant since since sampling scene texture inside of translucent materials causes some overhead cost each time it is used whereas doing it in code will have a constant overhead.

Of course you probably also want to make the 1.05 and 1.1 values I hard coded into parameters or something. But these values are just approximations since there is no real raytracing or correct refraction calculation going on.

After pasting that in you simply have to recompile shaders in the editor with ctrl+shift+period and it only takes a few seconds with this file.

8

Wooaa great @RyanB ! Thats so much better.

First test before i have to hurry :stuck_out_tongue: Iam so happy right now hehe

fa0e8f6c87c80cd69d13ae40a02260707adaa78e.jpeg

9

Thanks @Maternal for sharing your material! And @RyanB for transforming it into a small snippet :slight_smile:

10

Looks great! Thanks for sharing :slight_smile:

11

Thanks @<a href=“https://forums.unrealengine.com/member.php?u=2426” target=“_blank”>SchnitzelDude</a> and greetings “neighbour” :slight_smile:

This new refraction shader mod is quite interesting, but its difficult for me to find better values and setups.
[video]https://youtu.be/LAr2lICB7N4[/video]

@<a href=“https://forums.unrealengine.com/member.php?u=3692” target=“_blank”>RyanB</a>

What does that mean exactly ? Does that mean i could extend the material shader inputs ? Never actually knew or thought about digging into that direction. This .usf thing really got me interested :slight_smile:

Edit: This @ highlighting does weird things now

12

It means make the chromatic abberation intensity a variable you can tweak with the console. You could conceivably add a custom material input node but it would be a lot more work than a cvar.

Here is a tutorial on writing a cvar:

https://docs.unrealengine.com/latest/INT/Programming/Development/Tools/ConsoleManager/index.html

you only need one variable since the spread between the 3 channels should be linear (or at least I assume for simplicity sake). Then you can calculate the 2 offsets from that.

keep in mind that the post process “fringe” will cause a bit of additional spread on top of this refraction.

13

I’ve tried to use this by pasting the code into a translucent material but it keep crashing the engine. i’m using ue4.11.2. Am I doing something wrong ? is there maybe a chance we can have a look on how to do it trough nodes or is that impossible to do ?

14

@RyanB any chance this could be added to 4.12?

15

Well, if this came from Nvidia FleX, then that explains why FleX fluid surface rendering is so **** slow :p. That being said, Nvidia has a knack for creating fantastic shaders for realtime. And now I kinda want to plug your CA into the flex fluid, just for fun. BTW, where are we supposed to paste the Pasteall code to? I crash Unreal whenever I paste it directly to a translucent material.

16

Good question. There is a file called “C:\Program Files (x86)\Epic Games\4.11\Engine\Shaders\DistortApplyScreenPS.usf”. If you make a copy of this one (and a further as backup - coz you pretty sure need it) and replace the stuff in this file from line 57 up to OutColor=DistColor; with the code that is written here: Advanced Glass Material WIP - Rendering - Epic Developer Community Forums then you would get some significant change if you place your modified copy of that file over the original and hit CTRL-SHIFT-Period in the editor. Unfortunately all of my glass mats (either from market-place or my own one) look pretty wrong afterwards as long as I add some refraction value. If I don’t change the refraction value then it’s “ok” but just translucent anymore (and does not really look that much like glass anymore).

Edit: Got it working. I even replaced the “OutColor=DistColor;” line - which was wrong.

18

Yes same for me

19

mine crashes to desktop everytime I try to do this

20

What code are you trying to paste? The code I posted was meant to go into a .usf file, not a material. It could be done in a material but that would just be rewriting what Maternal already did using nodes so I didn’t see much point in it.

Re: could the built in chromatic aberration go into main: Probably not anytime soon. I brought this up with rendering guys and they had a few issues with it being on that are valid:

  1. It wouldn’t let you control the aberration per asset, it would have to be the same for ALL translucency and all would get it
  2. It would have a double chromatic artifact when using the scene color fringe which is another path for chromatic aberration
  3. Doing it in the material using Maternal’s method while more expensive (due to the scene color lookups) is technically more flexible since it gives you the choice of which materials to apple the extra chromatic aberration too. I hope this makes sense. That isn’t to say it won’t ever go in. Feel free to request it and that could change opinions over time.
21

Same here, the editor crashes, the code I’m trying to paste is this one:

I paste it into a translucent material, (add new > material > then I make it translucent) and it crashes during the paste.