javascript - 移动物体性能 - ThreeJs

Question

上下文:

我正在开发一个非常简单的 THREE.JS 项目，我相信它已经以非常好的方式进行了优化。我正在使用 WebGLRenderer 来显示每 50 毫秒从音频信号中提取的大量波特图。这非常酷，但显然，我显示的伯德越多，它就越滞后。此外，波德斯正在匀速移动，给新的波德斯留下了一些展示的空间。

我现在已经实现了我在互联网上找到的每一个“基本”优化，并且我设法在显示大约 10.000.000 行时持续获得 30 fps，而计算机却很糟糕(nVidia GT 210 和酷睿 i3 2100...)。

另请注意，我没有使用任何灯光、反射...只有基本线条 =)

由于这是一个正在运行的项目，因此我不允许显示一些屏幕截图/代码，抱歉......

当前实现:

我使用一个数组来存储我的所有 Bodes，每个 Bodes 都通过 THREE.Line 显示。
仅供引用，实际上使用了 2000 个 THREE.Line。

当波德图显示并移动 40 秒后，它就会被删除，并且 THREE.Line 会与另一条波德图重新使用。请注意，为了移动这些，我要修改 THREE.Line.position 属性。

另请注意，我已经禁用了场景和对象矩阵自动更新，因为我正在手动执行此操作。 (感谢您指出 Volune)。

我的问题:

Do the THREE.Line.position modification induces some heavy calculations the renderer has already done ? Or is three.js aware that my object did not change and avoid these ?

换句话说，我想知道在渲染过程中渲染/更新刚刚翻译的同一对象是否比不更新他的矩阵等更重......
在 ThreeJS 中是否有任何关于多次渲染相同对象的低级优化？当我移动对象时，此优化会取消吗？

如果是这样，我想到了另一种方法来做到这一点:仅使用两个大网格，它们彼此跟随，但这会导致每个帧合并/删除其几何图形的一部分......可能会更好吗？

提前致谢。

Answer 1

我在源( here 和 here )中发现，无论位置是否更改，网格矩阵都会每帧更新。

这意味着位置修改本身不会引起繁重的计算。这也意味着每帧都会更新大量矩阵，并将大量制服发送到 GC。

我建议用一两个大网格来尝试你的想法。这应该减少 THREE.js 内部的 javascript 计算，并且与 GC 的唯一大型通信将与大缓冲区相关。
另请注意，存在一个 WebGL 函数 bufferSubData ( MSDN documentation ) 来更新缓冲区的部分内容，但似乎 not yet usable in THREE.js