为什么我在使用 WebGL 渲染的圆圈中间出现这些工件？答案

【问题标题】：Why am I getting these artifacts in the middle of my circle rendered with WebGL?为什么我在使用 WebGL 渲染的圆圈中间出现这些工件？
【发布时间】：2022-09-19 00:27:11
【问题描述】：

我有以下片段着色器：

float curve(float theta) {
  float waveDepth = 0.70;
  float waveCount = 5.0;

  return waveDepth * (sin(theta * waveCount) + 1.0) * 0.5;
}

void main() { 
  vec2 cxy = 2.0 * v_pos - 1.0;
  float r = cxy.x * cxy.x + cxy.y * cxy.y;

  float theta = atan(cxy.y, cxy.x);
  r += curve(theta);

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

  outputColor = vec4(1, 1, 0.5, 1) * alpha;
}

它绘制了如下所示的内容：

这是一个波浪形的圆圈，看起来像一颗星星。我想摆脱圆圈中心的灰色像素伪影。

我注意到如果我将delta 设置为等于0（并避免使用fwidth），那么我不会得到这些工件，但是还从外部移除抗锯齿。

有什么方法可以保持抗锯齿但也可以去除波浪圆中心的这些伪影？

【问题讨论】：

@Rabbid76 啊，好电话。我刚刚意识到只有当你在它前面画一个灰色的半透明抗锯齿圆圈时才会发生这种情况。我想它以某种方式流血了？
好的，我知道了。不得不gl.enable(gl.BLEND);gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);

标签： javascript shader webgl fragment-shader antialiasing

【解决方案1】：

一种解决方法是确保当片段靠近圆心时 alpha` 为 1.0：

void main() { 
    
    vec2 cxy = 2.0 * v_pos - 1.0;
    float r0 = cxy.x * cxy.x + cxy.y * cxy.y;
    
    float theta = atan(cxy.y, cxy.x);
    float r = r0 + curve(theta);
  
    float delta = fwidth(r);
    float alpha = 1.0 - step(0.1, r0) * smoothstep(1.0 - delta, 1.0 + delta, r);
  
    outputColor = vec4(1.0, 0.0, 0.0, 1) * alpha;
}

【讨论】：