如何发送多个纹理到WebGL中的片段着色器？

Question

所以在我的代码的JavaScript部分，这里是实际发送像素数组到顶点和片段着色器的代码片段 - 但我只与1纹理工作，当我到达那些着色器 - 有无论如何，我可以一次发送两个纹理？如果是这样，我如何在代码的GLSL方面'捕捉'他们两个？

 if (it > 0){ 

      gl.activeTexture(gl.TEXTURE1); 

      gl.bindTexture(gl.TEXTURE_2D, texture); 

      gl.activeTexture(gl.TEXTURE0); 

      gl.bindFramebuffer(gl.FRAMEBUFFER, FBO2);} 

     else{ 

      gl.activeTexture(gl.TEXTURE1); 

      gl.bindTexture(gl.TEXTURE_2D, texture2); 

      gl.activeTexture(gl.TEXTURE0); 

      gl.bindFramebuffer(gl.FRAMEBUFFER, FBO);} 

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

Answer 1

通过声明多重采样制服

uniform sampler2D u_myFirstTexture; 
uniform sampler2D u_mySecondTexture; 

... 

vec4 colorFrom1stTexture = texture2D(u_myFirstTexture, someUVCoords); 
vec4 colorFrom2ndTexture = texture2D(u_mySecondTexture, someOtherUVCoords); 

引用GLSL多重纹理您可以将特定其纹理单元的2个采样致电gl.uniform1i在

var location1 = gl.getUniformLocation(program, "u_myFirstTexture"); 
var location2 = gl.getUniformLocation(program, "u_mySecondTexture"); 

... 

// tell u_myFirstTexture to use texture unit #7 
gl.uniform1i(location1, 7); 

// tell u_mySecondTexture to use texture unit #4 
gl.uniform1i(location2, 4); 

你安装使用纹理单元使用gl.activeTexture和gl.bindTexture

// setup texture unit #7 
gl.activeTexture(gl.TEXTURE7); // or gl.TEXTURE0 + 7 
gl.bindTexture(gl.TEXTURE_2D, someTexture); 
... 

// setup texture unit #4 
gl.activeTexture(gl.TEXTURE4); // or gl.TEXTURE0 + 4 
gl.bindTexture(gl.TEXTURE_2D, someOtherTexture); 
...