How can I use shaders to make a square have a waving effect?

Question

I'm new to using shaders to do some fancy effects and I'm struggling with them. I'm using DirectX 11 and HLSL. I have this square in the middle of the screen:

It's just a square that I've created using 4 vertices. I want to give it this waving effect on the sides, but I don't know how to do it.

This is for a little 2D game I'm making, so I have an orthogonal projection matrix which is the one I use. View matrix is set to identity.

DirectX::XMMATRIX view = DirectX::XMMatrixIdentity();
DirectX::XMMATRIX projection = DirectX::XMMatrixOrthographicOffCenterLH(0.0f, SCREEN_WIDTH, SCREEN_HEIGHT, 0.0f, 0.0f, 1.0f);

This is the constant buffer I set each frame, so I can pass a float time variable to the shader:

struct constant_buffer {
    DirectX::XMMATRIX  WVP;
    // this value starts in 0 and increases by 1 each frame until 359 degrees
    float time; 
};

constant_buffer cbuffer;

The shader that I'm currently using is very simple, it just applies the matrix to each vertex to transform it.

struct in_pshader
{
    float4 position : SV_POSITION;
    float4 color : COLOR;
};

cbuffer constant_buffer
{
    float4x4 WVP;
    float time;
};


in_pshader vshader(float4 position : POSITION, float4 color : COLOR)
{
    in_pshader output;

    output.position = mul(position, WVP);
    output.color = color;

    return output;
}


float4 pshader(float4 position : SV_POSITION, float4 color : COLOR) : SV_TARGET
{
    return color;
}

I'm guessing there's some sine function involved around, so that's why I decided to pass angles per frame as input. I tried many combinations, but I'm such a newbie and can't get it right. :( Any help on this would be very appreciated.

Answer 1

First of all, to create this kind of effect you're going to need more than 4 vertices. You can move the vertex positions around all you like, but a shape made with 4 vertices will only ever be a quadrilateral, not a shape with wavy sides like you've shown. You'll have to subdivide the shape vertically, at least, so that it has enough vertices along each side to make the smooth sine curve. It's not necessary to subdivide it horizontally for the effect you've shown.

Once that's done, it's pretty easy to do this. You'd add a line to your vertex shader like

position.x += a * sin(k * position.y + f * time);

where a, k, f are some constants you can tweak (they can be hard-coded, or you can put them in your constant buffer). This will move each vertex horizontally (adjusting position.x) depending on both its vertical position (position.y) and the current time.

This should be done before the multiplication by the WVP matrix, assuming you want the distortion to apply in world space as opposed to screen space.

Answer 2

As an alternate solution from vertex tessellation/subdivision, you can also do this in the fragment shader by simply drawing a smaller square within your quad and offsetting the pixels. You will need to resize your geometry to a larger size to make it match your desired result.

For example, in your fragment shader, you have local X,Y coordinates passed in from the vertex shader which range from 0-1. You check to see if they are in range 0.25 to 0.75, and if they aren't, then discard the pixel. To apply the waving effect, you add the sine function to the X coordinate. Depending on the strength of your sine wave, you will need to shrink the square to fit the distorted edges within your drawing area (the quad).

Keep in mind this method may not be as efficient as a subdivided quad, due to more pixels being processed by the GPU to draw the square, ie "overdraw".