网格线宽度不均匀

Question

我正在使用以下片段着色器代码绘制网格：

precision highp float;

uniform vec2 CANVAS_SIZE;
uniform float GRID_WIDTH;
uniform vec4 GRID_COLOR;

float isGridLine(float ordinate, float target, float halfThickness) {
    return step(ordinate, target + halfThickness) * step(target - halfThickness, ordinate);
}

void main() {
    vec2 uv = (gl_FragCoord.xy / CANVAS_SIZE);
    float halfGridWidth = GRID_WIDTH / 2.0;
    float gridLine = 0.0;
    for (float i = 0.0; i < 1.0; i += 0.05) {
        gridLine += isGridLine(uv.y, i, halfGridWidth);
        gridLine += isGridLine(uv.x, i, halfGridWidth);
    }
    gl_FragColor = mix(vec4(uv.rg, 0.0, 1.0), GRID_COLOR, step(1.0, gridLine));
}

顶点着色器使用 JavaScript 代码提供的顶点位置简单地创建一个静态网格。它生成一个填充视口的平面。

precision highp float;
attribute vec2 _vertexPosition;

void main() {
    gl_Position = vec4(_vertexPosition, 0.0, 1.0);
}

但是，我遇到了一个问题，即每第 5 条网格线显得稍粗。奇怪的是，片段着色器不包含第 5 行的任何特定逻辑。

以下是我到目前为止的观察：

我考虑过这个问题可能与float精度有关，但无论使用低精度还是高精度，它都存在。 我还用不同的屏幕分辨率测试了着色器，但差异仍然一致。 谁能帮我理解为什么这些线有不同的宽度？

图片：