three.js - 使用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 - 所以你只需要一个渲染 channel 。如果扩展不可用，您仍然可以回退到低性能双通。

您的体素 Material 是双面的。这可能是故意的，但它可能会造成巨大的 overdraw 。

在您的演示中，您使用 MeshPhongMaterial 和定向灯。这是一种不必要的复杂 Material 。你的几何体没有任何法线，所以你不能有任何照明。尝试使用更简单的无光照 Material 。

你的目标是渲染大量的顶点，所以假设帧率受顶点着色器的限制:

尝试诸如 https://github.com/GPUOpen-Tools/amd-tootle 之类的东西预处理您的几何图形。专注于预取顶点缓存和顶点缓存。

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

通常减少片段着色器所需的变量数量

如果您需要的属性不仅仅是 vec3 位置，请使用一个单独的交错 VBO 而不是每个属性一个。