webGL中的空白紋理

我有簡單的四邊形和非常簡單的着色器（見下文）。我加載紋理所需的圖像，處理它，在着色器程序中獲得統一的地方，併發送它，這已在「學習webgl」示例中進行了解釋。我測試了一切，並使用webGL檢查器來查看我一直在使用的紋理，問題在於四邊形是全黑的。在片段着色器中，線：webGL中的空白紋理

gl_FragColor = texture2D(uSampler, vUV);

實際上始終將片段顏色（0,0,0,1）。所以它就像是「空白」紋理，或者全黑色，alpha等於1紋理，這與我試圖附加的圖像不一樣。

如果有人遇到類似的問題，並知道如何解決它，請告訴我。它在Chrome中完成，具有--allow-file-access-from-files標誌，html頁面，js/webgl代碼和圖像是本地的，我甚至在我的服務器上測試過它，沒有任何結果。

頂點：

attribute vec3 aVertexPosition; 
attribute vec2 aUV; 
uniform mat4 uPMatrix; 
uniform mat4 uMVMatrix; 
varying vec2 vUV; 
void main() { 
vUV = aUV; 
gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0); 
}

片段：

uniform sampler2D uSampler; 
varying vec2 vUV; 
void main() { 
gl_FragColor = texture2D(uSampler, vUV) 
}

紋理加載和附着：

var tex = new CHAOS.Texture().load2D("ch.jpg"); 
var mat = new CHAOS.Material().fromScript("v1", "f1"); 
mat.addTexture("uSampler", tex);

裝載功能：

load2D: function(url) { 
    function handleTextureLoaded(image, texture, gl) { 
     gl.bindTexture(gl.TEXTURE_2D, texture); 
     gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image); 
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); 
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST); 
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); 
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); 
     gl.generateMipmap(gl.TEXTURE_2D); 
     gl.bindTexture(gl.TEXTURE_2D, null); 
    } 

    var tex, im, gl = CHAOS.__R.context; 

    tex = gl.createTexture(); 
    im = new Image(); 
    im.src = url; 
    im.onload = function() { handleTextureLoaded(im, tex, gl); } 


    return tex; 
},

和addTexture：

在

addTexture: function(name, texture) { 
    this.maps[name] = texture; 
    this.locUnif(name); 
}

渲染功能還有部分：

for(var key in mate.maps) { 
    gl.activeTexture(gl.TEXTURE0 + tex_count); // some problem with int+string, don't look at it 
    gl.bindTexture(gl.TEXTURE_2D, mate.maps[key]); 
    gl.uniform1i(shaderProgram.unif[key], tex_count);  
    tex_count++; 
}

來源

2013-05-04 Abstract Algorithm

如果紋理未正確配置，採樣器會爲您提供不透明的黑色，所以這就是問題所在。向我們展示您的紋理加載和統一設置代碼，也可能是您的UV座標。 – 2013-05-04 19:02:45

你的質感是每一面都是二維的力量嗎？如果沒有，則不能將過濾設置爲'gl.LINEAR_MIPMAP_NEAREST'，並且不能調用'gl.generateMipmap'。 – gman 2013-05-05 17:24:23

它是兩個的力量。我嘗試了動畫場景，並將gl.isTexture放入了渲染函數中。第一個電話告訴它不是質感，其他人說它是，但仍然是全黑。 webGL檢查器顯示紋理已被正確加載，並獲得統一的位置也返回預期值。 – 2013-05-05 17:57:49

我宣佈質地財產.isReady，並在圖像的onload回調函數結束時換上「真」。然後在渲染功能，我只是檢查它是否.isReady並將其發送到GPU。如果動畫正在運行，它可能會在第二幀或第三幀中顯示，具體取決於圖像大小和加載時間。問題是我使用局部變量緩衝數組，因此它們將在第一幀渲染後被丟棄（因爲我只緩衝一次數據）。現在好了。

如果有人encounteres空白質地類似的問題，檢查是否正確的價值觀正在與gl.uniform1i發送，請檢查綁定紋理是實際的webGL紋理對象，並檢查屬性如何進行。

來源

2013-05-05 20:34:29

webGL中的空白紋理

回答

相關問題