2013-06-24 104 views
4

最近我有一個項目,我需要使用畫布創建很多大紋理,然後將它們上傳到GPU。由於所有紋理一次都通過GPU總線被推送,因此當頁面加載時,我經常耗盡內存(chrome崩潰)並「窒息」。Three.js/WebGL同時加載大量的紋理數據,如何?

我決定錯開texture.needsUpdate = true;調用,以便所有紋理都不會在單次渲染更新中被推送到GPU。

這工作,但我很好奇的任何其他解決方案...

我貼這個,因爲它可能是幫助他人誰正在裝載的所有紋理在發射...

+0

我有類似的問題。我加載了大約50MB大小的jpeg數據,但我承認,但內存開始消耗,最終使用超過8GB的RAM。我已經指出紋理是問題。它們正從JSON加載器加載。 – beiller

+0

看看這篇文章使用壓縮紋理,將解釋爲什麼你的JPG也炸燬以及:http://blog.tojicode.com/2011/12/compressed-textures-in-webgl.html – mattdlockyer

+0

我會添加一些我發現。它在2種或多種材質(不同的着色特性)上使用相同的紋理貼圖。 JSON加載器每次將它們作爲單獨的紋理加載,而不是每個文件加載1個紋理(它應該根據文件名進行組合,這可以被視爲錯誤或功能請求)。 – beiller

回答

1

剔除紋理一無所有是阻止過度負載的最佳途徑。讓它們在根部變小會改善沿線的一切。

雖然這篇文章比較陳舊,但它在谷歌上看起來是最好的結果。所以這裏有一些其他初學3D遊戲/網頁開發人員的方便提示。

紋理以固定的位塊添加到緩衝區中,塊越少越好,但在分辨率爲2的分辨率下創建紋理將防止半塊被加載並浪費比特/時間。功率是指在每個實例(2,4,8,16,32,64)處加倍的數字序列,保持該公式將防止丟失的比特。

看看你的紋理在屏幕上的大小。您的來源可能是1024x1024,但如果它僅在屏幕上高出20px或輸出畫布編號爲480x640,則所有額外信息都將丟失。減少你的紋理,以符合他們在屏幕上。

在同樣的方面,如果你不使用它們,就拿出你的紋理上的顏色,有時你可以使用頂點着色和/或燈光來爲紋理添加細節,在這種情況下,將紋理保存爲灰度圖像,或者通過編制索引來限制調色板的大小。

.gif是一個很好的小紋理格式,Jpeg更適合壓縮較大的紋理。如果您使用.gif,則還可以通過將紋理分組到一個圖像和與其匹配的調色板來節省空間。記住整個Zelda LTTP遊戲只能運行256種顏色。有許多方法可以創建RGB索引數組,並將圖像存儲爲從其中拉出的原始數字。

如果您從JSON導入/導出,請記住您的圖像默認爲原始32位.png文件。它本身很大,當作爲位數據添加到JSON objet文件的末尾時會變得更大。 導出網格數據並通過源代碼中的JS添加紋理使您可以使用更多格式並優化更多紋理。

+0

這並不是真正解決這個問題,而是建議我們首先沒有大的紋理。雖然我很欣賞你的細節,但我知道位和字節的工作原理。事實依然是,它們必須在某個時刻發送給VRAM,我很好奇不同用戶如何避免氾濫緩衝區並使其頁面崩潰,如果所有紋理一次髮送,這是一種典型情況。 – mattdlockyer