How do I create a “wormhole” effect in C# and DirectX

Question

I am trying to create an effect called wormhole effect. I am using a shader file but I am not getting the exact effect. Does anyone have any idea or any smple shader file which can help me?

The effect looks something like the effect named "Wormhole" at found here (bottom right).

The shader file I am trying to improve is based on "Ripple" effect but I am not able to get that much smooth effect.

/// <class>RippleTransitionEffect</class>

/// <description>A transition effect </description>
/// <summary>The amount(%) of the transition from first texture to the second texture. </summary>
/// <minValue>0</minValue>
/// <maxValue>1</maxValue>
/// <defaultValue>0</defaultValue>
float Progress : register(C0);

sampler input : register(s0);

texture Texture;
sampler Texture2 = sampler_state
{
    texture = <Texture>;
    magfilter = LINEAR;
    minfilter = LINEAR;
    mipfilter = LINEAR;
    AddressU = mirror;
    AddressV = mirror;
};



float4 Ripple(float2 uv,float progress)
{
  float radius = progress *  0.75;
  float FuzzyAmount = 0.001;
  float2 CenterPoint = float2(0.5,0.5);
  float fromCenter = length((uv - CenterPoint) / float2(0.75, 1));
  float distFromCircle = fromCenter - radius;  

  float frequency = 10;
  float speed = 1;
  float amplitude = 0.005;

  float wave = cos(frequency * distFromCircle - speed * progress) + 2;
  float offset1 = progress * wave * amplitude;
  float offset2 = (1.0 - progress) * wave * amplitude;
  float2 normToUV = (uv - CenterPoint) / distFromCircle;

  float2 newUV1 = CenterPoint + normToUV * (distFromCircle + offset1);
  float2 newUV2 = CenterPoint + normToUV * (distFromCircle + offset2);

  float4 c1 = tex2D(Texture2, newUV1);
  float4 c2 = tex2D(input, newUV2);

  float p = saturate((distFromCircle + FuzzyAmount) / (1.0 * FuzzyAmount));
  return lerp(c1, c2, p );
}


float4 main(float2 tex: TEXCOORD) : COlOR
{
  return Ripple(tex, Progress);
}


technique TransformTexture {
  pass P0     {        
    PixelShader  = compile ps_2_0 main();
  }
}

Answer 1

This shader snippet is just a hint on how I would do it, it's not a complete copy-paste-done! solution.

float4 Wormhole(float2 uv, float progress)
{
    float rad = 0.708 * progress; // radius from center of the uv texture square
    float swell = 0.1; // swell region magnitude
    float2 CPoint(0.5, 0.5); // center point 
    float dist = length(uv - CPoint);
    float2 uvOrig = uv;
    float2 uvNew = uv;
    float alpha = 0; // blend factor between the 2 textures
    if (dist < rad) // show the new texture - this expands from center outwards
    {
        alpha = 1; //when inside, show the new texture colour
    }
    if (dist > rad && dist < rad + swell)
    {
        float lambda = smoothstep(rad, rad+swell, dist); // factor in [0,1]
        alpha = 1 - lambda; // modified blend factor
        float2 vec = uvOrig - CPoint;
        float2 dir = normalize(vec);
        uvOrig = CPoint + ((1-lambda) * rad + lambda * (rad+swell)) * dir;
    }
    if (dist >= rad + swell)
        alpha = 0; // show the new texture only
    float4 c1 = tex2D(Texture2, uvNew);
    float4 c2 = tex2D(input, uvOrig);
    return lerp(c2,c1,alpha);
}

---

What does it do? Starting from the center, it should modify a linear interpolation factor based on the texture coordinates of that fragment. If the fragment is "inside" the wormhole, it shows the new texture. If the fragment is outside, but not too far (swell area), it show a blended color between the original "swelled" image and the new image. The fragments that are further away maintain the original texture color. That's how I would write a very simple wormhole shader.