WebGLのフラグメントシェーダに複数のテクスチャを送る方法は？

Question

私のコードのjavascript部分では、実際にピクセルの配列を頂点シェーダとフラグメントシェーダに送信するスニペットですが、シェーダにアクセスすると1つのテクスチャでしか動作しません。一度に2つのテクスチャを送信しますか？もしそうなら、私はコードの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); 

テクスチャユニット、これらの2つのサンプラーが

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.uniform1iを呼び出すことにより、使用特定の複数のサンプラーの制服をすることができます宣言することにより、GLSLで複数のテクスチャを参照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); 
...