Javascript 如何将多个纹理发送到WebGL中的片段着色器?
因此,在我代码的javascript部分,这里是一个片段,它实际上向顶点和片段着色器发送了一个像素数组-但是当我到达这些着色器时,我只处理了一个纹理-我是否可以一次发送两个纹理?如果是这样,我如何在代码的GLSL端“捕获”这两个Javascript 如何将多个纹理发送到WebGL中的片段着色器?,javascript,double,textures,glsl,webgl,Javascript,Double,Textures,Glsl,Webgl,因此,在我代码的javascript部分,这里是一个片段,它实际上向顶点和片段着色器发送了一个像素数组-但是当我到达这些着色器时,我只处理了一个纹理-我是否可以一次发送两个纹理?如果是这样,我如何在代码的GLSL端“捕获”这两个 if (it > 0){ gl.activeTexture(gl.TEXTURE1); gl.bindTexture(gl.TEXTURE_2D, texture); g
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);
通过声明多个采样器,可以在GLSL中引用多个纹理
uniform sampler2D u_myFirstTexture;
uniform sampler2D u_mySecondTexture;
...
vec4 colorFrom1stTexture = texture2D(u_myFirstTexture, someUVCoords);
vec4 colorFrom2ndTexture = texture2D(u_mySecondTexture, someOtherUVCoords);
您可以通过调用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);
...