2
我很忙於使用activeTexture，bindtexture和gl.uniform1i（'TextureLocation'，'texture'），Int）函數的時間和方式。在WebGL中的一個着色器中使用sampler2D和samplerCube
但是，我所有的東西都工作到目前爲止，但似乎我的基本理解現在開始成爲一個問題。
我想在一個着色器中使用立方體貼圖和紋理貼圖。爲了測試，我正在使用此着色器繪製兩個對象，並嘗試用不同的紋理貼圖對每個對象着色。如果我只使用紋理貼圖或立方體貼圖，程序運行的很好，所以我假設兩者都正確加載。現在，這裏是我歸結片段着色器：
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);
}
如果我只用一個，如果在着色器一切正常發現語句，那一刻我嘗試使用這兩種材質沒有任何反應！這是怎麼回事？