使用three.js使用三维纹理渲染数百万体素

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个Shorts而不是3个浮点数，从而将VBO大小减少2.如果您有法线，则可以使用相同的技巧，因为所有法线都应该轴对齐（立方体）

• 普遍减少片段着色器

• 需要varyings的量，如果你需要的不仅仅是VEC3位置更多的属性，使用一个单路交错VBO，而不是每一个ATTRIB。