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

news/2025/2/2 3:48:42/

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

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

然而关于负缩放,笔者未能找到从正负缩放到行列式正负的完整推导过程(可能是笔者没用对关键词吧,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矩阵的正负缩放问题,敬请期待!


http://www.ppmy.cn/news/1568596.html

相关文章

【Flask】在Flask应用中使用Flask-Limiter进行简单CC攻击防御

前提条件 已经有一个Flask应用。已经安装了Flask和redis服务。 步骤1:安装Redis和Flask-Limiter 首先,需要安装redis和Flask-Limiter库。推荐在生产环境中使用Redis存储限流信息。 pip install redis Flask-Limiter Flask-Limiter会通过redis存储限…

360大数据面试题及参考答案

数据清理有哪些方法? 数据清理是指发现并纠正数据文件中可识别的错误,包括检查数据一致性,处理无效值和缺失值等。常见的数据清理方法有以下几种: 去重处理:数据中可能存在重复的记录,这不仅会占用存储空间,还可能影响分析结果。通过对比每条记录的关键属性,若所有关键…

【硬件测试】基于FPGA的QPSK+帧同步系统开发与硬件片内测试,包含高斯信道,误码统计,可设置SNR

目录 1.算法仿真效果 2.算法涉及理论知识概要 2.1QPSK 2.2 帧同步 3.Verilog核心程序 4.开发板使用说明和如何移植不同的开发板 5.完整算法代码文件获得 1.算法仿真效果 本文是之前写的文章 《基于FPGA的QPSK帧同步系统verilog开发,包含testbench,高斯信道,误码统计,可…

IDEA创建修改gitee仓库

一、创建gitee仓库 创建gitee仓库 点击复制仓库地址 右击项目名 --> Open In --> Terminal 初始化仓库 git init 添加仓库地址 复制之前创建的仓库地址 git remote add origin 仓库地址 二、修改IDEA的gitee仓库 查询当前项目所在仓库 git remote -v 删除原仓库…

树莓派入门笔记(二)最常用的树莓派 Linux 命令及说明_树莓派系统命令

startx #树莓派进入图形界面 df -h #统计整体磁盘情况 du -sh #单独目录点用情况 软件安装删除 sudo apt-get install 软件名1 软件名2 软件名3…… #安装软件 sudo apt-get remove 软件名1 软件名2 软件名3…… #卸载软件 sudo apt-get remove –purge 软件名1 #卸载并清除配…

如何跨互联网adb连接到远程手机-蓝牙电话集中维护

如何跨互联网adb连接到远程手机-蓝牙电话集中维护 --ADB连接专题 一、前言 随便找一个手机,安装一个App并简单设置一下,就可以跨互联网的ADB连接到这个手机,从而远程操控这个手机做各种操作。你敢相信吗?而这正是本篇想要描述的…

WordPress Web Directory Free插件本地包含漏洞复现(附脚本)(CVE-2024-3673)

免责申明: 本文所描述的漏洞及其复现步骤仅供网络安全研究与教育目的使用。任何人不得将本文提供的信息用于非法目的或未经授权的系统测试。作者不对任何由于使用本文信息而导致的直接或间接损害承担责任。如涉及侵权,请及时与我们联系,我们将…

【Django教程】用户管理系统

Get Started With Django User Management 开始使用Django用户管理 By the end of this tutorial, you’ll understand that: 在本教程结束时,您将了解: Django’s user authentication is a built-in authentication system that comes with pre-conf…