Material Vertex Color and the buffer geometry attribute used for doing so
One of the core features of the base material class in threejs is a vertex colors Boolean that when set to true will case the material to be rendered using color channel data stored in am attribute of the buffer geometry used. This feature will not work with all materials mind you, and with some a light source might still be needed or something to that effect. However it is still very much a feature of the base material class, unless there is something else going on that will override this it should work on most materials.
The color attribute is not one of the major must have attributes of a buffer geometry mind you. However it is an example of an additional attribute that can be added to a geometry to allow for coloring and over all mesh object. It is not at all a replacement for uv mapping, and the various material options that can be used with textures. However it is an alternative way of coloring a mesh object that works by adding data to geometry rather than bothering with images. In some cases I might want to use vertex colors as a quick way to have something other than just a single solid color, but I am not sure I would take this kind of approach in the long run, at least not with the built in materials anyway.
The main thing that got me into vertex colors is that recently I get around to writing a new blog post on the shader material. Simply put it is a way to go about creating a custom material using GLSL. When doing so I have found that vertex coloring might be a nice way to go about styling a geometry, and when it comes to creating my own materials that opens the door for custom attributes that will allow for not just creating one color attribute but several such attributes.
Vertex colors and what to know first
Check out more on buffer geometry and buffer attributes
There is a whole lot more to buffer geometry beyond just that of color attributes. There is also being aware of the other buffer attributes of buffer geometry such as the position attribute which would be a good starting point when it comes to the attributes of geometry. I say that because in order to have a geometry that will present much of anything even when using the points class to show it, at a minimum one will at least need a position attribute first.
Source code examples are also up on Github
The source code examples in this post are also up on Github, along with all the other source code examples for my many other posts on threejs.
Check your version numbers
When I first wrote this post I was using r146 of threejs.
1 - Some basic examples of the vertex color buffer geometry attribute
To start out in this section I will be going over a few quick basic example of color attributes in buffer geometry. There are two general things to keep in mind here one is that the color attribute will need to be added to the geometry if it is not there to begin with, and then there is also choosing a proper built in material to use with the color attribute by setting the vertex color attribute to true. So for the most part the examples here will focus on just adding the color attribute to begin with, and also test out things with the various built in material options while I am at it.
1.1 - Vertex colors hello world example
One has to start somewhere when it comes to this sort of thing, and with that said that is what this example is about right here. So when it comes to a vertex color hello world threejs example this is what I put together real quick. Like with any other threejs example I start out by setting up my scene object, camera, and renderer objects just the way that I like to. After that I will want to create a geometry and add a color attribute to it. Once I have the set up I will then want to create the material that i will want to use with the geometry when creating the mesh object, when doing so I will want to go with a material that will work well with vertex colors such as the mesh basic material. After that I can then use the geometry and material to create a mesh object, add it to the scene object, and render the scene.
1.2 - Mesh Material options
One might assume that because the vertex color Boolean is a property of the base material class this feature will work with all materials. For the most part that is true, but there are a few exceptions. Also when it comes to materials that work with light sources one will still need to add one or more lights to the scene, and make sure that they are using a renderer that will work with such light sources.
1.3 - Lines and vertex colors
Vertex colors are very much a property of the base material class, and the base material class is not just used as a base class for mesh materials. The base material class is also very much the base of the two line materials, and also the points material. So one thing that is nice about vertex colors is that it is a great way to style lines and points when one is making use of those features of the core threejs library.
2 - Updating a color attribute over time
Just like all the other buffer attributes the process of updating the attribute of more or less the same. I just need to mutate the values in the array of the color buffer attribute and then make sure that the needs update Boolean is set to true.