Refractive material for water and glass

[ykafia]

Hi everyone !

This is just going to be a short tutorial on how to make a refractive material with Stride.

General idea

The general idea is to render everything but the refractive objects on a separate render target/texture (that we will call BackgroundTexture while the main camera will render everything. We will slap the BackgroundTexture on the reflective object's emissive map and using normals we will bend the UVs so it looks reflected.

Limitations

• High lights and reflections are not computed since we're using the emissive map here, i'll update the tutorial once i find a way
• Everything that's not rendered in the BackgroundTexture will not be refracted : it won't be physically correct and if the refraction goes beyond the texture, you'll see it repeat itself.
• Everything that is rendered in the BackgroundTexture will be refracted : Everything that's in front of the reflective material will also be refracted (which is really not how real world refraction works). But i think this might be corrected with a more complex technique involving a depthmap.

First step, setting up the scene :

1. Put up some meshes around with different colors, they will serve as an example to how refraction looks.
2. Put up some new meshes with an empty material and change their render group to a specific one (in my example i used the group 1)

Le Shader

Here's the SDSL code for the refraction shader

namespace MyGame.Effects
{
    // Let's add a generic for the index of refraction so it can be modified in the editor.
    // A lot of these mixins actually give important data for the computation of the refraction!
    shader RefractiveMaterial<float IOR> : ShaderBaseStream, ComputeColor, NormalStream, Texturing, PositionStream4, Transformation, Camera
    {
        // The shader needs to have access to the background texture and maybe a little tint
        compose ComputeColor BackgroundTexture;
        compose ComputeColor DiffuseTexture;

        override float4 Compute()
        {
            float4 normals = float4(streams.normalWS,0);
            // This value gives us the position on the screen in pixel size we will later divide it by the screen size to get values between 0 and 1
            float2 pos = streams.ShadingPosition;
            
            // Eye (from the Camera mixin) gives us the camera's view direction
            // This variable will give us a sort of direction to where we will bend the UVs
            float4 refracted = refract(Eye,normals, IOR);
            
            // Here we add the screen position to the screen space projection of the refraction direction
            float2 bend = pos.xy + mul(refracted, WorldViewProjection).xy;

            // We compute the diffuse texture (before bending the UVs) just so we can add a little color to our material
            float4 diffuse = DiffuseTexture.Compute();
            
            // We bend the UVs
            streams.TexCoord = float2(
                bend.x/ViewSize.x,
                bend.y/ViewSize.y
            );


            // And finally multiply the diffuse color with the background color to get our result
            // I added a scalar because the actual result gives us a darker image.
            return  6*BackgroundTexture.Compute() * diffuse ;
        }
    };
};

Setting up the graphics compositor

1. Make sure to have 2 camera slots (Main, RefractedBackground)
2. Create an empty entity, add two child entities with the camera component. Each camera should have the same Transform and a different camera slot
3. Create a Render Target/Texture
4. In the graphics compositor make sure to have a scene renderer collection for your Game Renderer. Add one camera renderer that will render everything with the Main camera slot. And then a RenderTextureRenderer that will render everything but the refracted objects. Don't forget to uncheck the group you chose for your refractive objects on the render masks. Here's a screenshot of my settings for the GameRenderer
   
5. Add your shader on the emissive map, don't forget to set your index of refraction (IOR) to a value (glass is about 1.4) and the two composition nodes for the background texture and the diffuse texture. Since the values are multiplied if your tint is dark it will nullify the background color (will update this tutorial for a better shader)

Result