当前位置 博文首页 > 卤蛋实验室:【十天自制软渲染器】DAY 03:画一个三角形(向量叉

    卤蛋实验室:【十天自制软渲染器】DAY 03:画一个三角形(向量叉

    作者:卤蛋实验室 时间:2021-02-02 14:22

    前面两天画了点和线,今天我们来画一个最简单也是最强大的面——三角形。 本文主要讲解三角形绘制算法的推导和思路(只涉及到一点点的向量知识),最后会给出代码实现,大家放心的看下去就好。
    ??

    如果你喜欢我写的文章,可以把我的公众号设为星标 ??,这样每次有更新就可以及时推送给你啦。

    前面两天画了点和线,今天我们来画一个最简单也是最强大的面——三角形

    本文主要讲解三角形绘制算法的推导和思路(只涉及到一点点的向量知识),最后会给出代码实现,大家放心的看下去就好。


    ??

    本文源码 ??:toyRenderer-day3-draw-triangle

    1.如何画一个三角形?

    在正式开始这一小节前,我们先想一下如何利用上一节的画线算法绘制一个实心的三角形。

    假设现在平面内有三个不共线的点组成一个三角形,我们可以利用上一节的直线算法轻易的连接三角形的三条边,这时候我们会生成一个空心的封闭的三角形。

    那么这时候问题就转换为,如何把这个空心的三角形变为一个实心的三角形?

    我想大家这时候已经有思路了,就是一行一行地扫描像素,把两个边界点之间的像素全部涂满上色就可以了。

    day03_scanLineDrawTriangle
    day03_scanLineDrawTriangle

    这个方法肯定是可以的,但是实现不是很优雅,也不是业内的主流实现方式。因为基于行扫描的算法不是本文的重点,所以详细的推导和代码实现就不提供了,感兴趣的同学可以自己尝试实现一下。

    2.利用向量叉乘画三角形

    开始本节前先简单复习一下向量叉乘的几何意义。

    2.1 数学推导

    在三维空间中,两个三维向量 做叉乘,会得到一个和已知两个向量垂直的新向量

    既然叉乘产生的是一个新向量,那么它肯定有个方向,我们一般用右手定则来判断:将右手食指指向 的方向、中指指向 的方向,则此时拇指的方向即为 的方向。

    右手定则
    右手定则

    综上所述,我们可以对向量叉乘做一个严谨的定义:

    其中 表示