OpenGL中同时使用FLOAT与UNSIGNED_INT纹理报错求助

问题原因 #

GL_INVALID_OPERATION: Two textures of different types use the same sampler location. 错误的核心原因是：GLSL中sampler2D（浮点纹理采样器）和usampler2D（无符号整型纹理采样器）属于不同的采样器类型，它们不能被分配到同一个uniform存储位置。如果编译器默认给两个采样器分配了相同的location，就会触发这个错误。

解决方案 #

通过显式指定uniform的位置，确保两种不同类型的采样器使用不同的location，同时对应绑定到不同的纹理单元即可解决问题。

步骤1：修改GLSL代码，显式指定采样器位置 #

在每个uniform采样器声明前添加layout(location = N)，为每个采样器分配唯一的位置：

#version 300 es
precision mediump float;
            
in vec2 vUv;
// 显式指定textureA的uniform位置为0
layout(location = 0) uniform sampler2D textureA;
// 显式指定textureB的uniform位置为1
layout(location = 1) uniform highp usampler2D textureB;
out vec4 outputColor;

void main() {
   float a = texture(textureA, vUv).r;
   float b = texture(textureB, vUv).r == 0u ? 1.0 : 0.0;
   outputColor = vec4(a,b,0.0,1.0);
}

步骤2：修改JavaScript代码，绑定纹理到对应单元并设置uniform #

将两个纹理分别绑定到不同的纹理单元（如TEXTURE0和TEXTURE1），并将uniform的值设置为对应的单元编号：

// 处理浮点纹理textureA
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, textureA);
const textureALoc = gl.getUniformLocation(program, 'textureA');
gl.uniform1i(textureALoc, 0); // 对应纹理单元0

// 处理无符号整型纹理textureB
gl.activeTexture(gl.TEXTURE1);
gl.bindTexture(gl.TEXTURE_2D, textureB);
const textureBLoc = gl.getUniformLocation(program, 'textureB');
gl.uniform1i(textureBLoc, 1); // 对应纹理单元1

关键注意点 #

• 整型纹理必须使用对应的采样器类型：无符号整型纹理对应usampler2D，有符号整型对应isampler2D，不能混用。
• 每个纹理单元对应一个uniform值，采样器通过这个值找到对应的纹理。

内容的提问来源于stack exchange，提问作者gooostaw