最佳实践:在WebGL中渲染基于体积(体素)的数据

时间:2015-06-07 10:33:07

标签: javascript opengl-es three.js webgl pixi.js

我正在为以下问题搜索(或更多)最佳做法。我会尝试将其描述为尽可能抽象,因此该解决方案可以应用于我尚未想到的场景。

可用数据:体素(体积像素),形成一个立方体,坐标为x,y,z,并附有颜色。

目标:当您从不同方面移动数据时,使用OpenGL显示此数据。

问题:根据观点,渲染这些体素的最佳做法是什么?如何(哪种类型的对象)可以存储数据?

请考虑以下事项:

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

到目前为止我尝试了什么: 评估了不同的框架(PIXI.js,three.js)并完成了一些WebGL教程。

如果某些内容尚不清楚,请询问。

1 个答案:

答案 0 :(得分:1)

有两种主要方式来表示/渲染3D数据集。光栅化和光线追踪。 一种公平的光栅化方法是通过使用Marching Cubes,Dual Contouring或Dual Marching Cubes等算法进行表面重建技术。

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

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

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

其中一个关键还在于如何组织结构中的数据,特别是用于核外访问。