最佳实践：在 WebGL 中渲染基于体积（体素）的数据

Question

我正在为以下问题寻找（或更多）最佳实践。我将尝试尽可能抽象地描述它，以便将解决方案应用于我尚未想到的场景。

可用数据：体素（体积像素），形成一个立方体，带有坐标 x、y、z 和附加颜色。

目标：使用 OpenGL 显示此数据，因为您从不同的侧面移动它。

问题：根据视点，渲染这些体素的最佳做法是什么？如何（哪种类型的 Object）可以存储数据？

考虑以下几点：

• 数据立方体可以被认为是 x y 数据的 z 层。这应该 可以查看，中间层，然后显示的颜色 应该从最接近的匹配体素进行插值。
• 对于我的应用程序，我有 (x,y,z)=(512,512,128) 和 更多，包含医疗数据（心脏、大脑扫描等）。

到目前为止我已经尝试过： 评估了不同的框架（PIXI.js、three.js）并完成了一些 WebGL 教程。

如果还不够清楚，请询问。

Answer 1

有 2 种主要方式来表示/渲染 3D 数据集。光栅化和光线追踪。 一种公平的光栅化方法是一种表面重建技术，它使用诸如 Marching Cubes、Dual Contouring 或 Dual Marching Cubes 等算法。

Three.js 在示例部分有一个 Marching Cubes 实现。您基本上从体素创建多边形以进行经典光栅化。它可能比看起来要快。根据您想要达到的详细程度，该过程可以足够快，每秒可以完成超过 60 次，用于数千个顶点。 虽然，除非您想简单地表示立方体（我怀疑）而不是表面，否则您还需要与每个体素相关的更多信息，而不仅仅是体素位置和颜色。

另一种方式是光线投射。除非你找到一个真正有效的光线投射算法，否则你会因为幼稚的实现而严重影响性能。 您可以尝试通过数据结构从相机位置投射光线，在到达表面时找到/停止行进，并将交点投影回具有所需颜色的屏幕空间。 您可以在纹理缓冲区中绘制生成的像素，以使用简单的着色器将其映射到全屏四边形。

在这两种情况下，您需要的信息不仅仅是颜色和立方体。例如，对于行进立方体，您至少需要在体素的每个角处使用密度值，对于双轮廓，您需要沿体素边缘（hermite 数据）的相交法线。 光线投射也是如此，您至少需要一些密度信息来确定表面的位置。

其中一个关键还在于您如何组织结构中的数据，专门用于核外访问。