使用 WebGL 渲染体素动画的最佳方法？答案

【问题标题】：Best way to render a voxel animation using WebGL?使用 WebGL 渲染体素动画的最佳方法？
【发布时间】：2012-08-18 02:26:01
【问题描述】：

我想使用 WebGL 和 Three.js 渲染动画体素场景，用于业余项目（从服务器端流中可视化实时点云数据）。

场景不是很大 - 应该是 128*128*128 体素（200 万点）左右。

所以我想我可以只加载一个包含所有体素数据的大型静态文件，然后根据来自服务器的流中的事件逐步添加或删除单个体素。

但是在看到这个演示后（它不是基于体积（带有“内部”细节）而是一个更简单的“XY 坐标 + 高程 + 时间”模型）：

我想知道：

我可以使用相同的东西（视频、纹理、着色器..）来渲染我的体素动画吗？您将如何实施？

我没有那么多的“业余时间”，所以我更喜欢提前问：）目前我正在考虑为体素模型的每一层加载许多视频。

但我不确定three.js 是否会喜欢它。另一方面，体素总是消耗大量内存，所以也许我没有太多选择..

谢谢

更新 1：

我确实不需要数据的实时可视化。我可以偶尔轮询一次服务器（在 GPU 上加载前一个快照后立即下载一个新快照）！

更新 2：

每个体素都附有一种材质（“颜色”）

【问题讨论】：

您希望多久更新一次数据，数据格式对您来说是否重要？
感谢您对我的问题感兴趣！格式并不重要。我想这是更新频率和数据量之间的平衡问题。我不需要实时更新，每隔几秒更新一次就已经很棒了（目标是监控适用于点云/体素模型的算法。所以我想看看发生了什么，但我并不真正需要看到每一步，甚至这样，绝对不是实时的）

【解决方案1】：

有很多方法可以解决这个问题，但我会建议以下...

由于几乎只需要编写一个着色器，我会选择 [GLOW][1] 来支持 Three.js 但这完全取决于你 - 我认为两者都可以工作，但我认为 GLOW 会转向更清洁。（实际上，不确定 Three.js 是否支持 drawArrays，这在我的建议中或多或少是必要的。请继续阅读。）

对于数据，我会使用 4 张图片（PNG，因为它是无损的），即...

您只需制作一个着色器，您可以在绘制调用之间切换纹理并向上/向下移动一个位置（添加到顶点）。

有几种方法可以为体素框创建顶点。有一种直接的方法：您为每个体素框创建顶点/法线属性，并使用 UVs+bit 的平行属性（如果您愿意，基本上是 3D UV 坐标）来采样正确的位。这将是巨大的，内存明智的，但可能相当快。

在不太直接的方法上：可能你可以只使用 3D UV 坐标属性加上某种顶点索引（存储在 vec4 属性中的 .w 中），并在顶点着色器中计算顶点/法线飞。我把它留在那里，因为它解释得太多了，你可能自己就能弄清楚；）

着色器将需要顶点纹理，因为您需要在顶点着色器中对上述纹理进行采样。不幸的是，大多数计算机都支持这一点，但不是全部。

如果设置了该位，您只需像往常一样投影顶点。如果未设置，则将其放在近剪裁平面后面，WebGL 管道将为您移除它。

请注意，WebGL 中的位操作或多或少是一种痛苦（移位/和/或不可用），您应该避免使用整数，因为某些 Mac 驱动程序不支持这些整数。我以前也成功过，所以非常可行。

...类似的东西可能会起作用 ;D

【讨论】：

我喜欢使用 4 个 png 和位操作的想法。我没有提到它，但在我的数据模型中，体素具有附加到它们的材料（或“颜色”）。所以使用你的技术，我可以将这些元数据存储在一个额外的 png 中。
也就是说，我想知道在理论上是否也可以进行某种 有损体素压缩（“随机渲染”？:) 我会研究更多（也许有一些论文），但就我而言，我不介意在可视化过程中对个体体素进行近似采样/不准确放置（未压缩的数据在服务器上保持不变）。我会看到..
呃，我很笨：D 当然，一个额外的 PNG 不足以存储颜色信息。因为每增加一点信息，我都需要 4 个图像。也就是说，它仍然比 128 个 PNG 要好！
如果最多有 256 种颜色，则可以使用索引颜色。在附加的 PNG 中，您存储颜色索引，当您对包含实际颜色的 256x1 纹理进行采样时，将其用作 U 坐标。更新：...或者不是。早上太早了！ ;) 但这是一个可以以某种方式减少数据量的想法：D