Vertex Colors

Vertex colors. It’s color data stored at vertices and you can do some pretty cool stuff with them. Most of the time you won’t have any need for vertex colors, and in unity the only shaders that make use of them are sprites, but when you’re making your own shaders you can do some pretty nifty things. Vertex colors can be used as a cheap way to shade or color meshes by combining the color with the diffuse, but a much more interesting use is treating the colors as a set of arbitrary values to use in your shader. Red green blue and alpha give you 4 values to do with as you choose, and like normal data sampling between vertices along an edge or anywhere on a face will blend between the values.

So what’s the purpose of this? In our game we have a long level on a winding path, instead of the original idea to have a background that’s scrolling by. It’s a lot of work to paint the whole distance onto a plane and also extremely inflexible, so I made a shader to provide another option. The background is now an ordinary mesh plane with multiple textures and blending between them is based on the color data of the vertices. Dirt is the background and is always present, cobble is layered over it and controlled by red, and grass is the top layer controlled by green. A vertex with the color white will have all three textures stacked on top of each other with the grass appearing over it all, while a vertex with the color red will have the cobble texture layered over the dirt texture. Using a vertex painting tool in the shaded wireframe view allows you to paint the background however you like.

Now that the basic functionality is present the interesting bit is adding detail to the blending. Because the values for each color are blended from 1 to 0 and are sampled for every pixel of a face this data can be combined with a black and white image of the height of the textures to control the cutoff between one texture and another. This is most apparent with the cobble and can be seen as the path becomes thinner and the stones smaller as the transition is made to a dirt path. For more information check this out$blendmodulatetexture


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s