GLSL技术问询：如何向sampler2D传递可变数量的纹理

我来帮你解决这个可变纹理数组的问题！你碰到的报错核心原因是：GLSL 里的 uniform sampler2D 数组必须用常量表达式定义长度，你直接写sampler2D textures[2]虽然看起来是固定长度，但在WebGL的 shader 编译阶段，这种写法不符合严格的常量要求，所以触发了constant expression required错误。下面给你两种实用的解决思路：

方案一：预定义足够大的固定长度数组（兼容WebGL1） #

这种方法是先在着色器里定义一个足够大的固定长度sampler数组，再额外传一个uniform变量告诉着色器实际用到的纹理数量，这样就能实现“可变数量”的效果，而且兼容所有支持Three.js的环境。

着色器代码示例（片元着色器） #

// 预定义一个足够大的数组，比如16个（大部分设备支持至少16个纹理单元）
uniform sampler2D textures[16];
// 实际要用到的纹理数量
uniform int textureCount;

void main() {
    vec4 finalColor = vec4(0.0);
    // 循环只处理前textureCount个纹理，避免越界
    for(int i=0; i<16; i++){
        if(i >= textureCount) break;
        // 这里可以根据你的需求混合纹理，比如简单叠加
        finalColor += texture(textures[i], vUv);
    }
    finalColor /= float(textureCount); // 平均混合
    gl_FragColor = finalColor;
}

Three.js JavaScript代码示例 #

// 假设你有两个纹理：texture1, texture2
const textures = [texture1, texture2];

// 创建材质时传递uniforms
const material = new THREE.ShaderMaterial({
    uniforms: {
        textures: { value: textures },
        textureCount: { value: textures.length }
    },
    vertexShader: yourVertexShaderCode,
    fragmentShader: yourFragmentShaderCode
});

注意点 #

• 预定义的数组长度不要超过设备支持的最大纹理单元数，你可以通过renderer.capabilities.maxTextures查看当前设备的上限，一般至少是16，足够大部分场景使用。
• GLSL的循环对动态判断支持有限，所以建议先写固定范围的循环，再内部判断是否超出实际纹理数量。

方案二：使用WebGL2的纹理数组（更优雅） #

如果你的项目可以兼容WebGL2，那么用sampler2DArray会更合适，它是真正的纹理数组类型，不需要预定义超大数组，而且性能更好。不过要注意：所有纹理的尺寸必须完全一致，因为数组纹理的每一层（每个元素）尺寸必须相同。

着色器代码示例（片元着色器） #

// WebGL2支持的纹理数组类型
uniform sampler2DArray textureArray;
// 实际用到的纹理数量
uniform int textureCount;

void main() {
    vec4 finalColor = vec4(0.0);
    for(int i=0; i<textureCount; i++){
        // 纹理数组的采样需要三个分量的坐标：xy是UV，z是纹理索引
        finalColor += texture(textureArray, vec3(vUv, float(i)));
    }
    finalColor /= float(textureCount);
    gl_FragColor = finalColor;
}

Three.js JavaScript代码示例 #

// 确保使用WebGL2Renderer
const renderer = new THREE.WebGL2Renderer();

// 准备尺寸相同的纹理（必须相同！）
const texture1 = new THREE.TextureLoader().load('texture1.jpg');
const texture2 = new THREE.TextureLoader().load('texture2.jpg');
// 统一纹理参数，确保尺寸一致
texture1.repeat = texture2.repeat = new THREE.Vector2(1,1);
texture1.magFilter = texture2.magFilter = THREE.LinearFilter;

// 创建纹理数组
const textureArray = new THREE.TextureArray(
    texture1.image.width, 
    texture1.image.height, 
    2, // 数组长度，即纹理数量
    THREE.RGBAFormat,
    THREE.UnsignedByteType
);
// 将纹理数据写入数组
textureArray.image.data.set(texture1.image.data, 0);
textureArray.image.data.set(texture2.image.data, texture1.image.data.length);
textureArray.needsUpdate = true;

// 创建材质
const material = new THREE.ShaderMaterial({
    uniforms: {
        textureArray: { value: textureArray },
        textureCount: { value: 2 }
    },
    vertexShader: yourVertexShaderCode,
    fragmentShader: yourFragmentShaderCode,
    // WebGL2需要指定GLSL版本
    glslVersion: THREE.GLSL3
});

注意点 #

• 必须使用WebGL2Renderer，并且着色器要指定glslVersion: THREE.GLSL3。
• 所有纹理的宽高必须完全一致，否则无法创建纹理数组。
• 纹理数组的性能比多个单独纹理更好，适合大量纹理的场景。

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