Styling individual points

With the standard Three.js functionality, you can't style the individual points of a point cloud. You can change their color, as we've shown in the Coloring the individual points in a point cloud recipe, but it isn't possible to change a point's size or opacity. In this recipe, we'll show you how to create a custom vertex and fragment shader, which allow you to change the color, opacity, and size of the individual points of a point cloud and that you can also easily extend to add more properties.

Getting ready

There are no external libraries used in this recipe. We'll just extend the basic Three.js functionality by creating our own custom shaders. To see the shaders in action, open the 06.04-style-individual-points-in-point-system-with-custom-shader.html example in your browser. You will see something similar to the following recipe:

As you can see in this screenshot, the size, color, and opacity of the individual points differ.

How to do it…

Let's look at the steps...