在WebGL中的着色器中同时使用sampler2D和samplerCube

Question

我在使用activeTexture、bindTexture和gl.uniform1i('TextureLocation'，'texture'，Int)函数时感到困惑。

然而，到目前为止，我的所有东西都运行良好，但是似乎我的基本理解开始成为一个问题了。

我尝试在一个着色器中使用一个立方体贴图和一个纹理映射。为了测试，我当前正在使用这个着色器绘制两个对象，并尝试用不同的纹理映射对每个对象进行着色。如果我只使用纹理映射或立方体贴图，程序还可以正常运行，因此我认为两者都正确加载了。现在，这是我简化了的片段着色器：

precision mediump float;
uniform int Switch; //switch between sphere and background
// normal
varying vec3 vNormal;
// texture
uniform mat4 TexMatrix;
uniform samplerCube texMap;

void main() {
        vec4 FragColor;

        //draw square
        if( Switch == 0 ) { 
            vec3 fTexCoord = vec4(vNormal,1.0)).xyz;
            FragColor = textureCube(texMap, fTexCoord);
        }

        //draw sphere
        else if( Switch == 1 ) { 
            // spherical coord -> kartesian coord
            float PI = 3.141592653;
            vec2 bTexCoord = vec2(2.0*atan((length(vec2(vNormal.x,vNormal.y)) - vNormal.x)/vNormal.y)/(2.0*PI),acos(vNormal.z)/PI);
            FragColor = texture2D(bumpMap, bTexCoord);
        }

        gl_FragColor = FragColor;
    }

这里是我初始化两个纹理的地方，图片已被正确加载。

function initBumpMap(img){
    gl.Texture = gl.createTexture();
    gl.activeTexture(gl.TEXTURE0);
    gl.bindTexture(gl.TEXTURE_2D, gl.Texture);
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, img); 
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
    //gl.generateMipmap(gl.TEXTURE_2D);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT); // set the texture to repreat for values of (s,t) outside of [0,1] 
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
    gl.uniform1i(gl.getUniformLocation(program, "bumpMap"), 0); //link texture to sampler
}

function initCubeMap(images){
    gl.CubeMap = gl.createTexture();
    gl.activeTexture(gl.TEXTURE1);
    gl.bindTexture(gl.TEXTURE_CUBE_MAP, gl.CubeMap);
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
    //put images on cubemap
    gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_Z ,0,gl.RGB,gl.RGB,gl.UNSIGNED_BYTE, images[0]);
    gl.texImage2D(gl.TEXTURE_CUBE_MAP_NEGATIVE_Y ,0,gl.RGB,gl.RGB,gl.UNSIGNED_BYTE, images[1]);
    gl.texImage2D(gl.TEXTURE_CUBE_MAP_NEGATIVE_Z ,0,gl.RGB,gl.RGB,gl.UNSIGNED_BYTE, images[2]);
    gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_X ,0,gl.RGB,gl.RGB,gl.UNSIGNED_BYTE, images[3]);
    gl.texImage2D(gl.TEXTURE_CUBE_MAP_NEGATIVE_X ,0,gl.RGB,gl.RGB,gl.UNSIGNED_BYTE, images[4]);
    gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_Y ,0,gl.RGB,gl.RGB,gl.UNSIGNED_BYTE, images[5]);

    gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MIN_FILTER,gl.NEAREST);
    gl.uniform1i(gl.getUniformLocation(program, "texMap"), 1); //link texture to sampler
}

这里是JavaScript/WebGL的主要代码片段：

gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, gl.Texture);
gl.activeTexture(gl.TEXTURE1);
gl.bindTexture(gl.TEXTURE_CUBE_MAP, gl.CubeMap); 
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    //draw square
    ...bind point and enable stuff for the square...        
    gl.uniform1i(gl.getUniformLocation(program,'Switch'),1); //switch to use bumpmap
    gl.bindTexture(gl.TEXTURE_2D, gl.Texture0);                 

    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);


    // draw sphere
    ...bind point and enable stuff for the sphere...
    gl.uniform1i(gl.getUniformLocation(program,'Switch'),0); //switch to cube map
    gl.bindTexture(gl.TEXTURE_CUBE_MAP, gl.CubeMap);

    for( var i=0; i < vertices.length; i+=3){
        gl.drawArrays(gl.TRIANGLES, i, 3);
    }

如果我在着色器中只使用一个if语句，一切都正常工作，但当我尝试同时使用两个纹理时，什么也不会发生！这是怎么回事？

- the.polo

Answer 1

显然，我需要始终设置

。

    gl.activeTexture(gl.TEXTURE0);
    gl.bindTexture(gl.TEXTURE_2D, gl.Texture);
    gl.uniform1i(gl.getUniformLocation(program, "bumpMap"), 0);
    gl.activeTexture(gl.TEXTURE1);
    gl.bindTexture(gl.TEXTURE_CUBE_MAP, gl.CubeMap);
    gl.uniform1i(gl.getUniformLocation(program, "texMap"), 1);

在绘制之前，它才能正常工作！ :D

编辑：但是为什么？我真正需要设置什么？为什么需要使用所有三个命令？

- the.polo