Need help in creating an image morph Effect in Monogame

Hello, i am trying to make an effect for a fictional VR room in my game where the room change from one to another, all work on 2D. so after hitting my head to the wall few days i found out i could use a displacement effect to do that

float4 DisplaceShader1(VertexShaderOutput pVertexOutput) : color0 {
    float4 displacementColor = tex2D(displacementMapSampler, pVertexOutput.TexCoord);
    float offset = (displacementColor.g - displacementColor.r) * OffsetPower;
    float2 newTexCoord = float2(pVertexOutput.TexCoord.x + offset, pVertexOutput.TexCoord.y + offset);
    float4 texColor = tex2D(textureMapSampler, newTexCoord);

    return texColor;
}

This worked fine even though I don’t understand it 100%, it seems it shift the coor of some pixels of first image to get closer to the second one, if it run long enough the first image will resemble the second one, but not colorwise, so my first attempt was to shift the colors gradually and manually, not sure what i am doing is right or not, so i used these

texColor.r += (displacementColor.r - OTex.r) / Tick;
texColor.g += (displacementColor.g - OTex.g) / Tick;
texColor.b += (displacementColor.b - OTex.b) / Tick;

where the texColor is the output, the displacementColor is the image that we are transforming into and OTex is the original image without the coor shift, wonder if i didn’t need that at all, it seems the sampler separate its coord from the texture, as u see you can’t find more noob guy than me in this field. this made an ugly monster, the colors were way too off, i believe it because it didn’t take the offset position.

So I tried to learn how to shift the colors in other way and found out after fooling around with Kosmonaut grading code, thanks for that btw, tried to learn how to it works and got really lost with tons of new terms, anyway after hours of hitting my head to the wall i found out about Lerp function, so I tried to mix the two like this

float4 DisplaceNColorShader(VertexShaderOutput pVertexOutput) : color0 {
    float4 displacementColor = tex2D(displacementMapSampler, pVertexOutput.TexCoord);
    float offset = (displacementColor.g - displacementColor.r ) * OffsetPower + displacementColor.b * OffsetBlue;
    float2 newTexCoord = float2(pVertexOutput.TexCoord.x + offset, pVertexOutput.TexCoord.y + offset);
    
    float4 texColor = tex2D(textureMapSampler, newTexCoord);
    float4 OTex = tex2D(OriginaltextureMapSampler, newTexCoord);
    
    texColor = lerp (texColor, displacementColor, TickMax/Tick);
    return texColor;
}

but this didn’t work cause I believe the newTexCoord wasn’t taken in calculation, i am trying to move the pixels and shift the colors to the new image in the same time, the thing is I don’t have enough understanding of the whole subject to solve this but this is what i am thinking: is there a way to change the result of the lerping based on the new coord offset? or the whole thing i am doing is totaly wrong?

ok let me try to reword it a bit: lerp change the pixels in order 1:1 from one texture to another right? can i pick a different coord offset from the second one? i just want the displacement work with color shifting

Ok, today i kept trying again and from what i understood from reading is multi passes are used in general for lights, but can we use it to add more than two effects like display and lerp? so i tried this code

float4 DisplaceShader(VertexShaderOutput pVertexOutput) : color0 {
    float4 displacementColor = tex2D(displacementMapSampler, pVertexOutput.TexCoord);
    float offset = (displacementColor.g - displacementColor.r ) * OffsetPower + displacementColor.b * OffsetBlue;
    float2 newTexCoord = float2(pVertexOutput.TexCoord.x + offset, pVertexOutput.TexCoord.y + offset);
    float4 texColor = tex2D(textureMapSampler, newTexCoord);

    return texColor;
}

float4 Bloom(float2 texCoord : TEXCOORD0) : COLOR0 {
    float4 c = tex2D(textureMapSampler, texCoord);
    return saturate((c - BloomThreshold) / (1 - BloomThreshold));
}

float4 LerpFun(VertexShaderOutput pVertexOutput) : COLOR0{
    float4 displacementColor = tex2D(displacementMapSampler, pVertexOutput.TexCoord);
    float offset = (displacementColor.g - displacementColor.r ) * OffsetPower + displacementColor.b * OffsetBlue;
    float2 newTexCoord = float2(pVertexOutput.TexCoord.x + offset, pVertexOutput.TexCoord.y + offset);
    float4 texColor = tex2D(textureMapSampler, newTexCoord);

    float4 FTEX1 = tex2D (textureMapSampler, pVertexOutput.TexCoord);

    return lerp(FTEX1, texColor, LerpValue);
}

technique PostProcess{
    pass P0{ PixelShader = compile PS_SHADERMODEL LerpFun(); }
    pass P1{ PixelShader = compile PS_SHADERMODEL DisplaceShader(); }
    pass P2{ PixelShader = compile PS_SHADERMODEL Bloom(); }
}

Unfortunately the color didn’t change at all, i tried to change the coor of the image that i am lerping From
float4 FTEX1 = tex2D (textureMapSampler, pVertexOutput.TexCoord);
To
float4 FTEX1 = tex2D (textureMapSampler, newTexCoord);

This crash the code, it doesn’t like the idea to attempt to use a texture with different texture coor i guess, soo what did you do wrong? if i used lerp function like this

float4 LerpFun(VertexShaderOutput pVertexOutput) : COLOR0{
    float4 displacementColor = tex2D(displacementMapSampler, pVertexOutput.TexCoord);
    float4 FTEX1 = tex2D (textureMapSampler, pVertexOutput.TexCoord);

    return lerp(FTEX1, displacementColor, LerpValue);
}

this part will completely ignore the displacement even if they run together, and the second pass will override the result for some reason, so i only see displacement cause i run pass0 and after 70 ticks i run pass1, any help will be appreciated. i just want to lerp the dispaced pixles, it shouldn’t be this hard to waste few days on it <_<;

Well, i learned few things including You can use only one technique at a time on the same spritebatch, Passes could be used on same texture but becareful what those passes do cause it seems both Lerp and displacement recalculate the coor and color so they overlap, i tried to mix them in one function but it didn’t work. tried to change the color while displace and didn’t work either, time is running so time to change the plan

Instead of displace and change color in the same time for the room to the bar (lets call them X1 and X2) I first displace the image, took the result by using Monogame Texture.SaveAsPng, and took another when i switched the two images, lets call them P1 and P2, so this what i got: displace X1 to X2 => switch background to P1 => Lerp colors from P1 to P2 => Switch image to P2 => displace image from P2 to X2

And there you go the Result