使用 three.js 使用 3D 纹理渲染数百万体素答案

【问题标题】：rendering millions of voxels using 3D textures with three.js使用 three.js 使用 3D 纹理渲染数百万体素
【发布时间】：2017-08-26 00:56:07
【问题描述】：

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

选择分辨率为 3 的 Dublin 模型以查看正在绘制的大量三角形。

我已经使用了所有技巧来做到这一点（缓冲区几何、体素剔除、多个缓冲区），但我认为它已经达到了 openGL 三角形可以完成的最大数量。

大量体素通常被渲染为 3D 纹理中的一组图像，虽然有几篇文章介绍了如何将 2d 纹理转换为 3D 纹理，但它们似乎对纹理大小有最大限制。

我搜索了使用这种方法的教程或示例，但没有找到。以前有没有人用过这个方法和three.js

【问题讨论】：

我认为你不走运试图直接显示它们。您可能需要某种 LODing 系统，以某种方式在近距离显示更多细节，在远处显示更少细节。 Here's another depth data based viewer，当您放大时，您会看到它加载了更多细节。看起来如果您选择“外观->材质->树深度”，它会显示 LOD。
感谢您回复我。它实际上是建立在使用八叉树变体的 LOD 模型上的，Potree 启发了我做一个基于 Web 的查看器。我想我在渲染这些数据时已经达到了 webgl 的硬性限制。

【解决方案1】：

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

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

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

您的目标是渲染大量顶点，因此假设帧速率受顶点着色器约束：

尝试像https://github.com/GPUOpen-Tools/amd-tootle 这样的东西来预处理你的几何图形。专注于预取顶点缓存和顶点缓存。
减少顶点缓冲区使用的带宽。由于您的顶点在“网格”上对齐，因此您可以将顶点位置存储为 3 个短裤而不是 3 个浮点数，从而将您的 VBO 大小减少 2。如果您有法线，则可以使用相同的技巧，因为所有法线都应该是轴对齐的（立方体)
通常会减少片段着色器所需的变化量
如果您需要的属性不仅仅是 vec3 位置，请使用单个交错 VBO，而不是每个属性一个。

【讨论】：