使用C++实现OpenGL软光栅(7)-三角形贴图

上篇文章我们已经知道了如何画一个三角形,现在就学习如果在这个三角形上贴个图
预期效果如图:
在这里插入图片描述
原理其实说来也简单

思考过程

  • 先把图片加载进来
    采用之前讲到过的stbi_load方法load进来即可
  • 画个三角形
    这个在上篇文章有介绍
  • 根据uv关系对三角形内的点着色
    这个就涉及到前面提到的三角形的重心插值算法了
    即三角形内的每个点都可以看作是三角形三个顶点的比例混合
    在这里插入图片描述
    在这里插入图片描述
    通过三角形的重心推论公式我们就可以知道该点与三个顶点的关系

实操

前面具体怎么画三角形的,这里就不再赘述,上篇文章写的很详细
这里主要说一下后面的图片加载和重心
在这里插入图片描述图片还是采用CreateImage方法,将load完的结果保存在我们自定义的image结构体里面在这里插入图片描述
image里面就是一个宽高以及char数组
这里我们要确定三角形和图片的关系,也就是UV坐标
在这里插入图片描述
一般定义左下角的点uv为(0,0),右下角的点为(1,0),剩下的点为(0.5,1)
然后我们在离散三角形的时候,还需要额外知道三角形内每个点的UV坐标
具体的做法就是重心插值那一套,通过权重来计算
在这里插入图片描述
在这里插入图片描述
(这里为什么不用坐标的比例来计算,因为三角形可能是钝角)
知道了三角形内每个点以左下角为原点的uv之后,就是要与图片进行对应
在这里插入图片描述
原理很简单,u坐标和v坐标分别乘上图片的宽高,得出他在图片的第几行第几列,然后y乘宽度加上x就是该点的信息
最后再画出来即可

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值