最好在javascript或着色器中乘以矩阵？ [英] Better to multiply matrices in javascript or a shader?

问题描述

我一直在看几个webgl示例。考虑 MDN的教程。它们的顶点着色器将顶点乘以透视矩阵和世界位置矩阵：

I've been looking at several webgl examples. Consider MDN's tutorial. Their vertex shader multiplies the vertex by a perspective matrix and a world position matrix:


gl_Position = uPMatrix * uMVMatrix * vec4（aVertexPosition ，1.0）;


但是 uMVMatrix 本身就是几个转换的产物（在javascript中借助一些矩阵库计算出的翻译，旋转等。

But the uMVMatrix is itself the product of several transforms (translation, rotation, etc) calculated in javascript with the help of some matrix libraries.

似乎直接在着色器中计算产品会更快;肯定比在.js中做得更快。他们选择这种方法有什么理由吗？

It seems like it would be faster to calculate their products directly in the shader; surely that's faster than doing it in .js. Is there some reason why they choose this approach?

现在，我想你可以用这种方式以任意顺序堆叠任意数量的变换，这样更灵活。但是说不需要灵活性，有没有理由避免在着色器中直接进行变换？类似

Now, I guess you can stack an arbitrary number of transforms in an arbitrary order this way, which is more flexible. But say that flexibility isn't needed, is there any reason to avoid doing transforms directly in the shaders? Something like


gl_Position = uPMatrix * uRotationMatrix * uScaleMatrix * uTranslationMatrix * vec4（aVertexPosition，1.0）;


e：要添加一些上下文，在我的特定情况下，我只会渲染2D矩形实体（主要是精灵），所以顶点的数量总是只有4个。

e: To add some context, in my particular case I'll only be rendering 2D rectangular entities (mostly sprites), so the number of vertices will always just be 4.

考虑到引入库做快速.js矩阵乘法的开销，似乎将这些计算推入着色器绝对是我的个人情况。

Given the overhead of bringing in a library to do fast .js matrix multiplication, seems like pushing these calculations into the shader is definitely the way to go for my personal case.

（另外，即使它在余额方面比在javascript中做得慢）将计算分流到GPU本身可能是有价值的！）

(Plus, even if it were slower in the balance than doing it in javascript, shunting the calculations into the GPU is probably worth something in and of itself!)

推荐答案

它取决于....

如果在着色器中执行此操作，则会对每个顶点（顶点着色器）或每个像素（片段着色器）执行此操作。即使GPU没有无限速度，所以假设你正在绘制100万个顶点。这可能是JavaScript中的一组矩阵数学计算与GPU上的100万次矩阵计算，JavaScript将获胜。

If you do it in the shader it's done for either every vertex (vertex shader) or every pixel (fragment shader). Even a GPU does not have infinite speed so let's say you are drawing 1million vertices. It's likely 1 set of matrix math calculations in JavaScript vs 1 million matrix calculations in on the GPU, the JavaScript will win.

当然，你的milage可能非常。每个GPU都不同。有些GPU比其他GPU快。一些驱动程序在CPU上进行顶点计算。有些CPU比其他CPU快。

Of course your milage may very. Every GPU is different. Some GPUs are faster than others. Some drivers do vertex calculations on the CPU. Some CPUs are faster than others.

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

You can test, unfortunately since you are writing for the web you have no idea what browser the user is running, nor what CPU speed or GPU or driver etc. So, it really depends.

除此之外，将矩阵传递到着色器也是一种非自由操作。换句话说，调用 gl.uniformMatrix4fv 的速度比你在示例中显示的4倍更快。如果您正在绘制3000个对象，是否12000调用 gl.uniformMatrix4fv （每个4个矩阵）显着慢于3000个调用（每个1个矩阵）是您必须测试的东西。

On top of that, passing matrices to the shader is also a non-free operation. In other words it's faster to call gl.uniformMatrix4fv once than the 4 times you show in your example. If you were drawing 3000 objects whether 12000 calls to gl.uniformMatrix4fv (4 matrices each) is significantly slower than 3000 calls (1 matrix each) is something you'd have to test.

此外，浏览器团队正致力于通过JavaScript更快地制作数学矩阵并尝试使其更接近C / C ++。

Further, the browsers teams are working on making math through JavaScript for matrices faster and trying to get it closer to C/C++.

我想这意味着没有正确的答案，除了测试，每个平台/浏览器/ gpu / drivers / cpu的结果都不同。

I guess that means there is no right answer except to test and those results will be different for every platform/browser/gpu/drivers/cpu.

这篇关于最好在javascript或着色器中乘以矩阵？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！