如何解决WebGL绘制世界坐标系2D网格时的线条闪烁问题

问题成因分析 #

你遇到的这个网格线时隐时现、高缩放级别下频繁闪烁的问题，核心是两个因素共同作用的结果：

1. 大数值浮点精度丢失：WebGL中的v_world是浮点类型的世界坐标，当坐标数值很大（比如你例子里的2000+）时，浮点数的精度会随数值增大而下降——简单说就是大数字的小数部分无法被精确存储，导致mod(v_world.x, gap.x)的结果可能不是严格的0，而是一个极小的偏差值（比如1e-6或者-1e-6）。
2. 严苛的整数相等判断：你把mod的结果强制转换成int后，用x == 0做判断。如果mod结果是一个极小的负数（比如-1e-6），转成整数后会变成-1，这时候判断不成立，线条就被discard丢弃了；当视角缩放时，这种偏差会在“符合渲染条件”和“被丢弃”之间来回跳，就出现了1像素与0像素切换的闪烁。

可行的解决办法 #

针对这些问题，我们可以从放松判断条件和优化坐标计算逻辑两个方向入手：

方法一：用浮点范围判断替代整数相等判断

把严格的x == 0 || y == 0改成判断数值是否在一个极小的容错范围内，容纳浮点精度带来的偏差：

in vec2 v_world;
vec3 fgColor = vec3(0.675);
vec2 gap = vec2(100);
void main() {
    vec2 modResult = mod(v_world, gap);
    // 同时判断接近0和接近gap的情况（mod结果接近gap等价于另一方向的0）
    bool isGridLine = (abs(modResult.x) < 0.5) || (abs(modResult.x - gap.x) < 0.5) ||
                      (abs(modResult.y) < 0.5) || (abs(modResult.y - gap.y) < 0.5);
    if (isGridLine) {
        outputColor = vec4(fgColor, 1);
    } else {
        discard;
    }
}

这里的0.5是容错阈值，你可以根据需求调整：想要更粗的网格线就调大阈值，想要更精细就调小（但别小于浮点精度极限）。

方法二：转换为网格局部坐标计算

既然大数值浮点精度差，我们可以先把世界坐标转换成当前网格块的局部坐标，让计算的数值范围始终保持在0到gap之间，从根源上缓解精度问题：

in vec2 v_world;
vec3 fgColor = vec3(0.675);
vec2 gap = vec2(100);
void main() {
    // 计算当前点所在的网格块，再转成局部坐标（范围0~gap）
    vec2 gridLocalPos = v_world - gap * floor(v_world / gap);
    bool isGridLine = (gridLocalPos.x < 0.5) || (gridLocalPos.x > gap.x - 0.5) ||
                      (gridLocalPos.y < 0.5) || (gridLocalPos.y > gap.y - 0.5);
    if (isGridLine) {
        outputColor = vec4(fgColor, 1);
    } else {
        discard;
    }
}

这个逻辑和mod类似，但避免了mod对大数值可能产生的异常偏差，局部坐标的浮点精度更稳定。

方法三：切换到屏幕空间绘制网格

如果你的网格不需要严格对齐世界坐标，而是要对齐屏幕像素，直接在屏幕空间计算网格线会彻底解决闪烁问题——因为屏幕坐标的数值范围小，浮点精度问题几乎可以忽略：

in vec2 v_screen; // 传入屏幕空间坐标（比如0到画布宽高）
vec3 fgColor = vec3(0.675);
vec2 gap = vec2(50); // 屏幕空间的网格间隔，比如每50像素一条线
void main() {
    vec2 modResult = mod(v_screen, gap);
    bool isGridLine = (abs(modResult.x) < 1.0) || (abs(modResult.y) < 1.0);
    if (isGridLine) {
        outputColor = vec4(fgColor, 1);
    } else {
        discard;
    }
}

这种方式需要你在顶点着色器或CPU端把世界坐标转换成屏幕坐标，好处是缩放时网格线始终对齐屏幕像素，不会出现边界跳变。

额外小提示 #

• 如果你想让网格线始终保持至少1像素的粗细，可以结合当前缩放级别下1像素对应的世界空间单位来动态调整阈值——比如先算出这个单位值，把阈值设为它的一半。
• 尽量避免在片元着色器里做不必要的整数转换，浮点运算的灵活性更高，也更容易处理精度偏差。

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