Triangulating contours into 2d mesh with color data intact-CodePudding

I am using a Javascript library 'Tess2' to triangulate a series of contours.

A contour consists of a series of points (in a negative winding order for solid fills, in a positive winding order for holes)

However, the resulting triangles output by the algorithm are no longer tied to a contour and its fill color.

How would I alter Tess2 (or any other javascript library that tesselates contours) to allow for the retention of color data in the resulting triangles?

I've tried looking everywhere and I cannot find a solution.

CodePudding user response：

From what I've seen in the source code, the tessalation function contains a vertex indices in an returned object:

    Tess2.tesselate = function(opts) {

        ...

        return {
            vertices: tess.vertices,
            vertexIndices: tess.vertexIndices,
            vertexCount: tess.vertexCount,
            elements: tess.elements,
            elementCount: tess.elementCount,
            mesh: debug ? tess.mesh : undefined
        };

You can create a new array with the colors for each vertex, and then use vertexIndices from the object to get a color of the vertex.

If you would like to have a color per face, you would just need to generate an array like above, which means putting the same vertex color for each vertex in a array. You would also like to wrap all of this data in some kind of convienent object or class.

[EDIT]

It turns out that the tesselation algorithm merges vertices in the same position, meaning that it reorganizes vertex array completely. There are a solution to explicitly not merge different contours with overlapping vertices:

Tess2.tesselate({ contours: yourContours, elementType: Tess2.BOUNDARY_CONTOURS });

That should preserve the original vertices, however not in an original order, use vertexIndices to get the original position of these.

CodePudding user response：

After many failed attempts I finally got there.

I've been trying all this time to try and process a huge amount of contours all at once with a single tessellation pass. I tried editing the tessellation library to make each half edge retain it original contour ID. I had several eureka moments when it finally seemed to work, only to be disappointed when I stress tested it and found it to be less than perfect.

But it turns out I've been incredibly daft... All I had to do was group each contour with a particular fill, and then tesselate each group independently.

I didn't understand that for every interior contour fill, there would always be an opposite contour that effectively enclosed the outer contour loop. For instance, to represent a red box with a blue box inside there would be 2 red contours and 1 blue. I thought it could be represented with only 1 blue contour and 1 red, where the blue would also represent the red contour's hole, and so processing each colour group of contours independently didn't make sense to me.

When I finally realised this, I figured it out.

I've published a solution on github but I'm not sure how much use it is to anyone:

I've included a pretty comprehensive exporter script for converting contours (including curves) into polygonal paths for Adobe Flash/Animate which might be useful for someone.

I will be writing an OBJ exporter on top of this shortly, so I can represent vector graphics in a 3D engine.