threejs 渲染上百万个三角很卡 该如何优化呢

Question

当我渲染一个 vox 的体素模型时，我使用 threejs 根据每个体素的坐标使用 Vector3 构成正方形再拼接成体素方块， 如下：我用了一万来个三角就渲染出来了

但是如果我想把体素块 渲染成 乐高砖的模样 如下：

我就需要在每一个上方为空的体素块上渲染一个上闭合的圆管，为了使它足够圆滑，我把它切割成 64 份，这样每一个圆柱就需要一个 64 个三角拼接成的封顶圆， 一个 64 * 2 个三角拼接成的圆管， 我一下子需要渲染上百万个三角形， fps 从 60 骤降到 30，若果渲染个大一倍或者两倍的体素模型， 我就需要渲染千万的三角形， fps 变成个位数，浏览器卡爆。 个位走过路过的大腿们，谁能帮帮我，随便一个 3d 游戏人家都不会卡啊，有什么解法没啊。。知识匮乏的弱鸡求教！

Answer 1

使用多边形渲染圆管会浪费很多性能，可以试下看用置换贴图的方式来渲染顶部的圆管

https://threejs.org/examples/...

最后边就是置换贴图的效果

Answer 2

这种画大量相似物体的情况太好提升性能了

主要在于两点，一是减少drawCall，在three.js里面就是将多个对象合并，一次渲染出来
然后就是实例化。你可以在three.js的例子里搜索instance

补充一下，要减少drawCall，实际上就是尽量将静态的对象的geometry合并为一个geometry，因为不需要对他们单独进行操作，所以可以作为一个物体来渲染。这样会大幅提升性能

Answer 3

昨天咨询一位开发者，给出了几点建议，有两点是我没有做的： 1: 把所有的圆管 装在一个几何体里。 2: 离镜头较远的圆管可以渲染的不那么圆滑（64份降低到 24 或者更低）。我会去尝试一下

Answer 4

可能因为人家并没有大规模使用实时渲染吧。。。（我猜的）

Answer 5

我也是弱鸡，坐等大佬~