What does an algorithm which handles mesh-based image morphing look like?

Question

In recent years, the technology of Live2D has become particularly popular and I have been attempting to find any papers or articles which explain what the mathematics for the mesh-based image morphing system are and how they work. Unfortunately, there doesn't seem to be a lot of information on the subject and most of the links I found where just different versions of the same two or three papers and they didn't seem to answer my question.

I am trying to find information on what the algorithm which performs the mesh-based morph/warp looks like. I am aware that there are point-based algorithm which morph between the established points on two different images. (This is not what I am looking for.). I am looking for an algorithm which can freely transform an image based on a non-rectangular mesh. I'm primarily referring to the image warping seen in Live2D Cubism (manual). See below for visuals.

The initial definition of the "artmesh" on top of the image to be morphed:

The vertices in the "artmesh" have now been moved around and the solitary layer has been morphed smoothly to match:

Does anybody know what the algorithm looks like? Sources such as papers, articles or open-source projects would also be appreciated, if possible. As a side note, I am posting this on ComputerGraphics, since I get the feeling that the mesh-based morphing logic may relate to texture projection in 3D graphics. Unfortunately, I'm not experienced enough in that subject to be more specific. I hope you can answer my question. Thank you in advance.

Answer 1

Let's talk barycentric coordinates.

For triangles, any point within a triangle can be defined by a set of 3 coordinates called barycentric coordinates. The three values are each on the range [0, 1], and they represent a relative distance from the point in question to each of the 3 vertex positions of the triangle.

You can think of barycentric coordinates as kind of a normalized position within a triangle. The coordinate (1, 0, 0) is always the position of the first vertex of the triangle (whichever one you define to be "first"). This means that barycentric coordinates are independent of the absolute shape of the triangle.

For example, the center point of a triangle is always at the coordinate (0.33, 0.33, 0.33), no matter what the shape of that triangle is. Which means that if you perform any kind of transformation on the triangle, the barycentric coordinate stays the same.

So you have a triangle in the source image and a triangle in the destination image. When you rasterize the destination triangle, you get a bunch of pixels within the triangle. For each location in the destination triangle, you can compute its barycentric coordinates. You can then convert those barycentric coordinates to the source triangle to get the position in the source image.

Then just convert that position into a texture coordinate and read from the image there. And you're done.