WebGL：斜面平滑 anti-aliased 圆使用 GL_POINT？

Question

抱歉标题这么长。

:

如果你仔细观察这张图片，你可以看到边缘周围的像素化。

我想用 anti-aliasing 平滑这个圆圈，结果我得到了这个：

如果您仔细观察这张图片，您会看到边缘周围有一个白色边框。

如果可能的话，我想删除这个白色边框，但此时我的着色器一团糟：

#extension GL_OES_standard_derivatives : enable

void main(void) {

    lowp vec2 cxy = 2.0 * gl_PointCoord - 1.0;
    lowp float radius = dot(cxy, cxy);

    const lowp vec3 ambient = vec3(0.5, 0.2, 0.1);
    const lowp vec3 lightDiffuse = vec3(1, 0.5, 0.2);

    lowp vec3 normal = vec3(cxy, sqrt(1.0 - radius));
    lowp vec3 lightDir = normalize(vec3(0, -1, -0.5));
    lowp float color = max(dot(normal, lightDir), 0.0);

    lowp float delta = fwidth(radius);
    lowp float alpha = 1.0 - smoothstep(1.0 - delta, 1.0 + delta, radius);

    gl_FragColor = vec4(ambient + lightDiffuse * color, alpha);
}

如果有人能想出如何去除白色边框，那就太棒了！

Answer 1

在 WebGL 中默认使用 pre-multiplied alpha. (see WebGL and Alpha)

初始化canvas时，我必须指定无alpha:

gl = document.getElementById("canvas").getContext("webgl", { alpha: false });

进一步查看问题的答案：

WebGL：斜面平滑 anti-aliased 圆使用 GL_POINT？

WebGL: Beveled smooth anti-aliased circles using GL_POINT?

webgl

fragment-shader