Point Clouds and Postprocessing - Three.js - page 263

3. If you've already looked at the example shown in the Getting ready section
of this recipe, you'll notice that the colors of the points change. We can easily
do this by just changing the color in the colors array of the geometry in the
render loop:
for (var i = 0 ; i <
pc.geometry.colors.length ; i++) {
var rnd = Math.random()/2 + 0.5;
pc.geometry.colors[i] = new
THREE.Color(rnd, rnd/4, 0);
}
pc.geometry.colorsNeedUpdate = true;
When you change the colors, you need to set the colorsNeedUpdate prop-
erty to true so that Three.js knows that the colors of the points need to be
updated.
How it works...
Three.js uses WebGL to render individual points. For this, Three.js uses vertex
shaders and fragment shaders (see the previous chapter for more recipes on this).
To color the individual points, Three.js passes the information into the fragment
shader used to determine the output color. The corresponding piece of shader code
looks like this:
gl_FragColor = vec4( psColor, opacity );
The psColor variable is the one that is passed from the colors array of
THREE.Geometry to the shader used to color the points.
See also
• Coloring an individual point in Three.js is very simple and straightforward.
However, if you want to change more properties of the points, such as the
opacity or the size, you can't do that with standard Three.js. In the Styling in-
dividual points recipe, we'll show you how you can create a custom shader to
also change these properties of the points within a point cloud.