0

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

https://github.com/memononen/tess2.js/blob/master/src/tess2.js

It generates a perfect 2d mesh of any shape consisting of multiple contours:

enter image description here enter image description here

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.

hedgehog90
  • 1,402
  • 19
  • 37

2 Answers2

0

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.

szym.mie
  • 1
  • 2
  • Thanks for your response! I tried exactly this earlier, but I soon realised in the process of triangulation vertices of separate contours that are positioned identically are ultimately merged. So, if you imagine the vertices are colored and you have 2 vertices of 2 separate contours (representing 2 different solid colors) in the same position then 1 color is lost. So that mucks everything up. At least I think that's what's going on. So now I'm trying to embed the color data in half edges but still having a lot of trouble... – hedgehog90 Sep 29 '22 at 22:21
  • Well that's a surprise I was not expecting! I was assuming that it does not merge them, especially since it was part of GLU, and in OpenGL you usually have different attributes for the same position of vertex (that's how sharp edges work for example). – szym.mie Sep 30 '22 at 10:43
  • A simplest solution would be to tesselate each contour one by one, but that would mean a positive winding order contours would not work. I guess the most universal way is to assosiate a color value with the half-edge. I don't think disabling of the vertices is possible, since it treats such contours as one face. – szym.mie Sep 30 '22 at 11:20
  • I've just found an option for the tesselator function to not merge vertices of different contours, see my edited answer. – szym.mie Sep 30 '22 at 11:35
  • It just so happens I found an alternative solution earlier by slightly changing the Tess2 source code. I attach the contour's insertion index into the new edge loop's 'Rface'. Then I make sure to copy that contourId to any new faces that are generated from splits. And that's it! I return an extra value 'contourIndices' from the tesselate function which correspond to each face/element. It turned out my original method for getting the contours was slightly wrong, which was leading to some unexpected results. I will try your solution in the meantime though. Thanks again :) – hedgehog90 Sep 30 '22 at 13:26
  • I've just tested using Tess2.BOUNDARY_CONTOURS but it only processes and returns the resulting outline: https://i.imgur.com/3IDSPDd.png While I need to resolve and triangulate my contours so I can export it as a mesh. I will post another answer later with my solution. Thank you still for your help. – hedgehog90 Sep 30 '22 at 13:41
  • And after all that I've realised my solution doesn't work. I tested it with many different contours and it was producing expected results, however now that I've put it into action and its processing many more contours, I realised I got lucky (or unlucky) the first time and most of the results are wrong. – hedgehog90 Sep 30 '22 at 22:32
0

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:

https://github.com/hedgehog90/triangulate-contours-colour-example

enter image description here

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.

hedgehog90
  • 1,402
  • 19
  • 37