如何在WebGL中向片段着色器发送多个纹理? [英] How to send multiple textures to a fragment shader in WebGL?

查看:191
本文介绍了如何在WebGL中向片段着色器发送多个纹理?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

所以在我的代码的javascript部分,这里是实际发送一个像素数组到顶点和片段着色器的代码片段,但是当我到达那些着色器时,我只能使用1个纹理 - 有没有我一次可以发送两个纹理?如果是的话,我如何在代码的GLSL端抓住他们?

So in the javascript portion of my code, here is the snippet that actually sends an array of pixels to the vertex and fragment shaders- but I am only working with 1 texture when I get to those shaders- is there anyway that I can send two textures at a time? if so, how would I 'catch' both of them on the GLSL side of the codee?

        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中引用多个纹理

You reference multiple textures in GLSL by declaring multiple sampler uniforms

uniform sampler2D u_myFirstTexture;
uniform sampler2D u_mySecondTexture;

...

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

您可以通过调用 gl.uniform1i来指定那些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.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);
...

这篇关于如何在WebGL中向片段着色器发送多个纹理?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