上篇文章我们已经知道了如何画一个三角形,现在就学习如果在这个三角形上贴个图
预期效果如图:
原理其实说来也简单
思考过程
- 先把图片加载进来
采用之前讲到过的stbi_load方法load进来即可 - 画个三角形
这个在上篇文章有介绍 - 根据uv关系对三角形内的点着色
这个就涉及到前面提到的三角形的重心插值算法了
即三角形内的每个点都可以看作是三角形三个顶点的比例混合
通过三角形的重心推论公式我们就可以知道该点与三个顶点的关系
实操
前面具体怎么画三角形的,这里就不再赘述,上篇文章写的很详细
这里主要说一下后面的图片加载和重心
图片还是采用CreateImage方法,将load完的结果保存在我们自定义的image结构体里面
image里面就是一个宽高以及char数组
这里我们要确定三角形和图片的关系,也就是UV坐标
一般定义左下角的点uv为(0,0),右下角的点为(1,0),剩下的点为(0.5,1)
然后我们在离散三角形的时候,还需要额外知道三角形内每个点的UV坐标
具体的做法就是重心插值那一套,通过权重来计算
(这里为什么不用坐标的比例来计算,因为三角形可能是钝角)
知道了三角形内每个点以左下角为原点的uv之后,就是要与图片进行对应
原理很简单,u坐标和v坐标分别乘上图片的宽高,得出他在图片的第几行第几列,然后y乘宽度加上x就是该点的信息
最后再画出来即可