网站后台修改不了,家具网站建设公司,成都龙泉工程建设有限公司网站,wordpress编辑文章本篇将紧接上篇的2D版本对3D版的负缩放矩阵进行解读。
(6.1):负缩放#xff0c;负定矩阵和行列式的关系#xff08;2D版本#xff09;
既然three.js对3D版的负缩放也使用行列式进行判断#xff0c;那么#xff0c;2D版的结论用到3D上其实是没毛病的#xff0c;THREE.Li…本篇将紧接上篇的2D版本对3D版的负缩放矩阵进行解读。
(6.1):负缩放负定矩阵和行列式的关系2D版本
既然three.js对3D版的负缩放也使用行列式进行判断那么2D版的结论用到3D上其实是没毛病的THREE.Line2出问题是因为顶点生成规则跟Mesh不一致。而我们上篇提到的案例则是用了2D平面的绕序来套到3D上想必也是不合理的。
下面我们先针对上篇最后提到的问题做一个测试用例
!DOCTYPE html
html
headmeta charsetUTF-8titlethree_3Ddeterminant/titlestylebody {margin: 0;overflow: hidden;}/stylescript srcthree/build/three.js/scriptscript srcthree/examples/js/controls/OrbitControls.js/script
/headbodyscriptvar scene new THREE.Scene();var container new THREE.Object3D();scene.add(container);var geometry new THREE.PlaneGeometry(100, 50);var material new THREE.MeshBasicMaterial({color: 0x993300, side:THREE.DoubleSide});var mesh new THREE.Mesh(geometry, material);mesh.position.z 100;container.add(mesh);var geometryBack new THREE.PlaneGeometry(50, 100);var materialBack new THREE.MeshBasicMaterial({color: 0x006600, side:THREE.DoubleSide});var meshBack new THREE.Mesh(geometryBack, materialBack);meshBack.position.z 90;container.add(meshBack);var width window.innerWidth; var height window.innerHeight; var camera new THREE.PerspectiveCamera(60, width / height, 1, 20000);camera.position.set(0, 0, 500); var renderer new THREE.WebGLRenderer();renderer.setSize(width, height);renderer.setClearColor(0x000000, 1); document.body.appendChild(renderer.domElement); function render() {container.rotation.y Math.PI / 180;renderer.render(scene, camera);requestAnimationFrame(render);}render();var controls new THREE.OrbitControls(camera,renderer.domElement);controls.addEventListener(change, render);/script
/body
/html
现在我给两个面片都开启了双面渲染并且让面片所在的容器一直绕y轴旋转让大家大致了解这个测试用例的结构。 真正测试的时候我会把红色设置为正面绿色设置为反面效果如下。 可见容器旋转到正面时红色面显示绿色面隐藏反过来则显示绿色面。
单改容器的rotation虽然按我们的理解是一个正定矩阵但当它的rotation.y在90度到270度之间时点的绕序确实发生了变更所以也隐藏了这跟我们在上篇2D版本上的结论不吻合。
然后我们再试试不旋转而是改scale
var t 0;function render() {t 3 * Math.PI / 180;container.scale.z Math.sin(t);renderer.render(scene, camera);requestAnimationFrame(render);
} 缩放的情况点的绕序没发生变更但是正反面却也交替了。
是不是有点神奇嗯看来是我们对3D绕序的理解不正确。
为了方便观察我们把面片的xy向量绘制到容器上进行观察。与此同时既然我们是研究3D的版本那么我们直接用THREE.AxisHelper把z轴也一并绘制出来红绿蓝分别代表xyz。
var axisHelper new THREE.AxisHelper(300);
axisHelper.position.z 100;
container.add(axisHelper);
接下来为了让每条轴在不同的视角下都能看得见我们再让相机的位置适当偏移一下
camera.position.set(100, 150, 500);
然后旋转和缩放的情况我们都看一下 咦这下我们似乎看出了一点端倪来不管是通过旋转到达背面还是缩放到达背面蓝线都是朝着屏幕向里这时候用蓝线判断正反面似乎更为合理。
没错我们抛开绕序返璞归真重新审视一下正反面无非就是个朝向问题。而作为面片的法线——垂直于面片的蓝线正好与之相匹配。
我们再取个静止的图像看看
初始状态 旋转180度 scaleZ -1 初始时x轴正向到y轴正向是逆时针旋转z轴向前
旋转180度时x到y变成顺时针z轴同时变成向后
scaleZ-1时x到y的旋转方向不变但z轴向后了
这么一看旋转似乎是负负得正的结果而z方向缩放-1的操作则只有一个负向的变换。
事实上图2和图3的两个坐标轴是无法只通过旋转而完全重合。它就像我们的左右手以及基于左右手定义的坐标系一样是镜像关系。
顺带说句废话如果您是名学霸或者读的专业跟化学有关系的话您大概还会知道对映异构体这个词。它其实也是这种镜像关系不同绕序化学性质也不一样因此有的药名会带着左旋右旋这样的字眼。希望这个例子能帮助一部分小伙伴理解镜像变换。
笔者直接从百度百科偷了个图过来让大家更形象的理解两套坐标系跟我们的左右手一样无法完全重合总有一个方向是反的。 讲了这么多我们对3D绕序的定义是时候跟2D区分开来了。它应该基于3个轴如果定义右手坐标系为正绕序那左手坐标系就是负绕序。
three.js使用的是右手坐标系大家比划一下就可以发现旋转180度后坐标系仍为右手而缩放-1的则把坐标系变成右手了。
因此对于3D版本的正负定矩阵我们有这样的一个性质。
如果一个矩阵M可以把一个3维坐标系从左手坐标系变成右手坐标系或者反过来则矩阵M为负定矩阵无更改则为正定矩阵变换到共线共点就是零定矩阵。
下面我们就来推导一下更改坐标系绕序左右手方向的矩阵是不是也正好对应上行列式的值。
初始时x轴向量为(1,0,0)y轴向量为(0,1,0)z轴向量是(0,0,1)如果矩阵是负定矩阵那么不管你如何去旋转它尝试让它跟变换前重合就会发现总会有一个轴会变反的这里我们取z为变反的轴。但是我们不能直接说它就是(0, 0, -1)因为可能会被拉长缩短或者扭曲。但不管怎样这个轴变换后的结果一定是跟初始方向不一致也就是夹角大于90度。
这里想搞得通用点也可以用任意的3个不共面向量来做推导但是看上篇的2D版的式子都比较繁琐了这里就还是不要折磨大家。
先来说步骤
1 给定初始向量x(1,0,0)y(0,1,0)z(0,0,1)对xy做3D向量的叉乘3D叉乘的结果为同时垂直于x和y的一个向量计算结果为(0,0,1)跟初始z的方向一致也就是说初始状态的坐标轴绕序为正演算过程从略
2 给定矩阵M对初始点o(0,0,0)初始点x(1,0,0)初始点(0,1,0)初始点(0,0,1)做变换得到新点o,x,y,z同时算出向量ox,oy,oz
3 对oxoy做叉乘运算得到向量V判断它跟oz的夹角是否大于90度可通过向量点乘运算求得大于0为小于90度小于0则相反
4 点乘结果的正负即为矩阵缩放的正负
下面就让我们开始吧
4*4矩阵对点的变换计算如下所示按照前面2D版的经验本次直接给最后一行填充单位矩阵的数值 3D向量点乘和叉乘的公式也在此处给出
点乘 叉乘 下面我们分别计算矩阵对4个点变换的结果。 可以看到这个变换跟2D的真的很像都是最后一列完全一样所以在计算向量的过程中最后一列会被完全消去。
得到的向量为 嗯果然用给定的特殊坐标算出来的值简单很多。有兴趣的小伙伴可以自行捣鼓一般坐标的演算笔者就不发上来折磨大家了。
下面我们算ox和oy的叉乘值公式前面已给出这里我们直接套用。 然后再跟oz做点乘运算 这两步计算连一起可称为向量的混合积
然后你会很惊喜地发现向量混合积的结果跟4*4矩阵中前3阶的行列式一点不差
加的部分 减的部分 同样地three.js也严格按照4阶行列式定义书写Matrix4的determinant跟2D版本一样在最后一行用单位矩阵填充时4*4的结果跟3*3是没有区别的。
然而4*4直接按定义写跟3*3相比多项式的项数会从6个飙升到24个。对性能来说并不友好。
所以我们看到three.js给的实现和注释给出的链接的写法是不太一样的。 该实现用了行列式的余子式写法不懂的可以自行百度把4*4行列式化为4个3阶并且很巧妙地取到最后一行和一列作为剔除因子。因为在考察3D绕序不研究透视w因子的情况下最后一列一定是单位矩阵的数值0,0,0,1懂得编译原理的朋友应该就会明白n41n42和n43这3部分会因为第一个数为0而会对后面的运算过程做优化当然脚本语言未必优化得彻底哈。所以这一写法可以体现出three.js开发团队的功力确实够深的这个细节优化也做到位了。
而3*3矩阵的行列式就没有做这样的优化大概是这里还没遇到瓶颈吧换写法未必合适。 当然这里让笔者有点困惑求逆的时候它也拿了余子式写法并且取的不是最后一行最后一列就有点谜是怎么样顺手就怎么样写么欢迎大佬们留言讨论。
写了这么多结论是证明出来了用左右手坐标系的方式定义3D绕序后绕序正负缩放正负定矩阵是完全等价的。
回过头来说说2D2D的叉乘是个阉割版因为运算过程中通常不想扩展到3D所以结果是一个数而非一个向量。但严格来说2D向量叉乘的结果它等于跟z轴平行的向量长度等于2D叉乘的数值。如果给2D坐标全部加上z坐标赋值为0大家就会发现其结论跟3D版完全一致。感兴趣的读者可自行演算。
因此2D版的正负定矩阵是3D版的一个特例它们的原理完全一致。
下面来小结一下
1 3D中的点绕序需要结合3轴用跟左右手坐标系类似的方式进行定义
2 绕序有没变更可通过两向量叉乘后跟第三向量点乘求得也就是混合积
3 混合积结果跟4*4矩阵前3阶行列式一致
4 矩阵的正负缩放完全跟3*3矩阵的秩或者最后一行填充了单位矩阵的4*4的秩的符号直接对应
5 3D正负定矩阵的性质正定矩阵不修改坐标系的左右手方向绕序负定矩阵会修改零定矩阵会把坐标系压缩为共面共线或者共点。零定矩阵不可逆。
好了折腾完这波理论下篇就暂时不折磨大家了换回踩坑经验方面的分享。感谢小伙伴们的支持和关注我们下篇再见
