In the last post I create a material like the one used in FFXV noctis magic swords. But in reality, the game material sure looks waay simple.
I though It will be a good idea to explore some more common “real world” material techniques. So lets see how to create very cheap crystal materials with lots of scalability options.
https://1.bp.blogspot.com/-tOWGZWNQqvw/XUY2HCMyJdI/AAAAAAAAAQY/jUEqYxouIL8KY2GMHwhpUnkWgxfAvKoRQCEwYBhgL/s640/Final3.PNG
Really, the main thing we need to make a shiny crystal material its a good reflection. Lets take a look to two good examples:
https://www.youtube.com/watch?v=dcndZNVUxFM
[TABLE=“class: tr-caption-container, align: center, cellpadding: 0, cellspacing: 0”]
https://vignette.wikia.nocookie.net/finalfantasy/images/2/27/Armiger_in_FFXV.png/revision/latest?cb=20190617174548
Image from the FFXV wiki(finalfantasy.fandom.com)
This two are examples of “real world” uses of crystal like materials in current times. Taking a look you can see that none of them uses super expensive fancy techniques, the Yoshis gems have an opaque material with custom reflection and the FFXV uses a simple but effective reflection with a little refraction. I picked this two examples as I happen to have played recently both games.
So lets try to understand how reflections work in the first place. Roughly speakibn, by default, the unreal opaque materials use the nearest reflection capture texture. But the transparent materials, need to be in a lighting model Surface ForwardShading or Surface TranslucencyVolume to be able to have the same behaviour. This modes are the most expensive ones for transparency wich by default is already very heavy. Without getting into much detail, the overall base instructions for the materials are:
Opaque unlit 30
Opaque lit 120
Transparent unlit 50
Transparent Volumetric NonDirectional 70
Transparent lit forwardShading 770
Transparent lit translucencyVolume 310
https://1.bp.blogspot.com/-rxSBSrSif4E/XUCxhrL4RrI/AAAAAAAAALo/IBIWVkbNNS4Zfd5PwmDO2J-PjVFfqpbtwCLcBGAs/s640/Captura1.PNG
In this image you can see in the left the opaque material and the translucent with translucencyVolume on the right. Note that the transparent one doesnt recieve SSR(screen space reflections). We can enable them in the translucency tab next to lighting mode, but that alone will add about 120 instructions.
Knowing this, lets do some cheap cool crystal like shaders. First of all lets start with an unlin opaque shader model, and make a reflection cubemap. To do this add to the scene a scene capture cube, create in the content folder a RenderTargetCube (right click->materials and textures-> cube render target) and link the render target to the scene capture.
To use this render target in the material we can drag it into the shader graph and use it as a texture. As UVs we will use the ReflectionVectorNode. Plug the texture into the emissive and the material should behave as a reflective mirror.
https://1.bp.blogspot.com/-RrbcRJCDGDM/XUCzmoLFBPI/AAAAAAAAAL0/j1wxS8HkTI8VNjXMVoVPdSwt4TBJApbUwCLcBGAs/s640/2.PNG
https://1.bp.blogspot.com/-CmSxiCmyXi4/XUC6qWEpzCI/AAAAAAAAAMA/fr-cH6JyJesRiFvJBLFgFHKrY7dQsXWYgCLcBGAs/s640/2.1.PNG
Notice that the sphere is reflecting itself, this could be usefull in many cases, but you can disable just by adding the sphere in the hidden actors list of the scene capture.
If you move the scene capture, the reflection will update in real time. This is expensive, but If you need accurate real time reflections in any actor its a good starting point, just attach the scene capture to your actor.
Have in mind that for this particular case, we dont need to use the eye adaption node, since the brightness of the reflection itself should be taken into the eye adaption as well as the overall scene. We will use it nontheless if we want a consistent brightness independent of the eye adaption.
In the case you want hard edges on a sorftened normal mesh (like with gems or crystals) that you cant or dont want to soften for any reason, you can still get those hard edges in the shader just by doing this and using world space normals(by disabling tangent space normals)
[TABLE=“class: tr-caption-container, align: center, cellpadding: 0, cellspacing: 0”]
https://1.bp.blogspot.com/-j2BXUcN_pq4/XUOJuuwvWsI/AAAAAAAAAOM/4ojkZenkp34wVr4LmU7Y85RemxfiApYywCLcBGAs/s640/HardEdges.PNG
Shader hard edges could be very usefull in situations where you just want to set hard edges by material instead of by mesh.
Lets begin making a cool reflection enviroment. Lets create a new empty level and place a scene capture cube on it linked with our render target. I found a confortable setup having the render target visible while adding objects and lights on the scene, and having an object with the material we are creating to see real time how it looks.
A good tip its to use volumetric lights and flat bright shapes to get hard reflections, but anything goes here as long as you like the result (remember to hide the preview object in the scene capture). If you dont know exactly what you want a good practice is to look at real life light setups, this will give a professional look to your cubemap.
Once you get what you want right click on the cubemapRenderTarget and create static texture. Now we dont need the scene capture.
Here is the fast set up that I will be using:
https://1.bp.blogspot.com/-nDsDli8Fe3A/XUDQQD4df-I/AAAAAAAAAMo/adK0CIn4OesXzS2U5tInx1HRyiKKO0rVgCLcBGAs/s640/3.2.PNG
[TABLE="class: tr-caption-container, align: center, cellpadding: 0, cellspacing: 0"]
https://1.bp.blogspot.com/-zY4X1bAwAyQ/XUDQOiBHjQI/AAAAAAAAAMk/YW3tjSnqefQyZ83ZtlYCx5Juof4ko47KwCLcBGAs/s640/CheapCrystalCubemap.png
Final texture Ill be using
https://1.bp.blogspot.com/-ekHusqIxzWg/XUDRVO3yTFI/AAAAAAAAAMw/bEmEK2Rscc8TzmGvS5Hhg0f30V6Ts_rWwCLcBGAs/s640/4.PNG
So far the fake reflections do a good job in hard surfaces, now its time to adjust the color and the intensity of the reflection. For this we can connect two colors blended by a fresnel, so we can shade a little bit. Also we can tint the reflection. And thus far, here is how our crystals look, they are highly customizable and with only 65 instructions.
https://1.bp.blogspot.com/-Oqcc3STRn3Q/XUDVy-vRbjI/AAAAAAAAANA/oPC0khlyrmkSAdik0ks7JDkXgFB0Y-p7gCLcBGAs/s640/5.1.PNG
https://1.bp.blogspot.com/-otG8DkID2hE/XUDVy9YPxII/AAAAAAAAAM8/rjK7w7_9_gYwsIcw_fQEqEBrBZdfSgR5QCLcBGAs/s640/5.PNG
We can go a little bit further by making the material lit, this will give us aditional reflections, light shading and a metalic atribute to play with. To not complicate things too much, I plugged in the colors we have into the base color and the reflections into emissive.
But you can try applying normals, adding a base color and the ones we got to emissive, apply more than one cubemap, use the fresnel to change the roughness/metallic/specular values, add textures,… anything goes!
https://1.bp.blogspot.com/-crdz2PcLB2I/XUDdP5kADAI/AAAAAAAAANs/4uA5vNXyhrA9qNG47EgbvkDi1anWPkfDACLcBGAs/s640/6.1.PNG
https://1.bp.blogspot.com/-kVSI-L6TACk/XUDbA0oOCvI/AAAAAAAAANQ/wkc2UobzF3Ic4vD5qW8Ed1lc9HQgE94agCLcBGAs/s640/6.PNG
Another good way to go its to use textures with a different bumpOffset each (bumpOffset Its one of the oldest tricks in the book for a reason). We can use this to fake highlights and even chromatic aberration. To show a different approach to reflections we can try to use the fresnel for a consistent circle of light effect.
To do this we just need the fresnel and a sine witn a period of 7 (you can increase or decrease the value to adjust the circle radius). In this case we will use a dot operation to get the fresnel, if you only need a soft gradient this will save you a couple of instructions.
https://1.bp.blogspot.com/-gO_pAiqWMng/XUOAv7F1gxI/AAAAAAAAAN8/LVr2CpjjCW8GplZDTk2ojg8XXJaZZnrVACLcBGAs/s640/7.1.PNG
https://1.bp.blogspot.com/-vR3jbOKlLds/XUOAso2Fn9I/AAAAAAAAAN4/ZBDl93tYyVcCEqrOSec3_dWb5GCcsB3UwCLcBGAs/s640/7.PNG
To spice a little bit the reflection we can use a texture to alter the normals and simulate how light breaks when entering the surface. This can be extended to achieve a dual normal look. Change the height of this second reflection will give us a sensation of 3D depth in the shader. (Ideal for jewelly!).
https://1.bp.blogspot.com/-entIk1WeGpo/XUONDFyuEyI/AAAAAAAAAOc/88glogItyBsKM1kDGnByJe42vN0InT1nwCLcBGAs/s640/8.1.PNG
https://1.bp.blogspot.com/-o4tdZXOVAkw/XUONCe1j-RI/AAAAAAAAAOY/JcxR19qn284z0E6IGGm1eiBUIdICn4UOACLcBGAs/s640/8.PNG
[TABLE=“class: tr-caption-container, align: center, cellpadding: 0, cellspacing: 0”]
https://1.bp.blogspot.com/-30PWc_GY8yc/XUONNWEoCCI/AAAAAAAAAOg/t1rWNl6pJb4I1NBzEbxGNHvhgCuh22dAwCLcBGAs/s320/TexFastCracksGradient.png
The texture Im ussing for the inner reflection.
*There will be a image at the end of the post showing how to get this textures. Although they are too fancy, they can be a good starting point for a good ones.
Just by tinting the reflections you can get game ready results with the current unlit shader: [CENTER]
https://1.bp.blogspot.com/-IiCMlMkpK6w/XUOVKoUSHxI/AAAAAAAAAO0/mpTw3uTLn7cZOhYCqFC6U4NkuGBVyfsrgCLcBGAs/s640/9.PNG
[/CENTER]
If we remove the base reflection and make the material lit, we get the default reflection of the opaque material and our inner reflections, plus we can play with the base color to get rainbow like effects. Keep in mind that to use them you will need to add a multipler to tweak the emissive depending on the scene.
[TABLE=“class: tr-caption-container, align: center, cellpadding: 0, cellspacing: 0”]
https://1.bp.blogspot.com/-mbw4IImJbNM/XUObST_E_uI/AAAAAAAAAPA/rGfPGIDOgqEuecTcGUPW4gYvxnzBEDG5QCLcBGAs/s640/Shadow10.PNG
Shadow changing colors!
https://1.bp.blogspot.com/-NiUSp5tNi70/XUObYYnTIxI/AAAAAAAAAPE/706-BmxPFUA2a9Z8-566iEeswcEqDsfVgCLcBGAs/s640/Shadow10.2.PNG
To spice things a bit, lets get back to the previous example for simplicity reasons and lets try to implement the chromatic aberration. Right now we dont have access to the background image, but we can fake it with a different method. Lets use different bump heights to get the chromatic aberration colors!
https://1.bp.blogspot.com/-ZY2Mo2JcNzQ/XUOy5qFgfTI/AAAAAAAAAPU/9tNz1-hVxXQEnxNMGebSPqRdDCzLTszGQCLcBGAs/s640/CAa.PNG
https://1.bp.blogspot.com/-Tr5iMNGQiSQ/XUOzKZ3iujI/AAAAAAAAAPc/f6eohe1oGjYwbtPbjDB-8A-xMgYB1IyEQCLcBGAs/s640/CAM.PNG
Also, multiplying an image like this with itself with a different height will give us an awesome wall like effect. This can be used to simulate cracks inside the crystal.
https://1.bp.blogspot.com/-UnktnC69kPw/XUO2qm2c24I/AAAAAAAAAPo/99I5hZBdlPoFzJvWu20EDwYxCOcxkAlwQCLcBGAs/s640/wall.PNG
We can improve it by making the material lit so it recieve the light and give us acess to more attributes. But turning the material to transparent lit will be a better deal, as we dont really need the opaque lit extra attributes right now. So lets foccus on setting up the opacity values.
https://1.bp.blogspot.com/-yt-YXz83LiQ/XUYooBo_0wI/AAAAAAAAAP0/swI1ekYaHtkdA3czMflJ-NPoDX9Dx357QCLcBGAs/s640/CA%2Bwalls1.PNG
https://1.bp.blogspot.com/-0PLQC0yvfI0/XUYoqQ6JM-I/AAAAAAAAAP4/Y5–yd9eoRUF0N7Iq_rSnmg_N-bHa86JACLcBGAs/s640/CA%2Bwalls.PNG
I added a couple of tweaks to be able to regulate the chromatic aberration intensity and add refraction.In this case we use a lerp to increase the difference between the base sample ( all samples divided by tree so the result is 0-1) and the one with crhomatic aberration. So the more we increase the value the more the differences will grow. I often use this to control the contrast of an image. and if you add or subtract a value before, you can control the brighness too. The setup its like this:
[TABLE=“class: tr-caption-container, align: center, cellpadding: 0, cellspacing: 0”]
https://1.bp.blogspot.com/-b8JWcXN7rIU/XUY1BVHcPII/AAAAAAAAAQI/mg6IrJvGDYMmSBDyyiQ_3UIer4NCERk0gCLcBGAs/s640/contrast.PNG
This is an easy and cheap way of tweaking contrast and brightness of anything!
Finally lets add a extra shiny parameter to simulate the sparkling in the crystal. This can be done with one of the current samples we got, but I decided to make samples in and out of the surface to simulate the lens like effect of some of the highlihghts. And all with only about 140 instructions, a little more than a clean opaque material!
https://1.bp.blogspot.com/-tOWGZWNQqvw/XUY2HCMyJdI/AAAAAAAAAQQ/ScGCOdaLMXM3-U1kzL5ZwiDAQdkKxq-rwCLcBGAs/s640/Final3.PNG
https://1.bp.blogspot.com/-LV45vEVUXKY/XUY2ZOvfnYI/AAAAAAAAAQc/raqcsPgj0L8kJWaRNfhlCgCyKTCKC2m6QCLcBGAs/s640/Final.PNG
Keep in mind that this techniques work with the cubemap approach as well. And you can get away with a lot less, for example, if you cant spend too many resources you can try to add the chromatic aberration into the enviroment cubemap texture. And by the way, If you dont want to deal with cubemaps, you can sample a current 2D texture as a cubemap like this:
https://1.bp.blogspot.com/-EeBtmWAa3uw/XUY4M0PxA-I/AAAAAAAAAQo/w6x0KfnFIZwBFGevsQOkzx54wVtpQt9SwCLcBGAs/s640/TextureCubemap.PNG
[TABLE="class: tr-caption-container, align: center, cellpadding: 0, cellspacing: 0"]
https://1.bp.blogspot.com/-eeqNN8N2uW4/XUY5_34oP_I/AAAAAAAAAQ0/JlB9VKBOk_IWqBHmD8Ep8HBYMoC81-sfgCEwYBhgL/s640/Text.PNG
The node graph in substance designer to create the textures, red channel for the standard one and the green for the highlights.
So I think this is all for now, remember that the you can allways get away with aproximating things instead of having to spend tons of resources in precise calculations. Have fun with shaders and be creative when optimizing!!