我正在尝试编写一个 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);
}
结果还不是非常平滑,我想知道如何消除线条中的脊线,并最终得到完美的抗锯齿线条。
最佳答案
此片段着色器代码应按预期工作:
#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”函数的输出,因此它在边缘中心周围的大值和小值之间跳转,从而创建了尖角。
关于glsl - 使用GLSL在平面上渲染平滑的引用网格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31301875/