Vertex Colored Meshes using Blender and Studio

Hello Creators - this article will teach you how to add colors to your meshes in Blender so that you can have an array of colors, beyond simply choosing a BrickColor, on your meshes in Studio. Vertex Colored Meshes offer a way to give you more control over your artistic vision, and are an efficient and effective way to customize your content without relying solely on textures for color. Let’s take a look.

Table of Contents
  1. Welcome
  2. Vertex Coloring your Meshes in Blender
  3. Using Geometry to Refine/Feather Vertex Color
  4. Conclusion

Introduction to Vertex Color

What is Vertex Color?

Vertex Color is red, green and blue values stored in every single vertex on a mesh. When using Blender, you can use the Vertex Painting tools to brush in any RGB color you wish directly onto your mesh, and the individual vertices will retain that color information when you export the mesh as an .FBX, and import into Studio.

How does Roblox Studio use Vertex Color?

Roblox Studio uses Vertex Color to recolor a mesh.

When a mesh is imported to Roblox Studio from a .FBX source file, the mesh will have color stored onto the mesh vertices and will display those colors in Studio, allowing users to have many different colors on their meshes without using textures. If you import a mesh with Vertex Color data, that color information will be multiplied against the BrickColor or Color property of the meshPart.

By default, a new mesh will be colored ‘Medium Stone Grey’ [163, 162, 165], in the BrickColor / Color property, so to see your Vertex Color data perfectly accurately, you will need to set your BrickColor to ‘Institutional White’ or [255,255,255].

These details, as well as how vertex colors interact with textures, will be covered in more detail later in the article.

Vertex Coloring your Meshes in Blender

In this section, you will learn to set up your viewport to enable visibility of vertex color, toggle modes to edit vertex colors, and a few techniques to brush, select, and fill your mesh with color.

Resolution

One important thing to note is that when painting vertex colors on a 3d Mesh, you can only add color where a vertex exists. So when vertex painting something like a cube, for example, which only has 8 vertices, you’ll only be able to paint unique colors on those 8 points. Something else, like a sphere, with many many vertices, will allow you more ‘resolution’ to vertex paint with greater detail. The image below illustrates this difference.

Viewport Setup

First thing to do is to set up a few things in the 3d Viewport in Blender so you are able to see the vertex color on your mesh. In the top right corner of the 3d Viewport Header, in the Viewport Shading Mode selector, choose the second option, ‘Solid’.

Then, click the dropdown arrow and choose the following:

  • Lighting: Flat
    • this removes lighting information from the render, allowing easier viewing of true color
  • Color: Attribute
    • this allows Vertex Colors to appear in the viewport render

Edit Mode / Vertex Color Mode

The next step is to switch to Vertex Paint mode, which will allow you to edit the vertex color on the mesh. Select any mesh in the viewport, and then in the top left corner of the 3d Viewport’s Header, click the downward arrow on the Mode selector and choose ‘Vertex Paint’. This changes the mesh’s mode from Object Mode to Vertex Paint mode, where you can then start to edit the colors.

Toolbar

Next, press ‘N’ while the 3d Viewport is active, and it will open a toolbar on the right side of the viewport. Select the tab labeled ‘Tool’ and it will display some brushes, brush settings, a color picker and a few others. The Color Picker is useful for quickly changing the brush color while painting.

Vertex Color Painting with Brush

By default, the brush will be active when you enter Vertex Paint Mode, so just choose a color and hover your brush over the mesh, and left-click on the mesh to begin painting your chosen color onto the mesh. Try switching between different colors to customize the look of your mesh.

Flood Fill

Another way to apply vertex color to your mesh is by flood-filling your mesh with a chosen color, or, as it is called in Blender, Set Vertex Colors. To do this, enter Vertex Paint Mode, choose a color in the picker, and in the header, navigate to Paint > Set Vertex Colors (Shift + K). This action will flood-fill your entire mesh with a single color.

Alternatively, you can use some mask options to specify which areas of a mesh you want to fill, or brush, with a specific color, to increase the precision of your vertex painting efforts. Read on to learn how.

Selecting Faces or Vertices to Mask your Painting

Sometimes while simply using the brush tool to paint vertex color onto the mesh, you might accidentally paint over vertices or faces that you did not intend to. An easy way to control precisely which vertices you want to paint is to toggle into Edit Mode (Use Tab to toggle between modes), make a specific selection, and toggle back into Vertex Paint Mode (Tab). Your face or vertex selection will be preserved when you toggle into Vertex Paint mode, but to make that selection active as as mask, you need to click one of the two mask choices in the Header by clicking on Paint Mask or Vertex Selection buttons just to the right of the Mode Selector.

