WebGL使用TEXTURE_CUBE_MAP出现黑色纹理及相关报错求助

问题汇总 #

• 立方体贴图显示为黑色
• 运行时报错：GL_INVALID_OPERATION: Two textures of different types use the same sampler location.
• 片元着色器中添加vec3 normal = normalize(v_normal);导致编译失败
• 检测发现uCubeMapSampler uniform变量未正确获取到位置

解决建议 #

1. 修复uCubeMapSampler未定义问题 #

• 先检查片元着色器中uniform samplerCube uCubeMapSampler;的拼写是否完全正确，确保没有大小写或字符错误
• 修正uniform位置获取的逻辑：原代码判断条件写反了，正确写法如下：

const cubeMapLoc = gl.getUniformLocation(shaderProgram, 'uCubeMapSampler');
if (cubeMapLoc !== null) {
  shaderProgram.uCubeMapSampler = cubeMapLoc;
} else {
  console.error('uCubeMapSampler 未在着色器中定义！');
}

• 必须在着色器程序链接成功后再获取uniform位置，链接前调用getUniformLocation会返回null

2. 解决纹理类型冲突报错 #

报错本质是2D纹理和立方体贴图共用了同一个纹理单元，且对应的sampler类型不匹配：

• 原代码中当t=1时，既绑定了立方体贴图，又给uCubeMapSampler赋值为t=1，但uSampler1是sampler2D类型，导致同一个纹理单元(TEXTURE1)被两种不同类型的sampler使用
• 解决方法：
  • 为立方体贴图分配独立的纹理单元（比如用TEXTURE8，避开原有0-7的2D纹理单元）
  • 修改绘制代码中的立方体贴图处理逻辑：

    // 单独处理立方体贴图，不要和2D纹理共用循环中的t值
    const cubeMapUnit = 8;
    gl.activeTexture(gl['TEXTURE' + cubeMapUnit]);
    const tex = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_CUBE_MAP, tex);
    // ... 立方体贴图的canvas绘制、面数据上传代码 ...
    gl.uniform1i(shaderProgram.uCubeMapSampler, cubeMapUnit);
    

3. 修复着色器编译失败问题 #

添加normalize代码后编译失败，主要是精度声明冲突或语法错误：

• 片元着色器中同时声明了precision mediump float;和precision highp float;，这会导致语法冲突，只保留一个精度声明即可，比如保留precision mediump float;
• 确保顶点着色器和片元着色器中v_normal的声明完全一致（都是varying vec3 v_normal;），无拼写错误
• 修改后的片元着色器开头示例：

precision mediump float;
varying vec2 vTextureCoord;
varying vec3 vLightWeighting;
varying vec3 v_normal;

uniform sampler2D uSampler;
// ... 其他sampler2D声明 ...
uniform samplerCube uCubeMapSampler;

• 之后在main函数中即可正常使用：

void main(void) {
  vec3 normal = normalize(v_normal);
  // ... 其他逻辑 ...
  gl_FragColor = textureCube(uCubeMapSampler, normal);
}

4. 修复立方体贴图黑色问题 #

除上述问题外，还要检查立方体贴图的初始化完整性：

• 确保gen2DTextFace函数正确将内容绘制到canvas，可通过直接在页面上显示canvas验证绘制结果
• 补全立方体贴图的纹理参数设置，避免参数缺失导致采样异常：

gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_WRAP_R, gl.CLAMP_TO_EDGE);

• 确认片元着色器中传入立方体贴图的采样向量（比如normal）方向正确，避免因向量方向错误采样到空白区域

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