webgl：與其他程序/着色器共享紋理

Question

我有兩個着色器使用不同的頂點陣列和不同的統一值，但它們使用相同的紋理（spritesheet/atlas）。是否有可能共享相同的紋理（不會導致將紋理髮送到GPU兩次）？

背景： 我的遊戲在我的筆記本電腦上有一些嚴重的性能問題，它們似乎與gpu有關。我目前的實現使用了兩個畫布，一個用於我的背景，另一個用於我的前景。然後他們會爲最終圖像組成（繪製到第三個畫布上）。我的背景使用4個紋理，而我的前景有一個大的spritesheet。前景和背景只使用一個繪製調用。

我希望通過將所有內容都繪製到一個畫布上，並將所有紋理合併到一個spritesheet中來提高性能。它絕對可能會導致沒有改善。我的背景使用噪聲來混合紋理，而且很可能主要的問題是着色器的複雜性。

Answer 1

是他們有可能共享相同的紋理（而不會導致紋理髮送給GPU兩倍

是

紋理的只發送給GPU，當你調用gl.texImage2D或gl.texSubImage2D。

設置WebGL的方案的最常見的形式是

甲時間T init時間

• 創建/編譯/鏈接程序
• 創建/上傳緩衝區（頂點數據）
• 創建/上傳紋理

在渲染時

• 使用計劃
• 設置屬性
• 設置制服和綁定紋理
• 繪製

對於紋理「在初始時間部分」一般是指調用

gl.createTexture // to create a teture 
gl.bindTexture // to assign the texture so follow commands will affect it. 
gl.texImage2D  // to upload data 
gl.texParameteri // to set filtering 
gl.generateMipmap // if you need mips 

在運行時

gl.activeTexture // to choose a texture unit 
gl.bindTexture // to assign an existing texture to the active texture unit 
gl.uniform1i  // to tell the shader which unit to use for a specific sampler 

至於梳理你的紋理成紋理圖集，是的，這可能會讓你的程序運行得更快。這不是因爲你上傳紋理的次數減少了，但是因爲你可以用更少的繪製調用來繪製更多的東西。 See the cube example near the bottom of this article。