Pixelshader displays wrong on screen

1

I have a water shader from toyshader.com converted to a monogame pixelshader.

float4 mainImage(float2 fragCoord : TEXCOORD) : COLOR
{
float4 fragColor;

float time = iTime * speed;
float xAngle = time + fragCoord.y * ySineCycles;
float yAngle = time + fragCoord.x * xSineCycles;

float2 distortOffset =
    float2(sin(xAngle), sin(yAngle)) * // amount of shearing
    float2(xDistMag, yDistMag); // magnitude adjustment

fragCoord += distortOffset;
fragColor = tex2D(s0, fragCoord);

return fragColor;

}

if i run the programm with an example image, the water effect is (animated) visible but:
- it will be drawn scaled in the right upper corner.
- the image is displayed mirrored.

( without the effect the image will displayed correctly )

example.png802×632 185 KB

spriteBatch.Begin(SpriteSortMode.Immediate, BlendState.AlphaBlend);

water.Parameters[“iTime”].SetValue(Time);
water.Parameters[“iResolution”].SetValue(new Vector2(800, 600));
water.CurrentTechnique.Passes[0].Apply();

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

Does anyone have some suggestions. ( stuck on this one for several days )

2

Post the entire shader.

besides even that piece of code is unnecessarily over complicated.

should be something like so though i just scribbled this out.

fragCoord.x = fragCoord.x + (sin(fragCoord.x * wavelength.x + wavemotion.x) *magnitude.x);
fragCoord.y = fragCoord.y + (cos(fragCoord.y * wavelength.y + wavemotion.y) *magnitude.y);
fragColor = tex2D(s0, fragCoord);

were you have 3 passed vector2 parameters.

wavemotion is some number it can be large or small how much you increment it by on the cpu when you send it to your shader is what matters it alters the speed and direction of the waves motion in x and y.

wavelength is obvious values below 1 will make wider waves above 1 smaller

magnitude is the distortion or height of the wave a value of 0 for none, 1 would be 0 to 1 texel distortion, 2 would be 0 to 2 texel wide distortions and so on ect…

1 Like
3

The parameters to your pixel shader need to match the output of SpriteEffect if your gonna draw the effect with SpriteBatch. Those are

float4 position : SV_Position;
float4 color : COLOR0;
float2 texCoord : TEXCOORD0;

In that order.

1 Like
4

!! SOLVED !!

That was indeed the solution Jjagg.
Just changed the function in 3 parameters required for monogame and now it works as expected.:slight_smile:

float4 mainImage(float4 position : SV_POSITION, float4 fragColor : COLOR0, float2 fragCoord : TEXCOORD) : COLOR
{
// float4 mainImage(float2 fragCoord : TEXCOORD) : COLOR
//{
// float4 fragColor;

1 Like
5

Screenshot so we can see how cool it is?

6

Hello AcidFaucent,
here is a small example.

As you can see The effect draws everything ( tiled background ) with a small wave effect. This gives a good underwater effect. Now the effect is working i see i have to split the layers who needs to have the effect. Otherwise doors and items/objects have the same wave effect.

2 Likes