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

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

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

因此，我想我可以加载一个包含所有体素数据的大型静态文件，然后根据服务器流中的事件增量添加或删除单个体素

但是，在观看此演示后（它不是基于卷（具有“内部”细节），而是基于更简单的“XY坐标+高程+时间”模型）：

我想知道：

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

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

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

多谢各位

---

更新1：

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

---

更新2：

---

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

有很多方法可以做到这一点，但我建议如下

由于基本上只需要编写一个着色器，我会选择[GLOW][1]来支持Three.js，但这完全取决于您-我认为这两种方法都可以工作，但我认为GLOW会变得更干净。（实际上，我不确定Three.js是否支持DrawArray，这在我的建议中或多或少是必要的。请继续阅读。）

对于数据，我会使用4个图像（PNG，因为它是无损的），这是

• 128x128像素
• 每个像素具有（RGBA）4x8=32位
• 每一位代表一个体素
• 您需要128/32=4个128x128图像来表示128x128x128

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

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

使用不太直接的方法：可能只需使用3D UV坐标属性加上某种顶点索引（存储在vec4属性的.w中），然后在顶点着色器中动态计算顶点/法线即可。我把它放在那里，因为它解释得太多了，你也许可以自己弄明白；）

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

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

请注意，WebGL中的位操作或多或少是一个难题（shift和/或不可用），您应该避免使用Int，因为某些Mac驱动程序不支持Int。我以前成功地做过这件事，所以它很可行

---

…类似的事情可能会奏效；D

您希望多久更新一次数据？数据的格式对您是否重要？感谢您对我的问题感兴趣！格式并不重要。我认为这是更新频率和数据量之间的平衡问题。我不需要实时更新，每隔几秒钟更新一次就好了（目标是监控一个在点云/体素模型上工作的算法。所以我想看看发生了什么，但我真的不需要查看每个步骤，或者即使如此，也绝对不需要实时更新）。我喜欢使用4 png和位操作的想法。我没有提到它，但在我的数据模型中，体素具有附加到它们的材质（或“颜色”）。因此，使用您的技术，我可以将这些元数据存储在一个附加的png中。也就是说，我想知道在理论上是否有可能同时进行某种有损体素压缩（“随机渲染”）：）我将对其进行更多的研究（可能有一些论文），但在我的案例中，我不介意在可视化过程中对单个体素进行近似采样/不准确的放置（未压缩的数据在服务器上保持不变）。我看看..呃，我很笨：D当然，一个额外的PNG不足以存储颜色信息。。因为我需要4个额外的信息位的图像。也就是说，它仍然比128个PNG好！如果最多有256种颜色，则可以使用索引颜色。在附加的PNG中存储颜色索引，当采样包含实际颜色的256x1纹理时，将其用作U坐标。更新：…或否。早上太早了！；）但这是一个可以用来减少数据量的想法：D