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

Question

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

在分辨率3处选择都柏林模型，以查看正在绘制的许多三角形。

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

大量体素通常在3D纹理中呈现为一组图像，而有关如何将2d纹理破解为3D纹理的若干帖子，但它们似乎对纹理大小有最大限制。

我已经使用这种方法搜索了教程或示例，但还没找到。有没有人在使用three.js之前使用过这种方法

Answer 1

你的场景渲染两次，因为SSAO需要深度纹理。你可以使用WEBGL_depth_texture扩展 - which have pretty good support - 所以你只需要一个渲染通道。如果扩展名不可用，您可以回退到低穿双重传递。

您体素的材质是双面的。这可能是有目的的，但它可能会造成巨大的透支。

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

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

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

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

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

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