webGL中的空白纹理答案

【问题标题】：Blank texture in webGLwebGL中的空白纹理
【发布时间】：2013-09-03 22:41:00
【问题描述】：

我有简单的四边形和非常简单的着色器（见下文）。我加载纹理所需的图像，处理它，在着色器程序中获得统一的位置，然后发送它，在“学习 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: 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++;
}

【问题讨论】：

如果纹理配置不正确，采样器会为您提供不透明的黑色，这可能就是问题所在。向我们展示你的纹理加载和统一设置代码，也许还有你的 UV 坐标。
你的纹理是二维的吗？如果不是，则不能将过滤设置为gl.LINEAR_MIPMAP_NEAREST，也不能调用gl.generateMipmap。
它是二的幂。我尝试动画场景，并将 gl.isTexture 放入渲染功能。第一个电话告诉它不是纹理，其他人说它是，但仍然全黑。 webGL 检查器显示纹理已正确加载并且获取统一位置也返回预期值。
在 webgl 中为画布添加纹理，你想看this

标签： javascript textures webgl

【解决方案1】：

我在纹理上声明了属性 .isReady，并在图像的 onload 回调函数的末尾设置了“true”。然后在渲染函数中，我只是检查它是否为 .isReady 并将其发送到 gpu。如果动画正在运行，它可能会在第二帧或第三帧中可见，具体取决于图像大小和加载时间。问题是我对缓冲数组使用了局部变量，因此在渲染第一帧后它们将被丢弃（因为我只缓冲数据一次）。现在一切都好。

如果有人遇到空白纹理的类似问题，请检查是否使用 gl.uniform1i 发送了正确的值，检查绑定的纹理是否是实际的 webGL 纹理对象并检查您的属性如何。

【讨论】：