Need help in creating an image morph Effect in Monogame

@Cookiesliyr1 wrote:

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

Posts: 1

Participants: 1

Read full topic