GLSL如何为平面设置透明度？仅显示平面上的混合色圆形

你不需要用if语句，直接把圆形的遮罩结果同时应用到颜色通道和alpha通道就能实现透明效果，着色器里用分支语句反而会影响性能。

核心修改点：

• 先单独计算圆形遮罩的结果，避免重复调用circle函数
• 将gl_FragColor的alpha分量设置为这个遮罩值，而非固定的1.0

修改后的片段着色器代码：

fragmentShader: `
  #define PI2 6.28318530718

  uniform vec3 u_color1;
  uniform vec3 u_color2;
  
  varying vec2 vUv;
  varying vec3 vPosition;
  
  float circle(vec2 pt, vec2 center, float radius, float edge_thickness){
    vec2 p = pt - center;
    float len = length(p);
    float result = 1.0-smoothstep(radius-edge_thickness, radius, len);
  
    return result;
  }
  
  void main (void)
  {
    // 计算圆形遮罩
    float circleMask = circle(vPosition.xy, vec2(0.0), 10.0, 0.002);
    // 混合颜色
    vec3 col = mix(u_color1, u_color2, vUv.y);
    // 颜色乘以遮罩，同时把遮罩作为alpha值
    gl_FragColor = vec4(col * circleMask, circleMask);
  }
  `,

额外注意：

• 如果你用的是Three.js这类框架，需要确保材质开启透明：material.transparent = true，否则alpha通道不会生效
• 若想要硬边缘的圆形，直接把edge_thickness设为0即可

内容的提问来源于stack exchange，提问作者Staszek