如何将 4x4 矩阵与任意长度的向量数组相乘？

Question

在webgl中编写特定场景时，转换对象的通常过程是定义原始顶点位置数据并将其传递给顶点着色器，其中vertices 与 matrices 相乘，其中包含有关透视、平移、旋转和缩放的信息，因此相应的顶点着色器代码 - 例如 - 将看起来像这样：

gl_Position = projectionMatrix * modelviewMatrix * vec4(vertexPosition, 1.0);

modelviewMatrix 本身就是 viewMatrix 与 modelMatrix[=48= 相乘的结果]]，这又是对平移、旋转和缩放进行连续矩阵操作的结果。

我现在想知道的是，乘法链中的最后一个 link 是如何工作的 - mat4 与矢量数组的乘法任意长度。

someMatrix * vec4(vertexPosition, 1.0);

那是因为我在 webgl 编辑器上编写，我希望能够保存创建的 和转换的 3D 对象的顶点位置数据，而不需要添加有关矩阵变换的信息，但作为原始位置数据，简单地作为 {x, y, z, x, y, z, x, y, z, etc.}，就像原始顶点数组一样。

作为一个基本示例，假设我们有一个简单三角形的以下顶点：

var vertices = [0.0, 1.0, 0.0, -1.0, -1.0, 0.0, 1.0, -1.0, 0.0];

然后我创建一个 mat4 和 translate 它 [2, 0, 0].

我需要的函数然后将这个翻译后的 mat4 和 vertices 数组作为参数，将两者相乘并 return 一个 translated 顶点的数组，例如：

var translatedVertices = [2.0, 1.0, 0.0, 1.0, -1.0, 0.0, 3.0, -1.0, 0.0];

显然，要将 4x4 矩阵与向量数组相乘，必须向其添加第四个值，因此第一步应该是拆分原始 vec3 数组并为每个值的三元组插入一个额外的 1.0，使其成为 vec4 数组，[x, y, z] --> [x, y, z, 1]，但除此之外，我绝对没有想想这个 JavaScript 函数应该是什么样子。

Answer 1

当你说

someMatrix * vec4(vertexPosition, 1.0);

someMatrix 是一个 4x4 矩阵，vertexPosition 始终是一个 3x1 矩阵，通过添加 1.0 转换为 4x1 矩阵。因此，4x4 矩阵乘以 4x1 矩阵将再次产生有效的 4x1 矩阵（即 gl_Position）。请注意，4x1 矩阵是 vec4.

所以你永远不会乘以 "arbitrary" 长度的向量。当您向下传递数据（即您的 vertices 变量）时，系统将它们分解为三元组，加上 1.0 并进行 4x4 乘 4x1 乘法。

如何将 4x4 矩阵与任意长度的向量数组相乘？

How to multiply a 4x4 Matrix with a vector-array of arbitrary length?

javascript

webgl