繪製的可變數量的紋理

對於一些科學數據可視化的，我使用的WebGL繪製大float數組。數據集是二維的，通常數百或數千個高度值和幾萬個寬度值。繪製的可變數量的紋理

爲了將這個數據集放入視頻內存中，我將它剪成幾個非方形紋理（取決於MAX_TEXTURE_SIZE），並將它們相鄰顯示。我使用與單個sampler2d相同的着色器繪製所有紋理。這意味着，我必須遍歷所有的紋理繪製：

for (var i=0; i<dataTextures.length; i++) { 
    gl.activeTexture(gl.TEXTURE0+i); 
    gl.bindTexture(gl.TEXTURE_2D, dataTextures[i]); 
    gl.uniform1i(samplerUniform, i); 

    gl.bindBuffer(gl.ARRAY_BUFFER, vertexPositionBuffers[i]); 
    gl.vertexAttribPointer(vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0); 

    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); 
}

然而，如果紋理的數量變大超過半打，性能變得相當糟糕。現在我知道遊戲使用了比這更多的紋理，所以這是不可預期的行爲。我也讀過你可以綁定採樣器的數組，但據我所知，紋理的總數必須提前知道。對我而言，紋理的數量取決於數據集，所以在加載數據之前我無法知道它。

而且，我懷疑我在這個渲染循環做不必要的東西。任何提示都會受到歡迎。

你如何畫通常可變數量的WebGL的紋理？

來源

2014-03-14 bastibe

下面是一些以前的答案，這將有助於

How to bind an array of textures to a WebGL shader uniform?

How to send multiple textures to a fragment shader in WebGL?

How many textures can I use in a webgl fragment shader?

一些方法頂掉，如果我的頭

創建着色器循環超過N個紋理。將不使用的紋理設置爲0,0,0,0或其他不影響您的計算的1x1像素紋理
創建循環遍歷N個紋理的着色器。創建一個統一的布爾數組，在循環中跳過任何相應的布爾值爲false的紋理。
生成上有你需要的紋理數完全動態的着色器。它不應該很難concacate幾個字符串等。

來源

2014-03-14 17:49:03 gman

是否通過編程生成着色器代碼？這對我來說似乎相當黑。 – bastibe

是的，您可以查看three.js代碼並查看它生成着色器。典型的AAA遊戲可能會生成4000多個着色器。有時使用* uber *着色器（上面的選項＃2）更容易，但執行速度比生成完全符合您需要的着色器要慢。遊戲通常會在編譯時生成它們，因爲它們知道它們在發佈時會需要哪些着色器（藝術家已完成製作所有資源）。如果你不提前知道，那麼在飛行中產生它們是正常的事情。 – gman

只要你能生成在這裏你沒有任何延遲問題，其優良的時間着色器。請記住，需要很多幀來編譯和推送GPU上的新程序/着色器。一旦它的存在，它還挺便宜的改變useProgram .. –

繪製的可變數量的紋理

回答

相關問題