Expo环境下绑定多个WebGL纹理时出现黑屏问题咨询

修复方案 #

1. 跳过未使用的uniform赋值
   WebGL着色器编译器会自动剔除完全未使用的uniform变量，此时uniformLocations.get('segmentationTexture')会返回null，对空位置调用gl.uniform1i会触发GL错误，打断渲染流程。
   你可以先判断uniform位置是否存在再赋值：

const camTexLoc = uniformLocations.get('cameraTexture');
const segTexLoc = uniformLocations.get('segmentationTexture');
if (camTexLoc) gl.uniform1i(camTexLoc, TEXTURE_UNIT);
if (segTexLoc) gl.uniform1i(segTexLoc, TEXTURE_UNIT2);

2. 确保所有纹理都完成参数配置
   两个纹理都需要显式设置包裹模式和过滤模式，尤其是非2次幂尺寸的纹理，必须设置以下参数才能正常使用：

// 初始化每个纹理时都执行以下配置
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);

3. 修正纹理解绑逻辑
   你当前的解绑代码只会解绑最后激活的TEXTURE1单元的纹理，如果需要完整解绑，要对每个用到的纹理单元都执行解绑操作：

gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, null);
gl.activeTexture(gl.TEXTURE1);
gl.bindTexture(gl.TEXTURE_2D, null);

4. 添加GL错误排查
   可以在绑定纹理、绘制的关键节点加错误检查，快速定位问题：

const error = gl.getError();
if (error !== gl.NO_ERROR) {
  console.error('GL错误:', error);
}

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