This site relies heavily on Javascript. You should enable it if you want the full experience. Learn more.

Tutorial Effects - Mr. Wiggle

View
Edit

TOC: Of Effects and Shaders
Back: Vertexshader Preparations
Next: Function Printing

Lets start with the famous MrWiggle effect, it distorts a mesh by sine waves:

The vertex shader is called for each vertex of the mesh. As you have learned here, the input of the vertex shader is the data stored in the vertex of the mesh which is now processed:

vs2ps VS(
    float4 PosO  : POSITION,
    float4 TexCd : TEXCOORD0)
{
...
}

Here we are interested in the PosO vector, which is the position of the current vertex. We will add an offset to the x coordinate of the vertex depending on its vertical position (y coordinate):

PosO.x += sin(PosO.y);

To control the waves we add some parameters:

PosO.x += sin(PosO.y * Frequency + Phase) * Amplitude;

Then the vertex shader with its inputs looks like:

float Frequency = 10;
float Phase = 0;
float Amplitude = 0.01;
 
vs2ps VS(
    float4 PosO  : POSITION,
    float4 TexCd : TEXCOORD0)
{
    //declare output struct
    vs2ps Out;
 
    //offset x coordinate
    PosO.x += sin(PosO.y * Frequency + Phase) * Amplitude;
 
    //transform position
    Out.Pos = mul(PosO, tWVP);
 
    //transform texturecoordinates
    Out.TexCd = mul(TexCd, tTex);
 
    return Out;
}

And the patch accordingly:

Next: Function Printing
Back: Vertexshader Preparations
TOC: Of Effects and Shaders

anonymous user login

Shoutbox

~4d ago

joreg: Workshop on 01 08: Augmented Reality using OpenCV, signup here: https://thenodeinstitute.org/courses/ss24-vvvv-augmented-reality-using-opencv-in-vvvv/

~12d ago

joreg: Workshop on 18 07: Fluid simulations in FUSE, signup here: https://thenodeinstitute.org/courses/ss24-vvvv-fluid-simulations-in-fuse/

~12d ago

joreg: Workshop on 17 07: Working with particles in FUSE, signup here: https://thenodeinstitute.org/courses/ss24-vvvv-working-with-particles-in-fuse/

~23d ago

joreg: Here's what happened in June in our little univvvverse: https://visualprogramming.net/blog/2024/vvvvhat-happened-in-june-2024/

~25d ago

joreg: We're starting a new beginner tutorial series. Here's Nr. 1: https://visualprogramming.net/blog/2024/new-vvvv-tutorial-circle-pit/

~26d ago

joreg: Registration is open for LINK - the vvvv Summer Camp 24! Full details and signup are here: https://link-summercamp.de/

~26d ago

joreg: Workshop on 11 07: Compute Shader with FUSE, signup here: https://thenodeinstitute.org/courses/ss24-vvvv-compute-shader-with-fuse/

~1mth ago

joreg: Workshop on 27 06: Rendering Techniques with FUSE, signup here: https://thenodeinstitute.org/courses/ss24-vvvv-rendering-techniques-with-fuse/

~1mth ago

joreg: Workshop on 20 06: All about Raymarching with FUSE, signup here: https://thenodeinstitute.org/courses/ss24-vvvv-all-about-raymarching-with-fuse/

~1mth ago

joreg: vvvv gamma 6.5 is out, see changelog: https://thegraybook.vvvv.org/changelog/6.x.html