当前位置：首页 > news >正文

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

news 来源：原创 2025/5/21 12:22:01

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

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

然而关于负缩放，笔者未能找到从正负缩放到行列式正负的完整推导过程（可能是笔者没用对关键词吧，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个元素有关，而跟你的取点无关。

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

发现计算结果只取了3*3矩阵中的前面两阶的元素做了一个行列式的计算。而第三列中的元素，因为它只管平移，并且跟点坐标无关，所以它在计算向量的时候就已经被消去了。至于第三行，因为它是为了将加法和乘法合并，不是本文的关注点，所以全程我们都没有让它参与到计算当中。

然而three.js自带的Matrix3类，它的行列式值则是严格按照数学的定义，按3阶行列式来书写：

那为什么我们在使用的过程中没有出现任何问题呢？我们把刚才3*3矩阵乘以点的计算公式拿过来。

为了让点变换的过程中，为合并而补充的那个1保持不变，我们应该让第三行的计算结果

m31*x+m32*y+m33恒等于1，因此结果不能受x和y影响，所以m31和m32要等于0，而剩下的m33，自然就等于1了。也就是说，这一行填充的是单位矩阵的数值。

熟悉行列式运算法则的小伙伴应该一眼就看得出来，用到第三列元素的项都要跟0相乘，否则就是跟1相乘。但为了照顾更多的小伙伴，笔者也按3阶行列式的定义演算一遍。

可见，用单位矩阵填充第3行以后，其行列式的值跟2阶行列式出来的结果完全一致，证毕。

这里需要注意的一点是，three.js的Matrix3允许第三行不使用单位矩阵的数值。这时候，它的行列式符号不能在2D变换的场景下判断矩阵的正负性。

推导完成了，来小结一下（注意以下结论均建立在Matrix3做2D变换的场景）：

1 正负缩放矩阵，正负定矩阵，行列式正负完全等价（此外还有零的情况）

2 正负矩阵的性质：不共线的3个2D点，正矩阵不会修改它们的绕序，负矩阵会

3 three.js利用这一性质，根据WebGL正反面的规则修复单面材质镜像后不能正确显示的问题

4 零矩阵会使它们共线或者共点，且不可逆

5 判断一个矩阵的正负，用的是3*3矩阵前两行两列所构成的行列式的符号。若想对齐到3阶矩阵，则第三行必须按照单位矩阵进行填充，否则会出现错误的结果

现在我们来简单聊聊3D，为什么前面说3D比2D复杂。

大家脑补一下，我们给2D点直接加上z坐标，全部设置为0。如果我们应用x方向负缩放或者y方向负缩放的话，那么应用前面的结论一点毛病都没有，但若应用z负缩放，则所有的点都不会有任何变化，哪怕你不设置为0，只要z值完全一样，那翻转后，也就是z值统一改成一样的数字，但这时候，其实正反面已经颠倒了。

就这么一个简单的情况，本文的结论就已经无法应用到3D上了，所以今天我们就先到这里，后面我会跟大家继续探讨3D矩阵的正负缩放问题，敬请期待！

相关文章：