With the selection mask of your choice active, you will now be able to more easily brush color onto your mesh without accidentally painting unintended faces or vertices.

A note on the different mask options:

Vertex Selection Mask [vertex masking]: If you choose to use vertex selection as your mask, you paint on the entirety of the vertex itself, which will allow your brush to bleed a gradient outward from the center of the selected vertices.

Paint mask [face masking]: If you choose to use face selection as your mask, your painting will be contained entirely within the face selection, and will not bleed outside of it, as with vertex masking. This allows you to achieve hard-edged colors on your painted mesh.

Using Geometry to Refine/Feather Vertex Color

Sometimes when applying Vertex Color to a mesh, you might end up with extremely hard-edges between two colors, which can give an unrealistic, gamey, or CG appearance.

A technique to “feather” this edge a bit is to use a bit more geo in the mesh to create a space for one color to gradient to the next, for a softer and more believable illusion. To pull this off, toggle into Edit Mode by pressing [TAB] and enter Edge Selection submode by pressing ‘2’.

With the edge selected, press CTRL+B to ‘Bevel’, and in the Common Options dialogue in the bottom left corner of the 3d Viewport, set Segments to 2. This will create a total of 3 edges on the mesh.

As you can see, there is still a harsh, unfeathered edge. Select now the edge that goes down the center of your newly created bevel and Dissolve that edge loop by pressing CTRL+X and choosing Dissolve Vertices in the common options dialogue below. This will effectively delete that edge loop, and the vertex colors will then gradate between the two remaining edges, creating that soft, feathered edge!

This technique was very useful in creating a suite of props for a Village Carnival project, where many objects took advantage of Vertex Color, rather than textures, to colorize the canvas that enwrapped the multitude of booths, tents and signage throughout the scene.

Using Vertex Color in Roblox Studio

In this section, you will learn how to make use of Vertex Color inside Roblox Studio using surfaceAppearance, textures, etc.

Integrating with SurfaceAppearance

SurfaceAppearance, when set to “Overlay” mode, normally uses the mask in the alpha channel of the Albedo texture to permit BrickColor or Color properties of the underlying mesh to tint the surface of the mesh. When using a mesh that has Vertex Color applied to it, such as the one we created from Blender, the vertex colors will be the colors that modulate the pixels that are masked.

Why would this be advantageous?
Normally, when using a SurfaceAppearance set to Overlay, you’re able to tint the object using a singular brickColor or Color, but using Vertex Color allows you to have as many color options across a mesh as you have vertices.

Color Blocking Singular Meshes

Another use for Vertex Color in Studio is to tint the various sections of a complex mesh with pre-chosen vertex colors inside Blender. You can display different hues and colors on a single mesh without having to break the mesh into separate pieces, allowing you to tint each individual part separately. Of course, the drawback here is that the Vertex Colored mesh won’t be as customizable inside Studio, but it’s a valuable trade-off in many circumstances.

Efficiently Tinting Materials without Extra Textures

Another common use of Vertex Color in Studio is like the example shown in the previous section, where the carnival canvas is tinted with Vertex Color. In those examples, the artist is simply using the built-in Roblox Studio material ‘Fabric’, and all of the coloration is being done with Vertex Color. This allowed the artist to use efficient, built-in materials but also customize the coloration without having to upload large, costly textures.

Style Choice

And finally, using Vertex Color on meshes is a stylistic choice that an artist may employ to color their world instead of relying on other texturing or material based solutions, to achieve many different aesthetics.

Conclusion

Now that you have learned about Vertex Color, how to visualize and apply it in Blender, and how to make use of Vertex Color in Roblox Studio, incorporate this interesting feature into your 3d Art and Experiences going forward!

As always, please feel free to ask questions in the comments section, offer suggestions, or post screenshots of your content to share with the community. How do you think you can implement vertex colors in your projects?

54 Likes

Yoooo looks great

Wonder what cool things we can do with it :smiley:

Specially being able to color way more than we were able to before probably is always nice to have

7 Likes

This is an amazing update, have been able to see some beautiful work because of it!

7 Likes

FYI This isn’t an update, it’s a tutorial for how to take advantage of a mesh feature that already exists.
@AFloidYT


Good resource, this is oddly not common knowledge.

8 Likes

Hey sorry

I saw its with blender and understood that Roblox now allows a more better coloring with it in combination :smiley:
I read it at night when I was already in bed afterall

Thanks for letting me now

8 Likes