具有大量面的样条曲线的最佳方法

Question

我们假设我有一个20,000英尺长的样条。所以我将细分设置为20,000。我还要在每个部分周围有36个面孔。我还从数据库中获取有关每个段面的信息。

Segment 1 [Face1: Red, Face2: Green, Face3: Black ..... Face 36: Red]
.
.
Segment 20000 [...]

在没有很多性能问题的情况下，如果有大量数据进行渲染，最好的方法是什么？

Answer 1

确实没有简单的事情。我自己做的就是可能反汇编THREE.Spline并改变其逻辑以使用BufferGeometry。所以例如而不是创建THREE.Vertice，您可以为类型化数组添加位置。但这可能需要一段时间，直到你弄明白。使用工人并不是一个好主意，因为我们在这里遇到了内存问题，而不是速度问题。然后你还必须在＆＃34;线程之间传递几何形状＆＃34;。

另一种方法是按顺序构建样条曲线。而不是

  

使用数千个顶点创建THREE.Spline

你可以

  

使用40个顶点创建THREE.Spline，这些顶点位于相机周围。显示内部38个顶点。当相机移动时，再次使用40个顶点创建以下样条曲线。

你必须拥有像＃34这样的相机逻辑;我的相机在哪里？＃34;等等。如果你能以计算方式做到这一点 - 完美。如果您以前不知道顶点所在的位置，或者它们的位置没有逻辑，那么请使用http://threejs.org/examples/#webgl_nearestneighbour之类的辅助构造。

Answer 2

为什么不查看新的BufferGeometry？通过这样做，我成功地获得了巨大的性能提升。以下是帮助您入门的文档条目：http://threejs.org/docs/#Reference/Core/BufferGeometry。不幸的是，许多例子已经过时，所以要小心。这个似乎适用于r67，其他则不适用：http://mrdoob.github.io/three.js/examples/#webgl_buffergeometry_rawshader。

基本上，您可以预先分配大小为20000 * 36 * 3 * 3（20000个段* 36个面* 3个顶点* 3个坐标）的Float32Array，另一个用于颜色。然后数组将逐渐填充数据。