Basic wobble

Basic wobble 

Theory

The process is similar to what we did in the Raging Sea Shading lessons. We calculate an elevation according to the vertex position and we move that vertex.

For the Raging Sea, we could make the vertices go up and down using the y-axis. But in this case, it’s not that simple. We want to make the vertices move forward and backwards according to the face orientation.

The good news is that we already know a variable indicating what’s the direction of the face, and it’s the normal:

Implementation

We are going to use the now well-known Simplex Noise which is already available in the src/shaders/includes/ folder as simplexNoise4d.

It’s a 4D Simplex Noise so we can use the 3D position as the base input and use the fourth dimension to make it vary in time.

Include it in vertex.glsl:

#include ../includes/simplexNoise4d.glsl

void main()
{
}

Call simplexNoise4d(), send it a vec4() and save it as a float wobble (don’t save):

void main()
{
    // Wobble
    float wobble = simplexNoise4d(vec4());
}

To that vec4, we are going to send the position as the first three values and we can get that position using csm_Position. For the fourth value, we set it to 0.0, and we are going to replace it with the time later:

void main()
{
    // Wobble
    float wobble = simplexNoise4d(vec4(
        csm_Position, // XYZ
        0.0           // W
    ));
}

Finally, we want to make the vertex move according to the normal and it’s as simple as multiplying wobble by normal and adding it to csm_Position:

void main()
{
    // Wobble
    float wobble = simplexNoise4d(vec4(
        csm_Position, // XYZ
        0.0           // W
    ));
    csm_Position += wobble * normal;
}

It seems to be working, but the shading looks weird. It’s as if the faces aren’t orientated properly, and it’s exactly the issue we had when adding shading to the Raging Sea.

We can’t rely on the base normal anymore, so we need to compute them and use the neighbours technique.

In the case of the Raging Sea, we were able to calculate where the neighbours were quite easily because it was a flat grid:

But things are a little more complicated here. Since it’s a sphere, we could try to find the neighbours using fancy trigonometry, but we want our wobble effect to work, even with imported models.

Fortunately, when it comes to 3D geometries, the two vectors going toward the neighbours we are looking for are well known. It’s the “tangent” and the “bitangent”: