Glsl 在WebGL的一个着色器中使用sampler2D和samplerCube

我正在琢磨何时以及如何使用activeTexture、bindtexture和gl.uniform1i（'TextureLocation'，'texture'）、Int）函数

然而，到目前为止，我所有的东西都奏效了，但似乎我的初步理解现在开始成为一个问题

我试图在一个着色器中使用立方体贴图和纹理贴图。为了测试，我目前正在使用该着色器绘制两个对象，并尝试使用不同的纹理贴图为每个对象着色。如果我只使用texturemap或cubemap，那么程序运行得很好，因此我假设这两个都正确加载。下面是我的简化片段着色器：

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);
    }

gl.activeTexture（gl.TEXTURE0）；
gl.bindTexture（gl.TEXTURE_2D，gl.TEXTURE）；
gl.activeTexture（gl.TEXTURE1）；
gl.bindTexture（gl.TEXTURE\u CUBE\u MAP，gl.CubeMap）；
gl.clear（gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT）；
//画正方形
…绑定点并为正方形启用内容。。。
gl.uniform1i（gl.getuniformlLocation（程序，'Switch'），1）//切换到使用凹凸贴图
gl.bindTexture（gl.TEXTURE_2D，gl.Texture0）；
总图.绘图阵列（总图.三角带，0,4）；
//画球
…绑定点并启用球体的内容。。。
gl.uniform1i（gl.getuniformlLocation（程序，'Switch'），0）//切换到立方体贴图
gl.bindTexture（gl.TEXTURE\u CUBE\u MAP，gl.CubeMap）；
对于（变量i=0；i

---

如果我在着色器everything works find中只使用一个If语句，那么当我尝试使用这两种纹理时，什么都不会发生！发生了什么事？

显然我需要经常调整

    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

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