Question

很抱歉这么长的头衔。

This is a followup on my old question, which led me to drawing a beveled circle looking like this：

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

我想用抗锯齿来平滑这个圆圈，我最终得到了这个：

如果仔细观察此图像，可以看到边缘周围有白色边框。

如果可能的话，我想删除此白色边框，但此时我的着色器很乱：

#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。（见WebGL and Alpha）

初始化画布时，我必须指定没有alpha：

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

进一步查看问题的答案：

WebGL：使用GL_POINT来平滑光滑的消除锯齿的圆圈？

1 个答案: