WebGL 渲染优化 - 矩阵

Question

我正在尝试使用 WebGL 以最有效的方式渲染数十万个纹理。

目前我已经达到了相当不错的流程，大约 20K 工件以 100fps+ 的速度渲染。仍然不够高兴，我进行了 chrome 分析以检查代码中可能存在的瓶颈，并且我发现我的矩阵旋转计算占据了很大的一块蛋糕：

以及对应的Bottom-Up trace：

您知道可以在这里执行哪些类型的优化吗？似乎“旋转”操作以某种方式占用了异常数量的资源。

Matrix4 代码：https://github.com/scarlettgamestudio/scarlett-framework/blob/feature/render_optimizations/src/math/matrix4.js

SpriteBatch：https://github.com/scarlettgamestudio/scarlett-framework/blob/feature/render_optimizations/src/core/spriteBatch.js

纹理着色器：https://github.com/scarlettgamestudio/scarlett-framework/blob/feature/render_optimizations/src/shaders/textureShader.shader.js

非常感谢。

Answer 1

除了在该代码中保存一些乘法和缩短路径之外，从微优化的角度来看，没有任何剩余，假设您已经为所有值使用了类型化数组（matrix，axis )。

根据您的应用程序逻辑，您有以下选项：

• 仅使用适当的剔除方法旋转实际可见的部分
• 假设您没有绑定顶点，通过在顶点着色器中执行旋转将旋转卸载到 GPU
• 假设您旋转相同的角度，存储旋转矩阵而不是重建它

另外请注意，渲染是与主线程异步的，因此不会在跟踪中考虑，很可能还有通过优化渲染代码来提高性能的方法。

由于我在您提供的跟踪中阅读了“精灵”，因此我会首先尝试将旋转卸载到 GPU。