How to draw a border outline on a group of Goldberg polyhedron faces?

Question

I have a Goldberg polyhedron that I have procedurally generated. I would like to draw an outline effect around a group of “faces” (let's call them tiles) similar to the image below, preferably without generating two meshes, doing the scaling in the vertex shader. Can anyone help?

My assumption is to use a scaled version of the tiles to write into a stencil buffer, then redraw those tiles comparing the stencil to draw the outline (as usual for this kind of effect), but I can't come up with an elegant solution to scale the tiles.

My best idea so far is to get the center point of the neighbouring tiles (green below) for each edge vertex (blue) and move the vertex towards them weighted by how many there are, which would leave the interior ones unmodified and the exterior ones moved inward. I think this works in principle, but I would need to generate two meshes as I couldn't do scaling this way in the vertex shader (as far as I know).

If it’s relevant this is how the polyhedron is constructed. Each tile is a separate object, the surface is triangulated with a central point and there is another point at the polyhedron’s origin (also the tile object’s origin). This is just so the tiles can be scaled uniformly and protrude from the polyhedron without creating gaps or overlaps.

Thanks in advance for any help!

EDIT:

jsb's answer was a simple and elegant solution to this problem. I just wanted to add some extra information in case someone else has the same problem.

First, here is the C# code I used to calculate these UVs:

// Use duplicate vertex count (over 4)
var vertices = mesh.vertices;
var uvs = new Vector2[vertices.Length];
for(int i = 0; i < vertices.Length; i++)
{
    var duplicateCount = vertices.Count(s => s == vertices[i]);
    var isInterior = duplicateCount > 4;
    uvs[i] = isInterior ? Vector2.zero : Vector2.one;
}

Note that this works because I have not welded any vertices in my original mesh so I can count the adjoining triangles by just looking for duplicate vertices.

You can also do it by counting triangles like this (this would work with merged vertices, at least with how Unity's mesh data is laid out):

// Use triangle count using this vertex (over 4)
var triangles = mesh.triangles;
var uvs = new Vector2[mesh.vertices.Length];
for(int i = 0; i < triangles.Length; i++)
{
    var triCount = triangles.Count(s => mesh.vertices[s] == mesh.vertices[triangles[i]]);
    var isInterior = triCount > 4;
    uvs[i] = isInterior ? Vector2.zero : Vector2.one;
}

Now on to the following problem. In my use case I also need to generate outlines for irregular tile patterns like this:

I neglected to mention this in the original post. Jsb's answer is still valid but the above code will not work as is for this. As you can see, when we have a tile that is only connected by one edge, the connecting vertices only "share" 2 interior triangles so we get an "exterior" edge. As a solution to this I created extra vertices along the the exterior edges of the tiles like so:

I did this by calculating the half way point along the vector between the original exterior tile vertices (a + (b - a) * 0.5) and inserting a point there. But, as you can see, the simple "duplicate vertices > 4" no longer works for determining which tiles are on the exterior.

My solution was to wind the vertices in a specific order so I know that every 3rd vertex is one I inserted along the edge like this:

Vector3 a = vertex;
Vector3 b = nextVertex;
Vector3 c = (vertex + (nextVertex - vertex) * 0.5f);
Vector3 d = tileCenter;
CreateTriangle(c, d, a);
CreateTriangle(c, b, d);

Then modify the UV code to test duplicates > 2 for these vertices (every third vertex starting at 0):

// Use duplicate vertex count
var vertices = mesh.vertices;
var uvs = new Vector2[vertices.Length];
for(int i = 0; i < vertices.Length; i++)
{
    var duplicateCount = vertices.Count(s => s == vertices[i]);
    var isMidPoint = i % 3 == 0;
    var isInterior = duplicateCount > (isMidPoint ? 2 : 4);
    uvs[i] = isInterior ? Vector2.zero : Vector2.one;
}

And here is the final result:

Thanks jsb!

Answer 1

One option that avoids a second mesh would be texturing: Let's say you define 1D texture coordinates on the triangle vertices like this:

When rendering the mesh, use these coordinates to look up in a 1D texture which defines the interior and border color:

Of course, instead of using a texture, you can just as well implement this behavior in a fragment shader by thresholding the texture coordinate, conceptually:

if (u > 0.9)
    fragColor = white;
else
    fragColor = gray;

To update the outline, you would only need upload a new set of tex coords, which are just 1 for vertices on the outline and 0 everywhere else.

Depending on whether you want the outlines to extend only into the interior of the selected region or symmetrically to both sides of the boundary, you would need to specify the tex coords either per-corner or per-vertex, respectively.