UE4 Intro To Materials - Page 11
Refraction and Fresnel
- We are moving on to the final room #6 for this level. When rendering glass or translucent materials they have the property of bending light and acting like a lense. This called refraction. Unreal supports this for its transparent textures.
- Now create a new material and call it
- Open the material and in the details panel change the Blend Mode to Translucent. Notice that this opens up the Refraction pin:
- Add a Constant 3 Vector and make it light blue like glass. Connect it to the base color node. Attacht the output to the Base Color pin.
- Add a Constant and make it
.3 and attach it to Opacity:
- Add comments to your nodes:
- Add a Constant node and make it
.1. Notice how this gets to be like a magnifying glass making objects appear larger:
- Change the refraction index to
5 and make things smaller like a wide angle lens.
- Change to the refraction index of glass which is roughly
1.33. Add comments to your node. Press the Apply button.
- Add a Sphere to your level and scale it up fairly large. I set mine to
3.0 on XYZ. We will need to fit 4 in the room.
- Add the material to the game object and voila, simple glass ball!
- Now that looks OK in game, but we can make it look better. If this was a real glass sphere the refraction would be greater around the edges versus the center where the two glass planes are at their furthest distance. Now Fresnel in computer graphics controls the amount of refraction versus reflection of a translucent surface based on the angle. If you look at a lake, at certain angles it is completely reflective and others completely refractive. Now we want to be able to toggle this on or off in our instance. How do we have a path of a Material that we can turn on and off like a light switch? Add a Static Switch Parameter node to the material and call it
Use Fresnel?. Connect the output of the Vector to the input False. This means if it is set to false it will behave without the Fresnel. Ignore the error as we will fix it next.
- Take the output pin from the Switch and connect it to the Refraction pin in the main Material node. Add a Fresnel node and surround all nodes with a comment.
- Now connect the output of the Fresnel node to the Switch. Press the Apply button.
- Go into the game and right click on the Material and create a Material Instance called
MI_Refraction_Glass. Open the Material Instance and make sure Use Frensnel is switched to
true with a checkmark in the box.
- Now go into the game and assign this material to another sphere. Look at it, and oh it is all distorted. Why?
- Go back to the original M_Simple_Refraction_Transparency_Master and right click on Fresnel and select Start Realtime Preview. Oh, now I I see the problem. What is happening is that the white pixels are on the edge (a value of 1). This in the fraction pin does nothing. In the middle it is black which is near 0 which is MASSIVE magnification.
- So what we want to do is go from 1 to 2. We can add
1 to the entire fresnel to increase the range. We do this by dropping in an Add node and Constant node set to
1 between Fresnel and the Switch like so:
- Now if we preview the Add node we will not see the outcome of what we are doing. The game will only render white now and it will be impossilbe to see the difference between the 1.0 and 2.0 pixels. But it is there!
- Now go into the game and look at the effect. Oooh, this is much better. Notice that in the center there is very little to no refraction but it gets wider the closer to the edge. It really adds volume to the shape and looks a lot more realistic.
- But we can make it look better. Go back to the original M_Refraction_Master. Lets add a tiny bit of a glow on the edges to give the shape a bit more definition. Add a Constant3Vector node and make it white (1, 1, 1). Add a Multiply node and plug the output of the Vector3 into the A input. Take the output of the Fresnel and add it to the B pin of the multiply node. Send the output to the Emissive Color pin on the main material node. Press the Apply button.
- Now go into the game and look at the final result:
- Now there are more expensive ways to make the glass look better. These should be used sparingly in games but for architectural visualizations might give the needed punch for a scene with a dramatic translucent object. Duplicate M_Simple_Refraction_Master. Name the Material
- Open up the Material you just created. Go into the details panel under Translucency. Change the Lighting Mode to Surface Translucency Volume:
- Set default Fresnel to true and press the Apply Button. Go to the game and add a third sphere and assign this new material. Look that it is even more realistic for this translucent sphere in game:
- Press Save All and update Github by committing and pushing all the changes made:
<- Previous Home Continue ->