UE4 Intro To Materials - Page 11


Index



Refraction and Fresnel


  1. 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.
Create new sprite with button

  1. Now create a new material and call it M_Refraction_Master.
Create new sprite with button

  1. Open the material and in the details panel change the Blend Mode to Translucent. Notice that this opens up the Refraction pin:
Create new sprite with button

  1. 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.
Create new sprite with button

  1. Add a Constant and make it .3 and attach it to Opacity:
Create new sprite with button

  1. Add comments to your nodes:
Create new sprite with button

  1. Add a Constant node and make it .1. Notice how this gets to be like a magnifying glass making objects appear larger:
Create new sprite with button

  1. Change the refraction index to 5 and make things smaller like a wide angle lens.
Create new sprite with button

  1. Change to the refraction index of glass which is roughly 1.33. Add comments to your node. Press the Apply button.
Create new sprite with button

  1. 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.
Create new sprite with button

  1. Add the material to the game object and voila, simple glass ball!
Create new sprite with button

  1. 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.
Create new sprite with button

  1. 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.
Create new sprite with button

  1. Now connect the output of the Fresnel node to the Switch. Press the Apply button.
Create new sprite with button

  1. 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.
Create new sprite with button

  1. Now go into the game and assign this material to another sphere. Look at it, and oh it is all distorted. Why?
Create new sprite with button

  1. 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.
Create new sprite with button

  1. 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:
Create new sprite with button

  1. 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!
Create new sprite with button

  1. 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.
Create new sprite with button

  1. 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.
Create new sprite with button

  1. Now go into the game and look at the final result:
Create new sprite with button

  1. 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 M_Refraction_SurfaceTrans:
Create new sprite with button

  1. Open up the Material you just created. Go into the details panel under Translucency. Change the Lighting Mode to Surface Translucency Volume:
Create new sprite with button

  1. 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:
Create new sprite with button

  1. Press Save All and update Github by committing and pushing all the changes made:
Create new sprite with button



<- Previous   Home    Continue ->