WebGL：同時使用紋理和顏色緩衝區

This question，其中OP在執行指令時報告發出警告gl.enableVertexAttribArray(shaderProgram.textureCoordAttribute);讓我想到：如果我想讓場景中有兩個（讓我們假設：扁平）形狀，一個具有紋理，另一個具有統一的顏色？在片段着色器的main，如果我取消了第二個指令和註釋掉第一，像這樣：WebGL：同時使用紋理和顏色緩衝區

void main(void) { 
    //gl_FragColor = vColor; 
    gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t)); 
}

仍在發出警告，但這次的問候指令gl.enableVertexAttribArray(shaderProgram.vertexColorAttribute);。
如果我離開這兩個未註釋，它仍然抱怨vertexColorAttribute，因爲它顯然是被覆蓋。
那麼我怎麼能有兩個？我是否使用兩種不同的片段着色器？如果是這樣，該怎麼辦？

來源

2014-09-05 Andrea Aloi

對不起，我確定我有。謝謝。 – 2015-03-31 23:16:21

沒問題，謝謝:) – 2015-03-31 23:23:15

的適當的辦法是有兩個單獨的着色器，因爲要渲染要麼紋理或着色。

以內存和執行時間爲代價，您可能在頂點數據中始終有顏色和紋理屬性，並根據您的使用情況使用某種混合。

正如您所描述的那樣，您可以使用簡單的加法混合，因爲大多數WebGL實現會在未綁定紋理時綁定黑色像素[0,0,0,255]紋理作爲默認紋理。

因此，具有類似

void main(void) { 
    gl_FragColor = vColor + texture2D(uSampler, vTexCoord); 
}

會使顏色時沒有質感綁定和正確呈現結合的紋理時顏色是[0,0,0,0]。

爲各種blend modes

概述正如你可以只使用一個統一的標誌來表明什麼是「法」更加昂貴解決見維基百科要相應地使用和分支的着色器內。這仍然要求所有的頂點屬性都可用，而且在某些平臺上分支也是非常低效的。

void main(void) { 
    if (uMethod == 1) 
     gl_FragColor = vColor; 
    else if (uMethod == 2) 
     gl_FragColor = texture2D(uSampler, vTexCoord); 
    else 
     gl_FragColor = vColor + texture2D(uSampler, vTexCoord); 
}

來源

2014-09-05 16:18:50

另一種方法是將幾個圖像打包成單個紋理並調整紋理座標以顯示正確的區域。其中一個地區可能是一個堅實的紅場。 – pixelmike 2014-09-05 16:23:40

這會使它變得非常不靈活，要麼需要分支和/或沉重的紋理座標轉換數學，要麼浪費了大量的GPU存儲空間。 – 2014-09-05 16:38:05

我不這麼認爲，這是紋理圖集的標準。您只需在頂點緩衝區中相應地設置紋理座標，然後就不需要任何顏色統一或屬性。 – pixelmike 2014-09-05 17:00:33

WebGL：同時使用紋理和顏色緩衝區

回答

相關問題