使用UBO在片段着色器中修改纹理颜色映射出现异常黑区

问题背景 #

将纹理传入片段着色器后，通过UBO传递颜色映射表修改纹理颜色，结果部分区域出现不应有的黑色，颜色映射不符合预期。

排查方向及解决建议 #

1. 检查UBO的std140布局对齐与偏移量 #

GLSL的std140布局对Uniform块内的变量有严格的内存对齐规则，数组类型的偏移和大小必须符合规范：

• float[256]类型的变量，每个元素占4字节，总大小为256*4=1024字节（刚好是16字节的倍数，符合std140对齐要求）
• 三个数组r、g、b的理论偏移应为0、1024、2048

排查步骤：
在JavaScript中打印获取到的偏移量：

console.log("UBO变量偏移量：", uboVariableOffsets);

如果实际偏移量与理论值不符，说明必须严格按照获取到的偏移值执行bufferSubData，否则会导致数据错位，着色器访问到错误的数组元素（比如0值，表现为黑色）。

2. 防止着色器中的数组索引越界 #

纹理采样得到的color0分量可能因纹理参数错误超出0.0~1.0范围，导致color0.x*255.0计算结果超出0~255，进而访问数组越界（得到未定义值，通常为0）。

修复方案：
修改片段着色器代码，对索引进行范围限制：

void main() {
    vec4 color0 = texture(uSampler0, vTextureCoord);
    
    int x = clamp(int(round(color0.x * 255.0)), 0, 255);
    float px = r[x]/255.0;
    
    int y = clamp(int(round(color0.y * 255.0)), 0, 255);
    float py = g[y]/255.0;
    
    int z = clamp(int(round(color0.z * 255.0)), 0, 255);
    float pz = b[z]/255.0;

    fragColor = vec4(px, py, pz, 1.0);
}

3. 验证颜色映射表的数据正确性 #

检查JavaScript中ColorMap.MYCOLORMAP的数组数据：

• 确认数组长度为256：console.log(ColorMap.MYCOLORMAP.r.length)
• 打印关键位置的数值（比如首尾元素），确认没有被错误设置为0或超出预期范围

4. 确认UBO数据写入是否正确 #

可以通过两种方式验证：

• 着色器调试：临时将索引固定为某个已知值（比如0），观察整个画面颜色是否符合该索引对应的映射值：

  float px = r[0]/255.0;
  float py = g[0]/255.0;
  float pz = b[0]/255.0;
  

  如果画面颜色符合预期，说明UBO数据传递正常；如果仍为黑色，说明数据未正确写入UBO。
• 读取缓冲区验证：使用gl.getBufferSubData读取UBO缓冲区的内容，与ColorMap中的数据对比，确认写入是否正确：

  global.gl.bindBuffer(global.gl.UNIFORM_BUFFER, this.uboBuffer);
  const testData = new Float32Array(256);
  global.gl.getBufferSubData(global.gl.UNIFORM_BUFFER, 0, testData);
  console.log("UBO中r数组的前10个值：", testData.slice(0,10));
  global.gl.bindBuffer(global.gl.UNIFORM_BUFFER, null);
  

关于精度的疑问 #

不需要将Float32Array转换为半精度浮点数，GLSL的float类型对应32位单精度浮点数，与JavaScript的Float32Array完全匹配，精度不是问题。

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