javascript - 最好在 javascript 或着色器中乘以矩阵？

Question

我一直在查看几个 webgl 示例。考虑 MDN's tutorial .他们的顶点着色器将顶点乘以透视矩阵和世界位置矩阵:

gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);

但是 uMVMatrix 本身是在一些矩阵库的帮助下用 javascript 计算的几个变换(平移、旋转等)的产物。

直接在着色器中计算他们的乘积似乎会更快；这肯定比在 .js 中做更快。他们选择这种方法有什么原因吗？

现在，我想您可以通过这种方式以任意顺序堆叠任意数量的转换，这样更加灵活。但是说不需要灵 active ，是否有任何理由避免直接在着色器中进行变换？有点像

gl_Position = uPMatrix * uRotationMatrix * uScaleMatrix * uTranslationMatrix * vec4(aVertexPosition, 1.0);

e: 要添加一些上下文，在我的特定情况下，我将只渲染 2D 矩形实体(主要是 Sprite )，因此顶点数将始终仅为 4。

考虑到引入一个库来进行快速 .js 矩阵乘法的开销，似乎将这些计算插入着色器绝对是我个人案例的方法。

(另外，即使它在平衡方面比在 javascript 中慢，将计算分流到 GPU 本身可能是值得的!)

Answer 1

这取决于....

如果您在着色器中执行此操作，则它会针对每个顶点(顶点着色器)或每个像素(片段着色器)完成。即使是 GPU 也没有无限的速度，所以假设您正在绘制 100 万个顶点。很可能在 JavaScript 中进行 1 组矩阵数学计算与在 GPU 中进行 100 万次矩阵计算，JavaScript 将获胜。

当然你的里程数可能会很高。每个 GPU 都是不同的。一些 GPU 比其他 GPU 更快。一些驱动程序在 CPU 上进行顶点计算。有些 CPU 比其他的更快。

你可以测试，不幸的是，因为你是为网络编写的，你不知道用户正在运行什么浏览器，也不知道 CPU 速度或 GPU 或驱动程序等。所以，这真的取决于。

最重要的是，将矩阵传递给着色器也是一种非自由操作。换句话说，调用 gl.uniformMatrix4fv 一次比您在示例中显示的 4 次更快。如果您要绘制 3000 个对象，您必须测试 12000 次调用 gl.uniformMatrix4fv(每次调用 4 个矩阵)是否明显慢于调用 3000 次(每次调用 1 个矩阵)。

此外，浏览器团队正在努力通过 JavaScript 更快地对矩阵进行数学运算，并努力使其更接近 C/C++。

我想这意味着除了测试之外没有正确的答案，而且每个平台/浏览器/gpu/驱动程序/cpu 的结果都会不同。