<p>Let's talk barycentric coordinates.</p>
<p>For triangles, any point within a triangle can be defined by a set of 3 coordinates called <a href="https://en.wikipedia.org/wiki/Barycentric_coordinate_system#Barycentric_coordinates_on_triangles" rel="nofollow noreferrer">barycentric coordinates</a>. 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.</p>
<p>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 &quot;first&quot;). This means that barycentric coordinates are <em>independent</em> of the absolute shape of the triangle.</p>
<p>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.</p>
<p>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 <em>source</em> triangle to get the position in the source image.</p>
<p>Then just convert that position into a texture coordinate and read from the image there. And you're done.</p>

CC BY-SA 4.0
2021-11-29T06:01:06.903Z
2021-11-29T06:01:06.903Z
Nicol Bolas
<p>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.</p>
<p>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. (<a href="https://youtu.be/F2AitTPI5U0?t=327" rel="nofollow noreferrer">This is not what I am looking for.</a>). 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 (<a href="https://docs.live2d.com/cubism-editor-tutorials/import/" rel="nofollow noreferrer">manual</a>). See below for visuals.</p>
<p>The initial definition of the &quot;artmesh&quot; on top of the image to be morphed:
<a href="https://i.sstatic.net/aKHLG.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/aKHLG.png" alt="The initial definition of the &quot;artmesh&quot; on top of the image to be morphed." /></a></p>
<p>The vertices in the &quot;artmesh&quot; have now been moved around and the solitary layer has been morphed smoothly to match:
<a href="https://i.sstatic.net/N5fgt.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/N5fgt.png" alt="The vertices in the &quot;artmesh&quot; have now been moved around and the solitary layer has been morphed smoothly to match." /></a></p>
<p>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.</p>

CC BY-SA 4.0
2021-11-29T11:43:20.220Z
The primary reason its done thisway is that you have this thing called the graphic card that works on triangles like this without any modifications. Other approaches need more work from devs side. Anyway this is hardly new technology ive used siftware that worked like this in the 1990's perhaps not finding anything is because you dont search back in time enough.
joojaa
<algorithm><mesh><2d><image>
What does an algorithm which handles mesh-based image morphing look like?
MadCreativity
# What does an algorithm which handles mesh-based image morphing look like?

(Asked by: username_0 on 2021-11-28)

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.](https://youtu.be/F2AitTPI5U0?t=327)). 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](https://docs.live2d.com/cubism-editor-tutorials/import/)). See below for visuals.

The initial definition of the "artmesh" on top of the image to be morphed:
[![The initial definition of the "artmesh" on top of the image to be morphed.](https://i.sstatic.net/aKHLG.png)](https://i.sstatic.net/aKHLG.png)

The vertices in the "artmesh" have now been moved around and the solitary layer has been morphed smoothly to match:
[![The vertices in the "artmesh" have now been moved around and the solitary layer has been morphed smoothly to match.](https://i.sstatic.net/N5fgt.png)](https://i.sstatic.net/N5fgt.png)

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.

**Tags:** algorithm, mesh, 2d, image

> **Comments:**
> **username_1**: The primary reason its done thisway is that you have this thing called the graphic card that works on triangles like this without any modifications. Other approaches need more work from devs side. Anyway this is hardly new technology ive used siftware that worked like this in the 1990's perhaps not finding anything is because you dont search back in time enough.  

---

## 1 answers

### Answer by username_2 on 2021-11-29. Score: 1 | Accepted answer

Let's talk barycentric coordinates.

For triangles, any point within a triangle can be defined by a set of 3 coordinates called [barycentric coordinates](https://en.wikipedia.org/wiki/Barycentric_coordinate_system#Barycentric_coordinates_on_triangles). 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.


---

