0

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

1 回答 1

0

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

      •  

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

于 2013-05-05T20:34:29.193 回答