How is a single texture with different colors being applied to the entity?

Question

How is it that the texture for a beat is applied different objects in this moonrider project. First, I see that a beat material is defined using this.beatsTexture: https://github.com/supermedium/moonrider/blob/b24431261dca9c8f5df717a5518983f69eeb58e4/src/components/materials.js#L241

... and when I go to the texture, I see a single texture being generated for all of the various colors. https://github.com/supermedium/moonrider/blob/b24431261dca9c8f5df717a5518983f69eeb58e4/src/components/materials.js#L474

What I can’t trace down is:

1. How is this texture being used to identify different colors with the different beats (e.g. red vs blue)?
2. How can view the results of this texture easily to be able to debug?
3. Where is the logic where this texture’s coords are translated for the different beats to show the correct colors? Thank you for the help!!!

Answer 1

To try to help with #1: In the first file you linked, after the texture is define, a few materials are also defined which use that texture. Each of the materials specifies a different color (scheme.primary and scheme.secondary) which can be used to tint the texture being applied to the object. When an object collides with the mesh that uses the material, one could determine the color by checking something like mesh.material.uniforms.color.value and seeing if it were equal to the primary or secondary color, for example.