Introduction 00:00

In this lesson, we are going to learn how to create a cool cursor animation on a picture made of particles:

It’s the opportunity to learn how to use a 2D canvas as a texture that we send and use in a custom shader to displace the particles.

Setup 00:50

The starter already contains particles ready to be enhanced and animated:

• A grid of particles
• A ShaderMaterial using the vertex and fragment from the src/shaders/particles/ folder
• The vite-plugin-glsl dependency to handle GLSL files
• OrbitControls to rotate around
• A TextureLoader instance

The particle size is already handled in the vertex.glsl with perspective and relative to the height of the render, as seen in previous lessons:

Default particles are quite big so that we can appreciate what we do without having to zoom every time we reload.

Once we are happy with the look of the particles, we are going to make them smaller and add a lot more.

Particles 03:03

We are going to use one of the pictures you can find in the static/ folder and make that picture appear on the particles.

We want the particles to be discs instead of squares. We want their size to depend on the brightness of the picture and we also want to modify the color of the particles to match the picture.

Discs

Let’s start with the shape of the particles and make them look like discs. This time, we don’t want a fancy pattern, just perfect discs.

First, we want the UV coordinates inside the particle, and since they are points, we can use the gl_PointCoord.

In fragment.glsl save gl_PointCoord as a vec2 uv variable:

void main()
{
    vec2 uv = gl_PointCoord;
    
    // ...
}

Send it to the gl_FragColor as the first two parameters, out of curiosity:

void main()
{
    vec2 uv = gl_PointCoord;

    gl_FragColor = vec4(uv, 1.0, 1.0);
    // ...
}

To draw a disc, we need the distance of the fragment to the center of the particle and we can do that using the distance function as seen in previous lessons.

Create a float distanceToCenter variable and save the distance between the uv and vec2(0.5):

void main()
{
    vec2 uv = gl_PointCoord;
    float distanceToCenter = distance(uv, vec2(0.5));

    // ...
}

Send it to the gl_FragColor as the first 3 values out of curiosity:

void main()
{
    vec2 uv = gl_PointCoord;
    float distanceToCenter = distance(uv, vec2(0.5));

    gl_FragColor = vec4(distanceToCenter, distanceToCenter, distanceToCenter, 1.0);
    // ...
}