问题标签 [gl-matrix]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
647 浏览

javascript - 四元数之间的距离/大小,但忽略滚动

我正在寻找一种方法来确定相机 ( a) 是否与特定对象 ( b) 看向相同的方向。

我只处理旋转,因为在这里我们不关心位置(所以我们可以认为两者都位于原点)。

我正在使用 gl-matrix 处理四元数。

经过多次搜索和测试,我了解到我可以使用点积确定两个四元数之间的“距离”(大小?)。

这在许多情况下都很好用(它返回范围 [0..1] 内的数字:从1如果两者都完全看同一个方向到0如果两者完全相反)。

但是,就我而言,我不想关心对象之间的“滚动”。我的意思是相机 ( a) 可以倒置,相对于 ( b),但仍然看着同一点。

例如,如果我b绕 Z 转 180 度,我得到一个在 周围的点积0,而它仍然看向同一个方向。

我尝试了很多事情,例如将ab, or的倒数相乘[s]lerp,但我仍然无法得到任何符合我要求的东西。

当然,我不能简单地分离和使用绝对 Z 轴,因为这里的一切都是相对的,所以滚动可以围绕任何轴。

我怎样才能得到那个结果?

编辑:感谢 LutzL 的回答,这是我实施解决方案的方式:

0 投票
1 回答
317 浏览

javascript - phi和theta的四元数旋转而不是gl-matrix中的xyz

gl-matrix四元数对象有 3 个函数rotateX,它们通过特定rotateYrotateZ轴旋转四元数。现在我想使用 phi 和 theta 而不是 xyz 来做同样的事情。

这怎么可能 ?是否可以提取一些值然后将其传递给rotateX,rotateYrotateZ

0 投票
1 回答
1332 浏览

javascript - 如何计算骨骼动画中的最终骨骼矩阵?

我很难为我的骨骼找到最终的骨骼矩阵。

我知道我的绑定姿势矩阵有效,并且我知道我的变换矩阵有效,但我认为将它们相乘(我称之为复合矩阵)然后将它们乘以其父复合矩阵(然后乘以它的父父等)会给我正确的矩阵。

值得注意的是,我使用 gl-matrix.js 作为我的向量/矩阵数学库,它的矩阵数学反向工作,得到一个世界矩阵需要 PositionMatrix * RotationMatrix * ScaleMatrix,而不是相反。所以我可能把订单搞混了

我试过改变绑定姿势矩阵和骨骼变换矩阵的乘法顺序,以及最终矩阵和父矩阵的顺序,但我现在只是想不通。

无论如何要把这个问题总结在一个弓上,给定一个网格,其中每个顶点都预先转换到它的相对骨骼空间,每个骨骼绑定姿势矩阵和每帧变换矩阵的每个骨骼我将如何找到最终的骨骼矩阵?

编辑:

仍然有问题,但它可能有助于说明我现在在哪里,下面的伪代码让模型完美地进入它的绑定姿势

上面的片段正是发生的事情,无需解释矩阵函数(它的 javascript 所以它通过 mat4.copy 和 mat4.mul 等函数完成)

我想如果我做了类似的事情

我会得到最终的矩阵(我曾尝试在poseMatrices之前使用transformMatrices),但我得到的只是一个脊椎断裂且腿由内而外的模型

编辑2:

等进一步检查,空闲帧上的骨骼变换矩阵有中间 2 行倒置?奇怪,但我正在研究如果我现在把它们换回去会发生什么

0 投票
0 回答
1701 浏览

javascript - glMatrix四元数旋转

谁能向我解释为什么这不能像我预期的那样工作。

使用四元数将 vec3 [5,0,0] 围绕 z 轴旋转 180 度/Math.PI 弧度。

我认为结果是 [-5,0,0]; 旋转 [5,5,0] 会得到预期的 [-5,-5,0]。

http://jsfiddle.net/s4sqq5L4/

0 投票
1 回答
1441 浏览

matrix - 物体旋转时法线旋转错误

我在 WebGL 中渲染一个简单的圆环。旋转顶点可以正常工作,但法线有问题。当围绕单个轴旋转时,它们保持正确的方向,但是当围绕第二个轴的旋转增加时,法线开始以错误的方式旋转,直到其中一个旋转为 180°,然后法线以完全相反的方式旋转他们应该。我认为问题在于用于旋转的四元数,但我无法确定出了什么问题。

