threejs 渲染上百万个三角很卡 该如何优化呢
当我渲染一个 vox 的体素模型时，我使用 threejs 根据每个体素的坐标使用 Vector3 构成正方形再拼接成体素方块， 如下：我用了一万来个三角就渲染出来了
但是如果我想把体素块 渲染成 乐高砖的模样 如下：
我就需要在每一个上方为空的体素块上渲染一个上闭合的圆管，为了使它足够圆滑，我把它切割成 64 份，这样每一个圆柱就需要一个 64 个三角拼接成的封顶圆， 一个 64 * 2 个三角拼接成的圆管， 我一下子需要渲染上百万个三角形， fps 从 60 骤降到 30，若果渲染个大一倍或者两倍的体素模型， 我就需要渲染千万的三角形， fps 变成个位数，浏览器卡爆。 个位走过路过的大腿们，谁能帮帮我，随便一个 3d 游戏人家都不会卡啊，有什么解法没啊。。知识匮乏的弱鸡求教！
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
使用多边形渲染圆管会浪费很多性能，可以试下看用置换贴图的方式来渲染顶部的圆管
https://threejs.org/examples/...
最后边就是置换贴图的效果
这种画大量相似物体的情况太好提升性能了
主要在于两点，一是减少drawCall，在three.js里面就是将多个对象合并，一次渲染出来
然后就是实例化。你可以在three.js的例子里搜索instance
补充一下，要减少drawCall，实际上就是尽量将静态的对象的geometry合并为一个geometry，因为不需要对他们单独进行操作，所以可以作为一个物体来渲染。这样会大幅提升性能
昨天咨询一位开发者，给出了几点建议，有两点是我没有做的： 1: 把所有的圆管 装在一个几何体里。 2: 离镜头较远的圆管可以渲染的不那么圆滑（64份降低到 24 或者更低）。我会去尝试一下
可能因为人家并没有大规模使用实时渲染吧。。。（我猜的）
我也是弱鸡，坐等大佬~