WebGL 1顶点着色器大数值浮点精度问题及解决方法咨询

你的问题核心是32位单精度浮点数的有效位数限制（约7-8位有效数字），千万级大数相减后低位精度丢失，导致绘制线条闪烁。针对WebGL 1的限制，可按以下方式修复：

• 在CPU端提前计算偏移量，避免着色器处理大数
  把千万级的vertexPos和transPos的差值在CPU端计算完成，只将小范围的偏移量传入着色器：
  CPU端代码示例：

  // 计算相对于transPos的偏移，替代原始vertexPos传入WebGL
  const vertexOffsets = vertexPositions.map(pos => [
    pos.x - transPos.x,
    pos.y - transPos.y,
    pos.z
  ]);
  

  修改后的顶点着色器：

  precision highp float;
  attribute vec3 vertexOffset; // 现在是小范围的偏移值
  uniform mat4 projectionMatrix;
  uniform vec2 mapWH;
  uniform vec2 scrWH;
  uniform bool isFlat;
  
  void main(void) {
      float normalizedX = vertexOffset.x / mapWH.x;
      float normalizedY = vertexOffset.y / mapWH.y;
      gl_Position = projectionMatrix * vec4(
          normalizedX * scrWH.x,
          (1.0 - normalizedY) * scrWH.y,
          0.0,
          1.0
      );
  }
  

  这样着色器仅处理小数值，完全避开大数相减带来的精度损失。

• 显式声明高精度浮点类型
  WebGL 1顶点着色器默认支持highp，但部分移动端设备可能默认精度较低，在着色器开头强制声明：

  precision highp float;
  precision highp int;
  

  确保顶点计算使用最高精度的单精度浮点数。

• 优化坐标计算顺序
  调整运算顺序以减少中间值的规模（数学结果等价，降低精度丢失风险）：

  float scaledX = vertexOffset.x * scrWH.x / mapWH.x;
  float scaledY = (1.0 - vertexOffset.y / mapWH.y) * scrWH.y;
  gl_Position = projectionMatrix * vec4(scaledX, scaledY, 0.0, 1.0);
  

内容的提问来源于stack exchange，提问作者Hasan Altınbaş