Question

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

Answer 1

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

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

在webGL中的空白纹理

1 个答案: