在 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 语句，一切正常，当我尝试使用两种纹理时，什么也没有发生！怎么回事？

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

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

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

Use sampler2D and samplerCube in one shader in WebGL

glsl

webgl