这是我项目的一个(稍作修改,但仍然显示问题)jsfiddle:https ://jsfiddle.net/dt509x8h/1/
在小提琴的 html 部分中有一个 div 包含来自 obj 的所有数据-我正在阅读以生成环面的文件(尽管分辨率较低)。

顶点着色器:

片段着色器:

更新矩阵(输入时运行):

创建旋转四元数(当鼠标移动时调用):

仅围绕 Y 轴旋转环面,法线指向正确的方向: 围绕两个轴旋转环面。法线指向各处:
仅围绕 Y 轴旋转环面

绕两个轴旋转

我将glMatrix v2.3.2 用于所有矩阵和四元数运算。

更新: 似乎仅围绕 Z 轴旋转(通过将输入轴quat.setAxisAngle显式设置为[0,0,1],或使用quat.rotateZ)也会导致法线向相反方向旋转。
将 z 分量归零axis并没有帮助。

Update2: Rotating byquat.rotateX(q, q, l*scale); quat.rotateY(q, q, l*scale); quat.multiply(rotation, q, rotation);似乎是正确的,但是一旦引入围绕 Z 的旋转,z 法线就会开始移动。
使用 x 或 y 鼠标值的差异而不是l会导致所有法线移动,因此scale对 x 和 y 使用大不相同的 - 值也是如此。

更新3:更改着色器中的乘法顺序 uNMatrix * aNormalDirection会导致法线始终以错误的方式旋转。

0 投票
1 回答
300 浏览

javascript - 将属性添加到节点模块中的顶级对象

在 node.js 模块中,变量声明在模块内保持私有:

var a = 'x';

比方说,我想以这种方式声明一些变量。我不能使用下面的代码,因为像这样变量变得非常全局并且在其他模块中也可见:

有没有办法只为模块做到这一点?我需要这个,因为我需要一个库('gl-matrix'),它本身有几个我需要在模块中轻松访问的子对象。我想避免:

0 投票
3 回答
3349 浏览

transformation - glMatrix中的转换顺序颠倒了?

在此处输入图像描述

在这两个场景中,都必须在 glMatrix 中交换转换。

即在glMatrix中实现1):

为什么转换顺序颠倒了?

0 投票
1 回答
1161 浏览

javascript - 如何使用 GLMatrix 进行矩阵乘法?

我刚刚开始尝试为 JS 查找/使用矩阵运算库。我想对二维矩阵进行简单的平移、缩放和旋转操作。Mozilla 开发者网站推荐GLMatrix因为它“专注于速度和性能”。

我只是想对矩阵做一些简单的 2D 转换,例如使用mat2d. 我想做这样的事情:

但我不能有正确的语法,因为我得到了一个Uncaught TypeError: mat2d is not a functionJSFiddle)。我正在使用GL-matrix-min.js这里找到。

如何修复上面的矩阵乘法代码片段?

0 投票
0 回答
814 浏览

javascript - 乘法不适用于 gl-matrix.js 的函数 mat4.multiply

我想将 2 个矩阵与 gl-matrix.js 库gl matrix mat4相乘

乘法确实有效:

哪里this._transformation[x].transformation是矩阵。

但是这样做时它不起作用:

这意味着存储在其中的矩阵在this._transformations[0]乘法之后仍然相同。

有人对此做出解释或可以告诉我我做错了什么吗?

编辑:console.log(mat4.equals(mat4.create(),this._transformations[0].transformation))返回true

0 投票
0 回答
197 浏览

javascript - 如何计算两个空间旋转之间的差异

我正在尝试将移动设备的物理方向从deviceorientation事件转换为我的 3D 查看器中的一系列相机旋转。问题是我需要相对于第一个方向进行空间旋转,deviceorientation即页面加载时的方向。所以我需要保存第一个方向,然后以某种方式进行与从保存的方向更改为当前方向的空间旋转相对应的空间旋转。

我怎么做?

请注意,我使用glMatrix的四元数进行空间旋转,但我对这个主题不太熟悉。

目前我的旋转功能如下所示:

我的deviceorientation听众看起来像这样(确定它还没有完成):

我想很难找到明确的公式来获得所需的角度(aX, aY, aZ)。我想我需要进行四元数转换,但我不知道具体如何。