Question

查看以下测试：

http://binks.knobbits.org/webgl/texture3.html

这是对立方体纹理的简单测试。它还有一个2D纹理，可以很好地衡量。

我发现在某些浏览器中（到目前为止，Chrome）如果我重复使用相同的纹理单元来绘制立方体纹理和2D纹理，则图像无法正确显示。

底部有一个复选框，标有“球体上立方体纹理使用单独的纹理单位，地板上的2D纹理”，显示了这一点。

这是Chrome或我的代码中的错误吗？

Answer 1

我认为您的代码没有任何问题，但

1）您不能对2个不同的目标使用相同的纹理。换句话说，你不能这样做

tex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, tex);
gl.bindTexture(gl.TEXTURE_CUBE_MAP, tex);

2）您不能同时在纹理单元上同时使用TEXTURE_2D和CUBE_MAP。

您可以分配两者，但在渲染时，您只能在着色器中引用其中一个。换句话说。

gl.activeTexture(gl.TEXTURE0);
tex1 = gl.createTexture();
tex2 = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, tex1);
gl.bindTexture(gl.TEXTURE_CUBE_MAP, tex2);

没关系但是尝试使用纹理单元0中的两个纹理的着色器会失败。

Answer 2

我已经订购了一些绘图功能的代码，现在正在工作。

广场：

TexturedSquare.prototype.draw = function() {
    gl.bindBuffer(gl.ARRAY_BUFFER,this.v);
    gl.enableVertexAttribArray(gl.va_vertex);
    gl.enableVertexAttribArray(gl.va_normal);
    gl.enableVertexAttribArray(gl.va_tex1pos);
    gl.vertexAttribPointer(gl.va_vertex,4,gl.FLOAT,false,10*4,0);
    gl.vertexAttribPointer(gl.va_normal,4,gl.FLOAT,false,10*4,4*4);
    gl.vertexAttribPointer(gl.va_tex1pos,2,gl.FLOAT,false,10*4,4*8);

    gl.activeTexture(gl.TEXTURE0);
    gl.bindTexture(gl.TEXTURE_2D,this.texture);
    gl.bindTexture(gl.TEXTURE_CUBE_MAP,null);

    gl.uniform1i(shader.textures,1);
    gl.uniform1i(shader.texture1,0);
    gl.uniform1i(shader.cube_textures,0);
    gl.uniform1i(shader.cubeTexture0,1);

    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER,this.e);
    gl.drawElements(gl.TRIANGLES,this.l,gl.UNSIGNED_SHORT,0);

    gl.disableVertexAttribArray(gl.va_tex1pos);
}

球形：

GLHTexturedSphere.prototype.draw = function() {
    gl.bindBuffer(gl.ARRAY_BUFFER,this.vbuf);
    gl.enableVertexAttribArray(gl.va_vertex);
    gl.enableVertexAttribArray(gl.va_normal);
    gl.enableVertexAttribArray(this.va_cubetex0pos);
    gl.vertexAttribPointer(gl.va_vertex,4,gl.FLOAT,false,8*4,0);
    gl.vertexAttribPointer(gl.va_normal,4,gl.FLOAT,false,8*4,4*4);
    gl.vertexAttribPointer(this.va_cubetex0pos,4,gl.FLOAT,false,8*4,4*4);

    gl.activeTexture(gl.TEXTURE0);
    gl.bindTexture(gl.TEXTURE_2D,null);
    gl.bindTexture(gl.TEXTURE_CUBE_MAP,this.texture);

    gl.uniform1i(shader.textures,0);
    gl.uniform1i(shader.texture1,1);
    gl.uniform1i(shader.cube_textures,1);
    gl.uniform1i(shader.cubeTexture0,0);

    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER,this.ebuf);
    gl.drawElements(gl.TRIANGLES,this.l,gl.UNSIGNED_SHORT,0);

    gl.disableVertexAttribArray(gl.va_cubetex0pos);
}

他们现在都在使用TEXTURE0。请检查WebGL状态和统一值。

原始代码对我来说有点难，对不起。但我认为问题是texture1和cubeTexture0制服设置了相同的值。

对纹理单元重复使用不同的纹理类型会破坏铬

2 个答案: