three.js+WebGL踩坑经验合集(6.1):负缩放，负定矩阵和行列式的关系（2D版本）

春节忙完一轮，总算可以继续来写博客了。希望在春节假期结束之前能多更新几篇。

这一篇会偏理论多一点。笔者本没打算在这一系列里面重点讲理论，所以像相机矩阵推导这种网上已经很多优质文章的内容，笔者就一笔带过。

然而关于负缩放，笔者未能找到从正负缩放到行列式正负的完整推导过程（可能是笔者没用对关键词吧，GPT也还没去用），中途也就找到了一个正/负定矩阵的概念。该说法已经有点正负缩放的意思了，所以本篇虽然侧重理论，但也会结合第5篇的坑进行阐述。

回顾第5篇

(5.2):THREE.Mesh和THREE.Line2在镜像处理上的区别

笔者在排查Line2镜像丢失的bug时，发现了three.js处理正反面的逻辑，它对接原生WebGL的正反面定义——三角面3个点的绕序（顺逆时针）。

three.js的实现机制是，如果物体的变换矩阵的秩（行列式）为负数，则指示物体做了带有负缩放矩阵的变换，就把逆时针旋转的三角面从背面改为正面。

从这一过程可以发现，对一个三角面应用负缩放时，其三个点的绕序会发生变化，而正缩放则不会。而一个缩放的正负，three.js是通过矩阵的秩进行判断的。

这里笔者再多嘴一下，如果矩阵的秩等于0，那么它就会把三角面的三个点变换到在同一直线上，或者会让两个或者3个点完全重合。笔者姑且称之为零定矩阵。与此同时，它也是个不可逆的矩阵。

本篇我们先拿2D的3*3矩阵来探讨行列式的正负对三点绕序的影响。3D的情况比较复杂，因为它涉及到不同轴的情况，笔者有很长一段时间以为3D无法定义负矩阵，直到研读了three.js的代码才恍然大悟。

推导过程有点繁琐，此处先给结论：矩阵缩放的正负，正负定矩阵，行列式的正负性这3者完全等价，正定矩阵不改变绕序，负定矩阵改变，零定矩阵是不可逆矩阵，它会让不共线的点变成共线甚至重合。

好，下面进入正题。

给定2D上的3个不共线的点O(x0, y0)，A(x1,y1)，B(x2,y2)，要判断这3个点的绕序，可以作向量OA，OB，然后通过计算这两个2D向量的叉乘值得出。如下图所示，OA旋转到OB是顺时针。

对这3个点应用正定矩阵，对应两向量的叉乘结果不变，而应用负定矩阵，则叉乘结果改变，如下图所示。

然后我们给定一个3*3的2D变换矩阵（不管是2D点还是3D点，矩阵的阶数都比点的维数多1，目的是加法和乘法合并，前面讲过比较多次了，此处不再重复，实在不懂可以问我）。

对一个2D点应用矩阵，运算过程如下：

可见通过给点的最后一行补1，最后一列就实现了加法。

由于此处只研究2D点的绕序问题，因此最后一行的结果我们无需关注，在此场景它只为了让矩阵乘法计算可以正常进行。

下面我们的推导过程将分以下几步：

1 计算OA，OB向量及它们的叉乘值c

2 计算点O,A,B应用矩阵后的结果O',A',B'

3 计算向量O'A'，O'B'以及它们的叉乘值c'

4 考察c和c'符号的一致性，并给出一致性跟矩阵元素的关系

5 上述关系对应到行列式上验证上面给出的结论

OA和OB是(x1-x0,y1-y0)，以及(x2-x0, y2-y0)，为了书写简便，后面会把x1-x0记为Δx1，y1-y0记为Δy1，其它类似。

两向量(x1,y1)，(x2,y2)的2D叉乘公式为x1*y2-x2*y1，所以OA和OB的叉乘结果为

至此，第一步计算完成。

第二步，计算矩阵变换后的O,A,B，如上所述，其结果为

第三步，计算O'A'，O'B'和他们俩的叉乘值

类似地有

然后叉乘值为

这个推导过程可能会让对数学不敏感的小伙伴们感到蛋疼，所以笔者曾经考虑过要不要牺牲一定的严谨性，拿个特殊点，简单点的变量来做演示。如果实在看不下去，小伙伴们可以让O=(0,0)，A=(1,0)，B=(0,1)来演算一遍，找下感觉。对于2D来说，拿特殊点是没有任何毛病的，除非你拿了重合的点或者共线的3点。

我们对照下OA和OB的叉乘，以及O'A'和O'B的叉乘，后者等于前者乘以(m11m22-m22*m11)，因此判断向量变换前叉积符号的一致性，只需要判断m11m22-m22*m11的符号即可。可见，矩阵对不共线3点绕序的影响仅跟矩阵的4个元素有关，而跟你的取点无关。

现在我们把刚才说到的矩阵搬过来，看看它跟行列式的关系。