使用具有three.js的3D纹理渲染数百万个体素

Question

我使用three.js将体素表示渲染为一组三角形.我有它可以舒适地渲染500万个三角形,但这似乎是极限.你可以在这里在线查看.

选择分辨率为3的都柏林模型,以查看正在绘制的大量三角形.

我已经使用了每一个技巧来实现它(缓冲几何,体素剔除,多个缓冲区),但我认为它已达到openGL三角形可以达到的最大量.

通常将大量体素渲染为3D纹理中的一组图像,并且有关于如何将2D纹理破解为3D纹理的若干帖子,但它们似乎对纹理大小具有最大限制.

我使用这种方法搜索了教程或示例,但没有找到任何.有没有人用three.js之前使用过这种方法

Answer 1

您的场景渲染两次,因为SSAO需要深度纹理.你可以使用WEBGL_depth_texture扩展 - 它有很好的支持 - 所以你只需要一个渲染通道.如果扩展不可用,您可以回退到低穿双重通道.

你的体素材料是双面的.这可能是有目的的,但它可能会造成巨大的透支.

在您的演示中,您使用MeshPhongMaterial和定向灯.这是一种不必要的复杂材料.您的几何图形没有任何法线,因此您无法进行任何照明.尝试使用更简单的未点亮材料.

你的目标是渲染大量的顶点,所以假设帧率由顶点着色器绑定:

• 尝试像https://github.com/GPUOpen-Tools/amd-tootle这样的东西来预处理你的几何.专注于预取顶点缓存和顶点缓存.

• 减少顶点缓冲区使用的带宽.由于您的顶点在"网格"上对齐,您可以将顶点位置存储为3个短片而不是3个浮点数,从而将VBO大小减少2.如果您有法线,则可以使用相同的技巧,因为所有法线都应该是轴对齐的(立方体) )

• 通常会减少片段着色器所需的变化量

• 如果您需要的属性多于vec3位置,请使用一个交错的VBO而不是每个attrib一个.