6

我正在尝试编写一个 GLSL 片段着色器，它在平坦的地平面上呈现参考网格。我正在使用 BabylonJS 创建一个 WebGL 应用程序。

代码可以在这里看到：

http://www.babylonjs.com/cyos/#IBHRN#2

#extension GL_OES_standard_derivatives : enable

precision highp float;

varying vec2 vUV;

void main(void) {
    float divisions = 10.0;
    float thickness = 0.01;
    float delta = 0.05 / 2.0;

    float x = fract(vUV.x / (1.0 / divisions));
    float xdelta = fwidth(x) * 2.5;
    x = smoothstep(x - xdelta, x + xdelta, thickness);

    float y = fract(vUV.y / (1.0 / divisions));
    float ydelta = fwidth(y) * 2.5;
    y = smoothstep(y - ydelta, y + ydelta, thickness);

    float c = clamp(x + y, 0.1, 1.0);

    gl_FragColor = vec4(c, c, c, 1.0);
}

结果还不是很平滑，我想知道如何去除线条中的脊，并最终得到完美的抗锯齿线条。

GLSL 片段着色器结果

4

1 回答 1

4

此片段着色器代码应按预期工作：

#extension GL_OES_standard_derivatives : enable

precision highp float;

varying vec2 vUV;

void main(void) {
    float divisions = 10.0;
    float thickness = 0.04;
    float delta = 0.05 / 2.0;

    float x = fract(vUV.x * divisions);
    x = min(x, 1.0 - x);

    float xdelta = fwidth(x);
    x = smoothstep(x - xdelta, x + xdelta, thickness);

    float y = fract(vUV.y * divisions);
    y = min(y, 1.0 - y);

    float ydelta = fwidth(y);
    y = smoothstep(y - ydelta, y + ydelta, thickness);

    float c =clamp(x + y, 0.0, 1.0);

    gl_FragColor = vec4(c, c, c, 1.0);
}

我添加了表达式

x = min(x, 1.0 - x);

使 x（以及 y）的值围绕边缘的中心对称。由于原始代码直接使用“fract”函数的输出，它在边缘中心周围的大小值之间跳跃，从而产生了尖角。

于 2015-07-10T16:12:25.757 回答