【发布时间】：2014-06-01 11:53:16
【问题描述】：
在 WebGL 中，我们可以在一个 gl.drawElements() 调用中绘制多个纹理吗？如果是怎么办？
gl.TEXTURE0到gl.TEXTURE31有什么用，我的意思是，使用多个纹理单元的情况是什么？
我正在尝试在单个 drawElements() 调用中为每侧绘制一个具有 6 个不同纹理的立方体。可能吗？是的，怎么样？
【问题讨论】：
标签： opengl-es opengl-es-2.0 webgl
【发布时间】：2014-06-01 11:53:16
【问题描述】：
要使用多个纹理，您可以将不同的纹理绑定到不同的纹理单元，并使用着色器中的多个采样器引用它们
这是一个使用 2 个纹理的着色器
uniform sampler2D u_texture1;
uniform sampler2D u_texture2;
varying vec2 vtexcoords1;
varying vec2 vtexcoords2;
void main() {
vec4 color1 = texture2D(u_texture1, v_texcoords1);
vec4 color2 = texture2D(u_texture2, v_texcoords2);
gl_FragColor = color1 * color2; // multiply the colors.
}
然后您需要将 2 个纹理绑定到 2 个纹理单元
// bind a texture to texture unit0
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, someTexture);
// bind a texture to texture unit1
gl.activeTexture(gl.TEXTURE1);
gl.bindTexture(gl.TEXTURE_2D, someOtherTexture);
你需要告诉着色器使用哪些纹理单元
// -- at init time
var texture1location = gl.getUniformLocation(program, "u_texture1");
var texture2location = gl.getUniformLocation(program, "u_texture2");
// -- at draw time
// tell the shader to use texture units 0 and 1
gl.uniform1i(texture1location, 0);
gl.uniform1i(texture2location, 1);
但是，这通常不是如何为具有 6 个图像的立方体设置纹理。大多数游戏会通过将所有 6 个图像放在一个纹理 (see end of this article) 中来为具有 6 个图像的立方体纹理。大多数 3D 建模程序会将 6 个图像放在一个立方体上，而不是制作立方体，而是制作 6 个平面，每个平面对齐以制作立方体的面。换句话说，6 个单独的平面模型而不是一个立方体模型。这样它就保持简单。您只需使用绘制 1 个纹理的着色器，并在绘制立方体的每个平面时使用不同的纹理。
在游戏风格案例中，1 个立方体 + 1 个纹理和 6 个图像。它很快，因为只有 1 个绘制调用。在 3d 建模包中，它有 6 个平面，每个平面有 1 个纹理（总共 6 个），因此有 6 个绘制调用，但它很灵活，因为每个平面可以使用不同的图像，而无需构建包含所有 6 个图像的新纹理。
您选择哪种方式取决于您。
【讨论】：
多个纹理单元用于多重纹理，例如，当您将泥土和草纹理混合在一起以制作脏草时。看这个例子：
http://www.clockworkcoders.com/oglsl/tutorial8.htm
对于您所说的（完全独立的纹理），使用纹理图集可能更有意义（尤其是在嵌入式系统上）。请参阅此处的第 3.9.4 节：
【讨论】：