Bump Map Shader for Water

Hello,

I’m super new to writing shaders and really wanted to improve my skills by writing immersive water shaders. I’ve been following this tutorial to guide me in creating a bump map shader. Currently my shader isn’t changing anything, and the output looks like this:

The original water drawing is below on the left and the bump map is on the right:

(Trying to draw the water half transparent so you can see the sand below it)

From my understanding, the tutorial explains that in the bump map, at each x,y location the pixel located there holds data on the normal vector to the ‘3d’ surface. Then you use that data to calculate some distortion term to add to the original coordinate location, and draw the pixel at the distorted location instead.

Do you know why no distortion is occurring?

My shader is:

//bump map texture
Texture2D bumpMap;
//water original texture
Texture2D waterLayover;

//additional necessary variables
float xWaveLength;
float xWaveHeight;

sampler WaterBumpMapSampler = sampler_state { texture = <bumpMap>; };
sampler WaterLayoverSampler = sampler_state { texture = <waterLayover>; };

float4 PixelShaderFunction(float4 pos : SV_POSITION, float4 color1 : COLOR0, float2 texCoord : TEXCOORD0) : SV_TARGET0
{
    //sample bump map
    float4 bumpColor = tex2D(WaterBumpMapSampler, texCoord.xy);

    //get offset 
    float2 perturbation = xWaveHeight * (bumpColor.rg - 0.5f)*2.0f;

    //apply offset to coordinates in original texture
    float2 currentCoords = texCoord.xy;
    float2 perturbatedTexCoords = currentCoords + perturbation;

    //return the perturbed values
    float4 color = tex2D(WaterLayoverSampler, perturbatedTexCoords);
    return color;
}

technique Technique1
{
    pass Pass1
    {
        PixelShader = compile ps_4_0 PixelShaderFunction();
    }
}

And my draw call looks like:

 protected override void Draw(GameTime gameTime)
        {
            GraphicsDevice.Clear(Color.CornflowerBlue);

            // TODO: Add your drawing code here
            spriteBatch.Begin();
            spriteBatch.Draw(sandMap, Vector2.Zero, Color.White);
            spriteBatch.End();
            spriteBatch.Begin(SpriteSortMode.FrontToBack);

            bumpEffect.Parameters["bumpMap"].SetValue(bumpMap);
            bumpEffect.Parameters["waterLayover"].SetValue(waterLayoverMap);

            bumpEffect.Parameters["xWaveLength"].SetValue(0.1f);
            bumpEffect.Parameters["xWaveHeight"].SetValue(0.3f);

            bumpEffect.CurrentTechnique.Passes[0].Apply();

            spriteBatch.Draw(waterLayoverMap, Vector2.Zero, Color.White);
            spriteBatch.End();

            base.Draw(gameTime);
        }

In the image you posted of your result it looks to me like it’s having some sort of pattern to it, isn’t that the expected result?

Only thing I can think of when reading this from a phone:
Spritebatch has a effect parameter overload, try using that instead of invoking Apply() yourself.

You are aware this isn’t a bump map?

Bump maps perturb the normal and the normal is used to create the lighting.

All you are doing is modifying the place in the water texture you sample from.

Since your water texture is a solid colour, this will have no affect. tex2D(original) === tex2D(perturbed)

If all you want is a little 2D water effect, change your water texture and you should be fine.

Hey, apologies for the late response and thank you for the answers (: .

I definitely didn’t realize my blank water map was causing this, I honestly just started learning how to make shaders and was trying to follow a tutorial! Thanks for the tip, I’ll try that!