2017-03-31 199 views
6

我使用three.js渲染體素表示爲一組三角形。我已經得到了500萬個三角形,但這似乎是極限。您可以在線查看here使用three.js使用三維紋理渲染數百萬體素

選擇分辨率爲3的都柏林模型以查看大量繪製的三角形。

screenshot

我已經使用了渾身解數拿到了這一步(緩衝區幾何體素剔除,多個緩衝區),但我認爲它已經打的openGL的三角形可以實現的最大金額。

大量的體素通常呈現爲3D紋理中的一組圖像,而關於如何將2D紋理轉換爲3D紋理有幾篇帖子,但它們似乎對紋理大小有最大限制。

我已經搜索了使用這種方法的教程或例子,但沒有找到任何。有沒有人使用過這種方法之前與three.js

+2

我覺得你運氣不好,試圖直接顯示它們。您可能需要某種LODing系統,以某種方式顯示更多的細節,並且遠處的細節更少。 [這裏是另一種基於深度數據的查看器](http://potree.org/demo/potree_1.3/showcase/ca13.html),放大後會看到它載入更多細節。看起來如果你選擇「Apparence->材質 - >樹深度」,它會顯示你的LOD。 – gman

+0

謝謝你回到我身邊。它實際上建立在使用八叉樹變體的LOD模型上,Potree啓發我做一個基於網絡的查看器。我想我已經在渲染這些數據時遇到了webgl的硬性限制。 – jonathanbyrn

回答

6

你的場景渲染兩次,因爲SSAO需要深度紋理。你可以使用WEBGL_depth_texture擴展 - which have pretty good support - 所以你只需要一個渲染通道。如果擴展功能不可用,您可以退回到低通道雙通道。

你體素的材質是雙面的。這可能是故意的,但它可能會產生巨大的透支。

在您的演示中,您使用MeshPhongMaterial和定向燈。這是一個不必要的複雜材料。你的幾何圖形沒有任何法線,所以你不能有任何照明。嘗試使用更簡單的未照明材料。

你的目標是使一個巨大的頂點的量,所以假設幀率由頂點着色器的約束:

  • 嘗試這樣的東西https://github.com/GPUOpen-Tools/amd-tootle預處理的幾何形狀。關注預取頂點緩存和頂點緩存。

  • 減少頂點緩衝區使用的帶寬。由於您的頂點在「網格」上對齊,因此您可以將頂點位置存儲爲3個Shorts而不是3個浮點數,從而將VBO大小減少2.如果您有法線,則可以使用相同的技巧,因爲所有法線都應該軸對齊(立方體)

  • 普遍減少片段着色器

  • 需要varyings的量,如果你需要的不僅僅是VEC3位置更多的屬性,使用一個單路交錯VBO,而不是每一個ATTRIB。

+1

感謝您的詳細回覆。我的大部分代碼都是從教程中複製粘貼而沒有意識到處理時間的影響。我將開始重構我的代碼,並着眼於深入紋理和預處理幾何圖形。 – jonathanbyrn