使用GLSL在平面上渲染平滑参考栅格
我正在尝试编写一个GLSL片段着色器,用于在平坦的地平面上渲染参考栅格。我正在使用JS创建一个WebGL应用程序 代码可以在这里看到: 结果还不是超级平滑,我想知道如何去除线条中的脊线,最终得到完美的抗锯齿线条使用GLSL在平面上渲染平滑参考栅格,glsl,webgl,shader,fragment-shader,babylonjs,Glsl,Webgl,Shader,Fragment Shader,Babylonjs,我正在尝试编写一个GLSL片段着色器,用于在平坦的地平面上渲染参考栅格。我正在使用JS创建一个WebGL应用程序 代码可以在这里看到: 结果还不是超级平滑,我想知道如何去除线条中的脊线,最终得到完美的抗锯齿线条 此片段着色器代码应按预期工作: #extension GL_OES_standard_derivatives : enable precision highp float; varying vec2 vUV; void main(void) { float divisio
此片段着色器代码应按预期工作:
#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”函数的输出,它在边缘中心周围的大值和小值之间跳跃,从而产生了锐角。您能检查我的解决方案是否有效吗?
x = min(x, 1.0 - x);