在webGL中的空白纹理 [英] Blank texture in webGL

问题描述

我有简单的四边形和非常简单的着色器（见下文）。
我加载纹理所需的图像，处理它，在着色器程序中获得统一的位置，然后发送它，就像在学习webgl示例中所解释的那样。
我测试了一切并使用webGL检查器来查看我一直在使用的纹理，问题是四边形是全黑的。
在片段着色器中，行：

I have simple quad, and very simple shader (see below). I load image needed for texture, process it, get uniform place in shader program, and send it, the way that has been explained in "learning webgl" examples. I tested everything and used webGL inspector to see the textures I've been using and the problem is that quad is whole black. In fragment shader, the line:

gl_FragColor = texture2D( uSampler, vUV);

实际上总是将片段颜色设置为（0,0,0,1）。所以它就像空白纹理，或全黑色，alpha等于1纹理，这与我试图附加的图像不同。

actually always sets the fragment color to (0,0,0,1). So it's like "blank" texture, or all-black with alpha equals to 1 texture, which is not the same as image I'm trying to attach.

如果有人遇到类似的问题并知道如何解决它，请告诉我。
它在Chrome中完成，带有--allow-file-access-from-files标志，html页面，js / webgl代码和图像是本地的，我甚至在我的服务器上测试过，没有结果。

If anyone encountered similar problem and knows how to fix it, please tell me. It's done in Chrome, with --allow-file-access-from-files flag, html page, js/webgl code and image are local, I even tested it on my server, with no results.

顶点：

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：

and 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++;
}

推荐答案

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

I declared property .isReady on texture, and put on 'true' in the end of the image's onload callback function. Then in render function I just check if it .isReady and send it to gpu. If animation is running, it will probably be visible in the second or third frame, depending on image size and the time it takes to be loaded. The problem was that I used local variable for buffered arrays, so they would be discarded after first frame was rendered (because I buffer data only once). All fine now.

• 
  
  • 
    
    •  
    
    

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

    If someone encounteres similar problem with blank texture, check if the right values are being sent with gl.uniform1i, check that the binded texture is actual webGL texture object and check how your attributes are going.

    这篇关于在webGL中的空白纹理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！