使用WebGL呈現體素動畫的最佳方式？

Question

我想渲染一個動畫的體素場景，使用WebGL和Three.js， 作爲一個業餘愛好項目（從服務器端的流中可視化實時點雲數據）。

現場不是很大 - 它應該是128 * 128 * 128左右的體素（200萬點）。

所以我想我可以加載一個包含所有體素數據的大靜態文件，然後逐步添加或刪除單個體素，具體取決於來自服務器的流中的事件。

但是看到這個演示（不基於卷（與「內」詳細信息），但一個簡單的「XY座標+高度+時間」的模式）後：

webgl kinect demo

我想知道：

我可以使用相同的東西（視頻，紋理，着色器..）來渲染我的體素動畫？你將如何實現這一點？

我沒有那麼多的「愛好時間」，所以我更願意問出來之前:)目前我正在考慮爲體素模型的每一層加載許多視頻。

但我不確定three.js會喜歡它。在另一方面，體素總是大內存的消費者，也許我沒有很多的選擇..

謝謝

---

更新1：

我不需要，實際上，數據的實時可視化。 我可以在一段時間內輪詢一次服務器（一旦GPU上載入了上一次就下載新的快照）！

---

更新2：

每個體素連接到它（「顏色」）

Answer 1

有這麼多的方式去了解這個的材料，但我會建議如下...

由於寫作單一着色器非常困難，我會選擇[GLOW] [1]以支持Three.js，但這完全取決於您 - 兩者都可以工作，但我認爲認爲GLOW會變得更清潔。 （實際上，不確定Three.js是否支持drawArrays，這在我的建議中或多或少是必要的。）

對於數據，我會使用4個圖像（PNG，因爲它是無損的），那就是......

• 128×128像素
• 每個像素具有（RGBA）×8 = 32位
• 每個位代表一個體素
• 需要三十二分之一百二十八= 4個128×128圖像來表示128x128x128

您只需製作一個着色器，即在繪製調用之間切換紋理並向上/向下移動位置（將其添加到頂點）。

有一對夫婦的方式去針對體素框創建頂點。有一個直接的方法：爲每個體素框創建頂點/常規屬性，併爲UVs +位創建一個平行屬性（基本上是3D UV座標，如果你喜歡的話）來對右邊的位進行採樣。這將是巨大的，記憶方面的，但可能相當快。

不太直截了當的方法：可能只有3D UV座標屬性加上某種頂點索引（存儲在.w中的vec4屬性中），並且在頂點着色器中計算頂點/法線蒼蠅。我離開那裏，因爲它是這麼多的解釋，你大概可以算出它自己;）

着色器將需要頂點紋理，如您需要的採樣以上的頂點着色器描述的紋理。大多數電腦都支持這一點，但不幸的是，並非全部。

如果該位被設置，你只需投影頂點平時一樣。如果未設置，則將其放在近剪裁平面之後，WebGL管道將爲您移除它。

注意，在WebGL的位操作或多或少是一個痛苦（移動/和/或不可用），你應該避免使用int，因爲這些不支持某些Mac驅動程序。我已經成功地完成了它，所以它非常可行。

...類似的東西可能會工作; D