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中的空白纹理

回答

相关问题